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 355637 639635348b41780875198e5f702d5714078deeee
parent 355629 eaf5eb6f8fa0d8e7a09f3774c0da53c0dd6dadd7
child 355638 a01c29ae52955d373d5766010b34722f2c9a0f8f
push id6570
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:26:13 +0000
treeherdermozilla-beta@f455459b2ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1302496
milestone51.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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);