From 8c69f03ccb7a0ad48456c7f08936342303bbc777 Mon Sep 17 00:00:00 2001
From: Sebastien Ros <none@none>
Date: Tue, 5 Apr 2011 13:51:52 -0700
Subject: [PATCH 1/5] Refactoring Shape Tracing to render less DOM elements

--HG--
branch : 1.x
---
 .../Orchard.DesignerTools.csproj              |   6 +
 .../Scripts/jquery.tmpl.js                    | 484 ++++++++++++++++++
 .../Scripts/jquery.tmpl.min.js                |  10 +
 .../orchard-designertools-shapetracing.js     | 226 +++++---
 .../Services/ShapeTracingFactory.cs           |   3 +-
 .../Services/TemplatesFilter.cs               |  30 ++
 .../orchard-designertools-shapetracing.css    |  32 +-
 .../Views/ShapeTracingMeta.cshtml             | 122 ++---
 .../Views/ShapeTracingTemplates.cshtml        |  78 +++
 .../Views/ShapeTracingWrapper.cshtml          |   2 +
 10 files changed, 807 insertions(+), 186 deletions(-)
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.js
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.min.js
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Services/TemplatesFilter.cs
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj b/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
index 20552ddb4..b448d7a46 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
@@ -69,6 +69,8 @@
     <Content Include="Scripts\CodeMirror\javascript.js" />
     <Content Include="Scripts\CodeMirror\razor.js" />
     <Content Include="Scripts\jquery.scrollTo-min.js" />
+    <Content Include="Scripts\jquery.tmpl.js" />
+    <Content Include="Scripts\jquery.tmpl.min.js" />
     <Content Include="Styles\CodeMirror\codemirror.css" />
     <Content Include="Styles\CodeMirror\razor.css" />
     <Content Include="Styles\CodeMirror\css.css" />
@@ -101,6 +103,7 @@
   <ItemGroup>
     <Compile Include="Controllers\AlternateController.cs" />
     <Compile Include="Services\ObjectDumper.cs" />
+    <Compile Include="Services\TemplatesFilter.cs" />
     <Compile Include="Services\ShapeTracingFactory.cs" />
     <Compile Include="Services\UrlAlternatesFactory.cs" />
   </ItemGroup>
@@ -113,6 +116,9 @@
   <ItemGroup>
     <Content Include="Views\ShapeTracingMeta.cshtml" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\ShapeTracingTemplates.cshtml" />
