Bug 747220 - [layout view] update the UI. r=dcamp

browser/base/content/highlighter.css

@@ -116,7 +116,7 @@ html|*#highlighter-nodeinfobar-tagname {
 
 #inspector-layoutview-container > iframe {
   /* header size */
-  height: 22px;
+  height: 28px;
 }
 
 #inspector-layoutview-container:not([disable-transitions]) > iframe {
@@ -125,6 +125,6 @@ html|*#highlighter-nodeinfobar-tagname {
 }
 
 #inspector-layoutview-container > iframe[open] {
-  /* header size + layout view size: 22px + 155px */
-  height: 177px;
+  /* header size + layout view size: 28px + 145px */
+  height: 173px;
 }

browser/devtools/layoutview/view.css

@@ -15,9 +15,9 @@ body {
 
 #header {
   -moz-box-sizing: border-box;
-  font: 12px/14px monospace;
+  font: 12px/16px monospace;
   width: 100%;
-  padding: 3px 4px;
+  padding: 6px 9px;
   display: -moz-box;
 }
 
@@ -42,7 +42,7 @@ body[dir=rtl] > #header > #element-size {
 }
 
 #main {
-  margin: 10px;
+  margin: 0 10px 10px 10px;
   -moz-box-sizing: border-box;
   width: -moz-calc(100% - 2 * 10px);
   position: absolute;
@@ -173,8 +173,8 @@ body[dir=rtl] > #header > #element-size {
   pointer-events: none;
 }
 
-body.dim > #main,
-body.dim > #header > #element-size {
+body.dim > #main > p,
+body.dim > #main > .tooltip {
   visibility: hidden;
 }
 

browser/devtools/layoutview/view.xhtml

@@ -74,7 +74,6 @@
 
     <!-- Header: always visible, even when the view is closed. -->
     <a onclick="toggleView()" href="#" id="header">
-        <span>&elementSize.label;</span>
         <span id="element-size"></span>
         <span id="togglebutton"></span>
     </a>

browser/locales/en-US/chrome/browser/devtools/layoutview.dtd

@@ -12,9 +12,6 @@
   - A good criteria is the language in which you'd find the best
   - documentation on web development on the web. -->
 
-<!ENTITY elementSize.label      "Element Size: ">
-
-
 <!-- LOCALIZATION NOTE (*.tooltip): These tooltips are not regular tooltips.
   -  The text appears on the bottom right corner of the layout view when
   -  the corresponding box is hovered. -->

browser/themes/gnomestripe/devtools/layoutview.css

@@ -45,11 +45,14 @@ body {
 
 #togglebutton {
   background-image: url(layout-buttons.png);
-  width: 18px;
-  height: 18px;
-  margin-top: -3px;
+  width: 16px;
+  height: 16px;
+}
+
+body.open {
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
 }
 
 body.open > #header > #togglebutton {
-  background-position: -18px 0;
+  background-position: -16px 0;
 }

browser/themes/gnomestripe/jar.mn

@@ -148,6 +148,7 @@ browser.jar:
   skin/classic/browser/devtools/dropmarker.png        (devtools/dropmarker.png)
   skin/classic/browser/devtools/treepanel-button.png  (devtools/treepanel-button.png)
   skin/classic/browser/devtools/layout-background.png (devtools/layout-background.png)
+  skin/classic/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css        (devtools/layoutview.css)
   skin/classic/browser/devtools/layout-buttons.png    (devtools/layout-buttons.png)
   skin/classic/browser/devtools/debugger-pause.png     (devtools/debugger-pause.png)

browser/themes/pinstripe/devtools/layoutview.css

@@ -45,12 +45,14 @@ body {
 
 #togglebutton {
   background-image: url(layout-buttons.png);
-  width: 18px;
-  height: 18px;
-  margin-top: -3px;
+  width: 16px;
+  height: 16px;
+}
+
+body.open {
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
 }
 
 body.open > #header > #togglebutton {
-  background-position: -18px 0;
+  background-position: -16px 0;
 }
-

browser/themes/pinstripe/jar.mn

@@ -189,6 +189,7 @@ browser.jar:
   skin/classic/browser/devtools/dropmarker.png              (devtools/dropmarker.png)
   skin/classic/browser/devtools/treepanel-button.png        (devtools/treepanel-button.png)
   skin/classic/browser/devtools/layout-background.png       (devtools/layout-background.png)
+  skin/classic/browser/devtools/layout-background-grid.png  (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css              (devtools/layoutview.css)
   skin/classic/browser/devtools/layout-buttons.png          (devtools/layout-buttons.png)
   skin/classic/browser/devtools/debugger-pause.png          (devtools/debugger-pause.png)

browser/themes/winstripe/devtools/layoutview.css

@@ -45,12 +45,14 @@ body {
 
 #togglebutton {
   background-image: url(layout-buttons.png);
-  width: 18px;
-  height: 18px;
-  margin-top: -3px;
+  width: 16px;
+  height: 16px;
+}
+
+body.open {
+  background: url(layout-background-grid.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
 }
 
 body.open > #header > #togglebutton {
-  background-position: -18px 0;
+  background-position: -16px 0;
 }
-

browser/themes/winstripe/jar.mn

@@ -175,6 +175,7 @@ browser.jar:
         skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
         skin/classic/browser/devtools/treepanel-button.png          (devtools/treepanel-button.png)
         skin/classic/browser/devtools/layout-background.png         (devtools/layout-background.png)
+        skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
         skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
         skin/classic/browser/devtools/layout-buttons.png            (devtools/layout-buttons.png)
         skin/classic/browser/devtools/debugger-pause.png            (devtools/debugger-pause.png)
@@ -368,6 +369,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/dropmarker.png            (devtools/dropmarker.png)
         skin/classic/aero/browser/devtools/treepanel-button.png      (devtools/treepanel-button.png)
         skin/classic/aero/browser/devtools/layout-background.png     (devtools/layout-background.png)
+        skin/classic/aero/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
         skin/classic/aero/browser/devtools/layoutview.css            (devtools/layoutview.css)
         skin/classic/aero/browser/devtools/layout-buttons.png        (devtools/layout-buttons.png)
         skin/classic/aero/browser/devtools/debugger-pause.png        (devtools/debugger-pause.png)