Rendering the Model as a tree in shape tracing

--HG--
branch : dev

src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj

@@ -60,6 +60,7 @@
     <Reference Include="System.Xml.Linq" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Styles\images\menu-glyph.png" />
     <Content Include="Scripts\orchard-designertools-shapetracing.js" />
     <Content Include="Styles\orchard-designertools-shapetracing.css" />
     <Content Include="Web.config">

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

@@ -59,7 +59,7 @@
         function bindTab(selector) {
             $('li' + selector).click(function () {
                 var _this = $(this);
-                
+
                 // toggle the selected class on the tab li
                 _this.parent().children('li').toggleClass('selected', false);
                 _this.toggleClass('selected', true);
@@ -71,11 +71,33 @@
             });
         }
 
+        var glyph = $("<span class=\"expando-glyph-container closed\"><span class=\"expando-glyph\"></span>&#8203;</span>");
+        $('div.model div.type').prev().prepend(glyph);
+
+        $('div.model ul ul').toggle(false);
+
+        $('span.expando-glyph-container').click(function () {
+            var __this = $(this);
+
+            if (__this.hasClass("closed") || __this.hasClass("closing")) {
+                __this.parent().parent().parent().children('ul').slideDown(300, function () { __this.removeClass("opening").removeClass("closed").addClass("open"); });
+                __this.addClass("opening");
+            }
+            else {
+                __this.parent().parent().parent().children('ul').slideUp(300, function () { __this.removeClass("closing").removeClass("open").addClass("closed"); });
+                __this.addClass("closing");
+            }
+
+            return false;
+        });
+
         bindTab('.shape');
         bindTab('.model');
         bindTab('.placement');
         bindTab('.templates');
         bindTab('.source');
         bindTab('.html');
+
+
     });
 })(jQuery);

src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ObjectDumper.cs

