Tweaking the UI debugging...UI...so it's not so "in yo' face" by default

--HG--
branch : theming

src/Orchard.Web/Modules/Orchard.DevTools/Orchard.DevTools.csproj

@@ -127,6 +127,7 @@
     </ProjectReference>
   </ItemGroup>
   <ItemGroup>
+    <None Include="Views\HackScript.cshtml" />
     <None Include="Views\HackStyle.cshtml" />
     <None Include="Views\ThinBorder.cshtml" />
     <None Include="Views\Home\FormShapes.cshtml" />

src/Orchard.Web/Modules/Orchard.DevTools/Shapes.cs

@@ -9,8 +9,10 @@ namespace Orchard.DevTools {
         public void Created(ShapeCreatedContext context) {
             if (context.ShapeType != "Layout" && context.ShapeType != "DocumentZone")
                 context.Shape.Metadata.Wrappers.Add("ThinBorder");
-            if (context.ShapeType == "Header")
+            if (context.ShapeType == "Header") {
+                context.Shape.Metadata.Wrappers.Add("HackScript");
                 context.Shape.Metadata.Wrappers.Add("HackStyle");
+            }
         }
     }
 }

src/Orchard.Web/Modules/Orchard.DevTools/Views/HackScript.cshtml

@@ -0,0 +1,31 @@
+<script>
+    if (typeof jQuery == 'undefined') {
+        document.write(unescape("%3Cscript src='/orchardlocal/core/shapes/scripts/jquery-1.4.2.min.js'%3E%3C/script%3E"));
+    }
+</script>
+<script>
+    (function($) {
+        $(function() {
+            $("<div id='debug-control'><ul><li id='debug-shape-templates'>shape templates</li></ul><div id='debug-control-toggle'>&raquo;</div></div>")
+                .appendTo("body");
+            $("#debug-shape-templates").click(function() {
+                var _this = $(this);
+                $("html").toggleClass(_this.attr("id"));
+                $(this).toggleClass("debug-active");
+            });
+            $("#debug-control-toggle").click(function() {
+                var _this = $(this), open = "debug-open";
+                if (_this.is(":animated")) {
+                    alert("aghhhh!");
+                    return;
+                }
+                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;");});
+                }
+            });
+        });
+    })(jQuery);
+</script>
+@Display(Model.Metadata.ChildContent)

src/Orchard.Web/Modules/Orchard.DevTools/Views/HackStyle.cshtml

@@ -1,10 +1,48 @@
 <style>
-    .thin-dotted-orange-border-with-a-little-padding {
+    #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 :hover {
+        color:yellow;
+    }
+    #debug-control .debug-active {
+        color:greenyellow;
+    }
+    #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;
+    }
+    html.debug-shape-templates .thin-dotted-orange-border-with-a-little-padding {
         background:#FFF;
         border:1px dotted #CA7230;
         padding:5px;
     }
-    .thin-dotted-orange-border-with-a-little-padding:hover {
+    html.debug-shape-templates .thin-dotted-orange-border-with-a-little-padding:hover {
         background:#E0E9EE;
     }
 </style>