+  </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.js
new file mode 100644
index 000000000..10b62a00c
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.js
@@ -0,0 +1,484 @@
+/*!
+ * jQuery Templates Plugin 1.0.0pre
+ * http://github.com/jquery/jquery-tmpl
+ * Requires jQuery 1.4.2
+ *
+ * Copyright Software Freedom Conservancy, Inc.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+(function( jQuery, undefined ){
+	var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+		newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
+
+	function newTmplItem( options, parentItem, fn, data ) {
+		// Returns a template item data structure for a new rendered instance of a template (a 'template item').
+		// The content field is a hierarchical array of strings and nested items (to be
+		// removed and replaced by nodes field of dom elements, once inserted in DOM).
+		var newItem = {
+			data: data || (data === 0 || data === false) ? data : (parentItem ? parentItem.data : {}),
+			_wrap: parentItem ? parentItem._wrap : null,
+			tmpl: null,
+			parent: parentItem || null,
+			nodes: [],
+			calls: tiCalls,
+			nest: tiNest,
+			wrap: tiWrap,
+			html: tiHtml,
+			update: tiUpdate
+		};
+		if ( options ) {
+			jQuery.extend( newItem, options, { nodes: [], parent: parentItem });
+		}
+		if ( fn ) {
+			// Build the hierarchical content to be used during insertion into DOM
+			newItem.tmpl = fn;
+			newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
+			newItem.key = ++itemKey;
+			// Keep track of new template item, until it is stored as jQuery Data on DOM element
+			(stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
+		}
+		return newItem;
+	}
+
+	// Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
+	jQuery.each({
+		appendTo: "append",
+		prependTo: "prepend",
+		insertBefore: "before",
+		insertAfter: "after",
+		replaceAll: "replaceWith"
+	}, function( name, original ) {
+		jQuery.fn[ name ] = function( selector ) {
+			var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
+				parent = this.length === 1 && this[0].parentNode;
+
+			appendToTmplItems = newTmplItems || {};
+			if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+				insert[ original ]( this[0] );
+				ret = this;
+			} else {
+				for ( i = 0, l = insert.length; i < l; i++ ) {
+					cloneIndex = i;
+					elems = (i > 0 ? this.clone(true) : this).get();
+					jQuery( insert[i] )[ original ]( elems );
+					ret = ret.concat( elems );
+				}
+				cloneIndex = 0;
+				ret = this.pushStack( ret, name, insert.selector );
+			}
+			tmplItems = appendToTmplItems;
+			appendToTmplItems = null;
+			jQuery.tmpl.complete( tmplItems );
+			return ret;
+		};
+	});
+
+	jQuery.fn.extend({
+		// Use first wrapped element as template markup.
+		// Return wrapped set of template items, obtained by rendering template against data.
+		tmpl: function( data, options, parentItem ) {
+			return jQuery.tmpl( this[0], data, options, parentItem );
+		},
+
+		// Find which rendered template item the first wrapped DOM element belongs to
+		tmplItem: function() {
+			return jQuery.tmplItem( this[0] );
+		},
+
+		// Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+		template: function( name ) {
+			return jQuery.template( name, this[0] );
+		},
+
+		domManip: function( args, table, callback, options ) {
+			if ( args[0] && jQuery.isArray( args[0] )) {
+				var dmArgs = jQuery.makeArray( arguments ), elems = args[0], elemsLength = elems.length, i = 0, tmplItem;
+				while ( i < elemsLength && !(tmplItem = jQuery.data( elems[i++], "tmplItem" ))) {}
+				if ( tmplItem && cloneIndex ) {
+					dmArgs[2] = function( fragClone ) {
+						// Handler called by oldManip when rendered template has been inserted into DOM.
+						jQuery.tmpl.afterManip( this, fragClone, callback );
+					};
+				}
+				oldManip.apply( this, dmArgs );
+			} else {
+				oldManip.apply( this, arguments );
+			}
+			cloneIndex = 0;
+			if ( !appendToTmplItems ) {
+				jQuery.tmpl.complete( newTmplItems );
+			}
+			return this;
+		}
+	});
+
+	jQuery.extend({
+		// Return wrapped set of template items, obtained by rendering template against data.
+		tmpl: function( tmpl, data, options, parentItem ) {
+			var ret, topLevel = !parentItem;
+			if ( topLevel ) {
+				// This is a top-level tmpl call (not from a nested template using {{tmpl}})
+				parentItem = topTmplItem;
+				tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
+				wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
+			} else if ( !tmpl ) {
+				// The template item is already associated with DOM - this is a refresh.
+				// Re-evaluate rendered template for the parentItem
+				tmpl = parentItem.tmpl;
+				newTmplItems[parentItem.key] = parentItem;
+				parentItem.nodes = [];
+				if ( parentItem.wrapped ) {
+					updateWrapped( parentItem, parentItem.wrapped );
+				}
+				// Rebuild, without creating a new template item
+				return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
+			}
+			if ( !tmpl ) {
+				return []; // Could throw...
+			}
+			if ( typeof data === "function" ) {
+				data = data.call( parentItem || {} );
+			}
+			if ( options && options.wrapped ) {
+				updateWrapped( options, options.wrapped );
+			}
+			ret = jQuery.isArray( data ) ?
+				jQuery.map( data, function( dataItem ) {
+					return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
+				}) :
+				[ newTmplItem( options, parentItem, tmpl, data ) ];
+			return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
+		},
+
+		// Return rendered template item for an element.
+		tmplItem: function( elem ) {
+			var tmplItem;
+			if ( elem instanceof jQuery ) {
+				elem = elem[0];
+			}
+			while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
+			return tmplItem || topTmplItem;
+		},
+
+		// Set:
+		// Use $.template( name, tmpl ) to cache a named template,
+		// where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+		// Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+		// Get:
+		// Use $.template( name ) to access a cached template.
+		// Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+		// will return the compiled template, without adding a name reference.
+		// If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
+		// to $.template( null, templateString )
+		template: function( name, tmpl ) {
+			if (tmpl) {
+				// Compile template and associate with name
+				if ( typeof tmpl === "string" ) {
+					// This is an HTML string being passed directly in.
+					tmpl = buildTmplFn( tmpl )
+				} else if ( tmpl instanceof jQuery ) {
+					tmpl = tmpl[0] || {};
+				}
+				if ( tmpl.nodeType ) {
+					// If this is a template block, use cached copy, or generate tmpl function and cache.
+					tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
+					// Issue: In IE, if the container element is not a script block, the innerHTML will remove quotes from attribute values whenever the value does not include white space.
+					// This means that foo="${x}" will not work if the value of x includes white space: foo="${x}" -> foo=value of x.
+					// To correct this, include space in tag: foo="${ x }" -> foo="value of x"
+				}
+				return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
+			}
+			// Return named compiled template
+			return name ? (typeof name !== "string" ? jQuery.template( null, name ):
+				(jQuery.template[name] ||
+					// If not in map, and not containing at least on HTML tag, treat as a selector.
+					// (If integrated with core, use quickExpr.exec)
+					jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
+		},
+
+		encode: function( text ) {
+			// Do HTML encoding replacing < > & and ' and " by corresponding entities.
+			return ("" + text).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;");
+		}
+	});
+
+	jQuery.extend( jQuery.tmpl, {
+		tag: {
+			"tmpl": {
+				_default: { $2: "null" },
+				open: "if($notnull_1){__=__.concat($item.nest($1,$2));}"
+				// tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
+				// This means that {{tmpl foo}} treats foo as a template (which IS a function).
+				// Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
+			},
+			"wrap": {
+				_default: { $2: "null" },
+				open: "$item.calls(__,$1,$2);__=[];",
+				close: "call=$item.calls();__=call._.concat($item.wrap(call,__));"
+			},
+			"each": {
+				_default: { $2: "$index, $value" },
+				open: "if($notnull_1){$.each($1a,function($2){with(this){",
+				close: "}});}"
+			},
+			"if": {
+				open: "if(($notnull_1) && $1a){",
+				close: "}"
+			},
+			"else": {
+				_default: { $1: "true" },
+				open: "}else if(($notnull_1) && $1a){"
+			},
+			"html": {
+				// Unecoded expression evaluation.
+				open: "if($notnull_1){__.push($1a);}"
+			},
+			"=": {
+				// Encoded expression evaluation. Abbreviated form is ${}.
+				_default: { $1: "$data" },
+				open: "if($notnull_1){__.push($.encode($1a));}"
+			},
+			"!": {
+				// Comment tag. Skipped by parser
+				open: ""
+			}
+		},
+
+		// This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
+		complete: function( items ) {
+			newTmplItems = {};
+		},
+
+		// Call this from code which overrides domManip, or equivalent
+		// Manage cloning/storing template items etc.
+		afterManip: function afterManip( elem, fragClone, callback ) {
+			// Provides cloned fragment ready for fixup prior to and after insertion into DOM
+			var content = fragClone.nodeType === 11 ?
+				jQuery.makeArray(fragClone.childNodes) :
+				fragClone.nodeType === 1 ? [fragClone] : [];
+
+			// Return fragment to original caller (e.g. append) for DOM insertion
+			callback.call( elem, fragClone );
+
+			// Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
+			storeTmplItems( content );
+			cloneIndex++;
+		}
+	});
+
+	//========================== Private helper functions, used by code above ==========================
+
+	function build( tmplItem, nested, content ) {
+		// Convert hierarchical content into flat string array
+		// and finally return array of fragments ready for DOM insertion
+		var frag, ret = content ? jQuery.map( content, function( item ) {
+			return (typeof item === "string") ?
+				// Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
+				(tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
+				// This is a child template item. Build nested template.
+				build( item, tmplItem, item._ctnt );
+		}) :
+		// If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
+		tmplItem;
+		if ( nested ) {
+			return ret;
+		}
+
+		// top-level template
+		ret = ret.join("");
+
+		// Support templates which have initial or final text nodes, or consist only of text
+		// Also support HTML entities within the HTML markup.
+		ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
+			frag = jQuery( middle ).get();
+
+			storeTmplItems( frag );
+			if ( before ) {
+				frag = unencode( before ).concat(frag);
+			}
+			if ( after ) {
+				frag = frag.concat(unencode( after ));
+			}
+		});
+		return frag ? frag : unencode( ret );
+	}
+
+	function unencode( text ) {
+		// Use createElement, since createTextNode will not render HTML entities correctly
+		var el = document.createElement( "div" );
+		el.innerHTML = text;
+		return jQuery.makeArray(el.childNodes);
+	}
+
+	// Generate a reusable function that will serve to render a template against data
+	function buildTmplFn( markup ) {
+		return new Function("jQuery","$item",
+			// Use the variable __ to hold a string array while building the compiled template. (See https://github.com/jquery/jquery-tmpl/issues#issue/10).
+			"var $=jQuery,call,__=[],$data=$item.data;" +
+
+			// Introduce the data as local variables using with(){}
+			"with($data){__.push('" +
+
+			// Convert the template into pure JavaScript
+			jQuery.trim(markup)
+				.replace( /([\\'])/g, "\\$1" )
+				.replace( /[\r\t\n]/g, " " )
+				.replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
+				.replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,
+				function( all, slash, type, fnargs, target, parens, args ) {
+					var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
+					if ( !tag ) {
+						throw "Unknown template tag: " + type;
+					}
+					def = tag._default || [];
+					if ( parens && !/\w$/.test(target)) {
+						target += parens;
+						parens = "";
+					}
+					if ( target ) {
+						target = unescape( target );
+						args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
+						// Support for target being things like a.toLowerCase();
+						// In that case don't call with template item as 'this' pointer. Just evaluate...
+						expr = parens ? (target.indexOf(".") > -1 ? target + unescape( parens ) : ("(" + target + ").call($item" + args)) : target;
+						exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
+					} else {
+						exprAutoFnDetect = expr = def.$1 || "null";
+					}
+					fnargs = unescape( fnargs );
+					return "');" +
+						tag[ slash ? "close" : "open" ]
+							.split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
+							.split( "$1a" ).join( exprAutoFnDetect )
+							.split( "$1" ).join( expr )
+							.split( "$2" ).join( fnargs || def.$2 || "" ) +
+						"__.push('";
+				}) +
+			"');}return __;"
+		);
+	}
+	function updateWrapped( options, wrapped ) {
+		// Build the wrapped content.
+		options._wrap = build( options, true,
+			// Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
+			jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
+		).join("");
+	}
+
+	function unescape( args ) {
+		return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
+	}
+	function outerHtml( elem ) {
+		var div = document.createElement("div");
+		div.appendChild( elem.cloneNode(true) );
+		return div.innerHTML;
+	}
+
+	// Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
+	function storeTmplItems( content ) {
+		var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
+		for ( i = 0, l = content.length; i < l; i++ ) {
+			if ( (elem = content[i]).nodeType !== 1 ) {
+				continue;
+			}
+			elems = elem.getElementsByTagName("*");
+			for ( m = elems.length - 1; m >= 0; m-- ) {
+				processItemKey( elems[m] );
+			}
+			processItemKey( elem );
+		}
+		function processItemKey( el ) {
+			var pntKey, pntNode = el, pntItem, tmplItem, key;
+			// Ensure that each rendered template inserted into the DOM has its own template item,
+			if ( (key = el.getAttribute( tmplItmAtt ))) {
+				while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
+				if ( pntKey !== key ) {
+					// The next ancestor with a _tmplitem expando is on a different key than this one.
+					// So this is a top-level element within this template item
+					// Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment.
+					pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0;
+					if ( !(tmplItem = newTmplItems[key]) ) {
+						// The item is for wrapped content, and was copied from the temporary parent wrappedItem.
+						tmplItem = wrappedItems[key];
+						tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode] );
+						tmplItem.key = ++itemKey;
+						newTmplItems[itemKey] = tmplItem;
+					}
+					if ( cloneIndex ) {
+						cloneTmplItem( key );
+					}
+				}
+				el.removeAttribute( tmplItmAtt );
+			} else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
+				// This was a rendered element, cloned during append or appendTo etc.
+				// TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
+				cloneTmplItem( tmplItem.key );
+				newTmplItems[tmplItem.key] = tmplItem;
+				pntNode = jQuery.data( el.parentNode, "tmplItem" );
+				pntNode = pntNode ? pntNode.key : 0;
+			}
+			if ( tmplItem ) {
+				pntItem = tmplItem;
+				// Find the template item of the parent element.
+				// (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
+				while ( pntItem && pntItem.key != pntNode ) {
+					// Add this element as a top-level node for this rendered template item, as well as for any
+					// ancestor items between this item and the item of its parent element
+					pntItem.nodes.push( el );
+					pntItem = pntItem.parent;
+				}
+				// Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
+				delete tmplItem._ctnt;
+				delete tmplItem._wrap;
+				// Store template item as jQuery data on the element
+				jQuery.data( el, "tmplItem", tmplItem );
+			}
+			function cloneTmplItem( key ) {
+				key = key + keySuffix;
+				tmplItem = newClonedItems[key] =
+					(newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent ));
+			}
+		}
+	}
+
+	//---- Helper functions for template item ----
+
+	function tiCalls( content, tmpl, data, options ) {
+		if ( !content ) {
+			return stack.pop();
+		}
+		stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
+	}
+
+	function tiNest( tmpl, data, options ) {
+		// nested template, using {{tmpl}} tag
+		return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
+	}
+
+	function tiWrap( call, wrapped ) {
+		// nested template, using {{wrap}} tag
+		var options = call.options || {};
+		options.wrapped = wrapped;
+		// Apply the template, which may incorporate wrapped content,
+		return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
+	}
+
+	function tiHtml( filter, textOnly ) {
+		var wrapped = this._wrap;
+		return jQuery.map(
+			jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
+			function(e) {
+				return textOnly ?
+					e.innerText || e.textContent :
+					e.outerHTML || outerHtml(e);
+			});
+	}
+
+	function tiUpdate() {
+		var coll = this.nodes;
+		jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
+		jQuery( coll ).remove();
+	}
+})( jQuery );
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.min.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.min.js
new file mode 100644
index 000000000..7438b2ca5
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/jquery.tmpl.min.js
@@ -0,0 +1,10 @@
+/*
+ * jQuery Templates Plugin 1.0.0pre
+ * http://github.com/jquery/jquery-tmpl
+ * Requires jQuery 1.4.2
+ *
+ * Copyright Software Freedom Conservancy, Inc.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+(function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},i=0,c=0,l=[];function g(g,d,h,e){var c={data:e||(e===0||e===false)?e:d?d.data:{},_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};g&&a.extend(c,g,{nodes:[],parent:d});if(h){c.tmpl=h;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++i;(l.length?f:b)[i]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(f,d){a.fn[f]=function(n){var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;e=b||{};if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){i[d](this[0]);g=this}else{for(h=0,m=i.length;h<m;h++){c=h;k=(h>0?this.clone(true):this).get();a(i[h])[d](k);g=g.concat(k)}c=0;g=this.pushStack(g,f,i.selector)}l=e;e=null;a.tmpl.complete(l);return g}});a.fn.extend({tmpl:function(d,c,b){return a.tmpl(this[0],d,c,b)},tmplItem:function(){return a.tmplItem(this[0])},template:function(b){return a.template(b,this[0])},domManip:function(d,m,k){if(d[0]&&a.isArray(d[0])){var g=a.makeArray(arguments),h=d[0],j=h.length,i=0,f;while(i<j&&!(f=a.data(h[i++],"tmplItem")));if(f&&c)g[2]=function(b){a.tmpl.afterManip(this,b,k)};r.apply(this,g)}else r.apply(this,arguments);c=0;!e&&a.tmpl.complete(b);return this}});a.extend({tmpl:function(d,h,e,c){var i,k=!c;if(k){c=p;d=a.template[d]||a.template(null,d);f={}}else if(!d){d=c.tmpl;b[c.key]=c;c.nodes=[];c.wrapped&&n(c,c.wrapped);return a(j(c,null,c.tmpl(a,c)))}if(!d)return[];if(typeof h==="function")h=h.call(c||{});e&&e.wrapped&&n(e,e.wrapped);i=a.isArray(h)?a.map(h,function(a){return a?g(e,c,d,a):null}):[g(e,c,d,h)];return k?a(j(c,null,i)):i},tmplItem:function(b){var c;if(b instanceof a)b=b[0];while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));return c||p},template:function(c,b){if(b){if(typeof b==="string")b=o(b);else if(b instanceof a)b=b[0]||{};if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));return typeof c==="string"?(a.template[c]=b):b}return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null},encode:function(a){return(""+a).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;")}});a.extend(a.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){__=__.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(__,$1,$2);__=[];",close:"call=$item.calls();__=call._.concat($item.wrap(call,__));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){__.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){__.push($.encode($1a));}"},"!":{open:""}},complete:function(){b={}},afterManip:function(f,b,d){var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];d.call(f,b);m(e);c++}});function j(e,g,f){var b,c=f?a.map(f,function(a){return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:j(a,e,a._ctnt)}):e;if(g)return c;c=c.join("");c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){b=a(e).get();m(b);if(c)b=k(c).concat(b);if(d)b=b.concat(k(d))});return b?b:k(c)}function k(c){var b=document.createElement("div");b.innerHTML=c;return a.makeArray(b.childNodes)}function o(b){return new Function("jQuery","$item","var $=jQuery,call,__=[],$data=$item.data;with($data){__.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(m,l,k,g,b,c,d){var j=a.tmpl.tag[k],i,e,f;if(!j)throw"Unknown template tag: "+k;i=j._default||[];if(c&&!/\w$/.test(b)){b+=c;c=""}if(b){b=h(b);d=d?","+h(d)+")":c?")":"";e=c?b.indexOf(".")>-1?b+h(c):"("+b+").call($item"+d:b;f=c?e:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}else f=e=i.$1||"null";g=h(g);return"');"+j[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(f).split("$1").join(e).split("$2").join(g||i.$2||"")+"__.push('"})+"');}return __;")}function n(c,b){c._wrap=j(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}function h(a){return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function s(b){var a=document.createElement("div");a.appendChild(b.cloneNode(true));return a.innerHTML}function m(o){var n="_"+c,k,j,l={},e,p,h;for(e=0,p=o.length;e<p;e++){if((k=o[e]).nodeType!==1)continue;j=k.getElementsByTagName("*");for(h=j.length-1;h>=0;h--)m(j[h]);m(k)}function m(j){var p,h=j,k,e,m;if(m=j.getAttribute(d)){while(h.parentNode&&(h=h.parentNode).nodeType===1&&!(p=h.getAttribute(d)));if(p!==m){h=h.parentNode?h.nodeType===11?0:h.getAttribute(d)||0:0;if(!(e=b[m])){e=f[m];e=g(e,b[h]||f[h]);e.key=++i;b[i]=e}c&&o(m)}j.removeAttribute(d)}else if(c&&(e=a.data(j,"tmplItem"))){o(e.key);b[e.key]=e;h=a.data(j.parentNode,"tmplItem");h=h?h.key:0}if(e){k=e;while(k&&k.key!=h){k.nodes.push(j);k=k.parent}delete e._ctnt;delete e._wrap;a.data(j,"tmplItem",e)}function o(a){a=a+n;e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent)}}}function u(a,d,c,b){if(!a)return l.pop();l.push({_:a,tmpl:d,item:this,data:c,options:b})}function w(d,c,b){return a.tmpl(a.template(d),c,b,this)}function x(b,d){var c=b.options||{};c.wrapped=d;return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}function v(d,c){var b=this._wrap;return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){return c?a.innerText||a.textContent:a.outerHTML||s(a)})}function t(){var b=this.nodes;a.tmpl(null,null,null,this).insertBefore(b[0]);a(b).remove()}})(jQuery);
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
index e5bee82df..1badc5fc0 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
@@ -1,22 +1,16 @@
-jQuery(function ($) {
+ // declare global metadata host
+if (!window.shapeTracingMetadataHost) {
+    window.shapeTracingMetadataHost = {};
+    window.shapeTracingMetadataHost.placement = {
+        'n/a': 'n/a'
+    };
+}
+
+jQuery(function ($) {
+
     // default shape window height when first opened
     var defaultHeight = 200;
 
-    // append the shape tracing window container at the end of the document
-    $('<div id="shape-tracing-container"> ' +
-            '<div id="shape-tracing-resize-handle" ></div>' +
-            '<div id="shape-tracing-toolbar">' +
-                '<div id="shape-tracing-toolbar-switch"></div>' +
-            '</div>' +
-            '<div id="shape-tracing-window">' +
-                '<div id="shape-tracing-window-tree"></div>' +
-                '<div id="shape-tracing-window-content"></div>' +
-            '</div>' +
-        '</div>' +
-        '<div id="shape-tracing-container-ghost"></div>' +
-        '<div id="shape-tracing-overlay"></div>'
-    ).appendTo('body');
-
     // preload main objects
     var shapeTracingContainer = $('#shape-tracing-container');
     var shapeTracingResizeHandle = $('#shape-tracing-resize-handle');
@@ -27,13 +21,23 @@
     var shapeTracingWindowContent = $('#shape-tracing-window-content');
     var shapeTracingGhost = $('#shape-tracing-container-ghost');
     var shapeTracingOverlay = $('#shape-tracing-overlay');
-
+    var shapeTracingTabs = $('#shape-tracing-tabs');
+    var shapeTracingTabsShape = $('#shape-tracing-tabs-shape');
+    var shapeTracingTabsModel = $('#shape-tracing-tabs-model');
+    var shapeTracingTabsPlacement = $('#shape-tracing-tabs-placement');
+    var shapeTracingTabsTemplate = $('#shape-tracing-tabs-template');
+    var shapeTracingTabsHtml = $('#shape-tracing-tabs-html');
+    var shapeTracingBreadcrumb = $('#shape-tracing-breadcrumb');
+    var shapeTracingMetaContent = $('#shape-tracing-meta-content');
     var shapeTracingEnabled = false;
 
     // store the size of the container when it is closed (default in css)
     var initialContainerSize = shapeTracingContainer.height();
     var previousSize = 0;
 
+    // represents the arrow to add to any collpasible container
+    var glyph = $('<span class="expando-glyph-container closed"><span class="expando-glyph"></span>&#8203;</span>');
+
     // ensure the ghost has always the same size as the container
     // and the container is always positionned correctly
     var syncResize = function () {
@@ -65,12 +69,11 @@
         var toolbarHeight = shapeTracingToolbar.outerHeight();
         var resizeHandleHeight = shapeTracingResizeHandle.outerHeight();
 
-        var tabsHeight = $('.shape-tracing-tabs:visible').outerHeight();
-        var breadcrumbHeight = $('.shape-tracing-breadcrumb:visible').outerHeight();
+        var tabsHeight = shapeTracingTabs.outerHeight();
+        var breadcrumbHeight = shapeTracingBreadcrumb.outerHeight();
         if (tabsHeight) {
-            var metaContent = $('.shape-tracing-meta-content:visible');
-            padding = parseInt(metaContent.css('padding-bottom') + metaContent.css('padding-top'));
-            metaContent.height(containerHeight - toolbarHeight - resizeHandleHeight - tabsHeight - breadcrumbHeight - padding);
+            padding = parseInt(shapeTracingMetaContent.css('padding-bottom') + shapeTracingMetaContent.css('padding-top'));
+            shapeTracingMetaContent.height(containerHeight - toolbarHeight - resizeHandleHeight - tabsHeight - breadcrumbHeight - padding);
         }
     };
 
@@ -188,7 +191,6 @@
     shapeTracingWindowTree.append(shapes);
 
     // add the expand/collapse logic to the shapes tree
-    var glyph = $('<span class="expando-glyph-container closed"><span class="expando-glyph"></span>&#8203;</span>');
     shapeTracingWindowTree.find('li:has(ul:has(li))').prepend(glyph);
 
     // collapse all sub uls
@@ -244,30 +246,29 @@
         }
     );
 
-    // selects a specific shape in the tree, highlight its elements, and display the information
+    var currentShape;
+
+    // selects a specific shape in the tree, highlight its elements, and display the current tab
     var selectShape = function (shapeId) {
+        // remove current tab content
+        shapeTracingMetaContent.children().remove();
+
+        // remove selection ?
         if (!shapeId) {
-            // remove selection ?
+            currentShape = null;
             shapeTracingOverlay.hide();
             $('.shape-tracing-selected').removeClass('shape-tracing-selected');
             shapeTracingWindowTree.find('.shape-tracing-selected').removeClass('shape-tracing-selected');
-            $('[shape-id-meta]:visible').toggle(false);
             return;
         }
 
+        currentShape = shapeId;
+
         $('.shape-tracing-selected').removeClass('shape-tracing-selected');
         $('li[tree-shape-id="' + shapeId + '"] > div').add('[shape-id="' + shapeId + '"]').addClass('shape-tracing-selected');
         shapeTracingOverlay.hide();
 
-        // show the properties for the selected shape
-        $('[shape-id-meta]:visible').toggle(false);
-        var target = $('[shape-id-meta="' + shapeId + '"]"');
-        target.toggle(true);
-
-        // enable codemirror for the current tab
-        enableCodeMirror(target);
-
-        syncResizeMeta();
+        defaultTab();
     }
 
     // select shapes when clicked
@@ -283,8 +284,6 @@
             shapeTracingWindowTree.scrollTo(this, 0, { margin: true });
         });
 
-        refreshBreadcrumb();
-
         return false;
     });
 
@@ -321,55 +320,111 @@
     // collapse all sub uls
     shapeTracingWindowContent.find('ul ul').toggle(false);
 
-    // tabs events
-    shapeTracingWindowContent.find('.shape-tracing-tabs > li').click(function () {
-        var _this = $(this);
-        var tabName = this.className.split(/\s/)[0];
+    // Shape tab
+    var displayTabShape = function () {
+        // toggle the selected class
+        shapeTracingTabs.children('.selected').removeClass('selected');
+        shapeTracingTabsShape.addClass('selected');
 
-        // toggle the selected class on the tab li
-        $('.shape-tracing-tabs > li.selected').removeClass('selected');
-        $('.shape-tracing-tabs > li.' + tabName).addClass('selected');
+        // remove old content
+        shapeTracingMetaContent.empty();
 
-        // hide all tabs and display the selected one
-        $('.shape-tracing-meta-content > div').toggle(false);
-        $('.shape-tracing-meta-content > div.' + tabName).toggle(true);
-
-        // look for the targetted panel
-        var wrapper = _this.parent().parent().first();
-        var panel = wrapper.find('div.' + tabName);
-
-        refreshBreadcrumb();
-        syncResizeMeta();
-
-        // enable codemirror for the current tab
-        enableCodeMirror(panel);
-    });
-
-    var refreshBreadcrumb = function () {
-        var container = shapeTracingWindowContent.find('.shape-tracing-meta:visible');
-        var breadcrumb = container.find('.shape-tracing-breadcrumb');
-        var tab = container.find('.shape-tracing-meta-content > div:visible');
-
-        if (tab.hasClass('shape')) {
-            breadcrumb.text('');
-        }
-        else if (tab.hasClass('model')) {
-            breadcrumb.text('');
-        }
-        else if (tab.hasClass('placement')) {
-            breadcrumb.text(container.find('.sgd-pl > .value').text());
-        }
-        else if (tab.hasClass('template')) {
-            breadcrumb.text(container.find('.sgd-t > .value').text());
-        }
-        else if (tab.hasClass('html')) {
-            breadcrumb.text('');
+        // render the template
+        if (currentShape && shapeTracingMetadataHost[currentShape]) {
+            $("#shape-tracing-tabs-shape-template").tmpl(shapeTracingMetadataHost[currentShape]).appendTo(shapeTracingMetaContent);
         }
+
+        shapeTracingBreadcrumb.text('');
+
+        // create collapsible containers
+        shapeTracingMetaContent.find('li:has(ul:has(li))').prepend(glyph);
+        shapeTracingMetaContent.find('ul ul').toggle(false);
+        shapeTracingMetaContent.find('.expando-glyph-container').click(expandCollapseExpando);
+
+        defaultTab = displayTabShape;
     };
 
-    // template link opens template tab
-    shapeTracingWindowContent.find('.sgd-t a').click(function () {
-        $(this).parents('.shape-tracing-meta').find('.shape-tracing-tabs > .template').click()
+    var defaultTab = displayTabShape;
+
+    shapeTracingTabsShape.click(function () {
+        displayTabShape();
+    });
+
+    // Placement tab
+    var displayTabPlacement = function () {
+        // toggle the selected class
+        shapeTracingTabs.children('.selected').removeClass('selected');
+        shapeTracingTabsPlacement.addClass('selected');
+
+        // remove old content
+        shapeTracingMetaContent.empty();
+
+        // render the template
+        if (currentShape && shapeTracingMetadataHost[currentShape]) {
+            var placementSource = shapeTracingMetadataHost[currentShape].shape.placement;
+            shapeTracingBreadcrumb.text(placementSource);
+            $("#shape-tracing-tabs-placement-template").tmpl(shapeTracingMetadataHost.placement[placementSource]).appendTo(shapeTracingMetaContent);
+        }
+        else {
+            shapeTracingBreadcrumb.text('');
+        }
+
+        enableCodeMirror(shapeTracingMetaContent);
+        defaultTab = displayTabPlacement;
+    };
+
+    shapeTracingTabsPlacement.click(function () {
+        displayTabPlacement();
+    });
+
+    // Template tab
+    var displayTabTemplate = function () {
+        // toggle the selected class
+        shapeTracingTabs.children('.selected').removeClass('selected');
+        shapeTracingTabsTemplate.addClass('selected');
+
+        // remove old content
+        shapeTracingMetaContent.empty();
+
+        // render the template
+        if (currentShape && shapeTracingMetadataHost[currentShape]) {
+            shapeTracingBreadcrumb.text(shapeTracingMetadataHost[currentShape].shape.template);
+            $("#shape-tracing-tabs-template-template").tmpl(shapeTracingMetadataHost[currentShape].shape.templateContent).appendTo(shapeTracingMetaContent);
+        }
+        else {
+            shapeTracingBreadcrumb.text('');
+        }
+
+        enableCodeMirror(shapeTracingMetaContent);
+        defaultTab = displayTabTemplate;
+    };
+
+    shapeTracingTabsTemplate.click(function () {
+        displayTabTemplate();
+    });
+
+    // HTML tab
+    var displayTabHtml = function () {
+        // toggle the selected class
+        shapeTracingTabs.children('.selected').removeClass('selected');
+        shapeTracingTabsHtml.addClass('selected');
+
+        // remove old content
+        shapeTracingMetaContent.empty();
+
+        // render the template
+        if (currentShape && shapeTracingMetadataHost[currentShape]) {
+            $("#shape-tracing-tabs-html-template").tmpl(shapeTracingMetadataHost[currentShape].shape.html).appendTo(shapeTracingMetaContent);
+        }
+            
+        shapeTracingBreadcrumb.text('');
+
+        enableCodeMirror(shapeTracingMetaContent);
+        defaultTab = displayTabHtml;
+    };
+
+    shapeTracingTabsHtml.click(function () {
+        displayTabHtml();
     });
 
     // activates codemirror on specific textareas
@@ -383,8 +438,8 @@
         });
     }
 
-    // automatically expand or collapse shapes in the tree
-    shapeTracingWindow.find('.expando-glyph-container').click(function () {
+    // hooks the click event on expandos
+    var expandCollapseExpando = function () {
         var _this = $(this);
         if (_this.hasClass("closed") || _this.hasClass("closing")) {
             openExpando(_this);
@@ -394,7 +449,10 @@
         }
 
         return false;
-    });
+    };
+
+    // automatically expand or collapse shapes in the tree
+    shapeTracingWindowTree.find('.expando-glyph-container').click(expandCollapseExpando);
 
     //create an overlay on model nodes
     shapeTracingWindowContent.find('.model div.name')
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
index ece6055f9..3e513c486 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
@@ -61,6 +61,7 @@ namespace Orchard.DesignerTools.Services {
                 && context.ShapeType != "PlaceChildContent"
                 && context.ShapeType != "ContentZone"
                 && context.ShapeType != "ShapeTracingMeta"
+                && context.ShapeType != "ShapeTracingTemplates"
                 && context.ShapeType != "DateTimeRelative") {
 
                 var shapeMetadata = (ShapeMetadata)context.Shape.Metadata;
@@ -92,7 +93,7 @@ namespace Orchard.DesignerTools.Services {
             var descriptor = shapeTable.Descriptors[shapeMetadata.Type];
 
             // dump the Shape's content
-            var dumper = new ObjectDumper(6);
+            var dumper = new ObjectDumper(1);
             var el = dumper.Dump(context.Shape, "Model");
             using (var sw = new StringWriter()) {
                 el.WriteTo(new XmlTextWriter(sw) {Formatting = Formatting.None});
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/TemplatesFilter.cs b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/TemplatesFilter.cs
new file mode 100644
index 000000000..4d5cc3900
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/TemplatesFilter.cs
@@ -0,0 +1,30 @@
+using System.Web.Mvc;
+using Orchard.DisplayManagement;
+using Orchard.Mvc.Filters;
+
+namespace Orchard.DesignerTools.Services {
+    public class TemplatesFilter : FilterProvider, IResultFilter {
+        private readonly IWorkContextAccessor _workContextAccessor;
+        private readonly dynamic _shapeFactory;
+
+        public TemplatesFilter(
+            IWorkContextAccessor workContextAccessor, 
+            IShapeFactory shapeFactory) {
+            _workContextAccessor = workContextAccessor;
+            _shapeFactory = shapeFactory;
+        }
+
+        public void OnResultExecuting(ResultExecutingContext filterContext) {
+            // should only run on a full view rendering result
+            if (!(filterContext.Result is ViewResult))
+                return;
+
+            var ctx = _workContextAccessor.GetContext();
+            var tail = ctx.Layout.Tail;
+            tail.Add(_shapeFactory.ShapeTracingTemplates());
+        }
+
+        public void OnResultExecuted(ResultExecutedContext filterContext) {
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
index 072749c96..121fb55cb 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
@@ -63,8 +63,7 @@ button.create-template, button.create-template:hover, background-image:hover {
 
 /* Layout
 ***************************************************************/
