Rendering shape tracing model using json and jquery templates

--HG--
branch : 1.x

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

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>

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