Backed out changeset 57ba784a1cd9 (bug 1351685) for ESlint failure on browser_boxmodel_computed-accordion-state.js

devtools/client/inspector/boxmodel/components/BoxModelApp.js

@@ -0,0 +1,56 @@
+/* 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/. */
+
+"use strict";
+
+const Services = require("Services");
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { LocalizationHelper } = require("devtools/shared/l10n");
+
+const Accordion =
+  createFactory(require("devtools/client/inspector/layout/components/Accordion"));
+const BoxModel = createFactory(require("./BoxModel"));
+
+const Types = require("../types");
+
+const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
+const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
+
+const BOXMODEL_OPENED_PREF = "devtools.computed.boxmodel.opened";
+
+class BoxModelApp extends PureComponent {
+  static get propTypes() {
+    return {
+      boxModel: PropTypes.shape(Types.boxModel).isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      showBoxModelProperties: PropTypes.bool.isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelEditor: PropTypes.func.isRequired,
+      onShowBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      onToggleGeometryEditor: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    return Accordion({
+      items: [
+        {
+          header: BOXMODEL_L10N.getStr("boxmodel.title"),
+          component: BoxModel,
+          componentProps: this.props,
+          opened: Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
+          onToggled: () => {
+            let opened = Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF);
+            Services.prefs.setBoolPref(BOXMODEL_OPENED_PREF, !opened);
+          }
+        }
+      ]
+    });
+  }
+}
+
+module.exports = connect(state => state)(BoxModelApp);

devtools/client/inspector/boxmodel/components/moz.build