-#shape-tracing-container ul, 
-#shape-tracing-container li {
+#shape-tracing-container ul, #shape-tracing-container li {
     margin:0;
     padding:0;
     color:#000;
@@ -90,15 +89,12 @@ button.create-template, button.create-template:hover, background-image:hover {
     margin:0;
 }
 
-#shape-tracing-container .shape-tracing-meta-content {
+#shape-tracing-meta-content {
     overflow:auto;
 }
 
 #shape-tracing-container .shape, #shape-tracing-container .model {
     padding:8px 0 30px 0;
-}
-
-#shape-tracing-container .model, #shape-tracing-container .shape {
     padding-left:30px;
 }
 
@@ -265,7 +261,7 @@ button.create-template, button.create-template:hover, background-image:hover {
 /* Tabs
 ***************************************************************/
 
-#shape-tracing-window-content .shape-tracing-tabs li {
+#shape-tracing-tabs li {
     display: inline;
     font-size:14px;
     padding: 4px 18px;
@@ -274,25 +270,25 @@ button.create-template, button.create-template:hover, background-image:hover {
     text-decoration:none;
 }
 
-#shape-tracing-window-content ul.shape-tracing-tabs {
+ul#shape-tracing-tabs {
     padding:8px 0;
     border-bottom:1px solid rgba(182, 188, 189, 1.0);
     background:rgba(236, 241, 242, 1.0);
     
-     /*CSS3 properties*/
-     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2',  endColorstr='#ffeffcfc');   
-	 background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));    
-     background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
-    }
+    /*CSS3 properties*/
+    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#fffcf1f2',  endColorstr='#ffeffcfc');   
+    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(251, 252, 252, 1.0)), to(rgba(236, 241, 242, 1.0)));    
+    background: -moz-linear-gradient(top, rgba(251, 252, 252, 1.0), rgba(236, 241, 242, 1.0));
+}
 
