From 624cd1f39603b15e743b158eeccff078dcc38dc0 Mon Sep 17 00:00:00 2001
From: Paul Rouget <paul@mozilla.com>
Date: Mon, 12 Mar 2012 14:39:56 +0100
Subject: [PATCH] Bug 683954 - [Layout] Implement an abstract view of the
 layout of the selected node. r=dcamp, r=jwalker

---
 browser/app/profile/firefox.js                |   4 +
 browser/base/content/highlighter.css          |  12 +
 browser/devtools/Makefile.in                  |   1 +
 browser/devtools/highlighter/inspector.jsm    |  18 +-
 browser/devtools/jar.mn                       |   2 +
 browser/devtools/layoutview/LayoutView.jsm    | 317 ++++++++++++++++++
 browser/devtools/layoutview/Makefile.in       |  53 +++
 browser/devtools/layoutview/test/Makefile.in  |  53 +++
 .../layoutview/test/browser_layoutview.js     | 134 ++++++++
 browser/devtools/layoutview/view.css          | 176 ++++++++++
 browser/devtools/layoutview/view.xhtml        | 149 ++++++++
 .../chrome/browser/devtools/layoutview.dtd    |  21 ++
 browser/locales/jar.mn                        |   1 +
 .../devtools/layout-background.png            | Bin 0 -> 3217 bytes
 .../gnomestripe/devtools/layout-buttons.png   | Bin 0 -> 1237 bytes
 .../gnomestripe/devtools/layoutview.css       |  87 +++++
 browser/themes/gnomestripe/jar.mn             |   3 +
 .../pinstripe/devtools/layout-background.png  | Bin 0 -> 3217 bytes
 .../pinstripe/devtools/layout-buttons.png     | Bin 0 -> 1237 bytes
 .../themes/pinstripe/devtools/layoutview.css  |  88 +++++
 browser/themes/pinstripe/jar.mn               |   3 +
 .../winstripe/devtools/layout-background.png  | Bin 0 -> 3217 bytes
 .../winstripe/devtools/layout-buttons.png     | Bin 0 -> 1237 bytes
 .../themes/winstripe/devtools/layoutview.css  |  88 +++++
 browser/themes/winstripe/jar.mn               |   6 +
 25 files changed, 1215 insertions(+), 1 deletion(-)
 create mode 100644 browser/devtools/layoutview/LayoutView.jsm
 create mode 100644 browser/devtools/layoutview/Makefile.in
 create mode 100644 browser/devtools/layoutview/test/Makefile.in
 create mode 100644 browser/devtools/layoutview/test/browser_layoutview.js
 create mode 100644 browser/devtools/layoutview/view.css
 create mode 100644 browser/devtools/layoutview/view.xhtml
 create mode 100644 browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
 create mode 100644 browser/themes/gnomestripe/devtools/layout-background.png
 create mode 100644 browser/themes/gnomestripe/devtools/layout-buttons.png
 create mode 100644 browser/themes/gnomestripe/devtools/layoutview.css
 create mode 100644 browser/themes/pinstripe/devtools/layout-background.png
 create mode 100644 browser/themes/pinstripe/devtools/layout-buttons.png
 create mode 100644 browser/themes/pinstripe/devtools/layoutview.css
 create mode 100644 browser/themes/winstripe/devtools/layout-background.png
 create mode 100644 browser/themes/winstripe/devtools/layout-buttons.png
 create mode 100644 browser/themes/winstripe/devtools/layoutview.css

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index 0b68bb1c106..174c54b9997 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1049,6 +1049,10 @@ pref("devtools.inspector.htmlPanelOpen", false);
 pref("devtools.inspector.sidebarOpen", false);
 pref("devtools.inspector.activeSidebar", "ruleview");
 
+// Enable the Layout View
+pref("devtools.layoutview.enabled", false);
+pref("devtools.layoutview.open", false);
+
 // Enable the Debugger
 pref("devtools.debugger.enabled", false);
 
diff --git a/browser/base/content/highlighter.css b/browser/base/content/highlighter.css
index a43c1dbf1ac..4475f7c767e 100644
--- a/browser/base/content/highlighter.css
+++ b/browser/base/content/highlighter.css
@@ -100,3 +100,15 @@ html|*#highlighter-nodeinfobar-tagname {
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
   display: none;
 }
+
+#inspector-layoutview-container > iframe {
+  -moz-transition-property: height;
+  -moz-transition-duration: 0.1s;
+  /* header size */
+  height: 22px;
+}
+
+#inspector-layoutview-container > iframe[open] {
+  /* header size + layout view size: 22px + 155px */
+  height: 177px;
+}
diff --git a/browser/devtools/Makefile.in b/browser/devtools/Makefile.in
index 67d1f34199b..e5b7ae07c24 100644
--- a/browser/devtools/Makefile.in
+++ b/browser/devtools/Makefile.in
@@ -55,6 +55,7 @@ DIRS = \
   tilt \
   scratchpad \
   debugger \
+  layoutview \
   shared \
   $(NULL)
 
diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
index b26d50d0024..ee6f5d389de 100644
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -56,6 +56,7 @@ Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/TreePanel.jsm");
 Cu.import("resource:///modules/highlighter.jsm");
