Constructing shapes tree

--HG--
branch : dev

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

@@ -6,7 +6,7 @@
                 '<div id="shape-tracing-toolbar">' +
                     '<div id="shape-tracing-toolbar-switch"></div>' +
                 '</div>' +
-                '<div id="shape-tracing-window">window</div>' +
+                '<div id="shape-tracing-window"></div>' +
             '</div>' +
             '<div id="shape-tracing-container-ghost"></div>'
         ).appendTo('body');
@@ -65,17 +65,64 @@
         $('#shape-tracing-resize-handle').addClass('ui-resizable-handle ui-resizable-n');
         shapeTracingContainer.resizable({ handles: { n: '#shape-tracing-resize-handle'} });
 
+        var shapeNodes = {}; // represents the main index of shape nodes, indexed by id
+
         // projects the shape ids to each DOM element
-        var shapeTracingWrappers = $('.shape-tracing-wrapper');
-        shapeTracingWrappers.each(function () {
+        var startShapeTracingBeacons = $('.shape-tracing-wrapper[shape-id]');
+        startShapeTracingBeacons.each(function () {
             var _this = $(this);
-            var shapeId = _this.attr('shape-id');
+
+            var shapeNode = {
+                id: _this.attr('shape-id'),
+                type: _this.attr('shape-type'),
+                parent: null,
+                children: {}
+            };
+
+            // register the new shape node into the main shape nodes index
+            shapeNodes[shapeNode.id] = shapeNode;
+
             // assign the shape-id attribute to all elements, except wrappers themselves (it would erase their own shape-id)
-            _this.nextUntil('[end-of="' + shapeId + '"]').find(':not(.shape-tracing-wrapper)').andSelf().attr('shape-id', shapeId);
+            _this
+                .nextUntil('[end-of="' + shapeNode.id + '"]') // all elements between the script beacons
+                .find(':not(.shape-tracing-wrapper)') // all children but not inner beacons
+                .andSelf() // add the first level items
+                .attr('shape-id', shapeNode.id) // add the shape-id attribute
+                .each(function () {
+                    // assign a shapeNode instance to the DOM element
+                    this.shapeNode = shapeNode;
+                });
+
+            this.shapeNode = shapeNode;
         });
 
-        // removes all wrappers, by unwrapping the first element of each of them
-        shapeTracingWrappers.remove();
+        // construct the shape tree based on all current nodes
+        // for each start beacon, search for the first parent beacon, and create nodes if they don't exist
+        startShapeTracingBeacons.each(function () {
+            var _this = $(this);
+            var shapeNode = this.shapeNode;
+            var parent = _this.parent('[shape-id!=' + shapeNode.id + ']').get(0);
+
+            shapeNodes[shapeNode.id] = shapeNode;
+
+            if (parent.shapeNode) {
+                var parentShapeNode = parent.shapeNode;
+                shapeNodes[parentShapeNode.id] = parentShapeNode;
+                shapeNode.parent = parentShapeNode;
+                parentShapeNode.children[shapeNode.id] = shapeNode;
+            }
+        });
+
+        // removes all beacons as we don't need them anymore
+        $('.shape-tracing-wrapper').remove();
+
+        var shapes = $('<ul></ul>');
+        for (var shapeId in shapeNodes) {
+            if (!shapeNodes[shapeId].parent) {
+                shapes.append(createTreeNode(shapeNodes[shapeId]));
+            }
+        }
+        shapeTracingWindow.append(shapes);
 
         //create an overlay on shapes' descendants
         $('[shape-id]').hover(
@@ -87,6 +134,20 @@
                 $(this).removeClass('shape-tracing-overlay');
             }
         );
-
     });
+
+    function createTreeNode(shapeNode) {
+        var node = $('<li></li>');
+        node.text(shapeNode.type);
+        var list = $('<ul></ul>');
+        node.append(list);
+        if (shapeNode.children) {
+            for (var shapeId in shapeNode.children) {
+                var child = createTreeNode(shapeNode.children[shapeId]);
+                list.append(child);
+            }
+        }
+        return node;
+    }
+
 })(jQuery);

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

@@ -29,6 +29,7 @@ namespace Orchard.DesignerTools.Services {
             if (context.ShapeType != "Layout"
                 && context.ShapeType != "DocumentZone"
                 && context.ShapeType != "PlaceChildContent"
+                && context.ShapeType != "ContentZone"
                 && context.ShapeType != "ShapeTracingMeta") {
 
                 var shapeMetadata = (ShapeMetadata)context.Shape.Metadata;

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

@@ -1,7 +1,17 @@
 /* 
-    todo: (sebros) override every css property to reset any value defined in the theme, 
-    which could interfere with the shape-tracing window 
+    shape tracing container styles reset 
+    must contain all tags used in the container
 */
+
+#shape-tracing-container ul, 
+#shape-tracing-container li {
+    background-color: #fff;
+    margin:0;
+    padding:0;
+    color:#000;
+    font-size:100%;
+}
+
 #shape-tracing-container {
     clear:both;
     display:block;
@@ -21,8 +31,8 @@
 #shape-tracing-toolbar  {
     color:black;
     background: url(images/toolbar-bg.png) repeat-x;
-    height:17px;
-    padding-top:4px; /* total size 21px = height + padding */
+    height:21px;
+    padding-top:4px;
     padding-left:5px;
     padding-right:5px;
 }
@@ -39,11 +49,6 @@
     background: url(images/collapse.png) no-repeat;
 }
 
-#shape-tracing-window  {
-    background-color: #343131;
-    height:100%;
-}
-
 /* 
     this element is behind the stw to ensure the document is bigger and a scrollbar is added on the document
     so that the stw doesn't hide some content
@@ -63,4 +68,21 @@
 
 .shape-tracing-overlay {
     background-color:#eee;
+    cursor: pointer;
+}
+
+#shape-tracing-window  {
+    background-color: #fff;
+    height:100%;
+}
+
+#shape-tracing-window li
+{
+    list-style-type:inherit;
+}
+
+#shape-tracing-window ul 
+{
+    margin-left:10px;
+    padding-left:10px;
 }

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

@@ -7,7 +7,7 @@
     Script.Require("jQueryUI_Tabs").AtHead();
     Script.Require("jQueryUI_Resizable").AtHead();
     Script.Include("orchard-designertools-shapetracing.js").AtHead();
-    Style.Include("orchard-designertools-shapetracing.css").AtHead();
+    Style.Include("orchard-designertools-shapetracing.css");
     
     // Code Mirror
     Script.Include("CodeMirror/codemirror.js");
@@ -21,7 +21,7 @@
     Script.Include("CodeMirror/htmlmixed.js");
 }
 
-<script class="shape-tracing-wrapper shapeType-@Model.Metadata.Type shapeId-@Model.GetHashCode()" shape-id="@Model.GetHashCode()" title="@Model.Metadata.Type" ></script>@Display(Model.Metadata.ChildContent)<script class="shape-tracing-wrapper" end-of="@Model.GetHashCode()"></script>
+<script class="shape-tracing-wrapper" shape-id="@Model.GetHashCode()" shape-type="@Model.Metadata.Type"></script>@Display(Model.Metadata.ChildContent)<script class="shape-tracing-wrapper" end-of="@Model.GetHashCode()"></script>
     @{
         Layout.Zones["Tail"].Add(
             New.ShapeTracingMeta(