-#shape-tracing-window-content .shape-tracing-tabs li.middle, #shape-tracing-window-content .shape-tracing-tabs li.first, #shape-tracing-window-content .shape-tracing-tabs li.last {
+#shape-tracing-tabs li.middle, #shape-tracing-tabs li.first, #shape-tracing-tabs li.last {
     border:1px solid rgba(154,155,157,1.0);
     background-color: #F5F5F5;
 }
 
-#shape-tracing-window-content .shape-tracing-tabs li.first {margin:0 0 0 4px;}
+#shape-tracing-tabs li.first {margin:0 0 0 4px;}
 
-#shape-tracing-window-content .shape-tracing-tabs li:hover {
+#shape-tracing-tabs li:hover {
     background-color:rgba(255, 255, 255, 0.5);
     color:#005e99;
     color:rgba(0, 94, 153, 1.0);
@@ -300,7 +296,7 @@ button.create-template, button.create-template:hover, background-image:hover {
     text-decoration:none;
     cursor:pointer;
 }
-#shape-tracing-window-content .shape-tracing-tabs li.selected {
+#shape-tracing-tabs li.selected {
     background-color:rgba(255, 255, 255, 0.9);
     color:rgba(51, 51, 51, 1.0);
     border:1px solid rgba(102, 102, 102, 1.0);