+Cu.import("resource:///modules/devtools/LayoutView.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 
 // Inspector notifications dispatched through the nsIObserverService.
@@ -1405,6 +1406,12 @@ InspectorStyleSidebar.prototype = {
 
   destroy: function ISS_destroy()
   {
+    // close the Layout View
+    if (this._layoutview) {
+      this._layoutview.destroy();
+      this._layoutview = null;
+    }
+
     for each (let toolID in Object.getOwnPropertyNames(this._tools)) {
       this.removeTool(toolID);
     }
@@ -1514,10 +1521,19 @@ InspectorStyleSidebar.prototype = {
 
     this._inspector._sidebarOpen = true;
     Services.prefs.setBoolPref("devtools.inspector.sidebarOpen", true);
+
+    // Instantiate the Layout View if needed.
+    if (Services.prefs.getBoolPref("devtools.layoutview.enabled")
+        && !this._layoutview) {
+      this._layoutview = new LayoutView({
+        document: this._chromeDoc,
+        inspector: this._inspector,
+      });
+    }
   },
 
   /**
-   * Hides the sidebar, updating the stored visiblity pref.
+   * Hides the sidebar, updating the stored visibility pref.
    */
   hide: function ISS_hide()
   {
diff --git a/browser/devtools/jar.mn b/browser/devtools/jar.mn
index d2c29cba65d..38795a34a19 100644
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -9,6 +9,8 @@ browser.jar:
     content/browser/devtools/csshtmltree.xul      (styleinspector/csshtmltree.xul)
     content/browser/devtools/cssruleview.xul      (styleinspector/cssruleview.xul)
     content/browser/devtools/styleinspector.css   (styleinspector/styleinspector.css)
+*   content/browser/devtools/layoutview/view.xhtml  (layoutview/view.xhtml)
+    content/browser/devtools/layoutview/view.css  (layoutview/view.css)
     content/browser/orion.js                      (sourceeditor/orion/orion.js)
 *   content/browser/source-editor-overlay.xul     (sourceeditor/source-editor-overlay.xul)
 *   content/browser/debugger.xul                  (debugger/debugger.xul)
diff --git a/browser/devtools/layoutview/LayoutView.jsm b/browser/devtools/layoutview/LayoutView.jsm
new file mode 100644
index 00000000000..b243c61438e
--- /dev/null
+++ b/browser/devtools/layoutview/LayoutView.jsm
@@ -0,0 +1,317 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is the Mozilla Layout Module.
+ *
+ * The Initial Developer of the Original Code is
+ * The Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2012
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+"use strict";
+
+const Cu = Components.utils;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/inspector.jsm");
+Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
+
+var EXPORTED_SYMBOLS = ["LayoutView"];
+
+function LayoutView(aOptions)
+{
+  this.chromeDoc = aOptions.document;
+  this.inspector = aOptions.inspector;
+  this.browser = this.inspector.chromeWindow.gBrowser;
+
+  this.init();
+}
+
+LayoutView.prototype = {
+  init: function LV_init() {
+
+    this.update = this.update.bind(this);
+    this.onMessage = this.onMessage.bind(this);
+
+    this.isOpen = false;
+    this.documentReady = false;
+
+    // Is the layout view was open before?
+    if (!("_layoutViewIsOpen" in this.inspector)) {
+      this.inspector._layoutViewIsOpen =
+        Services.prefs.getBoolPref("devtools.layoutview.open");
+    }
+
+    // We update the values when:
+    //  a node is locked
+    //  we get the MozAfterPaint event and the node is locked
+    function onLock() {
+      this.undim();
+      this.update();
+      // We make sure we never add 2 listeners.
+      if (!this.trackingPaint) {
+        this.browser.addEventListener("MozAfterPaint", this.update, true);
+        this.trackingPaint = true;
+      }
+    }
+
+    function onUnlock() {
+      this.browser.removeEventListener("MozAfterPaint", this.update, true);
+      this.trackingPaint = false;
+      this.dim();
+    }
+
+    this.onLock = onLock.bind(this);
+    this.onUnlock = onUnlock.bind(this);
+    this.inspector.on("locked", this.onLock);
+    this.inspector.on("unlocked", this.onUnlock);
+
+    // Build the layout view in the sidebar.
+    this.buildView();
+
+    // Get messages from the iframe.
+    this.inspector.chromeWindow.addEventListener("message", this.onMessage, true);
+
+    // Store for the different dimensions of the node.
+    // 'selector' refers to the element that holds the value in view.xhtml;
+    // 'property' is what we are measuring;
+    // 'value' is the computed dimension, computed in update().
+    this.map = {
+      marginTop: {selector: ".margin.top > span",
+                  property: "margin-top",
+                  value: undefined},
+      marginBottom: {selector: ".margin.bottom > span",
+                  property: "margin-bottom",
+                  value: undefined},
+      marginLeft: {selector: ".margin.left > span",
+                  property: "margin-left",
+                  value: undefined},
+      marginRight: {selector: ".margin.right > span",
+                  property: "margin-right",
+                  value: undefined},
+      paddingTop: {selector: ".padding.top > span",
+                  property: "padding-top",
+                  value: undefined},
+      paddingBottom: {selector: ".padding.bottom > span",
+                  property: "padding-bottom",
+                  value: undefined},
+      paddingLeft: {selector: ".padding.left > span",
+                  property: "padding-left",
+                  value: undefined},
+      paddingRight: {selector: ".padding.right > span",
+                  property: "padding-right",
+                  value: undefined},
+      borderTop: {selector: ".border.top > span",
+                  property: "border-top-width",
+                  value: undefined},
+      borderBottom: {selector: ".border.bottom > span",
+                  property: "border-bottom-width",
+                  value: undefined},
+      borderLeft: {selector: ".border.left > span",
+                  property: "border-left-width",
+                  value: undefined},
+      borderRight: {selector: ".border.right > span",
+                  property: "border-right-width",
+                  value: undefined},
+    };
+  },
+
+  /**
+   * Destroy the nodes. Remove listeners.
+   */
+  destroy: function LV_destroy() {
+    this.inspector.removeListener("locked", this.onLock);
+    this.inspector.removeListener("unlocked", this.onUnlock);
+    this.browser.removeEventListener("MozAfterPaint", this.update, true);
+    this.inspector.chromeWindow.removeEventListener("message", this.onMessage, true);
+    this.close();
+    this.iframe = null;
+    this.view.parentNode.removeChild(this.view);
+  },
+
+  /**
+   * Build the Layout container:
+   *
+   * <vbox id="inspector-layoutview-container">
+   *  <iframe src="chrome://browser/content/devtools/layoutview/view.xhtml"/>
+   * </vbox>
+   */
+  buildView: function LV_buildPanel() {
+    this.iframe = this.chromeDoc.createElement("iframe");
+    this.iframe.setAttribute("src", "chrome://browser/content/devtools/layoutview/view.xhtml");
+
+    this.view = this.chromeDoc.createElement("vbox");
+    this.view.id = "inspector-layoutview-container";
+    this.view.appendChild(this.iframe);
+
+    let sidebar = this.chromeDoc.getElementById("devtools-sidebar-box");
+    sidebar.appendChild(this.view);
+  },
+
+  /**
+   * Called when the iframe is loaded.
+   */
+  onDocumentReady: function LV_onDocumentReady() {
+    this.documentReady = true;
+    this.doc = this.iframe.contentDocument;
+
+    // We can't do that earlier because open() and close() need to do stuff
+    // inside the iframe.
+
+    if (this.inspector.locked)
+      this.onLock();
+    else
+      this.onUnlock();
+
+    if (this.inspector._layoutViewIsOpen) {
+      this.open();
+    } else {
+      this.close();
+    }
+
+  },
+
+  /**
+   * This is where we get messages from the layout view iframe.
+   */
+  onMessage: function LV_onMessage(e) {
+    switch (e.data) {
+      case "layoutview-toggle-view":
+        this.toggle(true);
+        break;
+      case "layoutview-ready":
+        this.onDocumentReady();
+        break;
+      default:
+        break;
+    }
+  },
+
+  /**
+   * Open the view container.
+   *
+   * @param aUserAction Is the action triggered by the user (click on the
+   * open/close button in the view)
+   */
+  open: function LV_open(aUserAction) {
+    this.isOpen = true;
+    if (this.documentReady)
+      this.doc.body.classList.add("open");
+    if (aUserAction) {
+      this.inspector._layoutViewIsOpen = true;
+      Services.prefs.setBoolPref("devtools.layoutview.open", true);
+    }
+    this.iframe.setAttribute("open", "true");
+    this.update();
+  },
+
+  /**
+   * Close the view container.
+   *
+   * @param aUserAction Is the action triggered by the user (click on the
+   * open/close button in the view)
+   */
+  close: function LV_close(aUserAction) {
+    this.isOpen = false;
+    if (this.documentReady)
+      this.doc.body.classList.remove("open");
+    if (aUserAction) {
+      this.inspector._layoutViewIsOpen = false;
+      Services.prefs.setBoolPref("devtools.layoutview.open", false);
+    }
+    this.iframe.removeAttribute("open");
+  },
+
+  /**
+   * Toggle view container state (open/close).
+   *
+   * @param aUserAction Is the action triggered by the user (click on the
+   * open/close button in the view)
+   */
+  toggle: function LV_toggle(aUserAction) {
+    this.isOpen ? this.close(aUserAction):this.open(aUserAction);
+  },
+
+  /**
+   * Hide the layout boxes. No node are selected.
+   */
+  dim: function LV_dim() {
+    if (!this.documentReady) return;
+    this.doc.body.classList.add("dim");
+  },
+
+  /**
+   * Show the layout boxes. A node is selected.
+   */
+  undim: function LV_dim() {
+    if (!this.documentReady) return;
+    this.doc.body.classList.remove("dim");
+  },
+
+  /**
+   * Compute the dimensions of the node and update the values in
+   * the layoutview/view.xhtml document.
+   */
+  update: function LV_update() {
+    let node = this.inspector.selection;
+    if (!node || !this.documentReady) return;
+
+    // First, we update the first part of the layout view, with
+    // the size of the element.
+
+    let clientRect = node.getBoundingClientRect();
+    let width = Math.round(clientRect.width);
+    let height = Math.round(clientRect.height);
+    this.doc.querySelector("#element-size").textContent =  width + "x" + height;
+
+    // If the view is closed, no need to do anything more.
+    if (!this.isOpen) return;
+
+    // We compute and update the values of margins & co.
+    let style = this.browser.contentWindow.getComputedStyle(node);;
+
+    for (let i in this.map) {
+      let selector = this.map[i].selector;
+      let property = this.map[i].property;
+      this.map[i].value = parseInt(style.getPropertyValue(property));
+      let span = this.doc.querySelector(selector);
+      span.textContent = this.map[i].value;
+    }
+
+    width -= this.map.borderLeft.value + this.map.borderRight.value +
+             this.map.paddingLeft.value + this.map.paddingRight.value;
+
+    height -= this.map.borderTop.value + this.map.borderBottom.value +
+              this.map.paddingTop.value + this.map.paddingBottom.value;
+
+    this.doc.querySelector(".size > span").textContent = width + "x" + height;
+  },
+}
diff --git a/browser/devtools/layoutview/Makefile.in b/browser/devtools/layoutview/Makefile.in
new file mode 100644
index 00000000000..660089c8502
--- /dev/null
+++ b/browser/devtools/layoutview/Makefile.in
@@ -0,0 +1,53 @@
+#
+# ***** BEGIN LICENSE BLOCK *****
+# Version: MPL 1.1/GPL 2.0/LGPL 2.1
+#
+# The contents of this file are subject to the Mozilla Public License Version
+# 1.1 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+# http://www.mozilla.org/MPL/
+#
+# Software distributed under the License is distributed on an "AS IS" basis,
+# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+# for the specific language governing rights and limitations under the
+# License.
+#
+# The Original Code is LayoutView Build Code.
+#
+# The Initial Developer of the Original Code is The Mozilla Foundation.
+#
+# Portions created by the Initial Developer are Copyright (C) 2012
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#   Paul Rouget <paul@mozilla.com>
+#
+# Alternatively, the contents of this file may be used under the terms of
+# either the GNU General Public License Version 2 or later (the "GPL"), or
+# the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+# in which case the provisions of the GPL or the LGPL are applicable instead
+# of those above. If you wish to allow use of your version of this file only
+# under the terms of either the GPL or the LGPL, and not to allow others to
+# use your version of this file under the terms of the MPL, indicate your
+# decision by deleting the provisions above and replace them with the notice
+# and other provisions required by the GPL or the LGPL. If you do not delete
+# the provisions above, a recipient may use your version of this file under
+# the terms of any one of the MPL, the GPL or the LGPL.
+#
+# ***** END LICENSE BLOCK *****
+
+DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+ifdef ENABLE_TESTS
+	DIRS += test
+endif
+
+include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/layoutview/test/Makefile.in b/browser/devtools/layoutview/test/Makefile.in
new file mode 100644
index 00000000000..dde41f3637a
--- /dev/null
+++ b/browser/devtools/layoutview/test/Makefile.in
@@ -0,0 +1,53 @@
+# ***** BEGIN LICENSE BLOCK *****
+# Version: MPL 1.1/GPL 2.0/LGPL 2.1
+#
+# The contents of this file are subject to the Mozilla Public License Version
+# 1.1 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+# http://www.mozilla.org/MPL/
+#
+# Software distributed under the License is distributed on an "AS IS" basis,
+# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+# for the specific language governing rights and limitations under the
+# License.
+#
+# The Original Code is mozilla.org code.
+#
+# The Initial Developer of the Original Code is
+# Mozilla Foundation.
+# Portions created by the Initial Developer are Copyright (C) 2012
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#   Paul Rouget <paul@mozilla.com>
+#
+# Alternatively, the contents of this file may be used under the terms of
+# either of the GNU General Public License Version 2 or later (the "GPL"),
+# or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+# in which case the provisions of the GPL or the LGPL are applicable instead
+# of those above. If you wish to allow use of your version of this file only
+# under the terms of either the GPL or the LGPL, and not to allow others to
+# use your version of this file under the terms of the MPL, indicate your
+# decision by deleting the provisions above and replace them with the notice
+# and other provisions required by the GPL or the LGPL. If you do not delete
+# the provisions above, a recipient may use your version of this file under
+# the terms of any one of the MPL, the GPL or the LGPL.
+#
+# ***** END LICENSE BLOCK *****
+
+DEPTH     = ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+relativesrcdir  = browser/devtools/layoutview/test
+
+include $(DEPTH)/config/autoconf.mk
+include $(topsrcdir)/config/rules.mk
+
+_BROWSER_FILES = \
+		browser_layoutview.js \
+		$(NULL)
+
+
+libs::	$(_BROWSER_FILES)
+	$(INSTALL) $(foreach f,$^,"$f") $(DEPTH)/_tests/testing/mochitest/browser/$(relativesrcdir)
diff --git a/browser/devtools/layoutview/test/browser_layoutview.js b/browser/devtools/layoutview/test/browser_layoutview.js
new file mode 100644
index 00000000000..aee4402daed
--- /dev/null
+++ b/browser/devtools/layoutview/test/browser_layoutview.js
@@ -0,0 +1,134 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function test() {
+  waitForExplicitFinish();
+
+  Services.prefs.setBoolPref("devtools.layoutview.enabled", true);
+  Services.prefs.setBoolPref("devtools.inspector.sidebarOpen", true);
+
+  let doc;
+  let node;
+  let view;
+
+  // Expected values:
+  let res1 = [
+        {selector: "#element-size",              value: "160x160"},
+        {selector: ".size > span",               value: "100x100"},
+        {selector: ".margin.top > span",         value: 30},
+        {selector: ".margin.left > span",        value: 30},
+        {selector: ".margin.bottom > span",      value: 30},
+        {selector: ".margin.right > span",       value: 30},
+        {selector: ".padding.top > span",        value: 20},
+        {selector: ".padding.left > span",       value: 20},
+        {selector: ".padding.bottom > span",     value: 20},
+        {selector: ".padding.right > span",      value: 20},
+        {selector: ".border.top > span",         value: 10},
+        {selector: ".border.left > span",        value: 10},
+        {selector: ".border.bottom > span",      value: 10},
+        {selector: ".border.right > span",       value: 10},
+  ];
+
+  let res2 = [
+        {selector: "#element-size",              value: "160x210"},
+        {selector: ".size > span",               value: "100x150"},
+        {selector: ".margin.top > span",         value: 30},
+        {selector: ".margin.left > span",        value: 30},
+        {selector: ".margin.bottom > span",      value: 30},
+        {selector: ".margin.right > span",       value: 50},
+        {selector: ".padding.top > span",        value: 20},
+        {selector: ".padding.left > span",       value: 20},
+        {selector: ".padding.bottom > span",     value: 20},
+        {selector: ".padding.right > span",      value: 20},
+        {selector: ".border.top > span",         value: 10},
+        {selector: ".border.left > span",        value: 10},
+        {selector: ".border.bottom > span",      value: 10},
+        {selector: ".border.right > span",       value: 10},
+  ];
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    doc = content.document;
+    waitForFocus(setupTest, content);
+  }, true);
+
+  let style = "div { position: absolute; top: 42px; left: 42px; height: 100px; width: 100px; border: 10px solid black; padding: 20px; margin: 30px; }";
+  let html = "<style>" + style + "</style><div></div>"
+  content.location = "data:text/html," + encodeURIComponent(html);
+
+  function setupTest() {
+    node = doc.querySelector("div");
+    ok(node, "node found");
+
+    Services.obs.addObserver(openLayoutView,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    InspectorUI.toggleInspectorUI();
+  }
+
+  function openLayoutView() {
+    Services.obs.removeObserver(openLayoutView,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+    info("Inspector open");
+
+    let highlighter = InspectorUI.highlighter;
+    highlighter.highlight(node);
+    highlighter.lock();
+
+    window.addEventListener("message", viewReady, true);
+  }
+
+  function viewReady(e) {
+    if (e.data != "layoutview-ready") return;
+
+    info("Layout view ready");
+
+    view = InspectorUI._sidebar._layoutview;
+
+    ok(!!view, "LayoutView document is alive.");
+
+    view.open();
+
+    ok(view.iframe.getAttribute("open"), "true", "View is open.");
+
+    test1();
+  }
+
+  function test1() {
+    let viewdoc = view.iframe.contentDocument;
+
+    for (let i = 0; i < res1.length; i++) {
+      let elt = viewdoc.querySelector(res1[i].selector);
+      is(elt.textContent, res1[i].value, res1[i].selector + " has the right value.");
+    }
+
+    InspectorUI.selection.style.height = "150px";
+    InspectorUI.selection.style.marginRight = "50px";
+
+    setTimeout(test2, 200); // Should be enough to get a MozAfterPaint event
+  }
+
+  function test2() {
+    let viewdoc = view.iframe.contentDocument;
+
+    for (let i = 0; i < res2.length; i++) {
+      let elt = viewdoc.querySelector(res2[i].selector);
+      is(elt.textContent, res2[i].value, res2[i].selector + " has the right value after style update.");
+    }
+
+    executeSoon(function() {
+      Services.obs.addObserver(finishUp,
+        InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+      InspectorUI.closeInspectorUI();
+    });
+  }
+
+  function finishUp() {
+    Services.prefs.clearUserPref("devtools.layoutview.enabled");
+    Services.prefs.clearUserPref("devtools.inspector.sidebarOpen");
+    Services.obs.removeObserver(finishUp, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+    gBrowser.removeCurrentTab();
+    finish();
+  }
+}
diff --git a/browser/devtools/layoutview/view.css b/browser/devtools/layoutview/view.css
new file mode 100644
index 00000000000..1cafc3a084d
--- /dev/null
+++ b/browser/devtools/layoutview/view.css
@@ -0,0 +1,176 @@
+body, html {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#header {
+  -moz-box-sizing: border-box;
+  font: 12px/14px monospace;
+  width: 100%;
+  padding: 3px 4px;
+  display: -moz-box;
+}
+
+body[dir=rtl] > #header {
+  -moz-box-direction: reverse;
+}
+
+#header > span {
+  display: -moz-box;
+}
+
+#element-size {
+  -moz-box-flex: 1;
+}
+
+body[dir=rtl] > #header > #element-size {
+  -moz-box-pack: end;
+}
+
+#header:focus {
+  outline: none;
+}
+
+#main {
+  margin: 10px;
+  -moz-box-sizing: border-box;
+  width: -moz-calc(100% - 2 * 10px);
+  position: absolute;
+  border-width: 1px;
+  font: 10px/12px monospace;
+}
+
+#margins {
+  padding: 28px;
+}
+
+#content {
+  height: 20px;
+  border-width: 1px;
+}
+
+#padding {
+  border-width: 25px;
+}
+
+#borders {
+  border-width: 2px;
+  box-shadow: 0 0 16px black;
+}
+
+#main > p {
+  position: absolute;
+  pointer-events: none;
+}
+
+#main > p {
+  margin: 0;
+  text-align: center;
+}
+
+#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 {
+  width: -moz-calc(100% - 2px);
+  text-align: center;
+}
+
+.margin.top {
+  top: 8px;
+}
+
+.margin.bottom {
+  bottom: 6px;
+}
+
+.padding.top {
+  top: 35px;
+}
+
+.padding.bottom {
+  bottom: 35px;
+}
+
+.size,
+.margin.left,
+.margin.right,
+.padding.left,
+.padding.right {
+  top: 0;
+  line-height: 132px;
+}
+
+.size {
+  width: -moz-calc(100% - 2px);
+}
+
+.margin.right,
+.margin.left {
+  width: 28px;
+}
+
+.padding.right,
+.padding.left {
+  width: 25px;
+}
+
+.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 > #main,
+body.dim > #header > #element-size {
+  visibility: hidden;
+}
+
diff --git a/browser/devtools/layoutview/view.xhtml b/browser/devtools/layoutview/view.xhtml
new file mode 100644
index 00000000000..1c926b71fe2
--- /dev/null
+++ b/browser/devtools/layoutview/view.xhtml
@@ -0,0 +1,149 @@
+<?xml version="1.0" encoding="UTF-8"?>
+#ifdef 0
+<!-- ***** BEGIN LICENSE BLOCK *****
+   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
+   -
+   - The contents of this file are subject to the Mozilla Public License Version
+   - 1.1 (the "License"); you may not use this file except in compliance with
+   - the License. You may obtain a copy of the License at
+   - http://www.mozilla.org/MPL/
+   -
+   - Software distributed under the License is distributed on an "AS IS" basis,
+   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+   - for the specific language governing rights and limitations under the
+   - License.
+   -
+   - The Original Code is LayoutView.
+   -
+   - The Initial Developer of the Original Code is
+   - The Mozilla Foundation.
+   - Portions created by the Initial Developer are Copyright (C) 2012
+   - the Initial Developer. All Rights Reserved.
+   -
+   - Contributor(s):
+   -   Paul Rouget <paul@mozilla.com> (original author)
+   -
+   - Alternatively, the contents of this file may be used under the terms of
+   - either the GNU General Public License Version 2 or later (the "GPL"), or
+   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+   - in which case the provisions of the GPL or the LGPL are applicable instead
+   - of those above. If you wish to allow use of your version of this file only
+   - under the terms of either the GPL or the LGPL, and not to allow others to
+   - use your version of this file under the terms of the MPL, indicate your
+   - decision by deleting the provisions above and replace them with the notice
+   - and other provisions required by the GPL or the LGPL. If you do not delete
+   - the provisions above, a recipient may use your version of this file under
+   - the terms of any one of the MPL, the GPL or the LGPL.
+   -
+   - ***** END LICENSE BLOCK ***** -->
+#endif
+<!DOCTYPE html [
+<!ENTITY % layoutviewDTD SYSTEM "chrome://browser/locale/devtools/layoutview.dtd" >
+ %layoutviewDTD;
+]>
+
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <head>
+    <title>Layout View</title>
+
+    <script type="application/javascript;version=1.8">
+    <![CDATA[
+      let elts;
+      let tooltip;
+
+      const Ci = Components.interfaces;
+      const Cc = Components.classes;
+
+      window.onload = function() {
+
+        // Tooltip mechanism
+        elts = document.querySelectorAll("*[tooltip]");
+        tooltip = document.querySelector(".tooltip");
+        for (let i = 0; i < elts.length; i++) {
+          let elt = elts[i];
+          elt.addEventListener("mouseover", onmouseover, true);
+          elt.addEventListener("mouseout", onmouseout, true);
+        }
+
+        // Mark document as RTL or LTR:
+        let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"].
+          getService(Ci.nsIXULChromeRegistry);
+        let dir = chromeReg.isLocaleRTL("global");
+        document.body.setAttribute("dir", dir ? "rtl" : "ltr");
+
+        window.parent.postMessage("layoutview-ready", "*");
+      }
+
+      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 = "";
+      }
+
+      function toggleView() {
+        window.parent.postMessage("layoutview-toggle-view", "*");
+      }
+    ]]>
+    </script>
+
+    <link rel="stylesheet" href="chrome://browser/skin/devtools/layoutview.css" type="text/css"/>
+    <link rel="stylesheet" href="view.css" type="text/css"/>
+
+  </head>
+  <body>
+
+    <!-- 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>
+
+    <!-- Boxes: hidden when the view is closed. -->
+    <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>
+          </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="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="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="size"><span tooltip="&content.tooltip;"></span></p>
+
+      <span class="tooltip"></span>
+
+    </div>
+
+  </body>
+</html>
diff --git a/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd b/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
new file mode 100644
index 00000000000..a2c1eec93e7
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/layoutview.dtd
@@ -0,0 +1,21 @@
+<!-- LOCALIZATION NOTE : FILE This file contains the Layout View strings.
+  - The Layout View is the panel accessible at the bottom of the Inspector
+  - sidebar. -->
+
+<!-- LOCALIZATION NOTE : FILE The correct localization of this file might be to
+  - keep it in English, or another language commonly spoken among web developers.
+  - You want to make that choice consistent across the developer tools.
+  - 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. -->
+
+<!ENTITY margins.tooltip        "margins">
+<!ENTITY borders.tooltip        "borders">
+<!ENTITY padding.tooltip        "padding">
+<!ENTITY content.tooltip        "content">
diff --git a/browser/locales/jar.mn b/browser/locales/jar.mn
index 761db3e0e11..1e4b70e6e2e 100644
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -31,6 +31,7 @@
     locale/browser/devtools/webConsole.dtd            (%chrome/browser/devtools/webConsole.dtd)
     locale/browser/devtools/sourceeditor.properties   (%chrome/browser/devtools/sourceeditor.properties)
     locale/browser/devtools/sourceeditor.dtd          (%chrome/browser/devtools/sourceeditor.dtd)
