Implementing new Shape Tracing features

--HG-- branch : dev extra : transplant_source : %8C%9B%3AQh0V%E1V%D3%A6%82%11%C7%DA%14%A0B%EC%17
2025-12-03 12:03:51 +08:00 · 2011-03-09 16:06:37 -08:00
parent d7add40ed1
commit 0cd33ab25d
10 changed files with 462 additions and 313 deletions
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
@@ -66,10 +66,12 @@
    <Content Include="Scripts\CodeMirror\htmlmixed.js" />
    <Content Include="Scripts\CodeMirror\javascript.js" />
    <Content Include="Scripts\CodeMirror\razor.js" />
+    <Content Include="Scripts\_orchard-designertools-shapetracing.js" />
    <Content Include="Styles\CodeMirror\codemirror.css" />
    <Content Include="Styles\CodeMirror\razor.css" />
    <Content Include="Styles\CodeMirror\css.css" />
    <Content Include="Styles\CodeMirror\javascript.css" />
+    <Content Include="Styles\foo_orchard-designertools-shapetracing.css" />
    <Content Include="Styles\Images\menu-glyph.png" />
    <Content Include="Scripts\orchard-designertools-shapetracing.js" />
    <Content Include="Styles\orchard-designertools-shapetracing.css" />
@@ -105,7 +107,8 @@
    <Folder Include="Models\" />
  </ItemGroup>
  <ItemGroup>
-    <None Include="Views\ShapeTracingMeta.cshtml" />
+    <Content Include="Views\ShapeTracingMeta.cshtml" />
+    <None Include="Views\_ShapeTracingMeta.cshtml" />
  </ItemGroup>
  <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/_orchard-designertools-shapetracing.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/_orchard-designertools-shapetracing.js