@@ -329,7 +325,7 @@ button.create-template, button.create-template:hover, background-image:hover {
     white-space:nowrap;
 }
 
-#shape-tracing-window-content .shape-tracing-breadcrumb {
+#shape-tracing-breadcrumb {
     background:rgba(236, 241, 242, 1.0);
     border-bottom:1px solid rgba(182, 188, 189, 1.0);
     padding: 3px 0 0 4px;
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
index cf985b887..21d223ce1 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
@@ -16,88 +16,44 @@
     }
 }
 <div class="shape-tracing-meta" shape-id-meta="@Model.ShapeId" style="display:none">
-    <ul class="shape-tracing-tabs">
-        <li class="shape selected first">Shape</li>
-        <li class="model middle">Model</li>
-        <li class="placement middle">Placement</li>
-        <li class="template middle">Template</li>
-        <li class="html last">HTML</li>
-    </ul>
-
-    <div class="shape-tracing-breadcrumb"></div>
-    <div class="shape-tracing-meta-content">
-        <div class="shape grid-display">
-            <ul class="properties">
-                <li class="sgd-s"><div class="name">Shape</div><div class="value">@Model.ShapeType</div></li>
-                <li class="sgd-t"><div class="name">Template</div><div class="value"><a href="#">@Model.Template</a></div></li>
-                @if(!Model.Template.Equals(Model.OriginalTemplate)) {
-                <li class="sgd-ot"><div class="name">Original Template</div><div class="value">@Model.OriginalTemplate</div></li>
-                }
-                <li class="sgd-d"><div class="name">Display Type</div><div class="value">@(String.IsNullOrEmpty((string)Model.DisplayType) ? T("n/a").Text : Model.DisplayType.ToString())</div></li>
-                <li class="sgd-po"><div class="name">Position</div><div class="value">@(String.IsNullOrEmpty((string)Model.Position) ? T("n/a").Text : Model.Position.ToString())</div></li>
-                <li class="sgd-pl"><div class="name">Placement</div><div class="value">@(String.IsNullOrEmpty((string)Model.PlacementSource) ? T("n/a").Text : Model.PlacementSource.ToString())</div></li>
-                <li class="sgd-a"><div class="name">Alternates (@Model.Alternates.Count)</div>
-                    <div class="value">&nbsp;</div>
-                    <ul>
-                    @foreach (var alternate in Model.Alternates)
-                    {
-                        var formatted = @FormatShapeFilename(alternate, WorkContext.CurrentTheme.Id);
-                        <li>
-                            <div class="name">
-                            @using (Html.BeginFormAntiForgeryPost(Url.Action("Create", "Alternate", new { Area = "Orchard.DesignerTools" }), FormMethod.Post, new { @class = "inline link" }))
-                            { 
-                                @Html.Hidden("Alternate", (string)alternate)
-                                @Html.Hidden("Template", (string)Model.Template)
-                                @Html.Hidden("ReturnUrl", Context.Request.RawUrl)
-                                <button type="submit" class="create-template">@T("Create").Text</button>
-                            }
-                            </div>
-                            <div class="value">@formatted</div>
-                        </li>
-                    }
-                    </ul>
-                </li>
-                <li class="sgd-w"><div class="name">Wrappers (@Model.Wrappers.Count)</div>
-                    <div class="value">&nbsp;</div>
-                    <ul>
-                    @foreach (var wrapper in Model.Wrappers)
-                    {
-                        if (wrapper != "ShapeTracing_Wrapper")
-                        {
-                            var formatted = @FormatShapeFilename(wrapper, WorkContext.CurrentTheme.Id);
-                        <li><div class="name">&nbsp;</div><div class="value">@formatted</div></li>
-                        }
-                    }
-                    </ul>
-                </li>
-            </ul>
-        </div>
-            
-        <div class="model grid-display" style="display:none">
-            @(new MvcHtmlString((string)@Model.Dump))
-        </div>
-
-        <div class="placement" style="display:none">
-            <textarea id="placement-@Model.ShapeId" name="placement-@Model.ShapeId">@Model.PlacementContent</textarea>
-        </div>
-
-        <div class="template" style="display:none">
-            @if (String.IsNullOrWhiteSpace((string)Model.TemplateContent))
-            {
-                if (!String.IsNullOrWhiteSpace((string)Model.Template))
-                {
-                    @T("Content not available as coming from source code.")
-                }
-            }
-            else
-            {
-                <textarea id="template-@Model.ShapeId" name="template-@Model.ShapeId">@Model.TemplateContent</textarea>
-            }
-            
-        </div>
-
-        <div class="html" style="display:none">
-            <textarea id="html-@Model.ShapeId" name="html-@Model.ShapeId">@RemoveEmptyLines(RemoveBeacons(Display(Model.ChildContent).ToString()))</textarea>
-        </div>
+    <div class="model grid-display" style="display:none">
+        @(new MvcHtmlString((string)@Model.Dump))
     </div>
 </div>
