Bug 663778 - Changes to layout view for box model highlighter r=pbrosset
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Sat, 08 Mar 2014 18:10:44 +0000
changeset 173477 c20ad6e9c62e3b5e37fed0bdf5d753d88ee9168d
parent 173476 56c230aeaa61390b232b6beb8cfbe4c2f016f06b
child 173478 9b860b0a728209dd1927e502a4114abc35c86325
push id5677
push usermratcliffe@mozilla.com
push dateThu, 13 Mar 2014 22:29:17 +0000
treeherderfx-team@436a9dfc6cb4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs663778
milestone30.0a1
Bug 663778 - Changes to layout view for box model highlighter r=pbrosset
browser/devtools/layoutview/view.css
browser/devtools/layoutview/view.js
browser/devtools/layoutview/view.xhtml
browser/themes/linux/devtools/layoutview.css
browser/themes/osx/devtools/layoutview.css
browser/themes/windows/devtools/layoutview.css
--- a/browser/devtools/layoutview/view.css
+++ b/browser/devtools/layoutview/view.css
@@ -49,33 +49,33 @@ body {
   body {
     position: absolute;
     width: 320px;
     left: -160px;
     margin-left: 50%;
   }
 }
 
-
-#margins {
-  padding: 28px;
+#content,
+#borders {
+  border-width: 1px;
 }
 
 #content {
-  height: 20px;
-  border-width: 1px;
+  height: 25px;
 }
 
+#margins,
 #padding {
+  border-style: solid;
   border-width: 25px;
 }
 
 #borders {
-  border-width: 2px;
-  box-shadow: 0 0 16px black;
+  padding: 25px;
 }
 
 #main > p {
   position: absolute;
   pointer-events: none;
 }
 
 #main > p {
@@ -84,98 +84,94 @@ body {
 }
 
 #main > p > span {
   vertical-align: middle;
   pointer-events: auto;
   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;
 }
 
 .size {
   width: calc(100% - 2px);
 }
 
 .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;
 }
 
 .margin.left {
   left: 0;
 }
 
-.padding.left {
-  left: 30px;
-}
-
-.padding.right {
-  right: 30px;
-}
-
 .tooltip {
   position: absolute;
   bottom: 0;
   right: 2px;
   pointer-events: none;
 }
 
 body.dim > #header > #element-position,
--- a/browser/devtools/layoutview/view.js
+++ b/browser/devtools/layoutview/view.js
@@ -234,22 +234,51 @@ LayoutView.prototype = {
       }
 
       this.inspector.emit("layoutview-updated");
       return null;
     });
 
     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);
 
   // Tooltip mechanism
   elts = document.querySelectorAll("*[tooltip]");
   tooltip = document.querySelector(".tooltip");
   for (let i = 0; i < elts.length; i++) {
     let elt = elts[i];
@@ -271,16 +300,8 @@ window.onunload = function() {
   if (elts) {
     for (let i = 0; i < elts.length; i++) {
       let elt = elts[i];
       elt.removeEventListener("mouseover", onmouseover, true);
       elt.removeEventListener("mouseout", onmouseout, true);
     }
   }
 };
-
-function onmouseover(e) {
-  tooltip.textContent = e.target.getAttribute("tooltip");
-}
-
-function onmouseout(e) {
-  tooltip.textContent = "";
-}
\ No newline at end of file
--- a/browser/devtools/layoutview/view.xhtml
+++ b/browser/devtools/layoutview/view.xhtml
@@ -25,40 +25,40 @@
   <body class="theme-body devtools-monospace">
 
     <p id="header">
       <span id="element-size"></span><span id="element-position"></span>
     </p>
 
     <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>
 
     </div>
 
   </body>
 </html>
--- a/browser/themes/linux/devtools/layoutview.css
+++ b/browser/themes/linux/devtools/layoutview.css
@@ -6,41 +6,45 @@
   background-image: url(layout-background-grid.png);
 }
 
 .theme-light .theme-body {
   background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
 }
 
 .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%);
+#content {
+  background-color: #80d4ff;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
 }
 
-.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 
+#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;
+}
--- a/browser/themes/osx/devtools/layoutview.css
+++ b/browser/themes/osx/devtools/layoutview.css
@@ -6,41 +6,45 @@
   background-image: url(layout-background-grid.png);
 }
 
 .theme-light .theme-body {
   background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
 }
 
 .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%);
+#content {
+  background-color: #80d4ff;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
 }
 
-.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 
+#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;
+}
--- a/browser/themes/windows/devtools/layoutview.css
+++ b/browser/themes/windows/devtools/layoutview.css
@@ -6,41 +6,45 @@
   background-image: url(layout-background-grid.png);
 }
 
 .theme-light .theme-body {
   background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
 }
 
 .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%);
+#content {
+  background-color: #80d4ff;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
 }
 
-.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 
+#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;
+}