@@ -0,0 +1,111 @@
+(function ($) {
+    $(function () {
+        $("<div id='debug-control'><ul><li id='debug-shapes'>Shapes</li><li id='debug-zones'>Zones</li></ul><div id='debug-control-toggle'>&raquo;</div></div>")
+            .appendTo("body");
+        $("#debug-shapes").click(function () {
+            var _this = $(this);
+            $("html").toggleClass(_this.attr("id"));
+            $(this).toggleClass("debug-active");
+        });
+        $("#debug-zones").click(function () {
+            var _this = $(this);
+            $("html").toggleClass(_this.attr("id"));
+            $(this).toggleClass("debug-active");
+
+            if ($(this).hasClass("debug-active")) {
+
+                // renders the zone name in each zone
+                $(".zone").each(function () {
+                    var classes = $(this).attr("class").split(' ');
+
+                    for (i = 0; i < classes.length; i++) {
+                        if (classes[i].indexOf("zone-") === 0) {
+                            $(this).append('<div class="zone-name">' + classes[i].substr(classes[i].indexOf("-") + 1) + '</div>');
+                        }
+                    }
+
+                });
+            }
+            else {
+                $(".zone-name").remove();
+            }
+
+        });
+        $("#debug-control-toggle").click(function () {
+            var _this = $(this), open = "debug-open";
+            if (_this.is("." + open)) {
+                _this.prev().hide("fast", function () { _this.removeClass(open).html("&raquo;"); });
+            } else {
+                _this.prev().show("fast", function () { _this.addClass(open).html("&laquo;"); });
+            }
+        });
+
+        $("div.shape-tracing.wrapper").click(function (e) {
+            var _this = $(this);
+            var classes = $(this).attr("class").split(' ');
+            e.stopPropagation();
+            for (i = 0; i < classes.length; i++) {
+                if (classes[i].indexOf("shapeId-") === 0) {
+                    var shapeId = classes[i].substr(classes[i].indexOf("-") + 1);
+                    $("div.shape-tracing.wrapper").toggleClass('selected', false);
+                    _this.toggleClass('selected', true);
+                    $("div.shape-tracing.meta").toggle(false);
+                    $("div.shape-tracing.meta.shapeId-" + shapeId).toggle(true);
+                }
+            }
+        });
+
+        /* tabs */
+        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);
+
+                // hide all tabs and display the selected one
+                var wrapper = _this.parent().parent().first();
+                wrapper.children('.content').children().toggle(false);
+                wrapper.children('.content').children('div' + selector).toggle(true);
+
+                if (wrapper.children('.content').children('div' + selector).children('.CodeMirror').length == 0) {
+                    var textArea = wrapper.children('.content').children('div' + selector).children('textarea').get(0);
+                    if (textArea) {
+                        CodeMirror.fromTextArea(textArea, { mode: "razor", tabMode: "indent", height: "100%", readOnly : true });
+                    }
+                }
+
+            });
+        }
+
+        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);
--- 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,111 +1,17 @@
 (function ($) {
    $(function () {
-        $("<div id='debug-control'><ul><li id='debug-shapes'>Shapes</li><li id='debug-zones'>Zones</li></ul><div id='debug-control-toggle'>&raquo;</div></div>")
-            .appendTo("body");
-        $("#debug-shapes").click(function () {
-            var _this = $(this);
-            $("html").toggleClass(_this.attr("id"));
-            $(this).toggleClass("debug-active");
-        });
-        $("#debug-zones").click(function () {
-            var _this = $(this);
-            $("html").toggleClass(_this.attr("id"));
-            $(this).toggleClass("debug-active");
+        // append the shape tracing window container at the end of the document
+        $('<div id="shape-tracing-container"><div id="shape-tracing-toolbar">toolbar</div><div id="shape-tracing-window">window</div></div><div id="shape-tracing-container-ghost"/>').appendTo('body');

-            if ($(this).hasClass("debug-active")) {
-
-                // renders the zone name in each zone
-                $(".zone").each(function () {
-                    var classes = $(this).attr("class").split(' ');
-
-                    for (i = 0; i < classes.length; i++) {
-                        if (classes[i].indexOf("zone-") === 0) {
-                            $(this).append('<div class="zone-name">' + classes[i].substr(classes[i].indexOf("-") + 1) + '</div>');
-                        }
-                    }
-
-                });
-            }
-            else {
-                $(".zone-name").remove();
-            }
-
-        });
-        $("#debug-control-toggle").click(function () {
-            var _this = $(this), open = "debug-open";
-            if (_this.is("." + open)) {
-                _this.prev().hide("fast", function () { _this.removeClass(open).html("&raquo;"); });
-            } else {
-                _this.prev().show("fast", function () { _this.addClass(open).html("&laquo;"); });
-            }
-        });
-
-        $("div.shape-tracing.wrapper").click(function (e) {
-            var _this = $(this);
-            var classes = $(this).attr("class").split(' ');
-            e.stopPropagation();
-            for (i = 0; i < classes.length; i++) {
-                if (classes[i].indexOf("shapeId-") === 0) {
-                    var shapeId = classes[i].substr(classes[i].indexOf("-") + 1);
-                    $("div.shape-tracing.wrapper").toggleClass('selected', false);
-                    _this.toggleClass('selected', true);
-                    $("div.shape-tracing.meta").toggle(false);
-                    $("div.shape-tracing.meta.shapeId-" + shapeId).toggle(true);
-                }
-            }
-        });
-
-        /* tabs */
-        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);
-
-                // hide all tabs and display the selected one
-                var wrapper = _this.parent().parent().first();
-                wrapper.children('.content').children().toggle(false);
-                wrapper.children('.content').children('div' + selector).toggle(true);
-
-                if (wrapper.children('.content').children('div' + selector).children('.CodeMirror').length == 0) {
-                    var textArea = wrapper.children('.content').children('div' + selector).children('textarea').get(0);
-                    if (textArea) {
-                        CodeMirror.fromTextArea(textArea, { mode: "razor", tabMode: "indent", height: "100%", readOnly : true });
-                    }
-                }
-
-            });
-        }
-
-        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');
+        // preload main objects
+        var shapeTracingContainer = $('#shape-tracing-container');
+        var shapeTracingToolbar = $('#shape-tracing-toolbar');
+        var shapeTracingWindow = $('#shape-tracing-window');
+        var shapeTracingGhost = $('#shape-tracing-container-ghost');

+        // ensure the ghost has always the same size as the container
+        shapeTracingContainer.resize(function () { shapeTracingGhost.height(shapeTracingContainer.height()); });
+        shapeTracingContainer.trigger('resize');

    });
 })(jQuery);
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs
@@ -1,6 +1,4 @@
-using System;
-using System.IO;
-using System.Web;
+using System.IO;
 using System.Xml;
 using Orchard.DisplayManagement.Descriptors;
 using Orchard.DisplayManagement.Implementation;
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/UrlAlternatesFactory.cs
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/UrlAlternatesFactory.cs
@@ -39,7 +39,7 @@ namespace Orchard.DesignerTools.Services {
                    alternate => new [] { alternate }.Union(_urlAlternates.Select(a => alternate + "__url__" + a))
                    ).ToList();