+
+<script type="text/javascript">
+shapeTracingMetadataHost[@Model.ShapeId] = {};
+shapeTracingMetadataHost[@Model.ShapeId].shape = { 
+    type: '@Model.ShapeType', 
+    template: '@Model.Template', 
+    originalTemplate: '@Model.OriginalTemplate',
+    displayType: '@(String.IsNullOrEmpty((string)Model.DisplayType) ? T("n/a").Text : Model.DisplayType.ToString())',
+    position: '@(String.IsNullOrEmpty((string)Model.Position) ? T("n/a").Text : Model.Position.ToString())',
+    placement: '@(String.IsNullOrEmpty((string)Model.PlacementSource) ? T("n/a").Text : Model.PlacementSource.ToString())',
+    alternates: [
+        @foreach (var alternate in Model.Alternates) {
+        <text>{</text>
+        <text>filename: '@FormatShapeFilename(alternate, WorkContext.CurrentTheme.Id)',</text>
+        <text>alternate: '@alternate',</text> 
+        <text>template: '@Model.Template',</text>
+        <text>returnUrl: '@Context.Request.RawUrl'</text>
+        <text>},</text>
+        }
+    ],
+    wrappers: [
+        @foreach (var wrapper in Model.Wrappers) {
+            if (wrapper == "ShapeTracingWrapper") { continue; }
+        <text>{ filename: '@FormatShapeFilename(wrapper, WorkContext.CurrentTheme.Id)' },
+        </text>
+        }
+    ],
+    html: '@RemoveEmptyLines(RemoveBeacons(Display(Model.ChildContent).ToString())).Replace(Environment.NewLine, "\\n")',
+    templateContent: '@(String.IsNullOrWhiteSpace((string)Model.TemplateContent) ? @T("Content not available as coming from source code.") : @Model.TemplateContent.Replace(Environment.NewLine, "\\n"))'
+};
+
+@if(!String.IsNullOrEmpty((string)Model.PlacementSource) && !TempData.ContainsKey((string)Model.PlacementSource)) {
+    TempData[(string)Model.PlacementSource] = new object();
+<text>shapeTracingMetadataHost.placement['@Model.PlacementSource.ToString()'] = '@Model.PlacementContent.Replace(Environment.NewLine, "\\n")'; </text>
+}
+
+</script>
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
new file mode 100644
index 000000000..6ee7c4d8b
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
@@ -0,0 +1,78 @@
+<div id="shape-tracing-container"> 
+    <div id="shape-tracing-resize-handle" ></div>
+    <div id="shape-tracing-toolbar">
+        <div id="shape-tracing-toolbar-switch"></div>
+    </div>
+    <div id="shape-tracing-window">
+        <div id="shape-tracing-window-tree"></div>
+        <div id="shape-tracing-window-content">
+            <ul id="shape-tracing-tabs">
+                <li id="shape-tracing-tabs-shape" class="selected first">Shape</li>
+                <li id="shape-tracing-tabs-model" class="middle">Model</li>
+                <li id="shape-tracing-tabs-placement" class="middle">Placement</li>
+                <li id="shape-tracing-tabs-template" class="middle">Template</li>
+                <li id="shape-tracing-tabs-html" class="last">HTML</li>
+            </ul>
+            <div id="shape-tracing-breadcrumb"></div>
+            <div id="shape-tracing-meta-content"></div>
+        </div>
+    </div>
+</div>
+<div id="shape-tracing-container-ghost"></div>
+<div id="shape-tracing-overlay"></div>
+
+<script id="shape-tracing-tabs-shape-template" type="text/x-jquery-tmpl">
+    <div class="shape grid-display">
+        <ul class="properties">
+            <li class="sgd-s"><div class="name">Shape</div><div class="value">${shape.type}</div></li>
+            <li class="sgd-t"><div class="name">Template</div><div class="value"><a href="#">${shape.template}</a></div></li>
+            <li class="sgd-ot"><div class="name">Original Template</div><div class="value">${shape.originalTemplate}</div></li>
+            <li class="sgd-d"><div class="name">Display Type</div><div class="value">${shape.displayType}</div></li>
+            <li class="sgd-a"><div class="name">Alternates (${shape.alternates.length})</div>
+                <div class="value">&nbsp;</div>
+                <ul>
+                {{each shape.alternates}}
+                    <li>
+                        <div class="name">
+                        @using (Html.BeginFormAntiForgeryPost(Url.Action("Create", "Alternate", new { Area = "Orchard.DesignerTools" }), FormMethod.Post, new { @class = "inline link" }))
+                        { 
+                            @Html.Hidden("Alternate", "${$value.alternate}")
+                            @Html.Hidden("Template", "${$value.template}")
+                            @Html.Hidden("ReturnUrl", "${$value.returnUrl}")
+                            <button type="submit" class="create-template">@T("Create").Text</button>
+                        }
+                        </div>
+                        <div class="value">${$value.filename}</div>
+                    </li>
+                {{/each}}
+                </ul>
+            </li>
+            <li class="sgd-w"><div class="name">Wrappers (${shape.wrappers.length})</div>
+                <div class="value">&nbsp;</div>
+                <ul>
+                {{each shape.wrappers}}
+                    <li><div class="name">&nbsp;</div><div class="value">${$value.filename}</div></li>
+                {{/each}}
+                </ul>
+            </li>
+        </ul>
+    </div>
+</script>
+
+<script id="shape-tracing-tabs-placement-template" type="text/x-jquery-tmpl">
+    <div class="placement">
+        <textarea>${$data}</textarea>
+    </div>
+</script>
+
+<script id="shape-tracing-tabs-template-template" type="text/x-jquery-tmpl">
+    <div class="template">
+        <textarea>${$data}</textarea>
+    </div>
+</script>
+
+<script id="shape-tracing-tabs-html-template" type="text/x-jquery-tmpl">
+    <div class="html">
+        <textarea>${$data}</textarea>
+    </div>
+</script>
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
index 85c2aa458..97a45ad48 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
@@ -20,6 +20,8 @@
     Script.Include("CodeMirror/css.js");
     Style.Include("CodeMirror/css.css");
     Script.Include("CodeMirror/htmlmixed.js");
+    
+    Script.Include("jquery.tmpl.min.js");
 }
 
 <script class="shape-tracing-wrapper" shape-id="@Model.ShapeId" shape-type="@Model.Metadata.Type" shape-hint="@Model.Hint"></script>@Display(Model.Metadata.ChildContent)<script class="shape-tracing-wrapper" end-of="@Model.ShapeId"></script>

From 040c3d78d5de731ad9f0b17534706e28f1bc46d5 Mon Sep 17 00:00:00 2001
From: Sebastien Ros <none@none>
Date: Tue, 5 Apr 2011 14:27:12 -0700
Subject: [PATCH 2/5] Refactoring permalink redirection based on reviews