+    locale/browser/devtools/layoutview.dtd            (%chrome/browser/devtools/layoutview.dtd)
     locale/browser/newTab.dtd                      (%chrome/browser/newTab.dtd)
     locale/browser/newTab.properties               (%chrome/browser/newTab.properties)
     locale/browser/openLocation.dtd                (%chrome/browser/openLocation.dtd)
diff --git a/browser/themes/gnomestripe/devtools/layout-background.png b/browser/themes/gnomestripe/devtools/layout-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..87b0b855d2573ecca3a4d7ded942c63bd03521e4
GIT binary patch
literal 3217
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

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/layout-buttons.png b/browser/themes/gnomestripe/devtools/layout-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5904654909b4767962fd68a5e4d926d3dab3aa8
GIT binary patch
literal 1237
zcmV;`1S<Q9P)<h;3K|Lk000e1NJLTq001Na000sQ1^@s6Gb4N`00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iyb@
z3_3FC)$uj}00dP@L_t(Y$IX^&Y!p=#$A5QU_5m%sEzCFpnp(hul|&OFqCg-9g$i1s
ziIudVq96%rVnTx91M&eSX-FU@pixn`LeaK1wiXg%FeZ&cN-#kljoaD>WV=h--KC}7
zK6dB&Vejg&U)&l#c$3N8nYsUS&;NhUoO9uSHiV`db|4#YtGg{ttO<+)VRh$0*l_?k
z>o=CIE8VpDiMjI&Y|~+LyRX-5ZEpPSTuak=fYO&XKev8k*|NFw3LZkF>5#;{eXDok
zTuW1X>-UX63Qadky!Ag+xILZ$A#CG-Ojlhg&5Up;G`p(&#X5l6hStiy-tK7a=O0gY
z+_*LfO#O=uXYrDf{K_|Xx#kxXW>#(~t#ttTp1iy;FabD)z@8Q{Nn8jqp|JS?ZjWcA
zdgnG78X9Z^hJXwp7jUG&W58WtyyM2TydxjHztUUZ5(DxbfJ+DwYy0^^{+Ze@+}&Ni
z;dGc47A?$qwet1wv#ZyR04@L_Y_ZVLU>9%&aPB{NxP0026$>OxT9g+8T<sTs={$5`
zUp>$p8XDAuuoVF=hhi&E9IbIgBH?DhPr`r`$Vp)sRm@}ET|VQ)(V8{StXeBln2)F=
zoq6cMKHrv#Dt-G~yZfb-;|Xs>#+RQSf4HH}>jUCy?TErAHWC6EiG;5Mmw~Zhz;9~0
zk-P7}p;b?<SXn5goB(MGVaqIge%04NC*Y4n!gGYcummy=n8AQwYPvB7bT-s^^@;K5
z(w%$W^#OeH(UC`5n(D7A8)Is%sjws!iUY&IXfWVUN-GZ^+~4=|mWtVL?Ap@<ObH=o
z0(vmu@6dE(6d0Bg&5~EK<UAPg$28sO2ijVi>Jc{ELICAV8_*vN_+zQqWGJSR%u?i^
zG|jkE2&9xqC9z9wsF>ZCZ};V%)v4yjZ-VNzFVz_<)?wNF@1g023oxp7?0WK*@~s1P
z-jfA)f`RPnz59Do*IJ(wp=F+?8zm`g?7%%W_W-$?Zdkw1Q&{DYlv5UG?0~Ut$2%{S
zl~)XZ_wA{iI`7FbDa}#0$KwD(DgXbJWqz-r^+KKyV)b+itdug2ltcgIP$CpIO*aJK
zT(@D<lCtvGCL7Mw&N%(mXCW!gi$JXYv^NU~D#rz2lU9Y0;|{0u=6~s75}9KOnVgvA
zcF&50!<j(*{MqI^p`iioO8cc@(=^+GTdL<cEFsGB<mJr*IcZHyX;o}mDkbdNfM{QD
zkA3U*x3#S7?5BZZAnWp_Uqhy84yanRNWEVG6l=P%G%GuMc}3L@t*^JouIf{?`%mAD
zL`#wJ>0E$N*r?ES<I%;BEnQQ+_q}NT94$*A>}g6IAG{MBJ67{y=FRI@e*#!kykx`f
z>b-r1MGNnOOtU8n(cR_CJ$|fa{vRDT&I(O8a)HH)eTMqA(;0SPTot%v-jo23t0TyC
zjvry*ci>v`Jd_E{R5eDVorj4QGonJqgRt`#mb)4)8RTK500000NkvXXu0mjfw*E~O

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/layoutview.css b/browser/themes/gnomestripe/devtools/layoutview.css
new file mode 100644
index 00000000000..0ea65740456
--- /dev/null
+++ b/browser/themes/gnomestripe/devtools/layoutview.css
@@ -0,0 +1,87 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is LayoutView.
+ *
+ * The Initial Developer of the Original Code is Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2012
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+body {
+  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  color: hsl(210,100%,85%);
+  border-top: 1px solid black;
+  -moz-box-sizing: border-box;
+}
+
+#element-size {
+  color: hsl(210,100%,95%);
+}
+
+#main {
+  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 
+}
+
+#padding {
+  border-color: hsla(210,100%,85%,0.2);
+  border-style: solid;
+}
+
+#borders {
+  border-style: solid;
+  border-color: hsl(210,100%,85%);
+}
+
+#togglebutton {
+  background-image: url(layout-buttons.png);
+  width: 18px;
+  height: 18px;
+  margin-top: -3px;
+}
+
+body.open > #header > #togglebutton {
+  background-position: -18px 0;
+}
diff --git a/browser/themes/gnomestripe/jar.mn b/browser/themes/gnomestripe/jar.mn
index c769924c9c1..b49a62a3881 100644
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@@ -138,6 +138,9 @@ browser.jar:
   skin/classic/browser/devtools/inspect-button.png    (devtools/inspect-button.png)
   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/layoutview.css        (devtools/layoutview.css)