-                // appends [ShapeType__url__[Url] alternates
+                // appends [ShapeType]__url__[Url] alternates
                displayedContext.ShapeMetadata.Alternates = _urlAlternates.Select(url => displayedContext.ShapeMetadata.Type + "__url__" + url)
                    .Union(displayedContext.ShapeMetadata.Alternates)
                    .ToList();
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/foo_orchard-designertools-shapetracing.css
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/foo_orchard-designertools-shapetracing.css
@@ -0,0 +1,218 @@
+#debug-control * {
+    margin:0 !important;
+    padding:0 !important;
+}
+#debug-control {
+    background:#666;    
+    border:1px solid #000;
+    color:#FFF;
+    float:left;
+    font:12px/12px Consolas,"Lucida Console",Monaco,monospace; 
+    left:0;
+    position:fixed;
+    top:0;
+}
+#debug-control .debug-active {
+    color:Lime;
+}
+#debug-control ul {
+    display:none;
+}
+#debug-control ul, #debug-control-toggle {
+    float:left;
+    padding:2px !important;
+}
+#debug-control li, #debug-control-toggle {
+    cursor:pointer;
+    display:inline;
+    list-style-type:none;
+    padding-left:2px !important;
+    padding-right:2px !important;
+    white-space:nowrap;
+}
+#debug-control li {
+    border-right:1px solid #999;
+}
+
+.debug-shapes .shape-tracing .wrapper {
+    background:#FFF;
+    /*border:1px dotted #CA7230;
+    margin:5px;*/
+    padding:0px;
+    display:inline-block;
+
+    /* when there is nothing inside the shape, force to the size of the smart tag */
+    min-width:20px;
+    min-height:20px;
+}
+
+.debug-shapes body {
+    margin-top:25px;
+}
+
+.debug-shapes div.shape-tracing.meta  {
+    clear:both;
+    display:block;
+    background:#ccc;
+    font-size:9pt;
+    font-family:Segoe;
+    color:black;
+    margin-top:5px;
+    left: 0px;
+    bottom: 0px;
+    position:fixed;
+    z-index:999;
+    width:100%;
+}
+
+.debug-zones .shapeType-Zone { 
+    border:1px dashed grey;
+    margin:5px;
+    position: relative;
+}
+
+.debug-zones .zone-name {
+    position:absolute; top: 0px; left: 0px;
+    display: block; background-color: #ddd; color: #434343; padding: 3px 6px;
+    filter:alpha(opacity=70);
+    opacity: 0.7;    
+}
+
+.meta .shape {
+    color:black;
+}
+
+.meta .alternates {
+    color:red;
+}
+
+.meta .wrappers {
+    color:green;
+}
+
+.debug-shapes div.wrapper.selected  {
+    background-color:#BAFFC3;
+}
+
+/* tabs */
+
+ul.debuggerMenu { margin:8px 0 -8px 0; }
+
+.debuggerMenu li {
+    color:#4053DE;
+    display: inline;
+    font-size:15px;
+    line-height:32px;
+}
+.debuggerMenu li {
+    margin:0 2px;
+    padding: 8px 18px 7px 18px;
+}
+.debuggerMenu li.middle, .debuggerMenu li.first, .debuggerMenu li.last {
+    border:1px solid #E4E5E6;
+    border-bottom:none;
+    background-color: #F5F5F5;
+}
+.debuggerMenu li.first {
+    margin-left:16px;
+}
+.debuggerMenu li.selected {
+    background-color: #fff;
+}
+.debuggerMenu li.selected, .debuggerMenu li:hover {
+    background-color: #fff;
+}
+.debuggerMenu li.selected a {
+    color: #3A822E;
+}
+
+.debug-shapes div.shape-tracing.meta .content {
+    background-color: #fff;
+    padding: 20px;
+    margin:8px 0 0 0;
+    border: 1px solid #e4e5e6;
+    height:12em;
+    overflow:auto;
+     /*CSS3 properties*/
+     border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+}
+
+.meta .model div.name, .meta ul.properties div.name
+{
+    display:block;
+    float:left;
+    width:30%;
+}
+
+.meta .model ul, .meta ul.properties
+{
+    padding:0;
+    margin-left:-15px;
+    margin:0;
+    list-style-type:none;
+}
+
+.meta .model ul li, .meta ul.properties li
+{
+    padding-left:15px;
+}
+
+.meta .model h3, .meta ul.properties 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-repeat:none;
+    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 
+{
+    background-repeat:none;
+    -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 
+{
+    background-repeat:none;
+    -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);
+}
+
+.content textarea {
+    height:50%;
+}
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
@@ -1,218 +1,40 @@
-#debug-control * {
-    margin:0 !important;
-    padding:0 !important;
-}
-#debug-control {
-    background:#666;    
-    border:1px solid #000;
-    color:#FFF;
-    float:left;
-    font:12px/12px Consolas,"Lucida Console",Monaco,monospace; 
-    left:0;
-    position:fixed;
-    top:0;
-}
-#debug-control .debug-active {
-    color:Lime;
-}
-#debug-control ul {
-    display:none;
-}
-#debug-control ul, #debug-control-toggle {
-    float:left;
-    padding:2px !important;
-}
-#debug-control li, #debug-control-toggle {
-    cursor:pointer;
-    display:inline;
-    list-style-type:none;
-    padding-left:2px !important;
-    padding-right:2px !important;
-    white-space:nowrap;
-}
-#debug-control li {
-    border-right:1px solid #999;
-}
-
-.debug-shapes .shape-tracing .wrapper {
-    background:#FFF;
-    /*border:1px dotted #CA7230;
-    margin:5px;*/
-    padding:0px;
-    display:inline-block;
-
-    /* when there is nothing inside the shape, force to the size of the smart tag */
-    min-width:20px;
-    min-height:20px;
-}
-
-.debug-shapes body {
-    margin-top:25px;
-}
-
-.debug-shapes div.shape-tracing.meta  {
+/* 
+    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 {
    clear:both;
    display:block;
-    background:#ccc;
-    font-size:9pt;
+    font-size:10pt;
    font-family:Segoe;
-    color:black;
    margin-top:5px;
    left: 0px;
    bottom: 0px;
    position:fixed;
    z-index:999;
    width:100%;
+    height:100px;
 }

-.debug-zones .shapeType-Zone { 
-    border:1px dashed grey;
-    margin:5px;
-    position: relative;
+#shape-tracing-toolbar  {
+    color:white;
+    background-color: #1D1A1A;
+    height:16px;
+    padding: 2px 0px 2px 0px;
 }

-.debug-zones .zone-name {
-    position:absolute; top: 0px; left: 0px;
-    display: block; background-color: #ddd; color: #434343; padding: 3px 6px;
-    filter:alpha(opacity=70);
-    opacity: 0.7;    
+#shape-tracing-window  {
+    color:white;
+    background-color: #343131;
+    height:100%;
 }

-.meta .shape {
-    color:black;
-}
-
-.meta .alternates {
-    color:red;
-}
-
-.meta .wrappers {
-    color:green;
-}
-
-.debug-shapes div.wrapper.selected  {
-    background-color:#BAFFC3;
-}
-
-/* tabs */
-
-ul.debuggerMenu { margin:8px 0 -8px 0; }
-
-.debuggerMenu li {
-    color:#4053DE;
-    display: inline;
-    font-size:15px;
-    line-height:32px;
-}
-.debuggerMenu li {
-    margin:0 2px;
-    padding: 8px 18px 7px 18px;
-}
-.debuggerMenu li.middle, .debuggerMenu li.first, .debuggerMenu li.last {
-    border:1px solid #E4E5E6;
-    border-bottom:none;
-    background-color: #F5F5F5;
-}
-.debuggerMenu li.first {
-    margin-left:16px;
-}
-.debuggerMenu li.selected {
-    background-color: #fff;
-}
-.debuggerMenu li.selected, .debuggerMenu li:hover {
-    background-color: #fff;
-}
-.debuggerMenu li.selected a {
-    color: #3A822E;
-}
-
-.debug-shapes div.shape-tracing.meta .content {
-    background-color: #fff;
-    padding: 20px;
-    margin:8px 0 0 0;
-    border: 1px solid #e4e5e6;
-    height:12em;
-    overflow:auto;
-     /*CSS3 properties*/
-     border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-}
-
-.meta .model div.name, .meta ul.properties div.name
-{
+/* 
+    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
+*/
+#shape-tracing-container-ghost  {
+    width:100%;
    display:block;
-    float:left;
-    width:30%;
-}
-
-.meta .model ul, .meta ul.properties
-{
-    padding:0;
-    margin-left:-15px;
-    margin:0;
-    list-style-type:none;
-}
-
-.meta .model ul li, .meta ul.properties li
-{
-    padding-left:15px;
-}
-
-.meta .model h3, .meta ul.properties 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-repeat:none;
-    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 
-{
-    background-repeat:none;
-    -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 
-{
-    background-repeat:none;
-    -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);
-}
-
-.content textarea {
-    height:50%;
 }
+    
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
@@ -1,4 +1,6 @@
-@functions {
+@*
+
+@functions {
    string FormatShapeFilename(string type, string themeId) {
        return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml";
    }
@@ -85,4 +87,6 @@
            <textarea id="html-@Model.ShapeId" name="html-@Model.ShapeId">@HttpUtility.HtmlEncode(Display(Model.ChildContent))</textarea>
        </div>
    </div>
-</div>
+</div>
+
+*@
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/_ShapeTracingMeta.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/_ShapeTracingMeta.cshtml
@@ -0,0 +1,88 @@
+@functions {
+    string FormatShapeFilename(string type, string themeId) {
+        return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml";
+    }
+}
+
+<div class="shape-tracing meta shapeId-@Model.ShapeId" style="display:none">
+    <ul class="debuggerMenu">
+        <li class="shape selected first"><a href="#">Shape</a></li>
+        <li class="model middle"><a href="#">Model</a></li>
+        <li class="placement middle"><a href="#">Placement</a></li>
+        <li class="templates middle"><a href="#">Templates</a></li>
+        <li class="source middle"><a href="#">Source</a></li>
+        <li class="html last"><a href="#">HTML</a></li>
+    </ul>
+
+    <div class="content">
+        <div class="shape">
+            <ul class="properties">
+                <li>
+                    <h3>
+                        <div class="name">Shape</div>
+                        <div class="value">@Model.ShapeType</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Definition</div>
+                        <div class="value">@Model.Definition</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Display Type</div>
+                        <div class="value">@(String.IsNullOrEmpty((string)Model.DisplayType) ? T("n/a").Text : Model.DisplayType.ToString())</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Position</div>
+                        <div class="value">@(String.IsNullOrEmpty((string)Model.Position) ? T("n/a").Text : Model.Position.ToString())</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Placement Source</div>
+                        <div class="value">@(String.IsNullOrEmpty((string)Model.PlacementSource) ? T("n/a").Text : Model.PlacementSource.ToString())</div>
+                    </h3>
+                </li>
+            </ul>
+        </div>
+            
+        <div class="model" style="display:none">
+            @(new MvcHtmlString(@Model.Dump))
+        </div>
+
+        <div class="placement" style="display:none">
+            <textarea id="placement-@Model.ShapeId" name="placement-@Model.ShapeId">@Model.PlacementContent</textarea>
+        </div>
+
+        <div class="templates" style="display:none">
+            <div class="alternates">
+                <span>Alternates</span>
+                @foreach(var alternate in Model.Alternates) {
+                    var formatted = @FormatShapeFilename(alternate, WorkContext.CurrentTheme.Id);
+                    <div>@formatted</div>
+                }
+            </div>
+            <div class="wrappers">
+                <span >Wrappers</span>
+                @foreach(var wrapper in Model.Wrappers) {
+                    if(wrapper != "ShapeTracing_Wrapper") {
+                        var formatted = @FormatShapeFilename(wrapper, WorkContext.CurrentTheme.Id);
+                        <div>@formatted</div>
+                    }
+                }
+            </div>
+        </div>
+
+        <div class="source" style="display:none">
+            <textarea id="source-@Model.ShapeId" name="source-@Model.ShapeId">@Model.DefinitionContent</textarea>
+        </div>
+
+        <div class="html" style="display:none">
+            <textarea id="html-@Model.ShapeId" name="html-@Model.ShapeId">@HttpUtility.HtmlEncode(Display(Model.ChildContent))</textarea>
+        </div>
+    </div>
+</div>
--- a/src/Orchard.Web/Modules/Orchard.jQuery/ResourceManifest.cs
+++ b/src/Orchard.Web/Modules/Orchard.jQuery/ResourceManifest.cs
@@ -4,7 +4,6 @@ namespace Orchard.UI.Resources {
            var manifest = builder.Add();
            manifest.DefineScript("jQuery").SetUrl("jquery-1.4.2.min.js", "jquery-1.4.2.js").SetVersion("1.4.2");

-            // todo: include min versions
            manifest.DefineScript("jQueryUtils").SetUrl("jquery.utils.js").SetDependencies("jQuery");
            manifest.DefineScript("jQueryUI_Core").SetUrl("jquery.ui.core.js").SetVersion("1.8b1").SetDependencies("jQuery");
            manifest.DefineScript("jQueryUI_Widget").SetUrl("jquery.ui.widget.js").SetVersion("1.8b1").SetDependencies("jQuery");