--HG--
branch : 1.x
---
 .../Core/Contents/Controllers/AdminController.cs       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Orchard.Web/Core/Contents/Controllers/AdminController.cs b/src/Orchard.Web/Core/Contents/Controllers/AdminController.cs
index 33b79003d..eb148ea24 100644
--- a/src/Orchard.Web/Core/Contents/Controllers/AdminController.cs
+++ b/src/Orchard.Web/Core/Contents/Controllers/AdminController.cs
@@ -299,13 +299,13 @@ namespace Orchard.Core.Contents.Controllers {
 
             // store the previous route in case a back redirection is requested
             string previousRoute = null;
-            var route = contentItem.As<RoutePart>();
-            if(route != null 
+            if(contentItem.Has<RoutePart>() 
                 &&!string.IsNullOrWhiteSpace(returnUrl) 
                 && Url.IsLocalUrl(returnUrl)
-                && returnUrl == Url.ItemDisplayUrl(contentItem) // only if the original returnUrl is the content itself
+                // only if the original returnUrl is the content itself
+                && String.Equals(returnUrl, Url.ItemDisplayUrl(contentItem), StringComparison.OrdinalIgnoreCase) 
                 ) {
-                previousRoute = route.Path;
+                previousRoute = contentItem.As<RoutePart>().Path;
             }
 
             dynamic model = _contentManager.UpdateEditor(contentItem, this);
@@ -320,7 +320,7 @@ namespace Orchard.Core.Contents.Controllers {
             // did the route change ?
             if (!string.IsNullOrWhiteSpace(returnUrl) 
                 && previousRoute != null 
-                && contentItem.As<RoutePart>().Path != previousRoute) {
+                && !String.Equals(contentItem.As<RoutePart>().Path, previousRoute, StringComparison.OrdinalIgnoreCase)) {
                 returnUrl = Url.ItemDisplayUrl(contentItem);
             }
 

From 7166bbbf6ede538e2874a240e6ee35d9346e5ef3 Mon Sep 17 00:00:00 2001
From: Sebastien Ros <none@none>
Date: Tue, 5 Apr 2011 18:02:15 -0700
Subject: [PATCH 3/5] Rendering shape tracing model using json and jquery
 templates

--HG--
branch : 1.x
---
 .../orchard-designertools-shapetracing.js     | 100 +++++++++++-------
 .../Services/ShapeTracingFactory.cs           |  65 ++++++++++--
 .../Views/ShapeTracingMeta.cshtml             |  14 +--
 .../Views/ShapeTracingTemplates.cshtml        |  18 ++++
 .../Views/ShapeTracingWrapper.cshtml          |   5 +-
 5 files changed, 151 insertions(+), 51 deletions(-)

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
index 1badc5fc0..44b470867 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
@@ -4,6 +4,7 @@ if (!window.shapeTracingMetadataHost) {
     window.shapeTracingMetadataHost.placement = {
         'n/a': 'n/a'
     };
+    window.shapeTracingMetadataHost.references = {};
 }
 
 jQuery(function ($) {
@@ -350,6 +351,68 @@ jQuery(function ($) {
         displayTabShape();
     });
 
+    // Model tab
+    var displayTabModel = function () {
+        // toggle the selected class
+        shapeTracingTabs.children('.selected').removeClass('selected');
+        shapeTracingTabsModel.addClass('selected');
+
+        // remove old content
+        shapeTracingMetaContent.empty();
+
+        // render the template
+        if (currentShape && shapeTracingMetadataHost[currentShape]) {
+            $("#shape-tracing-tabs-model-template").tmpl(shapeTracingMetadataHost[currentShape].shape.model).appendTo(shapeTracingMetaContent);
+        }
+
+        shapeTracingBreadcrumb.text('');
+
+        // create collapsible containers
+        shapeTracingMetaContent.find('li:has(ul:has(li))').prepend(glyph);
+        shapeTracingMetaContent.find('ul ul').toggle(false);
+        shapeTracingMetaContent.find('.expando-glyph-container').click(expandCollapseExpando);
+
+        shapeTracingMetaContent.find('.model div.name')
+        .hover(
+            function () {
+                var _this = $(this);
+                $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
+                _this.addClass('shape-tracing-overlay');
+            },
+            function () {
+                $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
+            })
+        .click(function (event) {
+            // model node is selected
+            var _this = $(this);
+            shapeTracingWindowContent.find('.shape-tracing-selected').removeClass('shape-tracing-selected');
+            _this.addClass('shape-tracing-selected');
+
+            // display breadcrumb
+            var breadcrumb = null;
+            _this.parentsUntil('.model').children('.name').each(function () {
+                if (breadcrumb != null) {
+                    breadcrumb = $(this).text() + '.' + breadcrumb;
+                }
+                else {
+                    breadcrumb = $(this).text();
+                }
+            });
+
+            // fix enumerable properties display
+            breadcrumb = breadcrumb.replace('.[', '[');
+
+            shapeTracingBreadcrumb.text('@' + breadcrumb);
+            event.stopPropagation();
+        });
+
+        defaultTab = displayTabModel;
+    };
+
+    shapeTracingTabsModel.click(function () {
+        displayTabModel();
+    });
+
     // Placement tab
     var displayTabPlacement = function () {
         // toggle the selected class
@@ -416,7 +479,7 @@ jQuery(function ($) {
         if (currentShape && shapeTracingMetadataHost[currentShape]) {
             $("#shape-tracing-tabs-html-template").tmpl(shapeTracingMetadataHost[currentShape].shape.html).appendTo(shapeTracingMetaContent);
         }
-            
+
         shapeTracingBreadcrumb.text('');
 
         enableCodeMirror(shapeTracingMetaContent);
@@ -454,41 +517,6 @@ jQuery(function ($) {
     // automatically expand or collapse shapes in the tree
     shapeTracingWindowTree.find('.expando-glyph-container').click(expandCollapseExpando);
 
-    //create an overlay on model nodes
-    shapeTracingWindowContent.find('.model div.name')
-    .hover(
-        function () {
-            var _this = $(this);
-            $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
-            _this.addClass('shape-tracing-overlay');
-        },
-        function () {
-            $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
-        })
-    .click(function (event) {
-        // model node is selected
-        var _this = $(this);
-        shapeTracingWindowContent.find('.shape-tracing-selected').removeClass('shape-tracing-selected');
-        _this.addClass('shape-tracing-selected');
-
-        // display breadcrumb
-        var breadcrumb = null;
-        _this.parentsUntil('.model').children('.name').each(function () {
-            if (breadcrumb != null) {
-                breadcrumb = $(this).text() + '.' + breadcrumb;
-            }
-            else {
-                breadcrumb = $(this).text();
-            }
-        });
-
-        // fix enumerable properties display
-        breadcrumb = breadcrumb.replace('.[', '[');
-
-        _this.parents('.shape-tracing-meta').find('.shape-tracing-breadcrumb').text('@' + breadcrumb);
-        event.stopPropagation();
-    });
-
     // recursively create a node for the shapes tree
     function createTreeNode(shapeNode) {
         var node = $('<li></li>');
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
index 3e513c486..80530069e 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
@@ -1,7 +1,9 @@
-using System.IO;
+using System.Collections.Generic;
 using System.Linq;
+using System.Text;
 using System.Web.Routing;
-using System.Xml;
+using System.Runtime.CompilerServices;
+using System.Xml.Linq;
 using Orchard.DisplayManagement.Descriptors;
 using Orchard.DisplayManagement.Implementation;
 using Orchard.DisplayManagement.Shapes;
@@ -21,6 +23,7 @@ namespace Orchard.DesignerTools.Services {
         private readonly IWebSiteFolder _webSiteFolder;
         private readonly IAuthorizer _authorizer;
         private int _shapeId;
+        private readonly Dictionary<int, XElement> _dumped = new Dictionary<int, XElement>(1000);
 
         public ShapeTracingFactory(
             WorkContext workContext, 
@@ -93,11 +96,16 @@ namespace Orchard.DesignerTools.Services {
             var descriptor = shapeTable.Descriptors[shapeMetadata.Type];
 
             // dump the Shape's content
-            var dumper = new ObjectDumper(1);
-            var el = dumper.Dump(context.Shape, "Model");
-            using (var sw = new StringWriter()) {
-                el.WriteTo(new XmlTextWriter(sw) {Formatting = Formatting.None});
-                context.Shape._Dump = sw.ToString();
+            var local = new Dictionary<int, XElement>();
+            new ObjectDumper(6, local, _dumped).Dump(context.Shape, "Model");
+            context.Shape.Reference = RuntimeHelpers.GetHashCode(context.Shape);
+
+            var sb = new StringBuilder();
+            context.Shape.LocalReferences = new Dictionary<int, string>(); 
+            foreach (var key in local.Keys) {
+                sb.Clear();
+                ConvertToJSon(local[key], sb);
+                ((Dictionary<int, string>) context.Shape.LocalReferences)[key] = sb.ToString();
             }
 
             shape.Template = null;
@@ -149,5 +157,48 @@ namespace Orchard.DesignerTools.Services {
 
         public void Displayed(ShapeDisplayedContext context) {
         }
+
+        private static void ConvertToJSon(XElement x, StringBuilder sb) {
+            if(x == null) {
+                return;
+            }
+
+            switch (x.Name.ToString()) {
+                case "ul" :
+                    foreach(var li in x.Elements()) {
+                        ConvertToJSon(li, sb);
+                        sb.Append(",");
+                    }
+                    break;
+                case "li":
+                    var name = x.Element("h1").Value;
+                    var value = x.Element("span").Value;
+
+                    sb.AppendFormat("name: \"{0}\", ", FormatJsonValue(name));
+                    sb.AppendFormat("value: \"{0}\"", FormatJsonValue(value));
+
+                    var a = x.Element("a");
+                    if (a != null) {
+                        sb.AppendFormat(", children: shapeTracingMetadataHost.references[{0}]", a.Attribute("href").Value);
+                    }
+
+                    var ul = x.Element("ul");
+                    if (ul != null) {
+                        sb.Append(", children: [");
+                        foreach (var li in ul.Elements()) {
+                            sb.Append("{ ");
+                            ConvertToJSon(li, sb);
+                            sb.Append(" },");
+                        }
+                        sb.Append("]");
+                    }
+                    break;
+            }
+        }
+
+        private static string FormatJsonValue(string value) {
+            // replace " by \" in json strings
+            return value.Replace("\"", @"\""");
+        }
     }
 }
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
index 21d223ce1..a52d4d669 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
@@ -15,14 +15,15 @@
         return regex.Replace(htmlContent, System.Environment.NewLine);
     }
 }
-<div class="shape-tracing-meta" shape-id-meta="@Model.ShapeId" style="display:none">
-    <div class="model grid-display" style="display:none">
-        @(new MvcHtmlString((string)@Model.Dump))
-    </div>
-</div>
+
 
 <script type="text/javascript">
 shapeTracingMetadataHost[@Model.ShapeId] = {};
+
+@foreach (var pair in Model.LocalReferences) {
+<text>shapeTracingMetadataHost.references[@pair.Key] = { @(new MvcHtmlString(pair.Value)) };</text>
+}
+
 shapeTracingMetadataHost[@Model.ShapeId].shape = { 
     type: '@Model.ShapeType', 
     template: '@Model.Template', 
@@ -48,7 +49,8 @@ shapeTracingMetadataHost[@Model.ShapeId].shape = {
         }
     ],
     html: '@RemoveEmptyLines(RemoveBeacons(Display(Model.ChildContent).ToString())).Replace(Environment.NewLine, "\\n")',
-    templateContent: '@(String.IsNullOrWhiteSpace((string)Model.TemplateContent) ? @T("Content not available as coming from source code.") : @Model.TemplateContent.Replace(Environment.NewLine, "\\n"))'
+    templateContent: '@(String.IsNullOrWhiteSpace((string)Model.TemplateContent) ? @T("Content not available as coming from source code.") : @Model.TemplateContent.Replace(Environment.NewLine, "\\n"))',
+    model: shapeTracingMetadataHost.references[@Model.Reference]
 };
 
 @if(!String.IsNullOrEmpty((string)Model.PlacementSource) && !TempData.ContainsKey((string)Model.PlacementSource)) {
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
index 6ee7c4d8b..3e37d8f7b 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
@@ -59,6 +59,24 @@
     </div>
 </script>
 
+<script id="shape-tracing-tabs-model-template" type="text/x-jquery-tmpl">
+    <div class="model grid-display">
+        <ul>{{tmpl "#shape-tracing-tabs-model-node-template"}}</ul>
+    </div>
+</script>
+
+<script id="shape-tracing-tabs-model-node-template" type="text/x-jquery-tmpl">
+    <li>
+        <div class="name">${name}</div>
+        <div class="value">${value}</div>
+        {{if children}}
+            <ul>
+                {{tmpl(children) "#shape-tracing-tabs-model-node-template"}}
+            </ul>
+        {{/if}}
+    </li>
+</script>
+
 <script id="shape-tracing-tabs-placement-template" type="text/x-jquery-tmpl">
     <div class="placement">
         <textarea>${$data}</textarea>
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
index 97a45ad48..73ae97c71 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
@@ -35,11 +35,12 @@
                 DisplayType: Model.Metadata.DisplayType, 
                 Position: Model.Metadata.Position, 
                 PlacementSource: Model.Metadata.PlacementSource, 
-                Dump: Model._Dump, 
                 PlacementContent: Model.PlacementContent, 
                 Alternates: Model.Metadata.Alternates, 
                 Wrappers: Model.Metadata.Wrappers, 
                 ChildContent: Model.Metadata.ChildContent,
-                ShapeId: Model.ShapeId
+                ShapeId: Model.ShapeId,
+                Reference: Model.Reference,
+                LocalReferences: Model.LocalReferences
         ));
     }

From 10f4bafe34676acb50cdcaa726f2e23cafbcde7f Mon Sep 17 00:00:00 2001
From: Sebastien Ros <none@none>
Date: Tue, 5 Apr 2011 18:02:55 -0700
Subject: [PATCH 4/5] Adding missing file

--HG--
branch : 1.x
---
 .../Services/ObjectDumper.cs                  | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ObjectDumper.cs b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ObjectDumper.cs
index 3affc4b63..24edc99a4 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ObjectDumper.cs
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ObjectDumper.cs
@@ -3,6 +3,7 @@ using System.Collections.Generic;
 using System.Collections;
 using System.Linq;
 using System.Reflection;
+using System.Runtime.CompilerServices;
 using System.Xml.Linq;
 using ClaySharp;
 using ClaySharp.Behaviors;
@@ -17,12 +18,18 @@ namespace Orchard.DesignerTools.Services {
         private readonly Stack<object> _parents = new Stack<object>();
         private readonly Stack<XElement> _currents = new Stack<XElement>();
         private readonly int _levels;
+        private readonly Dictionary<int, XElement> _local;
+        private readonly Dictionary<int, XElement> _global;
 
         private readonly XDocument _xdoc;
         private XElement _current;
-        
-        public ObjectDumper(int levels) {
+
+        // object/key/dump
+
+        public ObjectDumper(int levels, Dictionary<int, XElement> local, Dictionary<int, XElement> global) {
             _levels = levels;
+            _local = local;
+            _global = global;
             _xdoc = new XDocument();
             _xdoc.Add(_current = new XElement("ul"));
         }
@@ -44,29 +51,42 @@ namespace Orchard.DesignerTools.Services {
                     DumpValue(o, name);
                 }
                 else {
-                    DumpObject(o, name);
+                    int hashCode = RuntimeHelpers.GetHashCode(o);
+                    // if the object has already been processed, return a named ref to it
+                    if (_global.ContainsKey(hashCode)) {
+                        _current.Add(
+                            new XElement("h1", new XText(name)),
+                            new XElement("span", FormatType(o)),
+                            new XElement("a", new XAttribute("href", hashCode.ToString()))
+                        );
+                    }
+                    else {
+                        _global.Add(hashCode, _current);
+                        _local.Add(hashCode, _current);
+                        DumpObject(o, name);
+                    }
                 }
             }
             finally {
                 _parents.Pop(); 
                 RestoreCurrentNode();
             }
-
+        
             return _current;
         }
 
         private void DumpValue(object o, string name) {
             string formatted = FormatValue(o);
             _current.Add(
-                new XElement("div", new XAttribute("class", "name"), name),
-                new XElement("div", new XAttribute("class", "value"), formatted)
+                new XElement("h1", new XText(name)),
+                new XElement("span", formatted)
             );
         }
 
         private void DumpObject(object o, string name) {
             _current.Add(
-                new XElement("div", new XAttribute("class", "name"), name),
-                new XElement("div", new XAttribute("class", "type"), FormatType(o))
+                new XElement("h1", new XText(name)),
+                new XElement("span", FormatType(o))
             );
 
             if (_parents.Count >= _levels) {

From f7f83d7d34d6e3ee94d28051ee17b98b75dcd9ed Mon Sep 17 00:00:00 2001
From: Sebastien Ros <none@none>
Date: Tue, 5 Apr 2011 18:10:58 -0700
Subject: [PATCH 5/5] Opening the Model node by default in shape tracing

--HG--
branch : 1.x
---
 .../Scripts/orchard-designertools-shapetracing.js              | 3 +++
 .../Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml   | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
index 44b470867..b12dd051a 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
@@ -406,6 +406,9 @@ jQuery(function ($) {
             event.stopPropagation();
         });
 
+        // open the root node (Model)
+        openExpando(shapeTracingMetaContent.find('.expando-glyph-container:first'))
+
         defaultTab = displayTabModel;
     };
 
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
index 3e37d8f7b..07db9ec6d 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml
@@ -70,7 +70,7 @@
         <div class="name">${name}</div>
         <div class="value">${value}</div>
         {{if children}}
-            <ul>
+            <ul style="display:none">
                 {{tmpl(children) "#shape-tracing-tabs-model-node-template"}}
             </ul>
         {{/if}}