@@ -6,6 +6,7 @@
 
 DevToolsModules(
     'BoxModel.js',
+    'BoxModelApp.js',
     'BoxModelEditable.js',
     'BoxModelInfo.js',
     'BoxModelMain.js',

devtools/client/inspector/boxmodel/test/browser_boxmodel.js

@@ -157,27 +157,27 @@ add_task(function* () {
   let html = "<style>" + style + "</style><div></div>";
 
   yield addTab("data:text/html," + encodeURIComponent(html));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
   yield selectNode("div", inspector);
 
-  yield testInitialValues(inspector, boxmodel);
-  yield testChangingValues(inspector, boxmodel, testActor);
+  yield testInitialValues(inspector, view);
+  yield testChangingValues(inspector, view, testActor);
 });
 
-function* testInitialValues(inspector, boxmodel) {
+function* testInitialValues(inspector, view) {
   info("Test that the initial values of the box model are correct");
-  let doc = boxmodel.document;
+  let viewdoc = view.document;
 
   for (let i = 0; i < res1.length; i++) {
-    let elt = doc.querySelector(res1[i].selector);
+    let elt = viewdoc.querySelector(res1[i].selector);
     is(elt.textContent, res1[i].value,
        res1[i].selector + " has the right value.");
   }
 }
 
-function* testChangingValues(inspector, boxmodel, testActor) {
+function* testChangingValues(inspector, view, testActor) {
   info("Test that changing the document updates the box model");
-  let doc = boxmodel.document;
+  let viewdoc = view.document;
 
   let onUpdated = waitForUpdate(inspector);
   yield testActor.setAttribute("div", "style",
@@ -185,7 +185,7 @@ function* testChangingValues(inspector, boxmodel, testActor) {
   yield onUpdated;
 
   for (let i = 0; i < res2.length; i++) {
-    let elt = doc.querySelector(res2[i].selector);
+    let elt = viewdoc.querySelector(res2[i].selector);
     is(elt.textContent, res2[i].value,
        res2[i].selector + " has the right value after style update.");
   }

devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js

@@ -18,27 +18,26 @@ const TEST_URI = `
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
 
   yield selectNode("#mydiv", inspector);
-  let editPositionButton = boxmodel.document.querySelector(".layout-geometry-editor");
+  let editPositionButton = view.document.querySelector(".layout-geometry-editor");
 
   ok(isNodeVisible(editPositionButton), "Edit Position button is visible initially");
 
-  let positionLeftTextbox = boxmodel.document.querySelector(
+  let positionLeftTextbox = view.document.querySelector(
       ".boxmodel-editable[title=position-left]"
   );
   ok(isNodeVisible(positionLeftTextbox), "Position-left edit box exists");
 
   info("Change the value of position-left and submit");
   let onUpdate = waitForUpdate(inspector);
-  EventUtils.synthesizeMouseAtCenter(positionLeftTextbox, {},
-    boxmodel.document.defaultView);
-  EventUtils.synthesizeKey("8", {}, boxmodel.document.defaultView);
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeMouseAtCenter(positionLeftTextbox, {}, view.document.defaultView);
+  EventUtils.synthesizeKey("8", {}, view.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   yield onUpdate;
-  editPositionButton = boxmodel.document.querySelector(".layout-geometry-editor");
+  editPositionButton = view.document.querySelector(".layout-geometry-editor");
   ok(isNodeVisible(editPositionButton),
     "Edit Position button is still visible after layout change");
 });

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js

@@ -19,16 +19,16 @@ const TEST_URI = "<style>" +
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
-  yield testEditingMargins(inspector, boxmodel, testActor);
-  yield testKeyBindings(inspector, boxmodel, testActor);
-  yield testEscapeToUndo(inspector, boxmodel, testActor);
-  yield testDeletingValue(inspector, boxmodel, testActor);
-  yield testRefocusingOnClick(inspector, boxmodel, testActor);
+  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, boxmodel, testActor) {
+function* testEditingMargins(inspector, view, testActor) {
   info("Test that editing margin dynamically updates the document, pressing " +
        "escape cancels the changes");
 
@@ -36,21 +36,21 @@ function* testEditingMargins(inspector, boxmodel, testActor) {
      "Should be no margin-top on the element.");
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+  let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("3", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is((yield getStyle(testActor, "#div1", "margin-top")), "3px",
      "Should have updated the margin.");
 
-  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is((yield getStyle(testActor, "#div1", "margin-top")), "",
@@ -58,7 +58,7 @@ function* testEditingMargins(inspector, boxmodel, testActor) {
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
 
-function* testKeyBindings(inspector, boxmodel, testActor) {
+function* testKeyBindings(inspector, view, testActor) {
   info("Test that arrow keys work correctly and pressing enter commits the " +
        "changes");
 
@@ -66,42 +66,42 @@ function* testKeyBindings(inspector, boxmodel, testActor) {
      "Should be no margin-top on the element.");
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-left > span");
+  let span = view.document.querySelector(".boxmodel-margin.boxmodel-left > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_UP", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "11px", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "margin-left")), "11px",
      "Should have updated the margin.");
 
-  EventUtils.synthesizeKey("VK_DOWN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_DOWN", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "10px", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "margin-left")), "10px",
      "Should have updated the margin.");
 
-  EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "20px", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
      "Should have updated the margin.");
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
      "Should be the right margin-top on the element.");
   is(span.textContent, 20, "Should have the right value in the box model.");
 }
 
-function* testEscapeToUndo(inspector, boxmodel, testActor) {
+function* testEscapeToUndo(inspector, view, testActor) {
   info("Test that deleting the value removes the property but escape undoes " +
        "that");
 
@@ -109,22 +109,22 @@ function* testEscapeToUndo(inspector, boxmodel, testActor) {
      "Should be the right margin-top on the element.");
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-left > span");
+  let span = view.document.querySelector(".boxmodel-margin.boxmodel-left > span");
   is(span.textContent, 20, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "margin-left")), "",
      "Should have updated the margin.");
 
-  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
@@ -132,7 +132,7 @@ function* testEscapeToUndo(inspector, boxmodel, testActor) {
   is(span.textContent, 20, "Should have the right value in the box model.");
 }
 
-function* testDeletingValue(inspector, boxmodel, testActor) {
+function* testDeletingValue(inspector, view, testActor) {
   info("Test that deleting the value removes the property");
 
   yield setStyle(testActor, "#div1", "marginRight", "15px");
@@ -140,53 +140,53 @@ function* testDeletingValue(inspector, boxmodel, testActor) {
 
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-right > span");
+  let span = view.document.querySelector(".boxmodel-margin.boxmodel-right > span");
   is(span.textContent, 15, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "margin-right")), "",
      "Should have updated the margin.");
 
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div1", "margin-right")), "",
      "Should be the right margin-top on the element.");
   is(span.textContent, 10, "Should have the right value in the box model.");
 }
 
-function* testRefocusingOnClick(inspector, boxmodel, testActor) {
+function* testRefocusingOnClick(inspector, view, testActor) {
   info("Test that clicking in the editor input does not remove focus");
 
   yield selectNode("#div4", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+  let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 1, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   info("Click in the already opened editor input");
-  EventUtils.synthesizeMouseAtCenter(editor, {}, boxmodel.document.defaultView);
-  is(editor, boxmodel.document.activeElement,
+  EventUtils.synthesizeMouseAtCenter(editor, {}, view.document.defaultView);
+  is(editor, view.document.activeElement,
     "Inplace editor input should still have focus.");
 
   info("Check the input can still be used as expected");
-  EventUtils.synthesizeKey("VK_UP", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_UP", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "2px", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
      "Should have updated the margin.");
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
      "Should be the right margin-top on the element.");

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js

@@ -16,15 +16,15 @@ const TEST_URI = "<style>" +
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
-  yield testEditing(inspector, boxmodel, testActor);
-  yield testEditingAndCanceling(inspector, boxmodel, testActor);
-  yield testDeleting(inspector, boxmodel, testActor);
-  yield testDeletingAndCanceling(inspector, boxmodel, testActor);
+  yield testEditing(inspector, view, testActor);
+  yield testEditingAndCanceling(inspector, view, testActor);
+  yield testDeleting(inspector, view, testActor);
+  yield testDeletingAndCanceling(inspector, view, testActor);
 });
 
-function* testEditing(inspector, boxmodel, 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");
@@ -32,29 +32,29 @@ function* testEditing(inspector, boxmodel, testActor) {
 
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
+  let span = view.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("7", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "7", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
      "Should have updated the padding");
 
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
      "Should be the right padding.");
   is(span.textContent, 7, "Should have the right value in the box model.");
 }
 
-function* testEditingAndCanceling(inspector, boxmodel, testActor) {
+function* testEditingAndCanceling(inspector, view, testActor) {
   info("When all properties are set on the node editing one and then " +
        "cancelling with ESCAPE should work");
 
@@ -63,22 +63,22 @@ function* testEditingAndCanceling(inspector, boxmodel, testActor) {
 
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
+  let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("8", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "8", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "padding-left")), "8px",
      "Should have updated the padding");
 
-  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
@@ -86,34 +86,34 @@ function* testEditingAndCanceling(inspector, boxmodel, testActor) {
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
 
-function* testDeleting(inspector, boxmodel, testActor) {
+function* testDeleting(inspector, view, testActor) {
   info("When all properties are set on the node deleting one should work");
 
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
+  let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "padding-left")), "",
      "Should have updated the padding");
 
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div1", "padding-left")), "",
      "Should be the right padding.");
   is(span.textContent, 3, "Should have the right value in the box model.");
 }
 
-function* testDeletingAndCanceling(inspector, boxmodel, testActor) {
+function* testDeletingAndCanceling(inspector, view, testActor) {
   info("When all properties are set on the node deleting one then cancelling " +
        "should work");
 
@@ -122,22 +122,22 @@ function* testDeletingAndCanceling(inspector, boxmodel, testActor) {
 
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
+  let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "padding-left")), "",
      "Should have updated the padding");
 
-  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is((yield getStyle(testActor, "#div1", "padding-left")), "5px",

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js

@@ -21,54 +21,54 @@ add_task(function* () {
   yield pushPref("devtools.toolbox.footer.height", 500);
 
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
 
   yield selectNode("#div1", inspector);
-  yield testClickingOutsideEditor(boxmodel);
-  yield testClickingBelowContainer(boxmodel);
+  yield testClickingOutsideEditor(view);
+  yield testClickingBelowContainer(view);
 });
 
-function* testClickingOutsideEditor(boxmodel) {
+function* testClickingOutsideEditor(view) {
   info("Test that clicking outside the editor blurs it");
-  let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+  let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   info("Click next to the opened editor input.");
   let onBlur = once(editor, "blur");
   let rect = editor.getBoundingClientRect();
   EventUtils.synthesizeMouse(editor, rect.width + 10, rect.height / 2, {},
-    boxmodel.document.defaultView);
+    view.document.defaultView);
   yield onBlur;
 
-  is(boxmodel.document.querySelector(".styleinspector-propertyeditor"), null,
+  is(view.document.querySelector(".styleinspector-propertyeditor"), null,
     "Inplace editor has been removed.");
 }
 
-function* testClickingBelowContainer(boxmodel) {
+function* testClickingBelowContainer(view) {
   info("Test that clicking below the box-model container blurs it");
-  let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+  let span = view.document.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 boxmodel-container blurs the opened editor");
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   let onBlur = once(editor, "blur");
-  let container = boxmodel.document.querySelector(".boxmodel-container");
+  let container = view.document.querySelector(".boxmodel-container");
   // Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
   // use an erroneous height of ~50px for the boxmodel-container.
-  let bounds = container.getBoxQuads({relativeTo: boxmodel.document})[0].bounds;
+  let bounds = container.getBoxQuads({relativeTo: view.doc})[0].bounds;
   EventUtils.synthesizeMouseAtPoint(
     bounds.left + 10,
     bounds.top + bounds.height + 10,
-    {}, boxmodel.document.defaultView);
+    {}, view.document.defaultView);
   yield onBlur;
 
-  is(boxmodel.document.querySelector(".styleinspector-propertyeditor"), null,
+  is(view.document.querySelector(".styleinspector-propertyeditor"), null,
     "Inplace editor has been removed.");
 }

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js

@@ -16,7 +16,7 @@ const TEST_URI = "<style>" +
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   is((yield getStyle(testActor, "#div1", "border-top-width")), "",
      "Should have the right border");
@@ -24,15 +24,15 @@ add_task(function* () {
      "Should have the right border");
   yield selectNode("#div1", inspector);
 
-  let span = boxmodel.document.querySelector(".boxmodel-border.boxmodel-top > span");
+  let span = view.document.querySelector(".boxmodel-border.boxmodel-top > span");
   is(span.textContent, 0, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("1", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "1", "Should have the right value in the editor.");
@@ -41,7 +41,7 @@ add_task(function* () {
   is((yield getStyle(testActor, "#div1", "border-top-style")), "solid",
      "Should have the right border");
 
-  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is((yield getStyle(testActor, "#div1", "border-top-width")), "",

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js

@@ -22,25 +22,24 @@ const TEST_URI =
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   yield selectNode(".test", inspector);
 
   // No margin-top defined.
   info("Test that margins are not impacted by a pseudo element");
   is((yield getStyle(testActor, ".test", "margin-top")), "", "margin-top is correct");
-  yield checkValueInBoxModel(".boxmodel-margin.boxmodel-top", "0", boxmodel.document);
+  yield checkValueInBoxModel(".boxmodel-margin.boxmodel-top", "0", view.document);
 
   // No padding-top defined.
   info("Test that paddings are not impacted by a pseudo element");
   is((yield getStyle(testActor, ".test", "padding-top")), "", "padding-top is correct");
-  yield checkValueInBoxModel(".boxmodel-padding.boxmodel-top", "0", boxmodel.document);
+  yield checkValueInBoxModel(".boxmodel-padding.boxmodel-top", "0", view.document);
 
   // Width should be driven by the parent div.
   info("Test that dimensions are not impacted by a pseudo element");
   is((yield getStyle(testActor, ".test", "width")), "", "width is correct");
-  yield checkValueInBoxModel(".boxmodel-content.boxmodel-width", "200",
-    boxmodel.document);
+  yield checkValueInBoxModel(".boxmodel-content.boxmodel-width", "200", view.document);
 });
 
 function* checkValueInBoxModel(selector, expectedValue, doc) {

devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js

@@ -17,95 +17,95 @@ const TEST_URI = "<style>" +
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
-  yield testUnits(inspector, boxmodel, testActor);
-  yield testValueComesFromStyleRule(inspector, boxmodel, testActor);
-  yield testShorthandsAreParsed(inspector, boxmodel, testActor);
+  yield testUnits(inspector, view, testActor);
+  yield testValueComesFromStyleRule(inspector, view, testActor);
+  yield testShorthandsAreParsed(inspector, view, testActor);
 });
 
-function* testUnits(inspector, boxmodel, 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 = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-top > span");
+  let span = view.document.querySelector(".boxmodel-padding.boxmodel-top > span");
   is(span.textContent, 3, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("1", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
-  EventUtils.synthesizeKey("e", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("e", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is((yield getStyle(testActor, "#div1", "padding-top")), "",
      "An invalid value is handled cleanly");
 
-  EventUtils.synthesizeKey("m", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("m", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "1em", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div1", "padding-top")),
      "1em", "Should have updated the padding.");
 
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div1", "padding-top")), "1em",
      "Should be the right padding.");
   is(span.textContent, 16, "Should have the right value in the box model.");
 }
 
-function* testValueComesFromStyleRule(inspector, boxmodel, testActor) {
+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 = boxmodel.document.querySelector(".boxmodel-border.boxmodel-bottom > span");
+  let span = view.document.querySelector(".boxmodel-border.boxmodel-bottom > span");
   is(span.textContent, 16, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("0", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "0", "Should have the right value in the editor.");
   is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
      "Should have updated the border.");
 
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
      "Should be the right border-bottom-width.");
   is(span.textContent, 0, "Should have the right value in the box model.");
 }
 
-function* testShorthandsAreParsed(inspector, boxmodel, testActor) {
+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 = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-right > span");
+  let span = view.document.querySelector(".boxmodel-padding.boxmodel-right > span");
   is(span.textContent, 32, "Should have the right value in the box model.");
 
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.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", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   is((yield getStyle(testActor, "#div3", "padding-right")), "",
      "Should be the right padding.");

devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js

@@ -19,7 +19,7 @@ var highlightedNodeFront, highlighterOptions;
 
 add_task(async function () {
   await addTab(TEST_URL);
-  let {toolbox, inspector, boxmodel} = await openLayoutView();
+  let {toolbox, inspector, view} = await openBoxModelView();
   await selectNode("div", inspector);
 
   // Mock the highlighter by replacing the showBoxModel method.
@@ -28,17 +28,17 @@ add_task(async function () {
     highlighterOptions = options;
   };
 
-  let elt = boxmodel.document.querySelector(".boxmodel-margins");
-  await testGuideOnLayoutHover(elt, "margin", inspector);
+  let elt = view.document.querySelector(".boxmodel-margins");
+  await testGuideOnLayoutHover(elt, "margin", inspector, view);
 
-  elt = boxmodel.document.querySelector(".boxmodel-borders");
-  await testGuideOnLayoutHover(elt, "border", inspector);
+  elt = view.document.querySelector(".boxmodel-borders");
+  await testGuideOnLayoutHover(elt, "border", inspector, view);
 
-  elt = boxmodel.document.querySelector(".boxmodel-paddings");
-  await testGuideOnLayoutHover(elt, "padding", inspector);
+  elt = view.document.querySelector(".boxmodel-paddings");
+  await testGuideOnLayoutHover(elt, "padding", inspector, view);
 
-  elt = boxmodel.document.querySelector(".boxmodel-content");
-  await testGuideOnLayoutHover(elt, "content", inspector);
+  elt = view.document.querySelector(".boxmodel-content");
+  await testGuideOnLayoutHover(elt, "content", inspector, view);
 });
 
 async function testGuideOnLayoutHover(elt, expectedRegion, inspector) {

devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js

@@ -17,104 +17,104 @@ const TEST_URI = `
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
   yield selectNode("div", inspector);
 
-  yield testInitialFocus(inspector, boxmodel);
-  yield testChangingLevels(inspector, boxmodel);
-  yield testTabbingWrapAround(inspector, boxmodel);
-  yield testChangingLevelsByClicking(inspector, boxmodel);
+  yield testInitialFocus(inspector, view);
+  yield testChangingLevels(inspector, view);
+  yield testTabbingWrapAround(inspector, view);
+  yield testChangingLevelsByClicking(inspector, view);
 });
 
-function* testInitialFocus(inspector, boxmodel) {
-  info("Test that the focus is(on margin layout.");
-  let doc = boxmodel.document;
-  let container = doc.querySelector(".boxmodel-container");
-  container.focus();
+function* testInitialFocus(inspector, view) {
+  info("Test that the focus is on margin layout.");
+  let viewdoc = view.document;
+  let boxmodel = viewdoc.querySelector(".boxmodel-container");
+  boxmodel.focus();
   EventUtils.synthesizeKey("KEY_Enter");
 
-  is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
     "Should be set to the position layout.");
 }
 
-function* testChangingLevels(inspector, boxmodel) {
+function* testChangingLevels(inspector, view) {
   info("Test that using arrow keys updates level.");
-  let doc = boxmodel.document;
-  let container = doc.querySelector(".boxmodel-container");
-  container.focus();
+  let viewdoc = view.document;
+  let boxmodel = viewdoc.querySelector(".boxmodel-container");
+  boxmodel.focus();
   EventUtils.synthesizeKey("KEY_Enter");
   EventUtils.synthesizeKey("KEY_Escape");
 
   EventUtils.synthesizeKey("KEY_ArrowDown");
-  is(container.getAttribute("activedescendant"), "boxmodel-margins",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-margins",
     "Should be set to the margin layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowDown");
-  is(container.getAttribute("activedescendant"), "boxmodel-borders",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-borders",
     "Should be set to the border layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowDown");
-  is(container.getAttribute("activedescendant"), "boxmodel-paddings",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-paddings",
     "Should be set to the padding layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowDown");
-  is(container.getAttribute("activedescendant"), "boxmodel-contents",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-contents",
     "Should be set to the content layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowUp");
-  is(container.getAttribute("activedescendant"), "boxmodel-paddings",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-paddings",
     "Should be set to the padding layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowUp");
-  is(container.getAttribute("activedescendant"), "boxmodel-borders",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-borders",
     "Should be set to the border layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowUp");
-  is(container.getAttribute("activedescendant"), "boxmodel-margins",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-margins",
     "Should be set to the margin layout.");
 
   EventUtils.synthesizeKey("KEY_ArrowUp");
-  is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
+  is(boxmodel.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
     "Should be set to the position layout.");
 }
 
-function* testTabbingWrapAround(inspector, boxmodel) {
+function* testTabbingWrapAround(inspector, view) {
   info("Test that using arrow keys updates level.");
-  let doc = boxmodel.document;
-  let container = doc.querySelector(".boxmodel-container");
-  container.focus();
+  let viewdoc = view.document;
+  let boxmodel = viewdoc.querySelector(".boxmodel-container");
+  boxmodel.focus();
   EventUtils.synthesizeKey("KEY_Enter");
 
-  let editLevel = container.getAttribute("activedescendant").split(" ")[0];
-  let dataLevel = doc.querySelector(`.${editLevel}`).getAttribute("data-box");
-  let editBoxes = [...doc.querySelectorAll(
+  let editLevel = boxmodel.getAttribute("activedescendant").split(" ")[0];
+  let dataLevel = viewdoc.querySelector(`.${editLevel}`).getAttribute("data-box");
+  let editBoxes = [...viewdoc.querySelectorAll(
     `[data-box="${dataLevel}"].boxmodel-editable`)];
 
   EventUtils.synthesizeKey("KEY_Escape");
   editBoxes[3].focus();
   EventUtils.synthesizeKey("KEY_Tab");
-  is(editBoxes[0], doc.activeElement, "Top edit box should have focus.");
+  is(editBoxes[0], viewdoc.activeElement, "Top edit box should have focus.");
 
   editBoxes[0].focus();
   EventUtils.synthesizeKey("KEY_Tab", {shiftKey: true});
-  is(editBoxes[3], doc.activeElement, "Left edit box should have focus.");
+  is(editBoxes[3], viewdoc.activeElement, "Left edit box should have focus.");
 }
 
-function* testChangingLevelsByClicking(inspector, boxmodel) {
+function* testChangingLevelsByClicking(inspector, view) {
   info("Test that clicking on levels updates level.");
-  let doc = boxmodel.document;
-  let container = doc.querySelector(".boxmodel-container");
-  container.focus();
+  let viewdoc = view.document;
+  let boxmodel = viewdoc.querySelector(".boxmodel-container");
+  boxmodel.focus();
 
-  let marginLayout = doc.querySelector(".boxmodel-margins");
-  let borderLayout = doc.querySelector(".boxmodel-borders");
-  let paddingLayout = doc.querySelector(".boxmodel-paddings");
-  let contentLayout = doc.querySelector(".boxmodel-contents");
+  let marginLayout = viewdoc.querySelector(".boxmodel-margins");
+  let borderLayout = viewdoc.querySelector(".boxmodel-borders");
+  let paddingLayout = viewdoc.querySelector(".boxmodel-paddings");
+  let contentLayout = viewdoc.querySelector(".boxmodel-contents");
   let layouts = [contentLayout, paddingLayout, borderLayout, marginLayout];
 
   layouts.forEach(layout => {
     layout.click();
-    is(container.getAttribute("activedescendant"), layout.className,
+    is(boxmodel.getAttribute("activedescendant"), layout.className,
       "Should be set to" + layout.getAttribute("data-box") + "layout.");
   });
 }

devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js

@@ -44,21 +44,21 @@ const res1 = [
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
   let node = yield getNodeFront("div", inspector);
   let children = yield inspector.markup.walker.children(node);
   let beforeElement = children.nodes[0];
 
   yield selectNode(beforeElement, inspector);
-  yield testPositionValues(inspector, boxmodel);
+  yield testPositionValues(inspector, view);
 });
 
-function* testPositionValues(inspector, boxmodel) {
+function* testPositionValues(inspector, view) {
   info("Test that the position values of the box model are correct");
-  let doc = boxmodel.document;
+  let viewdoc = view.document;
 
   for (let i = 0; i < res1.length; i++) {
-    let elt = doc.querySelector(res1[i].selector);
+    let elt = viewdoc.querySelector(res1[i].selector);
     is(elt.textContent, res1[i].value,
        res1[i].selector + " has the right value.");
   }

devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js

@@ -99,21 +99,21 @@ const res1 = [
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
   let node = yield getNodeFront("div", inspector);
   let children = yield inspector.markup.walker.children(node);
   let beforeElement = children.nodes[0];
 
   yield selectNode(beforeElement, inspector);
-  yield testInitialValues(inspector, boxmodel);
+  yield testInitialValues(inspector, view);
 });
 
-function* testInitialValues(inspector, boxmodel) {
+function* testInitialValues(inspector, view) {
   info("Test that the initial values of the box model are correct");
-  let doc = boxmodel.document;
+  let viewdoc = view.document;
 
   for (let i = 0; i < res1.length; i++) {
-    let elt = doc.querySelector(res1[i].selector);
+    let elt = viewdoc.querySelector(res1[i].selector);
     is(elt.textContent, res1[i].value,
        res1[i].selector + " has the right value.");
   }

devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js

@@ -32,11 +32,11 @@ const LONG_TEXT_ROTATE_LIMIT = 3;
 
 add_task(function* () {
   yield addTab("data:text/html," + TEST_URI);
-  let {inspector, boxmodel} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
   yield selectNode("div", inspector);
 
   for (let i = 0; i < res1.length; i++) {
-    let elt = boxmodel.document.querySelector(res1[i].selector);
+    let elt = view.document.querySelector(res1[i].selector);
     let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
     let classList = elt.parentNode.classList;
     let canBeRotated = classList.contains("boxmodel-left") ||

devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js

@@ -10,21 +10,21 @@ const TEST_URI = "<p>hello</p>";
 
 add_task(function* () {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = 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 box model view");
-  let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
-  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
-  let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
+  let span = view.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+  let editor = view.document.querySelector(".styleinspector-propertyeditor");
 
-  EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("7", {}, view.document.defaultView);
   yield waitForUpdate(inspector);
   is(editor.value, "7", "Should have the right value in the editor.");
-  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
 
   let onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
   let onRuleViewSelected = once(inspector.sidebar, "ruleview-selected");

devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js

@@ -72,43 +72,43 @@ const VALUES_TEST_DATA = [{
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {inspector, boxmodel} = yield openLayoutView();
+  let {inspector, view} = yield openBoxModelView();
 
   info("Checking the regions tooltips");
 
-  ok(boxmodel.document.querySelector(".boxmodel-margins").hasAttribute("title"),
+  ok(view.document.querySelector(".boxmodel-margins").hasAttribute("title"),
     "The margin region has a tooltip");
-  is(boxmodel.document.querySelector(".boxmodel-margins").getAttribute("title"), "margin",
+  is(view.document.querySelector(".boxmodel-margins").getAttribute("title"), "margin",
     "The margin region has the correct tooltip content");
 
-  ok(boxmodel.document.querySelector(".boxmodel-borders").hasAttribute("title"),
+  ok(view.document.querySelector(".boxmodel-borders").hasAttribute("title"),
     "The border region has a tooltip");
-  is(boxmodel.document.querySelector(".boxmodel-borders").getAttribute("title"), "border",
+  is(view.document.querySelector(".boxmodel-borders").getAttribute("title"), "border",
     "The border region has the correct tooltip content");
 
-  ok(boxmodel.document.querySelector(".boxmodel-paddings").hasAttribute("title"),
+  ok(view.document.querySelector(".boxmodel-paddings").hasAttribute("title"),
     "The padding region has a tooltip");
-  is(boxmodel.document.querySelector(".boxmodel-paddings").getAttribute("title"),
-    "padding", "The padding region has the correct tooltip content");
+  is(view.document.querySelector(".boxmodel-paddings").getAttribute("title"), "padding",
+    "The padding region has the correct tooltip content");
 
-  ok(boxmodel.document.querySelector(".boxmodel-content").hasAttribute("title"),
+  ok(view.document.querySelector(".boxmodel-content").hasAttribute("title"),
     "The content region has a tooltip");
-  is(boxmodel.document.querySelector(".boxmodel-content").getAttribute("title"),
-    "content", "The content region has the correct tooltip content");
+  is(view.document.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 boxmodel.map) {
+    for (let key in view.map) {
       if (key === "position") {
         continue;
       }
 
-      let name = boxmodel.map[key].property;
+      let name = view.map[key].property;
       let expectedTooltipData = values.find(o => o.name === name);
-      let el = boxmodel.document.querySelector(boxmodel.map[key].selector);
+      let el = view.document.querySelector(view.map[key].selector);
 
       ok(el.hasAttribute("title"), "The " + name + " value has a tooltip");
 

devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js

@@ -12,32 +12,32 @@ const IFRAME2 = URL_ROOT + "doc_boxmodel_iframe2.html";
 
 add_task(function* () {
   yield addTab(IFRAME1);
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
-  yield testFirstPage(inspector, boxmodel, testActor);
+  yield testFirstPage(inspector, view, testActor);
 
   info("Navigate to the second page");
   let onMarkupLoaded = waitForMarkupLoaded(inspector);
   yield testActor.eval(`location.href="${IFRAME2}"`);
   yield onMarkupLoaded;
 
-  yield testSecondPage(inspector, boxmodel, testActor);
+  yield testSecondPage(inspector, view, testActor);
 
   info("Go back to the first page");
   onMarkupLoaded = waitForMarkupLoaded(inspector);
   yield testActor.eval("history.back();");
   yield onMarkupLoaded;
 
-  yield testBackToFirstPage(inspector, boxmodel, testActor);
+  yield testBackToFirstPage(inspector, view, testActor);
 });
 
-function* testFirstPage(inspector, boxmodel, testActor) {
+function* testFirstPage(inspector, view, testActor) {
   info("Test that the box model view works on the first page");
 
   yield selectNode("p", inspector);
 
   info("Checking that the box model view shows the right value");
-  let paddingElt = boxmodel.document.querySelector(
+  let paddingElt = view.document.querySelector(
     ".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "50");
 
@@ -51,13 +51,13 @@ function* testFirstPage(inspector, boxmodel, testActor) {
   is(paddingElt.textContent, "20");
 }
 
-function* testSecondPage(inspector, boxmodel, testActor) {
+function* testSecondPage(inspector, view, testActor) {
   info("Test that the box model view works on the second page");
 
   yield selectNode("p", inspector);
 
   info("Checking that the box model view shows the right value");
-  let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
+  let sizeElt = view.document.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "100" + "\u00D7" + "100");
 
   info("Listening for box model view changes and modifying the size");
@@ -70,14 +70,14 @@ function* testSecondPage(inspector, boxmodel, testActor) {
   is(sizeElt.textContent, "200" + "\u00D7" + "100");
 }
 
-function* testBackToFirstPage(inspector, boxmodel, testActor) {
+function* testBackToFirstPage(inspector, view, testActor) {
   info("Test that the box model view works on the first page after going back");
 
   yield selectNode("p", inspector);
 
   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 = boxmodel.document.querySelector(
+  let paddingElt = view.document.querySelector(
     ".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "20");
 

devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js

@@ -8,10 +8,10 @@
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
   info("Test that the box model view works on the first page");
-  yield assertBoxModelView(inspector, boxmodel, testActor);
+  yield assertBoxModelView(inspector, view, testActor);
 
   info("Reload the page");
   let onMarkupLoaded = waitForMarkupLoaded(inspector);
@@ -19,14 +19,14 @@ add_task(function* () {
   yield onMarkupLoaded;
 
   info("Test that the box model view works on the reloaded page");
-  yield assertBoxModelView(inspector, boxmodel, testActor);
+  yield assertBoxModelView(inspector, view, testActor);
 });
 
-function* assertBoxModelView(inspector, boxmodel, testActor) {
+function* assertBoxModelView(inspector, view, testActor) {
   yield selectNode("p", inspector);
 
   info("Checking that the box model view shows the right value");
-  let paddingElt = boxmodel.document.querySelector(
+  let paddingElt = view.document.querySelector(
     ".boxmodel-padding.boxmodel-top > span");
   is(paddingElt.textContent, "50");
 

devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js

@@ -9,20 +9,20 @@
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
-  let {inspector, boxmodel, testActor} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openBoxModelView();
 
-  yield testResizingInIframe(inspector, boxmodel, testActor);
-  yield testReflowsAfterIframeDeletion(inspector, boxmodel, testActor);
+  yield testResizingInIframe(inspector, view, testActor);
+  yield testReflowsAfterIframeDeletion(inspector, view, testActor);
 });
 
-function* testResizingInIframe(inspector, boxmodel, 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 box model view shows the right value");
-  let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
+  let sizeElt = view.document.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "400\u00D7200");
 
   info("Listening for box model view changes and modifying its size");
@@ -35,7 +35,7 @@ function* testResizingInIframe(inspector, boxmodel, testActor) {
   is(sizeElt.textContent, "200\u00D7200");
 }
 
-function* testReflowsAfterIframeDeletion(inspector, boxmodel, testActor) {
+function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
   info("Test reflows are still sent to the box model view after deleting an " +
        "iframe");
 
@@ -48,7 +48,7 @@ function* testReflowsAfterIframeDeletion(inspector, boxmodel, testActor) {
   yield selectNodeInIframe1("p", inspector);
 
   info("Checking that the box model view shows the right value");
-  let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
+  let sizeElt = view.document.querySelector(".boxmodel-size > span");
   is(sizeElt.textContent, "100\u00D7100");
 
   info("Listening for box model view changes and modifying its size");

devtools/client/inspector/boxmodel/test/head.js

@@ -45,6 +45,36 @@ function isNodeVisible(node) {
   return !!node.getClientRects().length;
 }
 
+/**
+ * Open the toolbox, with the inspector tool visible, and the computed view
+ * sidebar tab selected to display the box model view.
+ *
+ * @return {Promise} a promise that resolves when the inspector is ready and the box model
+ *         view is visible and ready.
+ */
+function openBoxModelView() {
+  return openInspectorSidebarTab("computedview").then(data => {
+    // 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.getPanel("computedview"),
+      testActor: data.testActor
+    };
+  });
+}
+
 /**
  * Wait for the boxmodel-view-updated event.
  *

devtools/client/inspector/computed/computed.js

@@ -27,6 +27,12 @@ const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overl
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 
+const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
+const ReactDOM = require("devtools/client/shared/vendor/react-dom");
+const { Provider } = require("devtools/client/shared/vendor/react-redux");
+
+const BoxModelApp = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModelApp"));
+
 const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
@@ -150,6 +156,7 @@ UpdateProcess.prototype = {
 function CssComputedView(inspector, document, pageStyle) {
   this.inspector = inspector;
   this.highlighters = inspector.highlighters;
+  this.store = inspector.store;
   this.styleDocument = document;
   this.styleWindow = this.styleDocument.defaultView;
   this.pageStyle = pageStyle;
@@ -170,6 +177,7 @@ function CssComputedView(inspector, document, pageStyle) {
 
   let doc = this.styleDocument;
   this.element = doc.getElementById("computed-property-container");
+  this.boxModelWrapper = doc.getElementById("boxmodel-wrapper");
   this.searchField = doc.getElementById("computed-searchbox");
   this.searchClearButton = doc.getElementById("computed-searchinput-clear");
   this.includeBrowserStylesCheckbox = doc.getElementById("browser-style-checkbox");
@@ -201,6 +209,7 @@ function CssComputedView(inspector, document, pageStyle) {
   // The element that we're inspecting, and the document that it comes from.
   this._viewedElement = null;
 
+  this.createBoxModelView();
   this.createStyleViews();
 
   this._contextmenu = new StyleInspectorMenu(this, { isRuleView: false });
@@ -568,8 +577,10 @@ CssComputedView.prototype = {
     this._filterChangedTimeout = setTimeout(() => {
       if (this.searchField.value.length > 0) {
         this.searchField.setAttribute("filled", true);
+        this.boxModelWrapper.hidden = true;
       } else {
         this.searchField.removeAttribute("filled");
+        this.boxModelWrapper.hidden = false;
       }
 
       this.refreshPanel();
@@ -611,6 +622,38 @@ CssComputedView.prototype = {
                                  CssLogic.FILTER.USER;
   },
 
+  /**
+   * Render the box model view.
+   */
+  createBoxModelView: function () {
+    let {
+      setSelectedNode,
+      onShowBoxModelHighlighterForNode,
+    } = this.inspector.getCommonComponentProps();
+
+    let {
+      onHideBoxModelHighlighter,
+      onShowBoxModelEditor,
+      onShowBoxModelHighlighter,
+      onToggleGeometryEditor,
+    } = this.inspector.getPanel("boxmodel").getComponentProps();
+
+    let provider = createElement(
+      Provider,
+      { store: this.store },
+      BoxModelApp({
+        setSelectedNode,
+        showBoxModelProperties: false,
+        onHideBoxModelHighlighter,
+        onShowBoxModelEditor,
+        onShowBoxModelHighlighter,
+        onShowBoxModelHighlighterForNode,
+        onToggleGeometryEditor,
+      })
+    );
+    ReactDOM.render(provider, this.boxModelWrapper);
+  },
+
   /**
    * The CSS as displayed by the UI.
    */
@@ -754,6 +797,7 @@ CssComputedView.prototype = {
 
     // Nodes used in templating
     this.element = null;
+    this.boxModelWrapper = null;
     this.searchField = null;
     this.searchClearButton = null;
     this.includeBrowserStylesCheckbox = null;
@@ -766,6 +810,7 @@ CssComputedView.prototype = {
 
     this.inspector = null;
     this.highlighters = null;
+    this.store = null;
     this.styleDocument = null;
     this.styleWindow = null;
 

devtools/client/inspector/computed/test/browser_computed_search-filter.js

@@ -33,6 +33,8 @@ function* testToggleDefaultStyles(inspector, computedView) {
 
 function* testAddTextInFilter(inspector, computedView) {
   info("setting filter text to \"color\"");
+  let doc = computedView.styleDocument;
+  let boxModelWrapper = doc.getElementById("boxmodel-wrapper");
   let searchField = computedView.searchField;
   let onRefreshed = inspector.once("computed-view-refreshed");
   let win = computedView.styleWindow;
@@ -51,6 +53,8 @@ function* testAddTextInFilter(inspector, computedView) {
   synthesizeKeys("color", win);
   yield onRefreshed;
 
+  ok(boxModelWrapper.hidden, "Box model is hidden");
+
   info("check that the correct properties are visible");
 
   let propertyViews = computedView.propertyViews;

devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js

@@ -49,6 +49,8 @@ function* testClearSearchFilter(inspector, computedView) {
   info("Clearing the search filter");
 
   let win = computedView.styleWindow;
+  let doc = computedView.styleDocument;
+  let boxModelWrapper = doc.getElementById("boxmodel-wrapper");
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
   let searchClearButton = computedView.searchClearButton;
@@ -57,6 +59,8 @@ function* testClearSearchFilter(inspector, computedView) {
   EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
   yield onRefreshed;
 
+  ok(!boxModelWrapper.hidden, "Box model is displayed");
+
   info("Check that the correct properties are visible");
 
   ok(!searchField.value, "Search filter is cleared");

devtools/client/inspector/inspector.xhtml

@@ -133,6 +133,7 @@
 
         <div id="computed-container">
           <div id="computed-container-focusable" tabindex="-1">
+            <div id="boxmodel-wrapper"></div>
             <div id="computed-property-container" class="devtools-monospace" tabindex="0" dir="ltr"></div>
             <div id="computed-no-results" class="devtools-sidepanel-no-result" hidden="" data-localization="content=inspector.noProperties"></div>
           </div>

devtools/client/inspector/test/browser_inspector_textbox-menu.js

@@ -64,10 +64,10 @@ add_task(function* () {
   yield onRuleViewChanged;
   yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
 
-  info("Switching to the layout-view");
-  let onBoxModelUpdated = inspector.once("boxmodel-view-updated");
-  selectLayoutView(inspector);
-  yield onBoxModelUpdated;
+  info("Switching to the computed-view");
+  let onComputedViewReady = inspector.once("boxmodel-view-updated");
+  selectComputedView(inspector);
+  yield onComputedViewReady;
 
   info("Testing the box-model region");
   let margin = inspector.panelDoc.querySelector(

devtools/client/inspector/test/shared-head.js

@@ -53,7 +53,7 @@ var openInspectorSidebarTab = Task.async(function* (id) {
   info("Selecting the " + id + " sidebar");
 
   let onSidebarSelect = inspector.sidebar.once("select");
-  if (id === "layoutview") {
+  if (id === "computedview" || id === "layoutview") {
     // The layout and computed views should wait until the box-model widget is ready.
     let onBoxModelViewReady = inspector.once("boxmodel-view-updated");
     // The layout view also needs to wait for the grid panel to be fully updated.
@@ -169,17 +169,6 @@ function selectComputedView(inspector) {
   return inspector.getPanel("computedview").computedView;
 }
 
-/**
- * Select the layout view sidebar tab on an already opened inspector panel.
- *
- * @param  {InspectorPanel} inspector
- * @return {BoxModel} the box model
- */
-function selectLayoutView(inspector) {
-  inspector.sidebar.select("layoutview");
-  return inspector.getPanel("boxmodel");
-}
-
 /**
  * Get the NodeFront for a node that matches a given css selector, via the
  * protocol.

devtools/client/preferences/devtools.js

@@ -82,6 +82,8 @@ pref("devtools.gridinspector.showGridAreas", false);
 pref("devtools.gridinspector.showGridLineNumbers", false);
 pref("devtools.gridinspector.showInfiniteLines", false);
 
+// Whether or not the box model panel is opened in the computed view
+pref("devtools.computed.boxmodel.opened", true);
 // Whether or not the box model panel is opened in the layout view
 pref("devtools.layout.boxmodel.opened", true);
 // Whether or not the flexbox panel is opened in the layout view