@@ -62,15 +62,19 @@ namespace Orchard.DesignerTools.Services {
         private void DumpValue(object o, string name) {
             string formatted = FormatValue(o);
             _node.Add(
-                new XElement("div", new XAttribute("class", "name"), name),
+                new XElement("h3", 
-                new XElement("div", new XAttribute("class", "value"), formatted)
+                    new XElement("div", new XAttribute("class", "name"), name),
+                    new XElement("div", new XAttribute("class", "value"), formatted)
+                    )
                 );
         }
 
         private void DumpObject(object o, string name) {
             _node.Add(
-                new XElement("div", new XAttribute("class", "name"), name),
+                new XElement("h3", 
-                new XElement("div", new XAttribute("class", "type"), FormatType(o.GetType()))
+                    new XElement("div", new XAttribute("class", "name"), name),
+                    new XElement("div", new XAttribute("class", "type"), FormatType(o.GetType()))
+                    )
             );
 
             if (_parents.Count >= _levels) {
@@ -168,6 +172,10 @@ namespace Orchard.DesignerTools.Services {
 
             _node.Add(_node = new XElement("ul"));
             foreach (var key in props.Keys) {
+                // ignore private members (added dynmically by the shape wrapper)
+                if(key.ToString().StartsWith("_")) {
+                    continue;
+                }
                 Dump(props[key], key.ToString());
             }
             _node = _node.Parent;

src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs

@@ -33,58 +33,56 @@ namespace Orchard.DesignerTools.Services {
                 && context.ShapeType != "PlaceChildContent"
                 && context.ShapeType != "ContentZone"
                 && context.ShapeType != "ShapeTracingMeta") {
-                
+
-                var shape = context.Shape;
                 var shapeMetadata = (ShapeMetadata)context.Shape.Metadata;
-
                 var currentTheme = _themeManager.GetRequestTheme(_workContext.HttpContext.Request.RequestContext);
-
                 var shapeTable = _shapeTableManager.GetShapeTable(currentTheme.Id);
 
-                if(!shapeTable.Descriptors.ContainsKey(shapeMetadata.Type)) {
+                if (!shapeTable.Descriptors.ContainsKey(shapeMetadata.Type)) {
                     return;
                 }
 
-                var descriptor = shapeTable.Descriptors[shapeMetadata.Type];
-
                 shapeMetadata.Wrappers.Add("ShapeTracingWrapper");
-                
-                shape.Definition = descriptor.BindingSource;
-
-                try {
-                    if (_webSiteFolder.FileExists(descriptor.BindingSource)) {
-                        shape.DefinitionContent = _webSiteFolder.ReadFile(descriptor.BindingSource);
-                    }
-                }
-                catch {
-                    // the url might be invalid in case of a code shape
-                }
-
-                shape.Dump = DumpObject(shape);
-            }
-        }
-
-        static string DumpObject(object o) {
-            var dumper = new ObjectDumper(6);
-            var el = dumper.Dump(o, "Model");
-            using (var sw = new StringWriter()) {
-                el.WriteTo(new XmlTextWriter(sw) { Formatting = Formatting.Indented });
-                return sw.ToString();
             }
         }
 
         public void Displaying(ShapeDisplayingContext context) {
-            var shapeMetadata = (ShapeMetadata)context.Shape.Metadata;
+            var shape = context.Shape;
-            
+            var shapeMetadata = (ShapeMetadata) context.Shape.Metadata;
-            if(!shapeMetadata.Wrappers.Contains("ShapeTracingWrapper")) {
+            var currentTheme = _themeManager.GetRequestTheme(_workContext.HttpContext.Request.RequestContext);
+            var shapeTable = _shapeTableManager.GetShapeTable(currentTheme.Id);
+
+            if (!shapeMetadata.Wrappers.Contains("ShapeTracingWrapper")) {
                 return;
             }
 
-            if( shapeMetadata.PlacementSource != null && _webSiteFolder.FileExists(shapeMetadata.PlacementSource)) {
+            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.Indented});
+                context.Shape._Dump = sw.ToString();
+            }
+
+            shape._Definition = descriptor.BindingSource;
+
+            try {
+                if (_webSiteFolder.FileExists(descriptor.BindingSource)) {
+                    shape._DefinitionContent = _webSiteFolder.ReadFile(descriptor.BindingSource);
+                }
+            }
+            catch {
+                // the url might be invalid in case of a code shape
+            }
+
+            if (shapeMetadata.PlacementSource != null && _webSiteFolder.FileExists(shapeMetadata.PlacementSource)) {
                 context.Shape.PlacementContent = _webSiteFolder.ReadFile(shapeMetadata.PlacementSource);
             }
         }
 
+
         public void Displayed(ShapeDisplayedContext context) {
         }
     }

src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css

@@ -138,3 +138,71 @@ ul.debuggerMenu { margin:8px 0 -8px 0; }
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
 }
+
+.meta .model div.name
+{
+    display:block;
+    float:left;
+    width:30%;
+}
+
+.meta .model ul 
+{
+    padding:0;
+    margin-left:-15px;
+    margin:0;
+    list-style-type:none;
+}
+
+.meta .model ul li
+{
+    padding-left:15px;
+}
+
+.meta .model h3
+{
+    margin:0;
+    padding:0;
+}
+
+h3:hover
+{
+    background-color: #eee;
+}
+
+.expando-glyph {
+    background:transparent no-repeat 0 -19px;
+    background-image:url(images/menu-glyph.png);
+
+    line-height:12px;
+    padding-left:15px;
+    margin-left:-15px;
+}
+
+.expando-glyph:hover {
+    background-image:url(images/menu-glyph.png);
+}
+
+.expando-glyph-container.closed .expando-glyph {
+    background-image:url(images/menu-glyph.png);
+    background-position:0 3px;
+}
+.expando-glyph-container.closed .expando-glyph:hover {
+    background-image:url(images/menu-glyph.png);
+}
+.expando-glyph-container.closing .expando-glyph {
+    -webkit-transition:all .2s ease-in-out;
+    -moz-transition:all .2s ease-in-out;
+    transition:all .2s ease-in-out;
+    -webkit-transform:rotate(-90deg) translate(3px, -3px);
+    -moz-transform:rotate(-90deg) translate(3px, -3px);
+    transform:rotate(-90deg) translate(3px, -3px);
+}
+.expando-glyph-container.opening .expando-glyph {
+    -webkit-transition:all .2s ease-in-out;
+    -moz-transition:all .2s ease-in-out;
+    transition:all .2s ease-in-out;
+    -webkit-transform:rotate(90deg) translate(3px, 3px);
+    -moz-transform:rotate(90deg) translate(3px, 3px);
+    transform:rotate(90deg) translate(3px, 3px);
+}

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

@@ -24,7 +24,7 @@
 		</div>
 			
 		<div class="model" style="display:none">
-			<pre>@Model.Dump</pre>
+			@(new MvcHtmlString(@Model.Dump))
 		</div>
 
 		<div class="placement" style="display:none">

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

@@ -15,12 +15,12 @@
 		Layout.Zones["Tail"].Add(
 			New.ShapeTracingMeta(
 				ShapeType: Model.Metadata.Type, 
-				Definition: Model.Definition, 
+				Definition: Model._Definition, 
-				DefinitionContent: Model.DefinitionContent, 
+				DefinitionContent: Model._DefinitionContent, 
 				DisplayType: Model.Metadata.DisplayType, 
 				Position: Model.Metadata.Position, 
 				PlacementSource: Model.Metadata.PlacementSource, 
-				Dump: Model.Dump, 
+				Dump: Model._Dump, 
 				PlacementContent: Model.PlacementContent, 
 				Alternates: Model.Metadata.Alternates, 
 				Wrappers: Model.Metadata.Wrappers,