Bug 663778 - Changes to layout view for box model highlighter r=pbrosset

browser/devtools/layoutview/view.css

@@ -54,23 +54,23 @@ body {
   }
 }
 
-
-#margins {
-  padding: 28px;
-}
-
-#content {
-  height: 20px;
+#content,
+#borders {
   border-width: 1px;
 }
 
+#content {
+  height: 25px;
+}
+
+#margins,
 #padding {
+  border-style: solid;
   border-width: 25px;
 }
 
 #borders {
-  border-width: 2px;
-  box-shadow: 0 0 16px black;
+  padding: 25px;
 }
 
 #main > p {
@@ -89,55 +89,44 @@ body {
   cursor: default;
 }
 
-.border.top {
-  left: 0; top: 23px;
-  width: 98px;
-}
-
-.border.bottom {
-  right: 0; bottom: 22px;
-  width: 98px;
-  top: auto;
-}
-
-.border.left {
-  top: 42px; left: 0;
-  width: 56px;
-}
-
-.border.right{
-  bottom: 42px; right: 0;
-  width: 56px;
-  top: auto;
-}
-
-.top, .bottom {
+.top,
+.bottom {
   width: calc(100% - 2px);
   text-align: center;
 }
 
+.padding.top {
+  top: 55px;
+}
+
+.padding.bottom {
+  bottom: 57px;
+}
+
+.border.top {
+  top: 30px;
+}
+
+.border.bottom {
+  bottom: 31px;
+}
+
 .margin.top {
-  top: 8px;
+  top: 5px;
 }
 
 .margin.bottom {
   bottom: 6px;
 }
 
-.padding.top {
-  top: 35px;
-}
-
-.padding.bottom {
-  bottom: 35px;
-}
-
 .size,
 .margin.left,
 .margin.right,
+.border.left,
+.border.right,
 .padding.left,
 .padding.right {
-  top: 0;
+  top: 22px;
   line-height: 132px;
 }
 
@@ -146,15 +135,30 @@ body {
 }
 
 .margin.right,
-.margin.left {
-  width: 28px;
-}
-
+.margin.left,
+.border.left,
+.border.right,
 .padding.right,
 .padding.left {
   width: 25px;
 }
 
+.padding.left {
+  left: 52px;
+}
+
+.padding.right {
+  right: 51px;
+}
+
+.border.left {
+  left: 26px;
+}
+
+.border.right {
+  right: 26px;
+}
+
 .margin.right {
   right: 0;
 }
@@ -163,14 +167,6 @@ body {
   left: 0;
 }
 
-.padding.left {
-  left: 30px;
-}
-
-.padding.right {
-  right: 30px;
-}
-
 .tooltip {
   position: absolute;
   bottom: 0;

browser/devtools/layoutview/view.js

@@ -239,12 +239,41 @@ LayoutView.prototype = {
 
     this._lastRequest = lastRequest;
     return this._lastRequest;
-  }
-}
+  },
+
+  showBoxModel: function(options={}) {
+    let toolbox = this.inspector.toolbox;
+    let nodeFront = this.inspector.selection.nodeFront;
+
+    toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
+  },
+
+  hideBoxModel: function() {
+    let toolbox = this.inspector.toolbox;
+
+    toolbox.highlighterUtils.unhighlight();
+  },
+};
 
 let elts;
 let tooltip;
 
+let onmouseover = function(e) {
+  let region = e.target.getAttribute("data-box");
+
+  tooltip.textContent = e.target.getAttribute("tooltip");
+  this.layoutview.showBoxModel({region: region});
+
+  return false;
+}.bind(window);
+
+let onmouseout = function(e) {
+  tooltip.textContent = "";
+  this.layoutview.hideBoxModel();
+
+  return false;
+}.bind(window);
+
 window.setPanel = function(panel) {
   this.layoutview = new LayoutView(panel, window);
 
@@ -276,11 +305,3 @@ window.onunload = function() {
     }
   }
 };
-
-function onmouseover(e) {
-  tooltip.textContent = e.target.getAttribute("tooltip");
-}
-
-function onmouseout(e) {
-  tooltip.textContent = "";
-}

browser/devtools/layoutview/view.xhtml

@@ -30,31 +30,31 @@
 
     <div id="main">
 
-      <div id="margins" tooltip="&margins.tooltip;">
-        <div id="borders" tooltip="&borders.tooltip;">
-          <div id="padding" tooltip="&padding.tooltip;">
-            <div id="content" tooltip="&content.tooltip;">
+      <div id="margins" data-box="margin" tooltip="&margins.tooltip;">
+        <div id="borders" data-box="border" tooltip="&borders.tooltip;">
+          <div id="padding" data-box="padding" tooltip="&padding.tooltip;">
+            <div id="content" data-box="content" tooltip="&content.tooltip;">
             </div>
           </div>
         </div>
       </div>
 
-      <p class="border top"><span tooltip="border-top"></span></p>
-      <p class="border right"><span tooltip="border-right"></span></p>
-      <p class="border bottom"><span tooltip="border-bottom"></span></p>
-      <p class="border left"><span tooltip="border-left"></span></p>
+      <p class="border top"><span data-box="border" tooltip="border-top"></span></p>
+      <p class="border right"><span data-box="border" tooltip="border-right"></span></p>
+      <p class="border bottom"><span data-box="border" tooltip="border-bottom"></span></p>
+      <p class="border left"><span data-box="border" tooltip="border-left"></span></p>
 
