Bug 1302496 - Refactor LayoutView to a Box Model component r=jdescottes
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 13 Sep 2016 16:35:16 -0400
changeset 342866 639635348b41780875198e5f702d5714078deeee
parent 342858 eaf5eb6f8fa0d8e7a09f3774c0da53c0dd6dadd7
child 342867 a01c29ae52955d373d5766010b34722f2c9a0f8f
push id6570
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:26:13 +0000
treeherdermozilla-esr52@f455459b2ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1302496
milestone51.0a1
Bug 1302496 - Refactor LayoutView to a Box Model component r=jdescottes
devtools/client/inspector/components/box-model.js
devtools/client/inspector/components/moz.build
devtools/client/inspector/components/test/.eslintrc
devtools/client/inspector/components/test/browser.ini
devtools/client/inspector/components/test/browser_boxmodel.js
devtools/client/inspector/components/test/browser_boxmodel_editablemodel.js
devtools/client/inspector/components/test/browser_boxmodel_editablemodel_allproperties.js
devtools/client/inspector/components/test/browser_boxmodel_editablemodel_bluronclick.js
devtools/client/inspector/components/test/browser_boxmodel_editablemodel_border.js
devtools/client/inspector/components/test/browser_boxmodel_editablemodel_stylerules.js
devtools/client/inspector/components/test/browser_boxmodel_guides.js
devtools/client/inspector/components/test/browser_boxmodel_rotate-labels-on-sides.js
devtools/client/inspector/components/test/browser_boxmodel_sync.js
devtools/client/inspector/components/test/browser_boxmodel_tooltips.js
devtools/client/inspector/components/test/browser_boxmodel_update-after-navigation.js
devtools/client/inspector/components/test/browser_boxmodel_update-after-reload.js
devtools/client/inspector/components/test/browser_boxmodel_update-in-iframes.js
devtools/client/inspector/components/test/doc_boxmodel_iframe1.html
devtools/client/inspector/components/test/doc_boxmodel_iframe2.html
devtools/client/inspector/components/test/head.js
devtools/client/inspector/computed/computed.js
devtools/client/inspector/computed/test/browser_computed_search-filter.js
devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
devtools/client/inspector/inspector-panel.js
devtools/client/inspector/inspector.xul
devtools/client/inspector/layout/layout.js
devtools/client/inspector/layout/moz.build
devtools/client/inspector/layout/test/.eslintrc
devtools/client/inspector/layout/test/browser.ini
devtools/client/inspector/layout/test/browser_layout.js
devtools/client/inspector/layout/test/browser_layout_editablemodel.js
devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
devtools/client/inspector/layout/test/browser_layout_editablemodel_bluronclick.js
devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
devtools/client/inspector/layout/test/browser_layout_guides.js
devtools/client/inspector/layout/test/browser_layout_rotate-labels-on-sides.js
devtools/client/inspector/layout/test/browser_layout_sync.js
devtools/client/inspector/layout/test/browser_layout_tooltips.js
devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
devtools/client/inspector/layout/test/doc_layout_iframe1.html
devtools/client/inspector/layout/test/doc_layout_iframe2.html
devtools/client/inspector/layout/test/head.js
devtools/client/inspector/moz.build
devtools/client/jar.mn
devtools/client/themes/boxmodel.css
devtools/client/themes/layout.css
devtools/server/actors/highlighters.js
devtools/server/actors/inspector.js
devtools/server/actors/styles.js
rename from devtools/client/inspector/layout/layout.js
rename to devtools/client/inspector/components/box-model.js
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/components/box-model.js
@@ -18,17 +18,17 @@ const STRINGS_INSPECTOR = "devtools-shar
 const SHARED_L10N = new LocalizationHelper(STRINGS_URI);
 const INSPECTOR_L10N = new LocalizationHelper(STRINGS_INSPECTOR);
 const NUMERIC = /^-?[\d\.]+$/;
 const LONG_TEXT_ROTATE_LIMIT = 3;
 
 /**
  * An instance of EditingSession tracks changes that have been made during the
  * modification of box model values. All of these changes can be reverted by
- * calling revert. The main parameter is the LayoutView that created it.
+ * calling revert. The main parameter is the BoxModelView that created it.
  *
  * @param inspector The inspector panel.
  * @param doc       A DOM document that can be used to test style rules.
  * @param rules     An array of the style rules defined for the node being
  *                  edited. These should be in order of priority, least
  *                  important first.
  */
 function EditingSession({inspector, doc, elementRules}) {
@@ -178,132 +178,132 @@ EditingSession.prototype = {
   destroy: function () {
     this._doc = null;
     this._rules = null;
     this._modifications.clear();
   }
 };
 
 /**
- * The layout-view panel
+ * The box model view
  * @param {InspectorPanel} inspector
  *        An instance of the inspector-panel currently loaded in the toolbox
  * @param {Document} document
- *        The document that will contain the layout view.
+ *        The document that will contain the box model view.
  */
-function LayoutView(inspector, document) {
+function BoxModelView(inspector, document) {
   this.inspector = inspector;
   this.doc = document;
-  this.wrapper = this.doc.getElementById("layout-wrapper");
-  this.container = this.doc.getElementById("layout-container");
-  this.expander = this.doc.getElementById("layout-expander");
-  this.sizeLabel = this.doc.querySelector(".layout-size > span");
-  this.sizeHeadingLabel = this.doc.getElementById("layout-element-size");
+  this.wrapper = this.doc.getElementById("boxmodel-wrapper");
+  this.container = this.doc.getElementById("boxmodel-container");
+  this.expander = this.doc.getElementById("boxmodel-expander");
+  this.sizeLabel = this.doc.querySelector(".boxmodel-size > span");
+  this.sizeHeadingLabel = this.doc.getElementById("boxmodel-element-size");
   this._geometryEditorHighlighter = null;
   this._cssProperties = getCssProperties(inspector.toolbox);
 
   this.init();
 }
 
-LayoutView.prototype = {
+BoxModelView.prototype = {
   init: function () {
     this.update = this.update.bind(this);
 
     this.onNewSelection = this.onNewSelection.bind(this);
     this.inspector.selection.on("new-node-front", this.onNewSelection);
 
     this.onNewNode = this.onNewNode.bind(this);
     this.inspector.sidebar.on("computedview-selected", this.onNewNode);
 
     this.onSidebarSelect = this.onSidebarSelect.bind(this);
     this.inspector.sidebar.on("select", this.onSidebarSelect);
 
     this.onToggleExpander = this.onToggleExpander.bind(this);
     this.expander.addEventListener("click", this.onToggleExpander);
-    let header = this.doc.getElementById("layout-header");
+    let header = this.doc.getElementById("boxmodel-header");
     header.addEventListener("dblclick", this.onToggleExpander);
 
     this.onFilterComputedView = this.onFilterComputedView.bind(this);
     this.inspector.on("computed-view-filtered",
       this.onFilterComputedView);
 
     this.onPickerStarted = this.onPickerStarted.bind(this);
     this.onMarkupViewLeave = this.onMarkupViewLeave.bind(this);
     this.onMarkupViewNodeHover = this.onMarkupViewNodeHover.bind(this);
     this.onWillNavigate = this.onWillNavigate.bind(this);
 
     this.initBoxModelHighlighter();
 
     // Store for the different dimensions of the node.
-    // 'selector' refers to the element that holds the value in view.xhtml;
+    // 'selector' refers to the element that holds the value;
     // 'property' is what we are measuring;
     // 'value' is the computed dimension, computed in update().
     this.map = {
       position: {
-        selector: "#layout-element-position",
+        selector: "#boxmodel-element-position",
         property: "position",
         value: undefined
       },
       marginTop: {
-        selector: ".layout-margin.layout-top > span",
+        selector: ".boxmodel-margin.boxmodel-top > span",
         property: "margin-top",
         value: undefined
       },
       marginBottom: {
-        selector: ".layout-margin.layout-bottom > span",
+        selector: ".boxmodel-margin.boxmodel-bottom > span",
         property: "margin-bottom",
         value: undefined
       },
       marginLeft: {
-        selector: ".layout-margin.layout-left > span",
+        selector: ".boxmodel-margin.boxmodel-left > span",
         property: "margin-left",
         value: undefined
       },
       marginRight: {
-        selector: ".layout-margin.layout-right > span",
+        selector: ".boxmodel-margin.boxmodel-right > span",
         property: "margin-right",
         value: undefined
       },
       paddingTop: {
-        selector: ".layout-padding.layout-top > span",
+        selector: ".boxmodel-padding.boxmodel-top > span",
         property: "padding-top",
         value: undefined
       },
       paddingBottom: {
-        selector: ".layout-padding.layout-bottom > span",
+        selector: ".boxmodel-padding.boxmodel-bottom > span",
         property: "padding-bottom",
         value: undefined
       },
       paddingLeft: {
-        selector: ".layout-padding.layout-left > span",
+        selector: ".boxmodel-padding.boxmodel-left > span",
         property: "padding-left",
         value: undefined
       },
       paddingRight: {
-        selector: ".layout-padding.layout-right > span",
+        selector: ".boxmodel-padding.boxmodel-right > span",
         property: "padding-right",
         value: undefined
       },
       borderTop: {
-        selector: ".layout-border.layout-top > span",
+        selector: ".boxmodel-border.boxmodel-top > span",
         property: "border-top-width",
         value: undefined
       },
       borderBottom: {
-        selector: ".layout-border.layout-bottom > span",
+        selector: ".boxmodel-border.boxmodel-bottom > span",
         property: "border-bottom-width",
         value: undefined
       },
       borderLeft: {
-        selector: ".layout-border.layout-left > span",
+        selector: ".boxmodel-border.boxmodel-left > span",
         property: "border-left-width",
         value: undefined
       },
       borderRight: {
-        selector: ".layout-border.layout-right > span",
+        selector: ".boxmodel-border.boxmodel-right > span",
         property: "border-right-width",
         value: undefined
       }
     };
 
     // Make each element the dimensions editable
     for (let i in this.map) {
       if (i == "position") {
@@ -321,17 +321,17 @@ LayoutView.prototype = {
     this.onNewNode();
 
     let nodeGeometry = this.doc.getElementById("layout-geometry-editor");
     this.onGeometryButtonClick = this.onGeometryButtonClick.bind(this);
     nodeGeometry.addEventListener("click", this.onGeometryButtonClick);
   },
 
   initBoxModelHighlighter: function () {
-    let highlightElts = this.doc.querySelectorAll("#layout-container *[title]");
+    let highlightElts = this.doc.querySelectorAll("#boxmodel-container *[title]");
     this.onHighlightMouseOver = this.onHighlightMouseOver.bind(this);
     this.onHighlightMouseOut = this.onHighlightMouseOut.bind(this);
 
     for (let element of highlightElts) {
       element.addEventListener("mouseover", this.onHighlightMouseOver, true);
       element.addEventListener("mouseout", this.onHighlightMouseOut, true);
     }
   },
@@ -362,32 +362,32 @@ LayoutView.prototype = {
       return;
     }
 
     this.reflowFront.off("reflows", this.update);
     this.reflowFront.stop();
   },
 
   /**
-   * Called when the user clicks on one of the editable values in the layoutview
+   * Called when the user clicks on one of the editable values in the box model view
    */
   initEditor: function (element, event, dimension) {
     let { property } = dimension;
     let session = new EditingSession(this);
     let initialValue = session.getProperty(property);
 
     let editor = new InplaceEditor({
       element: element,
       initial: initialValue,
       contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
       property: {
         name: dimension.property
       },
       start: self => {
-        self.elt.parentNode.classList.add("layout-editing");
+        self.elt.parentNode.classList.add("boxmodel-editing");
       },
 
       change: value => {
         if (NUMERIC.test(value)) {
           value += "px";
         }
 
         let properties = [
@@ -401,69 +401,69 @@ LayoutView.prototype = {
             properties.push({ name: bprop, value: "solid" });
           }
         }
 
         session.setProperties(properties).catch(e => console.error(e));
       },
 
       done: (value, commit) => {
-        editor.elt.parentNode.classList.remove("layout-editing");
+        editor.elt.parentNode.classList.remove("boxmodel-editing");
         if (!commit) {
           session.revert().then(() => {
             session.destroy();
           }, e => console.error(e));
         }
       },
       cssProperties: this._cssProperties
     }, event);
   },
 
   /**
-   * Is the layoutview visible in the sidebar.
+   * Is the BoxModelView visible in the sidebar.
    * @return {Boolean}
    */
   isViewVisible: function () {
     return this.inspector &&
            this.inspector.sidebar.getCurrentTabID() == "computedview";
   },
 
   /**
-   * Is the layoutview visible in the sidebar and is the current node valid to
+   * Is the BoxModelView visible in the sidebar and is the current node valid to
    * be displayed in the view.
    * @return {Boolean}
    */
   isViewVisibleAndNodeValid: function () {
     return this.isViewVisible() &&
            this.inspector.selection.isConnected() &&
            this.inspector.selection.isElementNode();
   },
 
   /**
    * Destroy the nodes. Remove listeners.
    */
   destroy: function () {
-    let highlightElts = this.doc.querySelectorAll("#layout-container *[title]");
+    let highlightElts = this.doc.querySelectorAll("#boxmodel-container *[title]");
 
     for (let element of highlightElts) {
       element.removeEventListener("mouseover", this.onHighlightMouseOver, true);
       element.removeEventListener("mouseout", this.onHighlightMouseOut, true);
     }
 
     this.expander.removeEventListener("click", this.onToggleExpander);
-    let header = this.doc.getElementById("layout-header");
+    let header = this.doc.getElementById("boxmodel-header");
     header.removeEventListener("dblclick", this.onToggleExpander);
 
     let nodeGeometry = this.doc.getElementById("layout-geometry-editor");
     nodeGeometry.removeEventListener("click", this.onGeometryButtonClick);
 
     this.inspector.off("picker-started", this.onPickerStarted);
 
     // Inspector Panel will destroy `markup` object on "will-navigate" event,
-    // therefore we have to check if it's still available in case LayoutView
+    // therefore we have to check if it's still available in case BoxModelView
     // is destroyed immediately after.
     if (this.inspector.markup) {
       this.inspector.markup.off("leave", this.onMarkupViewLeave);
       this.inspector.markup.off("node-hover", this.onMarkupViewNodeHover);
     }
 
     this.inspector.sidebar.off("computedview-selected", this.onNewNode);
     this.inspector.selection.off("new-node-front", this.onNewSelection);
@@ -566,25 +566,25 @@ LayoutView.prototype = {
     this._geometryEditorHighlighter.release().catch(console.error);
     this._geometryEditorHighlighter = null;
   },
 
   /**
    * Event handler that responds to the computed view being filtered
    * @param {String} reason
    * @param {Boolean} hidden
-   *        Whether or not to hide the layout wrapper
+   *        Whether or not to hide the box model wrapper
    */
   onFilterComputedView: function (reason, hidden) {
     this.wrapper.hidden = hidden;
   },
 
   /**
    * Stop tracking reflows and hide all values when no node is selected or the
-   * layout-view is hidden, otherwise track reflows and show values.
+   * box model view is hidden, otherwise track reflows and show values.
    * @param {Boolean} isActive
    */
   setActive: function (isActive) {
     if (isActive === this.isActive) {
       return;
     }
     this.isActive = isActive;
 
@@ -599,17 +599,17 @@ LayoutView.prototype = {
    * Compute the dimensions of the node and update the values in
    * the inspector.xul document.
    * @return a promise that will be resolved when complete.
    */
   update: function () {
     let lastRequest = Task.spawn((function* () {
       if (!this.isViewVisibleAndNodeValid()) {
         this.wrapper.hidden = true;
-        this.inspector.emit("layoutview-updated");
+        this.inspector.emit("boxmodel-view-updated");
         return null;
       }
 
       let node = this.inspector.selection.nodeFront;
       let layout = yield this.inspector.pageStyle.getLayout(node, {
         autoMargins: this.isActive
       });
       let styleEntries = yield this.inspector.pageStyle.getApplied(node, {});
@@ -684,17 +684,17 @@ LayoutView.prototype = {
       if (this.sizeLabel.textContent != newValue) {
         this.sizeLabel.textContent = newValue;
       }
 
       this.elementRules = styleEntries.map(e => e.rule);
 
       this.wrapper.hidden = false;
 
-      this.inspector.emit("layoutview-updated");
+      this.inspector.emit("boxmodel-view-updated");
       return null;
     }).bind(this)).catch(console.error);
 
     this._lastRequest = lastRequest;
     return this._lastRequest;
   },
 
   /**
@@ -826,17 +826,17 @@ LayoutView.prototype = {
 
     let nodeGeometry = this.doc.getElementById("layout-geometry-editor");
     nodeGeometry.style.visibility = isEditable ? "visible" : "hidden";
   }),
 
   manageOverflowingText: function (span) {
     let classList = span.parentNode.classList;
 
-    if (classList.contains("layout-left") ||
-        classList.contains("layout-right")) {
+    if (classList.contains("boxmodel-left") ||
+        classList.contains("boxmodel-right")) {
       let force = span.textContent.length > LONG_TEXT_ROTATE_LIMIT;
-      classList.toggle("layout-rotate", force);
+      classList.toggle("boxmodel-rotate", force);
     }
   }
 };
 
-exports.LayoutView = LayoutView;
+exports.BoxModelView = BoxModelView;
--- a/devtools/client/inspector/components/moz.build
+++ b/devtools/client/inspector/components/moz.build
@@ -1,10 +1,13 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'box-model.js',
     'inspector-tab-panel.css',
     'inspector-tab-panel.js',
 )
+
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
rename from devtools/client/inspector/layout/test/.eslintrc
rename to devtools/client/inspector/components/test/.eslintrc
rename from devtools/client/inspector/layout/test/browser.ini
rename to devtools/client/inspector/components/test/browser.ini
--- a/devtools/client/inspector/layout/test/browser.ini
+++ b/devtools/client/inspector/components/test/browser.ini
@@ -1,29 +1,29 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 support-files =
-  doc_layout_iframe1.html
-  doc_layout_iframe2.html
+  doc_boxmodel_iframe1.html
+  doc_boxmodel_iframe2.html
   head.js
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
 
-[browser_layout.js]
-[browser_layout_editablemodel.js]
-# [browser_layout_editablemodel_allproperties.js]
+[browser_boxmodel.js]
+[browser_boxmodel_editablemodel.js]
+# [browser_boxmodel_editablemodel_allproperties.js]
 # Disabled for too many intermittent failures (bug 1009322)
-[browser_layout_editablemodel_bluronclick.js]
-[browser_layout_editablemodel_border.js]
-[browser_layout_editablemodel_stylerules.js]
-[browser_layout_guides.js]
-[browser_layout_rotate-labels-on-sides.js]
-[browser_layout_sync.js]
-[browser_layout_tooltips.js]
-[browser_layout_update-after-navigation.js]
-[browser_layout_update-after-reload.js]
-# [browser_layout_update-in-iframes.js]
-# Bug 1020038 layout-view updates for iframe elements changes
+[browser_boxmodel_editablemodel_bluronclick.js]
+[browser_boxmodel_editablemodel_border.js]
+[browser_boxmodel_editablemodel_stylerules.js]
+[browser_boxmodel_guides.js]
+[browser_boxmodel_rotate-labels-on-sides.js]
+[browser_boxmodel_sync.js]
+[browser_boxmodel_tooltips.js]
+[browser_boxmodel_update-after-navigation.js]
+[browser_boxmodel_update-after-reload.js]
+# [browser_boxmodel_update-in-iframes.js]
+# Bug 1020038 boxmodel-view updates for iframe elements changes
rename from devtools/client/inspector/layout/test/browser_layout.js
rename to devtools/client/inspector/components/test/browser_boxmodel.js
--- a/devtools/client/inspector/layout/test/browser_layout.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel.js
@@ -1,144 +1,144 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Test that the layout-view displays the right values and that it updates when
+// Test that the box model displays the right values and that it updates when
 // the node's style is changed
 
 // Expected values:
 var res1 = [
   {
-    selector: "#layout-element-size",
+    selector: "#boxmodel-element-size",
     value: "160" + "\u00D7" + "160.117"
   },
   {
-    selector: ".layout-size > span",
+    selector: ".boxmodel-size > span",
     value: "100" + "\u00D7" + "100.117"
   },
   {
-    selector: ".layout-margin.layout-top > span",
+    selector: ".boxmodel-margin.boxmodel-top > span",
     value: 30
   },
   {
-    selector: ".layout-margin.layout-left > span",
+    selector: ".boxmodel-margin.boxmodel-left > span",
     value: "auto"
   },
   {
-    selector: ".layout-margin.layout-bottom > span",
+    selector: ".boxmodel-margin.boxmodel-bottom > span",
     value: 30
   },
   {
-    selector: ".layout-margin.layout-right > span",
+    selector: ".boxmodel-margin.boxmodel-right > span",
     value: "auto"
   },
   {
-    selector: ".layout-padding.layout-top > span",
+    selector: ".boxmodel-padding.boxmodel-top > span",
     value: 20
   },
   {
-    selector: ".layout-padding.layout-left > span",
+    selector: ".boxmodel-padding.boxmodel-left > span",
     value: 20
   },
   {
-    selector: ".layout-padding.layout-bottom > span",
+    selector: ".boxmodel-padding.boxmodel-bottom > span",
     value: 20
   },
   {
-    selector: ".layout-padding.layout-right > span",
+    selector: ".boxmodel-padding.boxmodel-right > span",
     value: 20
   },
   {
-    selector: ".layout-border.layout-top > span",
+    selector: ".boxmodel-border.boxmodel-top > span",
     value: 10
   },
   {
-    selector: ".layout-border.layout-left > span",
+    selector: ".boxmodel-border.boxmodel-left > span",
     value: 10
   },
   {
-    selector: ".layout-border.layout-bottom > span",
+    selector: ".boxmodel-border.boxmodel-bottom > span",
     value: 10
   },
   {
-    selector: ".layout-border.layout-right > span",
+    selector: ".boxmodel-border.boxmodel-right > span",
     value: 10
   },
 ];
 
 var res2 = [
   {
-    selector: "#layout-element-size",
+    selector: "#boxmodel-element-size",
     value: "190" + "\u00D7" + "210"
   },
   {
-    selector: ".layout-size > span",
+    selector: ".boxmodel-size > span",
     value: "100" + "\u00D7" + "150"
   },
   {
-    selector: ".layout-margin.layout-top > span",
+    selector: ".boxmodel-margin.boxmodel-top > span",
     value: 30
   },
   {
-    selector: ".layout-margin.layout-left > span",
+    selector: ".boxmodel-margin.boxmodel-left > span",
     value: "auto"
   },
   {
-    selector: ".layout-margin.layout-bottom > span",
+    selector: ".boxmodel-margin.boxmodel-bottom > span",
     value: 30
   },
   {
-    selector: ".layout-margin.layout-right > span",
+    selector: ".boxmodel-margin.boxmodel-right > span",
     value: "auto"
   },
   {
-    selector: ".layout-padding.layout-top > span",
+    selector: ".boxmodel-padding.boxmodel-top > span",
     value: 20
   },
   {
-    selector: ".layout-padding.layout-left > span",
+    selector: ".boxmodel-padding.boxmodel-left > span",
     value: 20
   },
   {
-    selector: ".layout-padding.layout-bottom > span",
+    selector: ".boxmodel-padding.boxmodel-bottom > span",
     value: 20
   },
   {
-    selector: ".layout-padding.layout-right > span",
+    selector: ".boxmodel-padding.boxmodel-right > span",
     value: 50
   },
   {
-    selector: ".layout-border.layout-top > span",
+    selector: ".boxmodel-border.boxmodel-top > span",
     value: 10
   },
   {
-    selector: ".layout-border.layout-left > span",
+    selector: ".boxmodel-border.boxmodel-left > span",
     value: 10
   },
   {
-    selector: ".layout-border.layout-bottom > span",
+    selector: ".boxmodel-border.boxmodel-bottom > span",
     value: 10
   },
   {
-    selector: ".layout-border.layout-right > span",
+    selector: ".boxmodel-border.boxmodel-right > span",
     value: 10
   },
 ];
 
 add_task(function* () {
   let style = "div { position: absolute; top: 42px; left: 42px; " +
               "height: 100.111px; width: 100px; border: 10px solid black; " +
               "padding: 20px; margin: 30px auto;}";
   let html = "<style>" + style + "</style><div></div>";
 
   yield addTab("data:text/html," + encodeURIComponent(html));
-  let {inspector, view, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
   yield selectNode("div", inspector);
 
   yield testInitialValues(inspector, view);
   yield testChangingValues(inspector, view, testActor);
 });
 
 function* testInitialValues(inspector, view) {
   info("Test that the initial values of the box model are correct");
rename from devtools/client/inspector/layout/test/browser_layout_editablemodel.js
rename to devtools/client/inspector/components/test/browser_boxmodel_editablemodel.js
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_editablemodel.js
@@ -14,34 +14,34 @@ const TEST_URI = "<style>" +
   "#div3 { padding: 2em; }" +
   "#div4 { margin: 1px; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div>" +
   "<div id='div3'></div><div id='div4'></div>";
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   yield testEditingMargins(inspector, view, testActor);
   yield testKeyBindings(inspector, view, testActor);
   yield testEscapeToUndo(inspector, view, testActor);
   yield testDeletingValue(inspector, view, testActor);
   yield testRefocusingOnClick(inspector, view, testActor);
 });
 
 function* testEditingMargins(inspector, view, testActor) {
   info("Test that editing margin dynamically updates the document, pressing " +
        "escape cancels the changes");
 
   is((yield getStyle(testActor, "#div1", "margin-top")), "",
      "Should be no margin-top on the element.");
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-margin.layout-top > span");
+  let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("3", {}, view.doc.defaultView);
@@ -61,17 +61,17 @@ function* testEditingMargins(inspector, 
 function* testKeyBindings(inspector, view, testActor) {
   info("Test that arrow keys work correctly and pressing enter commits the " +
        "changes");
 
   is((yield getStyle(testActor, "#div1", "margin-left")), "",
      "Should be no margin-top on the element.");
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-margin.layout-left > span");
+  let span = view.doc.querySelector(".boxmodel-margin.boxmodel-left > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "10px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_UP", {}, view.doc.defaultView);
@@ -104,17 +104,17 @@ function* testKeyBindings(inspector, vie
 function* testEscapeToUndo(inspector, view, testActor) {
   info("Test that deleting the value removes the property but escape undoes " +
        "that");
 
   is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
      "Should be the right margin-top on the element.");
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-margin.layout-left > span");
+  let span = view.doc.querySelector(".boxmodel-margin.boxmodel-left > span");
   is(span.textContent, 20, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "20px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
@@ -135,17 +135,17 @@ function* testEscapeToUndo(inspector, vi
 function* testDeletingValue(inspector, view, testActor) {
   info("Test that deleting the value removes the property");
 
   yield setStyle(testActor, "#div1", "marginRight", "15px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-margin.layout-right > span");
+  let span = view.doc.querySelector(".boxmodel-margin.boxmodel-right > span");
   is(span.textContent, 15, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "15px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
@@ -162,17 +162,17 @@ function* testDeletingValue(inspector, v
   is(span.textContent, 10, "Should have the right value in the box model.");
 }
 
 function* testRefocusingOnClick(inspector, view, testActor) {
   info("Test that clicking in the editor input does not remove focus");
 
   yield selectNode("#div4", inspector);
 
-  let span = view.doc.querySelector(".layout-margin.layout-top > span");
+  let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 1, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   info("Click in the already opened editor input");
   EventUtils.synthesizeMouseAtCenter(editor, {}, view.doc.defaultView);
rename from devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
rename to devtools/client/inspector/components/test/browser_boxmodel_editablemodel_allproperties.js
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_allproperties.js
@@ -11,33 +11,33 @@ const TEST_URI = "<style>" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   yield testEditing(inspector, view, testActor);
   yield testEditingAndCanceling(inspector, view, testActor);
   yield testDeleting(inspector, view, testActor);
   yield testDeletingAndCanceling(inspector, view, testActor);
 });
 
 function* testEditing(inspector, view, testActor) {
   info("When all properties are set on the node editing one should work");
 
   yield setStyle(testActor, "#div1", "padding", "5px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-padding.layout-bottom > span");
+  let span = view.doc.querySelector(".boxmodel-padding.boxmodel-bottom > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
@@ -58,17 +58,17 @@ function* testEditingAndCanceling(inspec
   info("When all properties are set on the node editing one and then " +
        "cancelling with ESCAPE should work");
 
   yield setStyle(testActor, "#div1", "padding", "5px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-padding.layout-left > span");
+  let span = view.doc.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("8", {}, view.doc.defaultView);
@@ -86,17 +86,17 @@ function* testEditingAndCanceling(inspec
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
 
 function* testDeleting(inspector, view, testActor) {
   info("When all properties are set on the node deleting one should work");
 
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-padding.layout-left > span");
+  let span = view.doc.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
@@ -117,17 +117,17 @@ function* testDeletingAndCanceling(inspe
   info("When all properties are set on the node deleting one then cancelling " +
        "should work");
 
   yield setStyle(testActor, "#div1", "padding", "5px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-padding.layout-left > span");
+  let span = view.doc.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
rename from devtools/client/inspector/layout/test/browser_layout_editablemodel_bluronclick.js
rename to devtools/client/inspector/components/test/browser_boxmodel_editablemodel_bluronclick.js
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_bluronclick.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_bluronclick.js
@@ -11,30 +11,31 @@ const TEST_URI =
     #div1 {
       margin: 10px;
       padding: 3px;
     }
   </style>
   <div id="div1"></div>`;
 
 add_task(function* () {
-  // Make sure the toolbox is tall enough to have empty space below the layout-container.
+  // Make sure the toolbox is tall enough to have empty space below the
+  // boxmodel-container.
   yield pushPref("devtools.toolbox.footer.height", 500);
 
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
 
   yield selectNode("#div1", inspector);
   yield testClickingOutsideEditor(view);
   yield testClickingBelowContainer(view);
 });
 
 function* testClickingOutsideEditor(view) {
   info("Test that clicking outside the editor blurs it");
-  let span = view.doc.querySelector(".layout-margin.layout-top > span");
+  let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   info("Click next to the opened editor input.");
   let onBlur = once(editor, "blur");
@@ -44,28 +45,28 @@ function* testClickingOutsideEditor(view
   yield onBlur;
 
   is(view.doc.querySelector(".styleinspector-propertyeditor"), null,
     "Inplace editor has been removed.");
 }
 
 function* testClickingBelowContainer(view) {
   info("Test that clicking below the box-model container blurs it");
-  let span = view.doc.querySelector(".layout-margin.layout-top > span");
+  let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
-  info("Test that clicking below the layout-container blurs the opened editor");
+  info("Test that clicking below the boxmodel-container blurs the opened editor");
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   let onBlur = once(editor, "blur");
-  let container = view.doc.querySelector("#layout-container");
+  let container = view.doc.querySelector("#boxmodel-container");
   // Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
-  // use an erroneous height of ~50px for the layout container.
+  // use an erroneous height of ~50px for the boxmodel-container.
   let bounds = container.getBoxQuads({relativeTo: view.doc})[0].bounds;
   EventUtils.synthesizeMouseAtPoint(
     bounds.left + 10,
     bounds.top + bounds.height + 10,
     {}, view.doc.defaultView);
   yield onBlur;
 
   is(view.doc.querySelector(".styleinspector-propertyeditor"), null,
rename from devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
rename to devtools/client/inspector/components/test/browser_boxmodel_editablemodel_border.js
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_border.js
@@ -11,25 +11,25 @@ const TEST_URI = "<style>" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   is((yield getStyle(testActor, "#div1", "border-top-width")), "",
      "Should have the right border");
   is((yield getStyle(testActor, "#div1", "border-top-style")), "",
      "Should have the right border");
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-border.layout-top > span");
+  let span = view.doc.querySelector(".boxmodel-border.boxmodel-top > span");
   is(span.textContent, 0, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "0", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
rename from devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
rename to devtools/client/inspector/components/test/browser_boxmodel_editablemodel_stylerules.js
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_stylerules.js
@@ -12,31 +12,31 @@ const TEST_URI = "<style>" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   yield testUnits(inspector, view, testActor);
   yield testValueComesFromStyleRule(inspector, view, testActor);
   yield testShorthandsAreParsed(inspector, view, testActor);
 });
 
 function* testUnits(inspector, view, testActor) {
   info("Test that entering units works");
 
   is((yield getStyle(testActor, "#div1", "padding-top")), "",
      "Should have the right padding");
   yield selectNode("#div1", inspector);
 
-  let span = view.doc.querySelector(".layout-padding.layout-top > span");
+  let span = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
   is(span.textContent, 3, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "3px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
@@ -63,17 +63,17 @@ function* testUnits(inspector, view, tes
 
 function* testValueComesFromStyleRule(inspector, view, testActor) {
   info("Test that we pick up the value from a higher style rule");
 
   is((yield getStyle(testActor, "#div2", "border-bottom-width")), "",
      "Should have the right border-bottom-width");
   yield selectNode("#div2", inspector);
 
-  let span = view.doc.querySelector(".layout-border.layout-bottom > span");
+  let span = view.doc.querySelector(".boxmodel-border.boxmodel-bottom > span");
   is(span.textContent, 16, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "1em", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("0", {}, view.doc.defaultView);
@@ -92,17 +92,17 @@ function* testValueComesFromStyleRule(in
 
 function* testShorthandsAreParsed(inspector, view, testActor) {
   info("Test that shorthand properties are parsed correctly");
 
   is((yield getStyle(testActor, "#div3", "padding-right")), "",
      "Should have the right padding");
   yield selectNode("#div3", inspector);
 
-  let span = view.doc.querySelector(".layout-padding.layout-right > span");
+  let span = view.doc.querySelector(".boxmodel-padding.boxmodel-right > span");
   is(span.textContent, 32, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "2em", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
rename from devtools/client/inspector/layout/test/browser_layout_guides.js
rename to devtools/client/inspector/components/test/browser_boxmodel_guides.js
--- a/devtools/client/inspector/layout/test/browser_layout_guides.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_guides.js
@@ -2,52 +2,52 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that hovering over regions in the box-model shows the highlighter with
 // the right options.
 // Tests that actually check the highlighter is displayed and correct are in the
 // devtools/inspector/test folder. This test only cares about checking that the
-// layout-view does call the highlighter, and it does so by mocking it.
+// box model view does call the highlighter, and it does so by mocking it.
 
 const STYLE = "div { position: absolute; top: 50px; left: 50px; " +
               "height: 10px; width: 10px; border: 10px solid black; " +
               "padding: 10px; margin: 10px;}";
 const HTML = "<style>" + STYLE + "</style><div></div>";
 const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
 
 var highlightedNodeFront, highlighterOptions;
 
 add_task(function* () {
   yield addTab(TEST_URL);
-  let {toolbox, inspector, view} = yield openLayoutView();
+  let {toolbox, inspector, view} = yield openBoxModelView();
   yield selectNode("div", inspector);
 
   // Mock the highlighter by replacing the showBoxModel method.
   toolbox.highlighter.showBoxModel = function (nodeFront, options) {
     highlightedNodeFront = nodeFront;
     highlighterOptions = options;
   };
 
-  let elt = view.doc.getElementById("layout-margins");
+  let elt = view.doc.getElementById("boxmodel-margins");
   yield testGuideOnLayoutHover(elt, "margin", inspector, view);
 
-  elt = view.doc.getElementById("layout-borders");
+  elt = view.doc.getElementById("boxmodel-borders");
   yield testGuideOnLayoutHover(elt, "border", inspector, view);
 
-  elt = view.doc.getElementById("layout-padding");
+  elt = view.doc.getElementById("boxmodel-padding");
   yield testGuideOnLayoutHover(elt, "padding", inspector, view);
 
-  elt = view.doc.getElementById("layout-content");
+  elt = view.doc.getElementById("boxmodel-content");
   yield testGuideOnLayoutHover(elt, "content", inspector, view);
 });
 
 function* testGuideOnLayoutHover(elt, expectedRegion, inspector) {
-  info("Synthesizing mouseover on the layout-view");
+  info("Synthesizing mouseover on the boxmodel-view");
   EventUtils.synthesizeMouse(elt, 2, 2, {type: "mouseover"},
     elt.ownerDocument.defaultView);
 
   info("Waiting for the node-highlight event from the toolbox");
   yield inspector.toolbox.once("node-highlight");
 
   is(highlightedNodeFront, inspector.selection.nodeFront,
     "The right nodeFront was highlighted");
rename from devtools/client/inspector/layout/test/browser_layout_rotate-labels-on-sides.js
rename to devtools/client/inspector/components/test/browser_boxmodel_rotate-labels-on-sides.js
--- a/devtools/client/inspector/layout/test/browser_layout_rotate-labels-on-sides.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_rotate-labels-on-sides.js
@@ -2,48 +2,48 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that longer values are rotated on the side
 
 const res1 = [
-  {selector: ".layout-margin.layout-top > span", value: 30},
-  {selector: ".layout-margin.layout-left > span", value: "auto"},
-  {selector: ".layout-margin.layout-bottom > span", value: 30},
-  {selector: ".layout-margin.layout-right > span", value: "auto"},
-  {selector: ".layout-padding.layout-top > span", value: 20},
-  {selector: ".layout-padding.layout-left > span", value: 2000000},
-  {selector: ".layout-padding.layout-bottom > span", value: 20},
-  {selector: ".layout-padding.layout-right > span", value: 20},
-  {selector: ".layout-border.layout-top > span", value: 10},
-  {selector: ".layout-border.layout-left > span", value: 10},
-  {selector: ".layout-border.layout-bottom > span", value: 10},
-  {selector: ".layout-border.layout-right > span", value: 10},
+  {selector: ".boxmodel-margin.boxmodel-top > span", value: 30},
+  {selector: ".boxmodel-margin.boxmodel-left > span", value: "auto"},
+  {selector: ".boxmodel-margin.boxmodel-bottom > span", value: 30},
+  {selector: ".boxmodel-margin.boxmodel-right > span", value: "auto"},
+  {selector: ".boxmodel-padding.boxmodel-top > span", value: 20},
+  {selector: ".boxmodel-padding.boxmodel-left > span", value: 2000000},
+  {selector: ".boxmodel-padding.boxmodel-bottom > span", value: 20},
+  {selector: ".boxmodel-padding.boxmodel-right > span", value: 20},
+  {selector: ".boxmodel-border.boxmodel-top > span", value: 10},
+  {selector: ".boxmodel-border.boxmodel-left > span", value: 10},
+  {selector: ".boxmodel-border.boxmodel-bottom > span", value: 10},
+  {selector: ".boxmodel-border.boxmodel-right > span", value: 10},
 ];
 
 const TEST_URI = encodeURIComponent([
   "<style>",
   "div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
   "margin: 30px auto; }",
   "</style>",
   "<div></div>"
 ].join(""));
 const LONG_TEXT_ROTATE_LIMIT = 3;
 
 add_task(function* () {
   yield addTab("data:text/html," + TEST_URI);
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
   yield selectNode("div", inspector);
 
   for (let i = 0; i < res1.length; i++) {
     let elt = view.doc.querySelector(res1[i].selector);
     let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
     let classList = elt.parentNode.classList;
-    let canBeRotated = classList.contains("layout-left") ||
-                       classList.contains("layout-right");
-    let isRotated = classList.contains("layout-rotate");
+    let canBeRotated = classList.contains("boxmodel-left") ||
+                       classList.contains("boxmodel-right");
+    let isRotated = classList.contains("boxmodel-rotate");
 
     is(canBeRotated && isLong,
       isRotated, res1[i].selector + " correctly rotated.");
   }
 });
rename from devtools/client/inspector/layout/test/browser_layout_sync.js
rename to devtools/client/inspector/components/test/browser_boxmodel_sync.js
--- a/devtools/client/inspector/layout/test/browser_layout_sync.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_sync.js
@@ -5,24 +5,24 @@
 "use strict";
 
 // Test editing box model syncs with the rule view.
 
 const TEST_URI = "<p>hello</p>";
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
 
   info("When a property is edited, it should sync in the rule view");
 
   yield selectNode("p", inspector);
 
-  info("Modify padding-bottom in layout view");
-  let span = view.doc.querySelector(".layout-padding.layout-bottom > span");
+  info("Modify padding-bottom in box model view");
+  let span = view.doc.querySelector(".boxmodel-padding.boxmodel-bottom > span");
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
 
   EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
   is(editor.value, "7", "Should have the right value in the editor.");
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
rename from devtools/client/inspector/layout/test/browser_layout_tooltips.js
rename to devtools/client/inspector/components/test/browser_boxmodel_tooltips.js
--- a/devtools/client/inspector/layout/test/browser_layout_tooltips.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_tooltips.js
@@ -1,15 +1,15 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Test that the regions in the layout-view have tooltips, and that individual
+// Test that the regions in the box model view have tooltips, and that individual
 // values too. Also test that values that are set from a css rule have tooltips
 // referencing the rule.
 
 const TEST_URI = "<style>" +
   "#div1 { color: red; margin: 3em; }\n" +
   "#div2 { border-bottom: 1px solid black; background: red; }\n" +
   "html, body, #div3 { box-sizing: border-box; padding: 0 2em; }" +
   "</style>" +
@@ -67,38 +67,38 @@ const VALUES_TEST_DATA = [{
     name: "padding-left",
     ruleSelector: "html, body, #div3",
     styleSheetLocation: "inline:3"
   }]
 }];
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
 
   info("Checking the regions tooltips");
 
-  ok(view.doc.querySelector("#layout-margins").hasAttribute("title"),
+  ok(view.doc.querySelector("#boxmodel-margins").hasAttribute("title"),
     "The margin region has a tooltip");
-  is(view.doc.querySelector("#layout-margins").getAttribute("title"), "margin",
+  is(view.doc.querySelector("#boxmodel-margins").getAttribute("title"), "margin",
     "The margin region has the correct tooltip content");
 
-  ok(view.doc.querySelector("#layout-borders").hasAttribute("title"),
+  ok(view.doc.querySelector("#boxmodel-borders").hasAttribute("title"),
     "The border region has a tooltip");
-  is(view.doc.querySelector("#layout-borders").getAttribute("title"), "border",
+  is(view.doc.querySelector("#boxmodel-borders").getAttribute("title"), "border",
     "The border region has the correct tooltip content");
 
-  ok(view.doc.querySelector("#layout-padding").hasAttribute("title"),
+  ok(view.doc.querySelector("#boxmodel-padding").hasAttribute("title"),
     "The padding region has a tooltip");
-  is(view.doc.querySelector("#layout-padding").getAttribute("title"), "padding",
+  is(view.doc.querySelector("#boxmodel-padding").getAttribute("title"), "padding",
     "The padding region has the correct tooltip content");
 
-  ok(view.doc.querySelector("#layout-content").hasAttribute("title"),
+  ok(view.doc.querySelector("#boxmodel-content").hasAttribute("title"),
     "The content region has a tooltip");
-  is(view.doc.querySelector("#layout-content").getAttribute("title"), "content",
+  is(view.doc.querySelector("#boxmodel-content").getAttribute("title"), "content",
     "The content region has the correct tooltip content");
 
   for (let {selector, values} of VALUES_TEST_DATA) {
     info("Selecting " + selector + " and checking the values tooltips");
     yield selectNode(selector, inspector);
 
     info("Iterate over all values");
     for (let key in view.map) {
rename from devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
rename to devtools/client/inspector/components/test/browser_boxmodel_update-after-navigation.js
--- a/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_update-after-navigation.js
@@ -1,23 +1,23 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Test that the layout-view continues to work after a page navigation and that
+// Test that the box model view continues to work after a page navigation and that
 // it also works after going back
 
-const IFRAME1 = URL_ROOT + "doc_layout_iframe1.html";
-const IFRAME2 = URL_ROOT + "doc_layout_iframe2.html";
+const IFRAME1 = URL_ROOT + "doc_boxmodel_iframe1.html";
+const IFRAME2 = URL_ROOT + "doc_boxmodel_iframe2.html";
 
 add_task(function* () {
   yield addTab(IFRAME1);
-  let {inspector, view, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   yield testFirstPage(inspector, view, testActor);
 
   info("Navigate to the second page");
   yield testActor.eval(`content.location.href="${IFRAME2}"`);
   yield inspector.once("markuploaded");
 
   yield testSecondPage(inspector, view, testActor);
@@ -25,67 +25,67 @@ add_task(function* () {
   info("Go back to the first page");
   yield testActor.eval("content.history.back();");
   yield inspector.once("markuploaded");
 
   yield testBackToFirstPage(inspector, view, testActor);
 });
 
 function* testFirstPage(inspector, view, testActor) {
-  info("Test that the layout-view works on the first page");
+  info("Test that the box model view works on the first page");
 
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
-  info("Checking that the layout-view shows the right value");
-  let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
+  info("Checking that the box model view shows the right value");
+  let paddingElt = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "50");
 
-  info("Listening for layout-view changes and modifying the padding");
+  info("Listening for box model view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
   yield setStyle(testActor, "p", "padding", "20px");
   yield onUpdated;
-  ok(true, "Layout-view got updated");
+  ok(true, "Box model view got updated");
 
-  info("Checking that the layout-view shows the right value after update");
+  info("Checking that the box model view shows the right value after update");
   is(paddingElt.textContent, "20");
 }
 
 function* testSecondPage(inspector, view, testActor) {
-  info("Test that the layout-view works on the second page");
+  info("Test that the box model view works on the second page");
 
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
-  info("Checking that the layout-view shows the right value");
-  let sizeElt = view.doc.querySelector(".layout-size > span");
+  info("Checking that the box model view shows the right value");
+  let sizeElt = view.doc.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "100" + "\u00D7" + "100");
 
-  info("Listening for layout-view changes and modifying the size");
+  info("Listening for box model view changes and modifying the size");
   let onUpdated = waitForUpdate(inspector);
   yield setStyle(testActor, "p", "width", "200px");
   yield onUpdated;
-  ok(true, "Layout-view got updated");
+  ok(true, "Box model view got updated");
 
-  info("Checking that the layout-view shows the right value after update");
+  info("Checking that the box model view shows the right value after update");
   is(sizeElt.textContent, "200" + "\u00D7" + "100");
 }
 
 function* testBackToFirstPage(inspector, view, testActor) {
-  info("Test that the layout-view works on the first page after going back");
+  info("Test that the box model view works on the first page after going back");
 
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
-  info("Checking that the layout-view shows the right value, which is the" +
+  info("Checking that the box model view shows the right value, which is the" +
     "modified value from step one because of the bfcache");
-  let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
+  let paddingElt = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "20");
 
-  info("Listening for layout-view changes and modifying the padding");
+  info("Listening for box model view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
   yield setStyle(testActor, "p", "padding", "100px");
   yield onUpdated;
-  ok(true, "Layout-view got updated");
+  ok(true, "Box model view got updated");
 
-  info("Checking that the layout-view shows the right value after update");
+  info("Checking that the box model view shows the right value after update");
   is(paddingElt.textContent, "100");
 }
rename from devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
rename to devtools/client/inspector/components/test/browser_boxmodel_update-after-reload.js
--- a/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_update-after-reload.js
@@ -1,40 +1,40 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Test that the layout-view continues to work after the page is reloaded
+// Test that the box model view continues to work after the page is reloaded
 
 add_task(function* () {
-  yield addTab(URL_ROOT + "doc_layout_iframe1.html");
-  let {inspector, view, testActor} = yield openLayoutView();
+  yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
+  let {inspector, view, testActor} = yield openBoxModelView();
 
-  info("Test that the layout-view works on the first page");
-  yield assertLayoutView(inspector, view, testActor);
+  info("Test that the box model view works on the first page");
+  yield assertBoxModelView(inspector, view, testActor);
 
   info("Reload the page");
   yield testActor.reload();
   yield inspector.once("markuploaded");
 
-  info("Test that the layout-view works on the reloaded page");
-  yield assertLayoutView(inspector, view, testActor);
+  info("Test that the box model view works on the reloaded page");
+  yield assertBoxModelView(inspector, view, testActor);
 });
 
-function* assertLayoutView(inspector, view, testActor) {
+function* assertBoxModelView(inspector, view, testActor) {
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
-  info("Checking that the layout-view shows the right value");
-  let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
+  info("Checking that the box model view shows the right value");
+  let paddingElt = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "50");
 
-  info("Listening for layout-view changes and modifying the padding");
+  info("Listening for box model view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
   yield setStyle(testActor, "p", "padding", "20px");
   yield onUpdated;
-  ok(true, "Layout-view got updated");
+  ok(true, "Box model view got updated");
 
-  info("Checking that the layout-view shows the right value after update");
+  info("Checking that the box model view shows the right value after update");
   is(paddingElt.textContent, "20");
 }
rename from devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
rename to devtools/client/inspector/components/test/browser_boxmodel_update-in-iframes.js
--- a/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
+++ b/devtools/client/inspector/components/test/browser_boxmodel_update-in-iframes.js
@@ -1,67 +1,67 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Test that the layout-view for elements within iframes also updates when they
+// Test that the box model view for elements within iframes also updates when they
 // change
 
 add_task(function* () {
-  yield addTab(URL_ROOT + "doc_layout_iframe1.html");
-  let {inspector, view, testActor} = yield openLayoutView();
+  yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   yield testResizingInIframe(inspector, view, testActor);
   yield testReflowsAfterIframeDeletion(inspector, view, testActor);
 });
 
 function* testResizingInIframe(inspector, view, testActor) {
   info("Test that resizing an element in an iframe updates its box model");
 
   info("Selecting the nested test node");
   yield selectNodeInIframe2("div", inspector);
 
-  info("Checking that the layout-view shows the right value");
-  let sizeElt = view.doc.querySelector(".layout-size > span");
+  info("Checking that the box model view shows the right value");
+  let sizeElt = view.doc.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "400\u00D7200");
 
-  info("Listening for layout-view changes and modifying its size");
+  info("Listening for box model view changes and modifying its size");
   let onUpdated = waitForUpdate(inspector);
   yield setStyleInIframe2(testActor, "div", "width", "200px");
   yield onUpdated;
-  ok(true, "Layout-view got updated");
+  ok(true, "Box model view got updated");
 
-  info("Checking that the layout-view shows the right value after update");
+  info("Checking that the box model view shows the right value after update");
   is(sizeElt.textContent, "200\u00D7200");
 }
 
 function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
-  info("Test reflows are still sent to the layout-view after deleting an " +
+  info("Test reflows are still sent to the box model view after deleting an " +
        "iframe");
 
   info("Deleting the iframe2");
   yield removeIframe2(testActor);
   yield inspector.once("inspector-updated");
 
   info("Selecting the test node in iframe1");
   yield selectNodeInIframe1("p", inspector);
 
-  info("Checking that the layout-view shows the right value");
-  let sizeElt = view.doc.querySelector(".layout-size > span");
+  info("Checking that the box model view shows the right value");
+  let sizeElt = view.doc.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "100\u00D7100");
 
-  info("Listening for layout-view changes and modifying its size");
+  info("Listening for box model view changes and modifying its size");
   let onUpdated = waitForUpdate(inspector);
   yield setStyleInIframe1(testActor, "p", "width", "200px");
   yield onUpdated;
-  ok(true, "Layout-view got updated");
+  ok(true, "Box model view got updated");
 
-  info("Checking that the layout-view shows the right value after update");
+  info("Checking that the box model view shows the right value after update");
   is(sizeElt.textContent, "200\u00D7100");
 }
 
 function* selectNodeInIframe1(selector, inspector) {
   let iframe1 = yield getNodeFront("iframe", inspector);
   let node = yield getNodeFrontInFrame(selector, iframe1, inspector);
   yield selectNode(node, inspector);
 }
rename from devtools/client/inspector/layout/test/doc_layout_iframe1.html
rename to devtools/client/inspector/components/test/doc_boxmodel_iframe1.html
--- a/devtools/client/inspector/layout/test/doc_layout_iframe1.html
+++ b/devtools/client/inspector/components/test/doc_boxmodel_iframe1.html
@@ -1,3 +1,3 @@
 <!DOCTYPE html>
 <p style="padding:50px;color:#f06;">Root page</p>
-<iframe src="doc_layout_iframe2.html"></iframe>
+<iframe src="doc_boxmodel_iframe2.html"></iframe>
rename from devtools/client/inspector/layout/test/doc_layout_iframe2.html
rename to devtools/client/inspector/components/test/doc_boxmodel_iframe2.html
rename from devtools/client/inspector/layout/test/head.js
rename to devtools/client/inspector/components/test/head.js
--- a/devtools/client/inspector/layout/test/head.js
+++ b/devtools/client/inspector/components/test/head.js
@@ -15,17 +15,17 @@ Services.prefs.setIntPref("devtools.tool
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.toolbox.footer.height");
 });
 
 /**
  * Simple DOM node accesor function that takes either a node or a string css
  * selector as argument and returns the corresponding node
  * FIXME: Delete this function and use inspector/test/head.js' getNode instead,
- * and fix all layout-view tests to use nodeFronts instead of CPOWs.
+ * and fix all box model view tests to use nodeFronts instead of CPOWs.
  * @param {String|DOMNode} nodeOrSelector
  * @return {DOMNode}
  */
 function getNode(nodeOrSelector) {
   return typeof nodeOrSelector === "string" ?
     content.document.querySelector(nodeOrSelector) :
     nodeOrSelector;
 }
@@ -44,50 +44,50 @@ function selectAndHighlightNode(nodeOrSe
 
   let node = getNode(nodeOrSelector);
   let updated = inspector.toolbox.once("highlighter-ready");
   inspector.selection.setNode(node, "test-highlight");
   return updated;
 }
 
 /**
- * Open the toolbox, with the inspector tool visible, and the layout-view
- * sidebar tab selected.
- * @return a promise that resolves when the inspector is ready and the layout
+ * Open the toolbox, with the inspector tool visible, and the computed view
+ * sidebar tab selected to display the box model view.
+ * @return a promise that resolves when the inspector is ready and the box model
  * view is visible and ready
  */
-function openLayoutView() {
+function openBoxModelView() {
   return openInspectorSidebarTab("computedview").then(data => {
-    // The actual highligher show/hide methods are mocked in layoutview tests.
+    // The actual highligher show/hide methods are mocked in box model tests.
     // The highlighter is tested in devtools/inspector/test.
     function mockHighlighter({highlighter}) {
       highlighter.showBoxModel = function () {
         return promise.resolve();
       };
       highlighter.hideBoxModel = function () {
         return promise.resolve();
       };
     }
     mockHighlighter(data.toolbox);
 
     return {
       toolbox: data.toolbox,
       inspector: data.inspector,
-      view: data.inspector.computedview.layoutView,
+      view: data.inspector.computedview.boxModelView,
       testActor: data.testActor
     };
   });
 }
 
 /**
- * Wait for the layoutview-updated event.
+ * Wait for the boxmodel-view-updated event.
  * @return a promise
  */
 function waitForUpdate(inspector) {
-  return inspector.once("layoutview-updated");
+  return inspector.once("boxmodel-view-updated");
 }
 
 function getStyle(testActor, selector, propertyName) {
   return testActor.eval(`
     content.document.querySelector("${selector}")
                     .style.getPropertyValue("${propertyName}");
   `);
 }
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -18,17 +18,17 @@ const {OutputParser} = require("devtools
 const {PrefObserver, PREF_ORIG_SOURCES} = require("devtools/client/styleeditor/utils");
 const {createChild} = require("devtools/client/inspector/shared/utils");
 const {gDevTools} = require("devtools/client/framework/devtools");
 const {getCssProperties} = require("devtools/shared/fronts/css-properties");
 
 const overlays = require("devtools/client/inspector/shared/style-inspector-overlays");
 const StyleInspectorMenu = require("devtools/client/inspector/shared/style-inspector-menu");
 const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts");
-const {LayoutView} = require("devtools/client/inspector/layout/layout");
+const {BoxModelView} = require("devtools/client/inspector/components/box-model");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 
 const STYLE_INSPECTOR_PROPERTIES = "devtools-shared/locale/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
 
 const FILTER_CHANGED_TIMEOUT = 150;
 const HTML_NS = "http://www.w3.org/1999/xhtml";
@@ -1389,17 +1389,17 @@ SelectorView.prototype = {
 };
 
 function ComputedViewTool(inspector, window) {
   this.inspector = inspector;
   this.document = window.document;
 
   this.computedView = new CssComputedView(this.inspector, this.document,
     this.inspector.pageStyle);
-  this.layoutView = new LayoutView(this.inspector, this.document);
+  this.boxModelView = new BoxModelView(this.inspector, this.document);
 
   this.onSelected = this.onSelected.bind(this);
   this.refresh = this.refresh.bind(this);
   this.onPanelSelected = this.onPanelSelected.bind(this);
   this.onMutations = this.onMutations.bind(this);
   this.onResized = this.onResized.bind(this);
 
   this.inspector.selection.on("detached-front", this.onSelected);
@@ -1498,17 +1498,17 @@ ComputedViewTool.prototype = {
     this.inspector.selection.off("new-node-front", this.onSelected);
     this.inspector.selection.off("detached-front", this.onSelected);
     this.inspector.sidebar.off("computedview-selected", this.onPanelSelected);
     if (this.inspector.pageStyle) {
       this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
     }
 
     this.computedView.destroy();
-    this.layoutView.destroy();
+    this.boxModelView.destroy();
 
-    this.computedView = this.layoutView = this.document = this.inspector = null;
+    this.computedView = this.boxModelView = this.document = this.inspector = null;
   }
 };
 
 exports.CssComputedView = CssComputedView;
 exports.ComputedViewTool = ComputedViewTool;
 exports.PropertyView = PropertyView;
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
@@ -29,17 +29,17 @@ function* testToggleDefaultStyles(inspec
   let onRefreshed = inspector.once("computed-view-refreshed");
   checkbox.click();
   yield onRefreshed;
 }
 
 function* testAddTextInFilter(inspector, computedView) {
   info("setting filter text to \"color\"");
   let doc = computedView.styleDocument;
-  let layoutWrapper = doc.querySelector("#layout-wrapper");
+  let boxModelWrapper = doc.querySelector("#boxmodel-wrapper");
   let searchField = computedView.searchField;
   let onRefreshed = inspector.once("computed-view-refreshed");
   let win = computedView.styleWindow;
 
   // First check to make sure that accel + F doesn't focus search if the
   // container isn't focused
   inspector.panelWin.focus();
   EventUtils.synthesizeKey("f", { accelKey: true });
@@ -48,17 +48,17 @@ function* testAddTextInFilter(inspector,
 
   computedView.element.focus();
   EventUtils.synthesizeKey("f", { accelKey: true });
   is(inspector.panelDoc.activeElement, searchField, "Search field is focused");
 
   synthesizeKeys("color", win);
   yield onRefreshed;
 
-  ok(layoutWrapper.hidden, "Layout view is hidden");
+  ok(boxModelWrapper.hidden, "Box model is hidden");
 
   info("check that the correct properties are visible");
 
   let propertyViews = computedView.propertyViews;
   propertyViews.forEach(propView => {
     let name = propView.name;
     is(propView.visible, name.indexOf("color") > -1,
       "span " + name + " property visibility check");
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
@@ -45,26 +45,26 @@ function* testAddTextInFilter(inspector,
   });
 }
 
 function* testClearSearchFilter(inspector, computedView) {
   info("Clearing the search filter");
 
   let win = computedView.styleWindow;
   let doc = computedView.styleDocument;
-  let layoutWrapper = doc.querySelector("#layout-wrapper");
+  let boxModelWrapper = doc.querySelector("#boxmodel-wrapper");
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
   let searchClearButton = computedView.searchClearButton;
   let onRefreshed = inspector.once("computed-view-refreshed");
 
   EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
   yield onRefreshed;
 
-  ok(!layoutWrapper.hidden, "Layout view is displayed");
+  ok(!boxModelWrapper.hidden, "Box model is displayed");
 
   info("Check that the correct properties are visible");
 
   ok(!searchField.value, "Search filter is cleared");
   propertyViews.forEach((propView) => {
     is(propView.visible, propView.hasMatchedSelectors,
       "span " + propView.name + " property visibility check");
   });
--- a/devtools/client/inspector/inspector-panel.js
+++ b/devtools/client/inspector/inspector-panel.js
@@ -33,32 +33,32 @@ const clipboardHelper = require("devtool
 
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const INSPECTOR_L10N = new LocalizationHelper("devtools/locale/inspector.properties");
 const TOOLBOX_L10N = new LocalizationHelper("devtools/locale/toolbox.properties");
 
 /**
  * Represents an open instance of the Inspector for a tab.
  * The inspector controls the breadcrumbs, the markup view, and the sidebar
- * (computed view, rule view, font view and layout view).
+ * (computed view, rule view, font view and animation inspector).
  *
  * Events:
  * - ready
  *      Fired when the inspector panel is opened for the first time and ready to
  *      use
  * - new-root
  *      Fired after a new root (navigation to a new page) event was fired by
  *      the walker, and taken into account by the inspector (after the markup
  *      view has been reloaded)
  * - markuploaded
  *      Fired when the markup-view frame has loaded
  * - breadcrumbs-updated
  *      Fired when the breadcrumb widget updates to a new node
- * - layoutview-updated
- *      Fired when the layoutview (box model) updates to a new node
+ * - boxmodel-view-updated
+ *      Fired when the box model updates to a new node
  * - markupmutation
  *      Fired after markup mutations have been processed by the markup-view
  * - computed-view-refreshed
  *      Fired when the computed rules view updates to a new node
  * - computed-view-property-expanded
  *      Fired when a property is expanded in the computed rules view
  * - computed-view-property-collapsed
  *      Fired when a property is collapsed in the computed rules view
--- a/devtools/client/inspector/inspector.xul
+++ b/devtools/client/inspector/inspector.xul
@@ -4,17 +4,17 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/inspector.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/rules.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/computed.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/fonts.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/layout.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/boxmodel.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/animationinspector.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/shared/components/sidebar-toggle.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabs.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabbar.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/inspector/components/side-panel.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/inspector/components/inspector-tab-panel.css" type="text/css"?>
 
 <!DOCTYPE window [
@@ -111,64 +111,64 @@
             <html:input id="browser-style-checkbox"
                         type="checkbox"
                         class="includebrowserstyles"
                         label="&browserStylesLabel;"/>&browserStylesLabel;</html:label>
         </html:div>
 
         <html:div id="computedview-container">
           <html:div id="computedview-container-focusable" tabindex="-1">
-            <html:div id="layout-wrapper" tabindex="0">
-              <html:div id="layout-header">
-                <html:div id="layout-expander" class="expander theme-twisty expandable" open=""></html:div>
+            <html:div id="boxmodel-wrapper" tabindex="0">
+              <html:div id="boxmodel-header">
+                <html:div id="boxmodel-expander" class="expander theme-twisty expandable" open=""></html:div>
                 <html:span>&layoutViewTitle;</html:span>
               </html:div>
 
-              <html:div id="layout-container">
-                <html:div id="layout-main">
-                  <html:span class="layout-legend" data-box="margin" title="&margin.tooltip;">&margin.tooltip;</html:span>
-                  <html:div id="layout-margins" data-box="margin" title="&margin.tooltip;">
-                    <html:span class="layout-legend" data-box="border" title="&border.tooltip;">&border.tooltip;</html:span>
-                    <html:div id="layout-borders" data-box="border" title="&border.tooltip;">
-                      <html:span class="layout-legend" data-box="padding" title="&padding.tooltip;">&padding.tooltip;</html:span>
-                      <html:div id="layout-padding" data-box="padding" title="&padding.tooltip;">
-                        <html:div id="layout-content" data-box="content" title="&content.tooltip;">
+              <html:div id="boxmodel-container">
+                <html:div id="boxmodel-main">
+                  <html:span class="boxmodel-legend" data-box="margin" title="&margin.tooltip;">&margin.tooltip;</html:span>
+                  <html:div id="boxmodel-margins" data-box="margin" title="&margin.tooltip;">
+                    <html:span class="boxmodel-legend" data-box="border" title="&border.tooltip;">&border.tooltip;</html:span>
+                    <html:div id="boxmodel-borders" data-box="border" title="&border.tooltip;">
+                      <html:span class="boxmodel-legend" data-box="padding" title="&padding.tooltip;">&padding.tooltip;</html:span>
+                      <html:div id="boxmodel-padding" data-box="padding" title="&padding.tooltip;">
+                        <html:div id="boxmodel-content" data-box="content" title="&content.tooltip;">
                         </html:div>
                       </html:div>
                     </html:div>
                   </html:div>
 
-                  <html:p class="layout-margin layout-top"><html:span data-box="margin" class="layout-editable" title="margin-top"></html:span></html:p>
-                  <html:p class="layout-margin layout-right"><html:span data-box="margin" class="layout-editable" title="margin-right"></html:span></html:p>
-                  <html:p class="layout-margin layout-bottom"><html:span data-box="margin" class="layout-editable" title="margin-bottom"></html:span></html:p>
-                  <html:p class="layout-margin layout-left"><html:span data-box="margin" class="layout-editable" title="margin-left"></html:span></html:p>
+                  <html:p class="boxmodel-margin boxmodel-top"><html:span data-box="margin" class="boxmodel-editable" title="margin-top"></html:span></html:p>
+                  <html:p class="boxmodel-margin boxmodel-right"><html:span data-box="margin" class="boxmodel-editable" title="margin-right"></html:span></html:p>
+                  <html:p class="boxmodel-margin boxmodel-bottom"><html:span data-box="margin" class="boxmodel-editable" title="margin-bottom"></html:span></html:p>
+                  <html:p class="boxmodel-margin boxmodel-left"><html:span data-box="margin" class="boxmodel-editable" title="margin-left"></html:span></html:p>
 
-                  <html:p class="layout-border layout-top"><html:span data-box="border" class="layout-editable" title="border-top"></html:span></html:p>
-                  <html:p class="layout-border layout-right"><html:span data-box="border" class="layout-editable" title="border-right"></html:span></html:p>
-                  <html:p class="layout-border layout-bottom"><html:span data-box="border" class="layout-editable" title="border-bottom"></html:span></html:p>
-                  <html:p class="layout-border layout-left"><html:span data-box="border" class="layout-editable" title="border-left"></html:span></html:p>
+                  <html:p class="boxmodel-border boxmodel-top"><html:span data-box="border" class="boxmodel-editable" title="border-top"></html:span></html:p>
+                  <html:p class="boxmodel-border boxmodel-right"><html:span data-box="border" class="boxmodel-editable" title="border-right"></html:span></html:p>
+                  <html:p class="boxmodel-border boxmodel-bottom"><html:span data-box="border" class="boxmodel-editable" title="border-bottom"></html:span></html:p>
+                  <html:p class="boxmodel-border boxmodel-left"><html:span data-box="border" class="boxmodel-editable" title="border-left"></html:span></html:p>
 
-                  <html:p class="layout-padding layout-top"><html:span data-box="padding" class="layout-editable" title="padding-top"></html:span></html:p>
-                  <html:p class="layout-padding layout-right"><html:span data-box="padding" class="layout-editable" title="padding-right"></html:span></html:p>
-                  <html:p class="layout-padding layout-bottom"><html:span data-box="padding" class="layout-editable" title="padding-bottom"></html:span></html:p>
-                  <html:p class="layout-padding layout-left"><html:span data-box="padding" class="layout-editable" title="padding-left"></html:span></html:p>
+                  <html:p class="boxmodel-padding boxmodel-top"><html:span data-box="padding" class="boxmodel-editable" title="padding-top"></html:span></html:p>
+                  <html:p class="boxmodel-padding boxmodel-right"><html:span data-box="padding" class="boxmodel-editable" title="padding-right"></html:span></html:p>
+                  <html:p class="boxmodel-padding boxmodel-bottom"><html:span data-box="padding" class="boxmodel-editable" title="padding-bottom"></html:span></html:p>
+                  <html:p class="boxmodel-padding boxmodel-left"><html:span data-box="padding" class="boxmodel-editable" title="padding-left"></html:span></html:p>
 
-                  <html:p class="layout-size"><html:span data-box="content" title="&content.tooltip;"></html:span></html:p>
+                  <html:p class="boxmodel-size"><html:span data-box="content" title="&content.tooltip;"></html:span></html:p>
                 </html:div>
 
-                <html:div id="layout-info">
-                  <html:span id="layout-element-size"></html:span>
-                  <html:section id="layout-position-group">
+                <html:div id="boxmodel-info">
+                  <html:span id="boxmodel-element-size"></html:span>
+                  <html:section id="boxmodel-position-group">
                     <html:button class="devtools-button" id="layout-geometry-editor" title="&geometry.button.tooltip;"></html:button>
-                    <html:span id="layout-element-position"></html:span>
+                    <html:span id="boxmodel-element-position"></html:span>
                   </html:section>
                 </html:div>
 
                 <html:div style="display: none">
-                  <html:p id="layout-dummy"></html:p>
+                  <html:p id="boxmodel-dummy"></html:p>
                 </html:div>
               </html:div>
             </html:div>
 
             <html:div id="propertyContainer" class="theme-separator" tabindex="0">
             </html:div>
 
             <html:div id="computedview-no-results" hidden="">
deleted file mode 100644
--- a/devtools/client/inspector/layout/moz.build
+++ /dev/null
@@ -1,11 +0,0 @@
-# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
-# vim: set filetype=python:
-# This Source Code Form is subject to the terms of the Mozilla Public
-# License, v. 2.0. If a copy of the MPL was not distributed with this
-# file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-DevToolsModules(
-    'layout.js',
-)
-
-BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
--- a/devtools/client/inspector/moz.build
+++ b/devtools/client/inspector/moz.build
@@ -1,17 +1,16 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
     'components',
     'computed',
     'fonts',
-    'layout',
     'markup',
     'rules',
     'shared'
 ]
 
 DevToolsModules(
     'breadcrumbs.js',
     'inspector-commands.js',
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -21,17 +21,16 @@ devtools.jar:
 *   content/scratchpad/scratchpad.xul (scratchpad/scratchpad.xul)
     content/scratchpad/scratchpad.js (scratchpad/scratchpad.js)
     content/shared/splitview.css (shared/splitview.css)
     content/shared/theme-switching.js (shared/theme-switching.js)
     content/shared/frame-script-utils.js (shared/frame-script-utils.js)
     content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
     content/storage/storage.xul (storage/storage.xul)
     content/inspector/fonts/fonts.js (inspector/fonts/fonts.js)
-    content/inspector/layout/layout.js (inspector/layout/layout.js)
     content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
     content/animationinspector/animation-controller.js (animationinspector/animation-controller.js)
     content/animationinspector/animation-panel.js (animationinspector/animation-panel.js)
     content/animationinspector/animation-inspector.xhtml (animationinspector/animation-inspector.xhtml)
     content/sourceeditor/codemirror/addon/hint/show-hint.js (sourceeditor/codemirror/addon/hint/show-hint.js)
     content/sourceeditor/codemirror/addon/tern/tern.js (sourceeditor/codemirror/addon/tern/tern.js)
     content/sourceeditor/codemirror/codemirror.bundle.js (sourceeditor/codemirror/codemirror.bundle.js)
     content/sourceeditor/codemirror/lib/codemirror.css (sourceeditor/codemirror/lib/codemirror.css)
@@ -207,17 +206,17 @@ devtools.jar:
     skin/images/search.svg (themes/images/search.svg)
     skin/images/itemToggle.svg (themes/images/itemToggle.svg)
     skin/images/itemArrow-dark-rtl.svg (themes/images/itemArrow-dark-rtl.svg)
     skin/images/itemArrow-dark-ltr.svg (themes/images/itemArrow-dark-ltr.svg)
     skin/images/itemArrow-rtl.svg (themes/images/itemArrow-rtl.svg)
     skin/images/itemArrow-ltr.svg (themes/images/itemArrow-ltr.svg)
     skin/images/noise.png (themes/images/noise.png)
     skin/images/dropmarker.svg (themes/images/dropmarker.svg)
-    skin/layout.css (themes/layout.css)
+    skin/boxmodel.css (themes/boxmodel.css)
     skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
     skin/images/pause.svg (themes/images/pause.svg)
     skin/images/play.svg (themes/images/play.svg)
     skin/images/fast-forward.svg (themes/images/fast-forward.svg)
     skin/images/rewind.svg (themes/images/rewind.svg)
     skin/images/debugger-step-in.svg (themes/images/debugger-step-in.svg)
     skin/images/debugger-step-out.svg (themes/images/debugger-step-out.svg)
     skin/images/debugger-step-over.svg (themes/images/debugger-step-over.svg)
rename from devtools/client/themes/layout.css
rename to devtools/client/themes/boxmodel.css
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/boxmodel.css
@@ -1,258 +1,258 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/ */
 
-#layout-wrapper {
+#boxmodel-wrapper {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-color: var(--theme-splitter-color);
 }
 
-#layout-container {
+#boxmodel-container {
   /* The view will grow bigger as the window gets resized, until 400px */
   max-width: 400px;
   margin: 0px auto;
   padding: 0;
 }
 
 /* Header */
 
-#layout-header,
-#layout-info {
+#boxmodel-header,
+#boxmodel-info {
   display: flex;
   align-items: center;
   padding: 4px 17px;
 }
 
 #layout-geometry-editor {
   visibility: hidden;
 }
 
 #layout-geometry-editor::before {
   background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
 }
 
 /* Main: contains the box-model regions */
 
-#layout-main {
+#boxmodel-main {
   position: relative;
   box-sizing: border-box;
   /* The regions are semi-transparent, so the white background is partly
      visible */
   background-color: white;
   color: var(--theme-selection-color);
   /* Make sure there is some space between the window's edges and the regions */
   margin: 0 14px 4px 14px;
   width: calc(100% - 2 * 14px);
 }
 
-.layout-margin,
-.layout-size {
+.boxmodel-margin,
+.boxmodel-size {
   color: var(--theme-highlight-blue);
 }
 
 /* Regions are 3 nested elements with wide borders and outlines */
 
-#layout-content {
+#boxmodel-content {
   height: 18px;
 }
 
-#layout-margins,
-#layout-borders,
-#layout-padding {
+#boxmodel-margins,
+#boxmodel-borders,
+#boxmodel-padding {
   border-color: hsla(210,100%,85%,0.2);
   border-width: 18px;
   border-style: solid;
   outline: dotted 1px hsl(210,100%,85%);
 }
 
-#layout-margins {
+#boxmodel-margins {
   /* This opacity applies to all of the regions, since they are nested */
   opacity: .8;
 }
 
 /* Regions colors */
 
-#layout-margins {
+#boxmodel-margins {
   border-color: #edff64;
 }
 
-#layout-borders {
+#boxmodel-borders {
   border-color: #444444;
 }
 
-#layout-padding {
+#boxmodel-padding {
   border-color: #6a5acd;
 }
 
-#layout-content {
+#boxmodel-content {
   background-color: #87ceeb;
 }
 
-.theme-firebug #layout-main,
-.theme-firebug #layout-borders,
-.theme-firebug #layout-content {
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-borders,
+.theme-firebug #boxmodel-content {
   border-style: solid;
 }
 
-.theme-firebug #layout-main,
-.theme-firebug #layout-header {
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-header {
   font-family: var(--proportional-font-family);
 }
 
-.theme-firebug #layout-main {
+.theme-firebug #boxmodel-main {
   color: var(--theme-body-color);
   font-size: var(--theme-toolbar-font-size);
 }
 
-.theme-firebug #layout-header {
+.theme-firebug #boxmodel-header {
   font-size: var(--theme-toolbar-font-size);
 }
 
 /* Editable region sizes are contained in absolutely positioned <p> */
 
-#layout-main > p {
+#boxmodel-main > p {
   position: absolute;
   pointer-events: none;
   margin: 0;
   text-align: center;
 }
 