+  skin/classic/browser/devtools/layout-buttons.png    (devtools/layout-buttons.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/pinstripe/devtools/layout-background.png b/browser/themes/pinstripe/devtools/layout-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..87b0b855d2573ecca3a4d7ded942c63bd03521e4
GIT binary patch
literal 3217
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

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/layout-buttons.png b/browser/themes/pinstripe/devtools/layout-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5904654909b4767962fd68a5e4d926d3dab3aa8
GIT binary patch
literal 1237
zcmV;`1S<Q9P)<h;3K|Lk000e1NJLTq001Na000sQ1^@s6Gb4N`00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iyb@
z3_3FC)$uj}00dP@L_t(Y$IX^&Y!p=#$A5QU_5m%sEzCFpnp(hul|&OFqCg-9g$i1s
ziIudVq96%rVnTx91M&eSX-FU@pixn`LeaK1wiXg%FeZ&cN-#kljoaD>WV=h--KC}7
zK6dB&Vejg&U)&l#c$3N8nYsUS&;NhUoO9uSHiV`db|4#YtGg{ttO<+)VRh$0*l_?k
z>o=CIE8VpDiMjI&Y|~+LyRX-5ZEpPSTuak=fYO&XKev8k*|NFw3LZkF>5#;{eXDok
zTuW1X>-UX63Qadky!Ag+xILZ$A#CG-Ojlhg&5Up;G`p(&#X5l6hStiy-tK7a=O0gY
z+_*LfO#O=uXYrDf{K_|Xx#kxXW>#(~t#ttTp1iy;FabD)z@8Q{Nn8jqp|JS?ZjWcA
zdgnG78X9Z^hJXwp7jUG&W58WtyyM2TydxjHztUUZ5(DxbfJ+DwYy0^^{+Ze@+}&Ni
z;dGc47A?$qwet1wv#ZyR04@L_Y_ZVLU>9%&aPB{NxP0026$>OxT9g+8T<sTs={$5`
zUp>$p8XDAuuoVF=hhi&E9IbIgBH?DhPr`r`$Vp)sRm@}ET|VQ)(V8{StXeBln2)F=
zoq6cMKHrv#Dt-G~yZfb-;|Xs>#+RQSf4HH}>jUCy?TErAHWC6EiG;5Mmw~Zhz;9~0
zk-P7}p;b?<SXn5goB(MGVaqIge%04NC*Y4n!gGYcummy=n8AQwYPvB7bT-s^^@;K5
z(w%$W^#OeH(UC`5n(D7A8)Is%sjws!iUY&IXfWVUN-GZ^+~4=|mWtVL?Ap@<ObH=o
z0(vmu@6dE(6d0Bg&5~EK<UAPg$28sO2ijVi>Jc{ELICAV8_*vN_+zQqWGJSR%u?i^
zG|jkE2&9xqC9z9wsF>ZCZ};V%)v4yjZ-VNzFVz_<)?wNF@1g023oxp7?0WK*@~s1P
z-jfA)f`RPnz59Do*IJ(wp=F+?8zm`g?7%%W_W-$?Zdkw1Q&{DYlv5UG?0~Ut$2%{S
zl~)XZ_wA{iI`7FbDa}#0$KwD(DgXbJWqz-r^+KKyV)b+itdug2ltcgIP$CpIO*aJK
zT(@D<lCtvGCL7Mw&N%(mXCW!gi$JXYv^NU~D#rz2lU9Y0;|{0u=6~s75}9KOnVgvA
zcF&50!<j(*{MqI^p`iioO8cc@(=^+GTdL<cEFsGB<mJr*IcZHyX;o}mDkbdNfM{QD
zkA3U*x3#S7?5BZZAnWp_Uqhy84yanRNWEVG6l=P%G%GuMc}3L@t*^JouIf{?`%mAD
zL`#wJ>0E$N*r?ES<I%;BEnQQ+_q}NT94$*A>}g6IAG{MBJ67{y=FRI@e*#!kykx`f
z>b-r1MGNnOOtU8n(cR_CJ$|fa{vRDT&I(O8a)HH)eTMqA(;0SPTot%v-jo23t0TyC
zjvry*ci>v`Jd_E{R5eDVorj4QGonJqgRt`#mb)4)8RTK500000NkvXXu0mjfw*E~O

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/layoutview.css b/browser/themes/pinstripe/devtools/layoutview.css
new file mode 100644
index 00000000000..0ff5194bf04
--- /dev/null
+++ b/browser/themes/pinstripe/devtools/layoutview.css
@@ -0,0 +1,88 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is LayoutView.
+ *
+ * The Initial Developer of the Original Code is Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2012
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+body {
+  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  color: hsl(210,100%,85%);
+  border-top: 1px solid black;
+  -moz-box-sizing: border-box;
+}
+
+#element-size {
+  color: hsl(210,100%,95%);
+}
+
+#main {
+  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 
+}
+
+#padding {
+  border-color: hsla(210,100%,85%,0.2);
+  border-style: solid;
+}
+
+#borders {
+  border-style: solid;
+  border-color: hsl(210,100%,85%);
+}
+
+#togglebutton {
+  background-image: url(layout-buttons.png);
+  width: 18px;
+  height: 18px;
+  margin-top: -3px;
+}
+
+body.open > #header > #togglebutton {
+  background-position: -18px 0;
+}
+
diff --git a/browser/themes/pinstripe/jar.mn b/browser/themes/pinstripe/jar.mn
index 8de92bfc736..8dba5c0f58a 100644
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@@ -179,6 +179,9 @@ browser.jar:
   skin/classic/browser/devtools/inspect-button.png          (devtools/inspect-button.png)
   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/layoutview.css              (devtools/layoutview.css)