-      <p class="margin top"><span tooltip="margin-top"></span></p>
-      <p class="margin right"><span tooltip="margin-right"></span></p>
-      <p class="margin bottom"><span tooltip="margin-bottom"></span></p>
-      <p class="margin left"><span tooltip="margin-left"></span></p>
+      <p class="margin top"><span data-box="margin" tooltip="margin-top"></span></p>
+      <p class="margin right"><span data-box="margin" tooltip="margin-right"></span></p>
+      <p class="margin bottom"><span data-box="margin" tooltip="margin-bottom"></span></p>
+      <p class="margin left"><span data-box="margin" tooltip="margin-left"></span></p>
 
-      <p class="padding top"><span tooltip="padding-top"></span></p>
-      <p class="padding right"><span tooltip="padding-right"></span></p>
-      <p class="padding bottom"><span tooltip="padding-bottom"></span></p>
-      <p class="padding left"><span tooltip="padding-left"></span></p>
+      <p class="padding top"><span data-box="padding" tooltip="padding-top"></span></p>
+      <p class="padding right"><span data-box="padding" tooltip="padding-right"></span></p>
+      <p class="padding bottom"><span data-box="padding" tooltip="padding-bottom"></span></p>
+      <p class="padding left"><span data-box="padding" tooltip="padding-left"></span></p>
 
-      <p class="size"><span tooltip="&content.tooltip;"></span></p>
+      <p class="size"><span data-box="content" tooltip="&content.tooltip;"></span></p>
 
       <span class="tooltip"></span>
 

browser/themes/linux/devtools/layoutview.css

@@ -11,36 +11,40 @@
 }
 
 .theme-body {
-  color: hsl(210,100%,85%) !important;
+  color: hsl(210,53%,45%) !important;
   box-sizing: border-box;
 }
 
 #main {
+  background-color: white;
   border-color: hsla(210,100%,85%,0.7);
   border-style: dotted;
 }
 
-#main > .border {
-  color: hsl(210,53%,45%);
-}
-
-.border > span {
-  background-color: hsl(210,100%,85%);
-  border-radius: 2px;
-  padding: 0 4px;
-}
-
 #content {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted 
+  background-color: #80d4ff;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
+}
+
+#padding,
+#margins {
+  border-color: hsla(210,100%,85%,0.2);
+  outline: dotted 1px hsl(210,100%,85%);
 }
 
 #padding {
-  border-color: hsla(210,100%,85%,0.2);
-  border-style: solid;
+  background-color: #66cc52;
 }
 
 #borders {
-  border-style: solid;
+  background-color: #ffe431;
+  border-style: dotted;
   border-color: hsl(210,100%,85%);
+  box-shadow: 0 0 8px #000;
+}
+
+#margins {
+  background-color: #d89b28;
+  opacity: 0.6;
 }

browser/themes/osx/devtools/layoutview.css

@@ -11,36 +11,40 @@
 }
 
 .theme-body {
-  color: hsl(210,100%,85%) !important;
+  color: hsl(210,53%,45%) !important;
   box-sizing: border-box;
 }
 
 #main {
+  background-color: white;
   border-color: hsla(210,100%,85%,0.7);
   border-style: dotted;
 }
 
-#main > .border {
-  color: hsl(210,53%,45%);
-}
-
-.border > span {
-  background-color: hsl(210,100%,85%);
-  border-radius: 2px;
-  padding: 0 4px;
-}
-
 #content {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted 
+  background-color: #80d4ff;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
+}
+
+#padding,
+#margins {
+  border-color: hsla(210,100%,85%,0.2);
+  outline: dotted 1px hsl(210,100%,85%);
 }
 
 #padding {
-  border-color: hsla(210,100%,85%,0.2);
-  border-style: solid;
+  background-color: #66cc52;
 }
 
 #borders {
-  border-style: solid;
+  background-color: #ffe431;
+  border-style: dotted;
   border-color: hsl(210,100%,85%);
+  box-shadow: 0 0 8px #000;
+}
+
+#margins {
+  background-color: #d89b28;
+  opacity: 0.6;
 }

browser/themes/windows/devtools/layoutview.css

@@ -11,36 +11,40 @@
 }
 
 .theme-body {
-  color: hsl(210,100%,85%) !important;
+  color: hsl(210,53%,45%) !important;
   box-sizing: border-box;
 }
 
 #main {
+  background-color: white;
   border-color: hsla(210,100%,85%,0.7);
   border-style: dotted;
 }
 
-#main > .border {
-  color: hsl(210,53%,45%);
-}
-
-.border > span {
-  background-color: hsl(210,100%,85%);
-  border-radius: 2px;
-  padding: 0 4px;
-}
-
 #content {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted 
+  background-color: #80d4ff;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
+}
+
+#padding,
+#margins {
+  border-color: hsla(210,100%,85%,0.2);
+  outline: dotted 1px hsl(210,100%,85%);
 }
 
 #padding {
-  border-color: hsla(210,100%,85%,0.2);
-  border-style: solid;
+  background-color: #66cc52;
 }
 
 #borders {
-  border-style: solid;
+  background-color: #ffe431;
+  border-style: dotted;
   border-color: hsl(210,100%,85%);
+  box-shadow: 0 0 8px #000;
+}
+
+#margins {
+  background-color: #d89b28;
+  opacity: 0.6;
 }