Merge

--HG--
branch : 1.x

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);
             }
 

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. 

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 );

src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js

@@ -1,22 +1,17 @@
-jQuery(function ($) {
+ // declare global metadata host
+if (!window.shapeTracingMetadataHost) {
+    window.shapeTracingMetadataHost = {};
+    window.shapeTracingMetadataHost.placement = {
+        'n/a': 'n/a'
+    };
+    window.shapeTracingMetadataHost.references = {};
+}
+
+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 +22,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 +70,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 +192,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 +247,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) {
-        if (!shapeId) {
+        // remove current tab content
+        shapeTracingMetaContent.children().remove();
+
         // remove selection ?
+        if (!shapeId) {
+            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 +285,6 @@
             shapeTracingWindowTree.scrollTo(this, 0, { margin: true });
         });
 
-        refreshBreadcrumb();
-
         return false;
     });
 
@@ -321,83 +321,58 @@
     // 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();
     });
 
-    // activates codemirror on specific textareas
-    var enableCodeMirror = function (target) {
-        // if there is a script, and colorization is not enabled yet, turn it on
-        // code mirror seems to work only if the textarea is visible
-        target.find('textarea:visible').each(function () {
-            if ($(this).next('.CodeMirror').length == 0) {
-                CodeMirror.fromTextArea(this, { mode: "razor", tabMode: "indent", readOnly: true, lineNumbers: true });
-            }
-        });
+    // 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);
         }
 
-    // automatically expand or collapse shapes in the tree
-    shapeTracingWindow.find('.expando-glyph-container').click(function () {
-        var _this = $(this);
-        if (_this.hasClass("closed") || _this.hasClass("closing")) {
-            openExpando(_this);
-        }
-        else {
-            closeExpando(_this);
-        }
+        shapeTracingBreadcrumb.text('');
 
-        return false;
-    });
+        // 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);
 
-    //create an overlay on model nodes
-    shapeTracingWindowContent.find('.model div.name')
+        shapeTracingMetaContent.find('.model div.name')
         .hover(
             function () {
                 var _this = $(this);
@@ -427,10 +402,124 @@
             // fix enumerable properties display
             breadcrumb = breadcrumb.replace('.[', '[');
 
-        _this.parents('.shape-tracing-meta').find('.shape-tracing-breadcrumb').text('@' + breadcrumb);
+            shapeTracingBreadcrumb.text('@' + breadcrumb);
             event.stopPropagation();
         });
 
+        // open the root node (Model)
+        openExpando(shapeTracingMetaContent.find('.expando-glyph-container:first'))
+
+        defaultTab = displayTabModel;
+    };
+
+    shapeTracingTabsModel.click(function () {
+        displayTabModel();
+    });
+
+    // 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
+    var enableCodeMirror = function (target) {
+        // if there is a script, and colorization is not enabled yet, turn it on
+        // code mirror seems to work only if the textarea is visible
+        target.find('textarea:visible').each(function () {
+            if ($(this).next('.CodeMirror').length == 0) {
+                CodeMirror.fromTextArea(this, { mode: "razor", tabMode: "indent", readOnly: true, lineNumbers: true });
+            }
+        });
+    }
+
+    // hooks the click event on expandos
+    var expandCollapseExpando = function () {
+        var _this = $(this);
+        if (_this.hasClass("closed") || _this.hasClass("closing")) {
+            openExpando(_this);
+        }
+        else {
+            closeExpando(_this);
+        }
+
+        return false;
+    };
+
+    // automatically expand or collapse shapes in the tree
+    shapeTracingWindowTree.find('.expando-glyph-container').click(expandCollapseExpando);
+
     // recursively create a node for the shapes tree
     function createTreeNode(shapeNode) {
         var node = $('<li></li>');

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,9 +51,22 @@ namespace Orchard.DesignerTools.Services {
                     DumpValue(o, name);
                 }
                 else {
+                    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();
@@ -58,15 +78,15 @@ namespace Orchard.DesignerTools.Services {
         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) {

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, 
@@ -61,6 +64,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,11 +96,16 @@ namespace Orchard.DesignerTools.Services {
             var descriptor = shapeTable.Descriptors[shapeMetadata.Type];
 
             // dump the Shape's content
-            var dumper = new ObjectDumper(6);
-            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;
@@ -148,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("\"", @"\""");
+        }
     }
 }

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) {
+        }
+    }
+}

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,7 +270,7 @@ 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);
@@ -285,14 +281,14 @@ button.create-template, button.create-template:hover, background-image:hover {
     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;

src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml

@@ -15,89 +15,47 @@
         return regex.Replace(htmlContent, System.Environment.NewLine);
     }
 }
-<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>
+<script type="text/javascript">
+shapeTracingMetadataHost[@Model.ShapeId] = {};
 
-        <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>
+@foreach (var pair in Model.LocalReferences) {
+<text>shapeTracingMetadataHost.references[@pair.Key] = { @(new MvcHtmlString(pair.Value)) };</text>
 }
 
-        </div>
+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"))',
+    model: shapeTracingMetadataHost.references[@Model.Reference]
+};
 
-        <div class="html" style="display:none">
-            <textarea id="html-@Model.ShapeId" name="html-@Model.ShapeId">@RemoveEmptyLines(RemoveBeacons(Display(Model.ChildContent).ToString()))</textarea>
-        </div>
-    </div>
-</div>
+@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>

src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingTemplates.cshtml

@@ -0,0 +1,96 @@
+<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-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 style="display:none">
+                {{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>
+    </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>

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>
@@ -33,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
         ));
     }