+  skin/classic/browser/devtools/layout-buttons.png          (devtools/layout-buttons.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/winstripe/devtools/layout-background.png b/browser/themes/winstripe/devtools/layout-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..87b0b855d2573ecca3a4d7ded942c63bd03521e4
GIT binary patch
literal 3217
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

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/layout-buttons.png b/browser/themes/winstripe/devtools/layout-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5904654909b4767962fd68a5e4d926d3dab3aa8
GIT binary patch
literal 1237
zcmV;`1S<Q9P)<h;3K|Lk000e1NJLTq001Na000sQ1^@s6Gb4N`00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iyb@
z3_3FC)$uj}00dP@L_t(Y$IX^&Y!p=#$A5QU_5m%sEzCFpnp(hul|&OFqCg-9g$i1s
ziIudVq96%rVnTx91M&eSX-FU@pixn`LeaK1wiXg%FeZ&cN-#kljoaD>WV=h--KC}7
zK6dB&Vejg&U)&l#c$3N8nYsUS&;NhUoO9uSHiV`db|4#YtGg{ttO<+)VRh$0*l_?k
z>o=CIE8VpDiMjI&Y|~+LyRX-5ZEpPSTuak=fYO&XKev8k*|NFw3LZkF>5#;{eXDok
zTuW1X>-UX63Qadky!Ag+xILZ$A#CG-Ojlhg&5Up;G`p(&#X5l6hStiy-tK7a=O0gY
z+_*LfO#O=uXYrDf{K_|Xx#kxXW>#(~t#ttTp1iy;FabD)z@8Q{Nn8jqp|JS?ZjWcA
zdgnG78X9Z^hJXwp7jUG&W58WtyyM2TydxjHztUUZ5(DxbfJ+DwYy0^^{+Ze@+}&Ni
z;dGc47A?$qwet1wv#ZyR04@L_Y_ZVLU>9%&aPB{NxP0026$>OxT9g+8T<sTs={$5`
zUp>$p8XDAuuoVF=hhi&E9IbIgBH?DhPr`r`$Vp)sRm@}ET|VQ)(V8{StXeBln2)F=
zoq6cMKHrv#Dt-G~yZfb-;|Xs>#+RQSf4HH}>jUCy?TErAHWC6EiG;5Mmw~Zhz;9~0
zk-P7}p;b?<SXn5goB(MGVaqIge%04NC*Y4n!gGYcummy=n8AQwYPvB7bT-s^^@;K5
z(w%$W^#OeH(UC`5n(D7A8)Is%sjws!iUY&IXfWVUN-GZ^+~4=|mWtVL?Ap@<ObH=o
z0(vmu@6dE(6d0Bg&5~EK<UAPg$28sO2ijVi>Jc{ELICAV8_*vN_+zQqWGJSR%u?i^
zG|jkE2&9xqC9z9wsF>ZCZ};V%)v4yjZ-VNzFVz_<)?wNF@1g023oxp7?0WK*@~s1P
z-jfA)f`RPnz59Do*IJ(wp=F+?8zm`g?7%%W_W-$?Zdkw1Q&{DYlv5UG?0~Ut$2%{S
zl~)XZ_wA{iI`7FbDa}#0$KwD(DgXbJWqz-r^+KKyV)b+itdug2ltcgIP$CpIO*aJK
zT(@D<lCtvGCL7Mw&N%(mXCW!gi$JXYv^NU~D#rz2lU9Y0;|{0u=6~s75}9KOnVgvA
zcF&50!<j(*{MqI^p`iioO8cc@(=^+GTdL<cEFsGB<mJr*IcZHyX;o}mDkbdNfM{QD
zkA3U*x3#S7?5BZZAnWp_Uqhy84yanRNWEVG6l=P%G%GuMc}3L@t*^JouIf{?`%mAD
zL`#wJ>0E$N*r?ES<I%;BEnQQ+_q}NT94$*A>}g6IAG{MBJ67{y=FRI@e*#!kykx`f
z>b-r1MGNnOOtU8n(cR_CJ$|fa{vRDT&I(O8a)HH)eTMqA(;0SPTot%v-jo23t0TyC
zjvry*ci>v`Jd_E{R5eDVorj4QGonJqgRt`#mb)4)8RTK500000NkvXXu0mjfw*E~O

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/layoutview.css b/browser/themes/winstripe/devtools/layoutview.css
new file mode 100644
index 00000000000..0ff5194bf04
--- /dev/null
+++ b/browser/themes/winstripe/devtools/layoutview.css
@@ -0,0 +1,88 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is LayoutView.
+ *
+ * The Initial Developer of the Original Code is Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2012
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+body {
+  background: url(layout-background.png), -moz-radial-gradient(50% 70%, circle cover, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
+  color: hsl(210,100%,85%);
+  border-top: 1px solid black;
+  -moz-box-sizing: border-box;
+}
+
+#element-size {
+  color: hsl(210,100%,95%);
+}
+
+#main {
+  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 
+}
+
+#padding {
+  border-color: hsla(210,100%,85%,0.2);
+  border-style: solid;
+}
+
+#borders {
+  border-style: solid;
+  border-color: hsl(210,100%,85%);
+}
+
+#togglebutton {
+  background-image: url(layout-buttons.png);
+  width: 18px;
+  height: 18px;
+  margin-top: -3px;
+}
+
+body.open > #header > #togglebutton {
+  background-position: -18px 0;
+}
+
diff --git a/browser/themes/winstripe/jar.mn b/browser/themes/winstripe/jar.mn
index 8b30d07b624..96efcd30bfb 100644
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@@ -165,6 +165,9 @@ browser.jar:
         skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
         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/layoutview.css                (devtools/layoutview.css)
+        skin/classic/browser/devtools/layout-buttons.png            (devtools/layout-buttons.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -345,6 +348,9 @@ browser.jar:
         skin/classic/aero/browser/devtools/inspect-button.png        (devtools/inspect-button.png)
         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/layoutview.css            (devtools/layoutview.css)
+        skin/classic/aero/browser/devtools/layout-buttons.png        (devtools/layout-buttons.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png