-#layout-main > p > span,
-#layout-main > p > input {
+#boxmodel-main > p > span,
+#boxmodel-main > p > input {
   vertical-align: middle;
   pointer-events: auto;
 }
 
 /* Coordinates for the region sizes */
 
-.layout-top,
-.layout-bottom {
+.boxmodel-top,
+.boxmodel-bottom {
   width: calc(100% - 2px);
   text-align: center;
 }
 
-.layout-padding.layout-top {
+.boxmodel-padding.boxmodel-top {
   top: 37px;
 }
 
-.layout-padding.layout-bottom {
+.boxmodel-padding.boxmodel-bottom {
   bottom: 38px;
 }
 
-.layout-border.layout-top {
+.boxmodel-border.boxmodel-top {
   top: 19px;
 }
 
-.layout-border.layout-bottom {
+.boxmodel-border.boxmodel-bottom {
   bottom: 20px;
 }
 
-.layout-margin.layout-top {
+.boxmodel-margin.boxmodel-top {
   top: 1px;
 }
 
-.layout-margin.layout-bottom {
+.boxmodel-margin.boxmodel-bottom {
   bottom: 2px;
 }
 
-.layout-size,
-.layout-margin.layout-left,
-.layout-margin.layout-right,
-.layout-border.layout-left,
-.layout-border.layout-right,
-.layout-padding.layout-left,
-.layout-padding.layout-right {
+.boxmodel-size,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-margin.boxmodel-right,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-left,
+.boxmodel-padding.boxmodel-right {
   top: 22px;
   line-height: 80px;
 }
 
-.layout-size {
+.boxmodel-size {
   width: calc(100% - 2px);
 }
 
-.layout-margin.layout-right,
-.layout-margin.layout-left,
-.layout-border.layout-left,
-.layout-border.layout-right,
-.layout-padding.layout-right,
-.layout-padding.layout-left {
+.boxmodel-margin.boxmodel-right,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-right,
+.boxmodel-padding.boxmodel-left {
   width: 21px;
 }
 
-.layout-padding.layout-left {
+.boxmodel-padding.boxmodel-left {
   left: 35px;
 }
 
-.layout-padding.layout-right {
+.boxmodel-padding.boxmodel-right {
   right: 35px;
 }
 
-.layout-border.layout-left {
+.boxmodel-border.boxmodel-left {
   left: 16px;
 }
 
-.layout-border.layout-right {
+.boxmodel-border.boxmodel-right {
   right: 17px;
 }
 
-.layout-margin.layout-right {
+.boxmodel-margin.boxmodel-right {
   right: 0;
 }
 
-.layout-margin.layout-left {
+.boxmodel-margin.boxmodel-left {
   left: 0;
 }
 
-.layout-rotate.layout-left:not(.layout-editing) {
+.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
   transform: rotate(-90deg);
 }
 
-.layout-rotate.layout-right:not(.layout-editing) {
+.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
   transform: rotate(90deg);
 }
 
 /* Legend: displayed inside regions */
 
-.layout-legend {
+.boxmodel-legend {
   position: absolute;
   margin: 2px 6px;
   z-index: 1;
 }
 
-.layout-legend[data-box="margin"] {
+.boxmodel-legend[data-box="margin"] {
   color: var(--theme-highlight-blue);
 }
 
 /* Editable fields */
 
-.layout-editable {
+.boxmodel-editable {
   border: 1px dashed transparent;
   -moz-user-select: text;
 }
 
-.layout-editable:hover {
+.boxmodel-editable:hover {
   border-bottom-color: hsl(0, 0%, 50%);
 }
 
 .styleinspector-propertyeditor {
   border: 1px solid #ccc;
   padding: 0;
 }
 
 /* Make sure the content size doesn't appear as editable like the other sizes */
 
-.layout-size > span {
+.boxmodel-size > span {
   cursor: default;
 }
 
-/* Layout info: contains the position and size of the element */
+/* Box Model Info: contains the position and size of the element */
 
-#layout-element-size {
+#boxmodel-element-size {
   flex: 1;
 }
 
-#layout-position-group {
+#boxmodel-position-group {
   display: flex;
   align-items: center;
 }
--- a/devtools/server/actors/highlighters.js
+++ b/devtools/server/actors/highlighters.js
@@ -67,17 +67,17 @@ exports.register = register;
  *   know how to create and attach the actual highlighter elements on top of the
  *   content
  *
  * The most used highlighter actor is the HighlighterActor which can be
  * conveniently retrieved via the InspectorActor's 'getHighlighter' method.
  * The InspectorActor will always return the same instance of
  * HighlighterActor if asked several times and this instance is used in the
  * toolbox to highlighter elements's box-model from the markup-view,
- * layout-view, console, debugger, ... as well as select elements with the
+ * box model view, console, debugger, ... as well as select elements with the
  * pointer (pick).
  *
  * Other types of highlighter actors exist and can be accessed via the
  * InspectorActor's 'getHighlighterByType' method.
  */
 
 /**
  * The HighlighterActor class
--- a/devtools/server/actors/inspector.js
+++ b/devtools/server/actors/inspector.js
@@ -2648,17 +2648,17 @@ exports.InspectorActor = protocol.ActorC
   },
 
   /**
    * The most used highlighter actor is the HighlighterActor which can be
    * conveniently retrieved by this method.
    * The same instance will always be returned by this method when called
    * several times.
    * The highlighter actor returned here is used to highlighter elements's
-   * box-models from the markup-view, layout-view, console, debugger, ... as
+   * box-models from the markup-view, box model, console, debugger, ... as
    * well as select elements with the pointer (pick).
    *
    * @param {Boolean} autohide Optionally autohide the highlighter after an
    * element has been picked
    * @return {HighlighterActor}
    */
   getHighlighter: function (autohide) {
     if (this._highlighterPromise) {
--- a/devtools/server/actors/styles.js
+++ b/devtools/server/actors/styles.js
@@ -755,17 +755,17 @@ var PageStyleActor = protocol.ActorClass
    * all margins that are set to auto, e.g. {top: "auto", left: "auto"}.
    * @return {Object}
    */
   getLayout: function (node, options) {
     this.cssLogic.highlight(node.rawNode);
 
     let layout = {};
 
-    // First, we update the first part of the layout view, with
+    // First, we update the first part of the box model view, with
     // the size of the element.
 
     let clientRect = node.rawNode.getBoundingClientRect();
     layout.width = parseFloat(clientRect.width.toPrecision(6));
     layout.height = parseFloat(clientRect.height.toPrecision(6));
 
     // We compute and update the values of margins & co.
     let style = CssLogic.getComputedStyle(node.rawNode);