deleted file mode 100644
--- a/devtools/client/inspector/boxmodel/components/BoxModelApp.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* 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);
--- a/devtools/client/inspector/boxmodel/components/moz.build
+++ b/devtools/client/inspector/boxmodel/components/moz.build
@@ -1,15 +1,14 @@
# -*- 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(
'BoxModel.js',
- 'BoxModelApp.js',
'BoxModelEditable.js',
'BoxModelInfo.js',
'BoxModelMain.js',
'BoxModelProperties.js',
'ComputedProperty.js',
)
--- a/devtools/client/inspector/boxmodel/test/browser.ini
+++ b/devtools/client/inspector/boxmodel/test/browser.ini
@@ -8,17 +8,16 @@ support-files =
!/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_boxmodel.js]
-[browser_boxmodel_computed-accordion-state.js]
[browser_boxmodel_edit-position-visible-position-change.js]
[browser_boxmodel_editablemodel.js]
[browser_boxmodel_editablemodel_allproperties.js]
disabled=too many intermittent failures (bug 1009322)
[browser_boxmodel_editablemodel_bluronclick.js]
[browser_boxmodel_editablemodel_border.js]
[browser_boxmodel_editablemodel_pseudo.js]
[browser_boxmodel_editablemodel_stylerules.js]
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
@@ -152,41 +152,41 @@ var res2 = [
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 openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
yield selectNode("div", inspector);
- yield testInitialValues(inspector, view);
- yield testChangingValues(inspector, view, testActor);
+ yield testInitialValues(inspector, boxmodel);
+ yield testChangingValues(inspector, boxmodel, testActor);
});
-function* testInitialValues(inspector, view) {
+function* testInitialValues(inspector, boxmodel) {
info("Test that the initial values of the box model are correct");
- let viewdoc = view.document;
+ let doc = boxmodel.document;
for (let i = 0; i < res1.length; i++) {
- let elt = viewdoc.querySelector(res1[i].selector);
+ let elt = doc.querySelector(res1[i].selector);
is(elt.textContent, res1[i].value,
res1[i].selector + " has the right value.");
}
}
-function* testChangingValues(inspector, view, testActor) {
+function* testChangingValues(inspector, boxmodel, testActor) {
info("Test that changing the document updates the box model");
- let viewdoc = view.document;
+ let doc = boxmodel.document;
let onUpdated = waitForUpdate(inspector);
yield testActor.setAttribute("div", "style",
"height:150px;padding-right:50px;top:50px");
yield onUpdated;
for (let i = 0; i < res2.length; i++) {
- let elt = viewdoc.querySelector(res2[i].selector);
+ let elt = doc.querySelector(res2[i].selector);
is(elt.textContent, res2[i].value,
res2[i].selector + " has the right value after style update.");
}
}
deleted file mode 100644
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_computed-accordion-state.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Tests that the box model's accordion state is persistent through hide/show in the
-// computed view.
-
-const TEST_URI = `
- <style>
- #div1 {
- margin: 10px;
- padding: 3px;
- }
- </style>
- <div id="div1"></div>
-`;
-
-const BOXMODEL_OPENED_PREF = "devtools.computed.boxmodel.opened";
-
-add_task(function* () {
- yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
- let { inspector, view, toolbox } = yield openBoxModelView();
- let { document: doc } = view;
-
- yield testAccordionStateAfterClickingHeader(doc);
- yield testAccordionStateAfterSwitchingSidebars(inspector, doc);
- yield testAccordionStateAfterReopeningComputedView(toolbox);
-
- Services.prefs.clearUserPref(BOXMODEL_OPENED_PREF);
-});
-
-function* testAccordionStateAfterClickingHeader(doc) {
- let header = doc.querySelector("#computed-container .box-model-pane ._header");
- let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
-
- info("Checking initial state of the box model panel.");
- is(bContent.style.display, "block", "The box model panel content is 'display: block'.");
- ok(Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
- `${BOXMODEL_OPENED_PREF} is pref on by default.`);
-
- info("Clicking the box model header to hide the box model panel.");
- header.click();
-
- info("Checking the new state of the box model panel.");
- is(bContent.style.display, "none", "The box model panel content is 'display: none'.");
- ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
- `${BOXMODEL_OPENED_PREF} is pref off.`);
-}
-
-function* testAccordionStateAfterSwitchingSidebars(inspector, doc) {
- info("Checking the box model accordion state is persistent after switching sidebars.");
-
- let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
-
- info("Selecting the layout view.");
- inspector.sidebar.select("layoutview");
-
- info("Selecting the computed view.");
- inspector.sidebar.select("computedview");
-
- info("Checking the state of the box model panel.");
- is(bContent.style.display, "none", "The box model panel content is 'display: none'.");
- ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
- `${BOXMODEL_OPENED_PREF} is pref off.`);
-}
-
-function* testAccordionStateAfterReopeningComputedView(toolbox) {
- info("Checking the box model accordion state is persistent after closing and "
- + "re-opening the layout view.");
-
- info("Closing the toolbox.");
- yield toolbox.destroy();
-
- info("Re-opening the layout view.");
- let { view } = yield openBoxModelView();
- let { document: doc } = view;
- let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
-
- info("Checking the state of the box model panel.");
- ok(!bContent, "The box model panel content is not rendered.");
- ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
- `${BOXMODEL_OPENED_PREF} is pref off.`);
-}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_edit-position-visible-position-change.js
@@ -13,31 +13,32 @@ const TEST_URI = `
top:10px;
left:10px;
width:100px;
height:100px">
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
- let {inspector, view} = yield openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
yield selectNode("#mydiv", inspector);
- let editPositionButton = view.document.querySelector(".layout-geometry-editor");
+ let editPositionButton = boxmodel.document.querySelector(".layout-geometry-editor");
ok(isNodeVisible(editPositionButton), "Edit Position button is visible initially");
- let positionLeftTextbox = view.document.querySelector(
+ let positionLeftTextbox = boxmodel.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, {}, view.document.defaultView);
- EventUtils.synthesizeKey("8", {}, view.document.defaultView);
- EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
+ EventUtils.synthesizeMouseAtCenter(positionLeftTextbox, {},
+ boxmodel.document.defaultView);
+ EventUtils.synthesizeKey("8", {}, boxmodel.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
yield onUpdate;
- editPositionButton = view.document.querySelector(".layout-geometry-editor");
+ editPositionButton = boxmodel.document.querySelector(".layout-geometry-editor");
ok(isNodeVisible(editPositionButton),
"Edit Position button is still visible after layout change");
});
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
@@ -14,181 +14,181 @@ 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 openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
- 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);
+ 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);
});
-function* testEditingMargins(inspector, view, testActor) {
+function* testEditingMargins(inspector, boxmodel, 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.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+ let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("3", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "margin-top")), "3px",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "margin-top")), "",
"Should be no margin-top on the element.");
is(span.textContent, 5, "Should have the right value in the box model.");
}
-function* testKeyBindings(inspector, view, testActor) {
+function* testKeyBindings(inspector, boxmodel, 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.document.querySelector(".boxmodel-margin.boxmodel-left > span");
+ let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-left > span");
is(span.textContent, 10, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_UP", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_DOWN", {}, boxmodel.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 }, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.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, view, testActor) {
+function* testEscapeToUndo(inspector, boxmodel, 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.document.querySelector(".boxmodel-margin.boxmodel-left > span");
+ let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-left > span");
is(span.textContent, 20, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
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* testDeletingValue(inspector, view, testActor) {
+function* testDeletingValue(inspector, boxmodel, 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.document.querySelector(".boxmodel-margin.boxmodel-right > span");
+ let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-right > span");
is(span.textContent, 15, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.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, view, testActor) {
+function* testRefocusingOnClick(inspector, boxmodel, testActor) {
info("Test that clicking in the editor input does not remove focus");
yield selectNode("#div4", inspector);
- let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+ let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
is(span.textContent, 1, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
info("Click in the already opened editor input");
- EventUtils.synthesizeMouseAtCenter(editor, {}, view.document.defaultView);
- is(editor, view.document.activeElement,
+ EventUtils.synthesizeMouseAtCenter(editor, {}, boxmodel.document.defaultView);
+ is(editor, boxmodel.document.activeElement,
"Inplace editor input should still have focus.");
info("Check the input can still be used as expected");
- EventUtils.synthesizeKey("VK_UP", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_UP", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
"Should be the right margin-top on the element.");
is(span.textContent, 2, "Should have the right value in the box model.");
}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
@@ -11,136 +11,136 @@ 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 openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
- yield testEditing(inspector, view, testActor);
- yield testEditingAndCanceling(inspector, view, testActor);
- yield testDeleting(inspector, view, testActor);
- yield testDeletingAndCanceling(inspector, view, testActor);
+ yield testEditing(inspector, boxmodel, testActor);
+ yield testEditingAndCanceling(inspector, boxmodel, testActor);
+ yield testDeleting(inspector, boxmodel, testActor);
+ yield testDeletingAndCanceling(inspector, boxmodel, testActor);
});
-function* testEditing(inspector, view, testActor) {
+function* testEditing(inspector, boxmodel, 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.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
+ let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("7", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.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, view, testActor) {
+function* testEditingAndCanceling(inspector, boxmodel, testActor) {
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.document.querySelector(".boxmodel-padding.boxmodel-left > span");
+ let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("8", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
"Should be the right padding.");
is(span.textContent, 5, "Should have the right value in the box model.");
}
-function* testDeleting(inspector, view, testActor) {
+function* testDeleting(inspector, boxmodel, testActor) {
info("When all properties are set on the node deleting one should work");
yield selectNode("#div1", inspector);
- let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
+ let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.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, view, testActor) {
+function* testDeletingAndCanceling(inspector, boxmodel, testActor) {
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.document.querySelector(".boxmodel-padding.boxmodel-left > span");
+ let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-left > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
"Should be the right padding.");
is(span.textContent, 5, "Should have the right value in the box model.");
}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
@@ -16,59 +16,59 @@ const TEST_URI =
<div id="div1"></div>`;
add_task(function* () {
// 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 openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
yield selectNode("#div1", inspector);
- yield testClickingOutsideEditor(view);
- yield testClickingBelowContainer(view);
+ yield testClickingOutsideEditor(boxmodel);
+ yield testClickingBelowContainer(boxmodel);
});
-function* testClickingOutsideEditor(view) {
+function* testClickingOutsideEditor(boxmodel) {
info("Test that clicking outside the editor blurs it");
- let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+ let span = boxmodel.document.querySelector(".boxmodel-margin.boxmodel-top > span");
is(span.textContent, 10, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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, {},
- view.document.defaultView);
+ boxmodel.document.defaultView);
yield onBlur;
- is(view.document.querySelector(".styleinspector-propertyeditor"), null,
+ is(boxmodel.document.querySelector(".styleinspector-propertyeditor"), null,
"Inplace editor has been removed.");
}
-function* testClickingBelowContainer(view) {
+function* testClickingBelowContainer(boxmodel) {
info("Test that clicking below the box-model container blurs it");
- let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
+ let span = boxmodel.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, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
let onBlur = once(editor, "blur");
- let container = view.document.querySelector(".boxmodel-container");
+ let container = boxmodel.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: view.doc})[0].bounds;
+ let bounds = container.getBoxQuads({relativeTo: boxmodel.document})[0].bounds;
EventUtils.synthesizeMouseAtPoint(
bounds.left + 10,
bounds.top + bounds.height + 10,
- {}, view.document.defaultView);
+ {}, boxmodel.document.defaultView);
yield onBlur;
- is(view.document.querySelector(".styleinspector-propertyeditor"), null,
+ is(boxmodel.document.querySelector(".styleinspector-propertyeditor"), null,
"Inplace editor has been removed.");
}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
@@ -11,42 +11,42 @@ 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 openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
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.document.querySelector(".boxmodel-border.boxmodel-top > span");
+ let span = boxmodel.document.querySelector(".boxmodel-border.boxmodel-top > span");
is(span.textContent, 0, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("1", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "1", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "border-top-width")), "1px",
"Should have the right border");
is((yield getStyle(testActor, "#div1", "border-top-style")), "solid",
"Should have the right border");
- EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "border-top-width")), "",
"Should be the right padding.");
is((yield getStyle(testActor, "#div1", "border-top-style")), "",
"Should have the right border");
is(span.textContent, 0, "Should have the right value in the box model.");
});
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
@@ -17,34 +17,35 @@ const TEST_URI =
}
</style>
<div style='width:200px;'>
<div class=test></div>
</div>`;
add_task(function* () {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
- let {inspector, view, testActor} = yield openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
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", view.document);
+ yield checkValueInBoxModel(".boxmodel-margin.boxmodel-top", "0", boxmodel.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", view.document);
+ yield checkValueInBoxModel(".boxmodel-padding.boxmodel-top", "0", boxmodel.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", view.document);
+ yield checkValueInBoxModel(".boxmodel-content.boxmodel-width", "200",
+ boxmodel.document);
});
function* checkValueInBoxModel(selector, expectedValue, doc) {
let span = doc.querySelector(selector + " > span");
is(span.textContent, expectedValue, "Should have the right value in the box model.");
EventUtils.synthesizeMouseAtCenter(span, {}, doc.defaultView);
let editor = doc.querySelector(".styleinspector-propertyeditor");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
@@ -12,102 +12,102 @@ 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 openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
- yield testUnits(inspector, view, testActor);
- yield testValueComesFromStyleRule(inspector, view, testActor);
- yield testShorthandsAreParsed(inspector, view, testActor);
+ yield testUnits(inspector, boxmodel, testActor);
+ yield testValueComesFromStyleRule(inspector, boxmodel, testActor);
+ yield testShorthandsAreParsed(inspector, boxmodel, testActor);
});
-function* testUnits(inspector, view, testActor) {
+function* testUnits(inspector, boxmodel, 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.document.querySelector(".boxmodel-padding.boxmodel-top > span");
+ let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-top > span");
is(span.textContent, 3, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("1", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
- EventUtils.synthesizeKey("e", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("e", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "padding-top")), "",
"An invalid value is handled cleanly");
- EventUtils.synthesizeKey("m", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("m", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.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, view, testActor) {
+function* testValueComesFromStyleRule(inspector, boxmodel, 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.document.querySelector(".boxmodel-border.boxmodel-bottom > span");
+ let span = boxmodel.document.querySelector(".boxmodel-border.boxmodel-bottom > span");
is(span.textContent, 16, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("0", {}, boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.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, view, testActor) {
+function* testShorthandsAreParsed(inspector, boxmodel, 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.document.querySelector(".boxmodel-padding.boxmodel-right > span");
+ let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-right > span");
is(span.textContent, 32, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.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", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
is((yield getStyle(testActor, "#div3", "padding-right")), "",
"Should be the right padding.");
is(span.textContent, 32, "Should have the right value in the box model.");
}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js
@@ -14,36 +14,36 @@ const STYLE = "div { position: absolute;
"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(async function () {
await addTab(TEST_URL);
- let {toolbox, inspector, view} = await openBoxModelView();
+ let {toolbox, inspector, boxmodel} = await openLayoutView();
await selectNode("div", inspector);
// Mock the highlighter by replacing the showBoxModel method.
toolbox.highlighter.showBoxModel = function (nodeFront, options) {
highlightedNodeFront = nodeFront;
highlighterOptions = options;
};
- let elt = view.document.querySelector(".boxmodel-margins");
- await testGuideOnLayoutHover(elt, "margin", inspector, view);
+ let elt = boxmodel.document.querySelector(".boxmodel-margins");
+ await testGuideOnLayoutHover(elt, "margin", inspector);
- elt = view.document.querySelector(".boxmodel-borders");
- await testGuideOnLayoutHover(elt, "border", inspector, view);
+ elt = boxmodel.document.querySelector(".boxmodel-borders");
+ await testGuideOnLayoutHover(elt, "border", inspector);
- elt = view.document.querySelector(".boxmodel-paddings");
- await testGuideOnLayoutHover(elt, "padding", inspector, view);
+ elt = boxmodel.document.querySelector(".boxmodel-paddings");
+ await testGuideOnLayoutHover(elt, "padding", inspector);
- elt = view.document.querySelector(".boxmodel-content");
- await testGuideOnLayoutHover(elt, "content", inspector, view);
+ elt = boxmodel.document.querySelector(".boxmodel-content");
+ await testGuideOnLayoutHover(elt, "content", inspector);
});
async function testGuideOnLayoutHover(elt, expectedRegion, inspector) {
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");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
@@ -12,109 +12,109 @@ const TEST_URI = `
div { position: absolute; top: 42px; left: 42px;
height: 100.111px; width: 100px; border: 10px solid black;
padding: 20px; margin: 30px auto;}
</style><div></div>
`;
add_task(function* () {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
- let {inspector, view} = yield openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
yield selectNode("div", inspector);
- yield testInitialFocus(inspector, view);
- yield testChangingLevels(inspector, view);
- yield testTabbingWrapAround(inspector, view);
- yield testChangingLevelsByClicking(inspector, view);
+ yield testInitialFocus(inspector, boxmodel);
+ yield testChangingLevels(inspector, boxmodel);
+ yield testTabbingWrapAround(inspector, boxmodel);
+ yield testChangingLevelsByClicking(inspector, boxmodel);
});
-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();
+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();
EventUtils.synthesizeKey("KEY_Enter");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
+ is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
"Should be set to the position layout.");
}
-function* testChangingLevels(inspector, view) {
+function* testChangingLevels(inspector, boxmodel) {
info("Test that using arrow keys updates level.");
- let viewdoc = view.document;
- let boxmodel = viewdoc.querySelector(".boxmodel-container");
- boxmodel.focus();
+ let doc = boxmodel.document;
+ let container = doc.querySelector(".boxmodel-container");
+ container.focus();
EventUtils.synthesizeKey("KEY_Enter");
EventUtils.synthesizeKey("KEY_Escape");
EventUtils.synthesizeKey("KEY_ArrowDown");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-margins",
+ is(container.getAttribute("activedescendant"), "boxmodel-margins",
"Should be set to the margin layout.");
EventUtils.synthesizeKey("KEY_ArrowDown");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-borders",
+ is(container.getAttribute("activedescendant"), "boxmodel-borders",
"Should be set to the border layout.");
EventUtils.synthesizeKey("KEY_ArrowDown");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-paddings",
+ is(container.getAttribute("activedescendant"), "boxmodel-paddings",
"Should be set to the padding layout.");
EventUtils.synthesizeKey("KEY_ArrowDown");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-contents",
+ is(container.getAttribute("activedescendant"), "boxmodel-contents",
"Should be set to the content layout.");
EventUtils.synthesizeKey("KEY_ArrowUp");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-paddings",
+ is(container.getAttribute("activedescendant"), "boxmodel-paddings",
"Should be set to the padding layout.");
EventUtils.synthesizeKey("KEY_ArrowUp");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-borders",
+ is(container.getAttribute("activedescendant"), "boxmodel-borders",
"Should be set to the border layout.");
EventUtils.synthesizeKey("KEY_ArrowUp");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-margins",
+ is(container.getAttribute("activedescendant"), "boxmodel-margins",
"Should be set to the margin layout.");
EventUtils.synthesizeKey("KEY_ArrowUp");
- is(boxmodel.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
+ is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
"Should be set to the position layout.");
}
-function* testTabbingWrapAround(inspector, view) {
+function* testTabbingWrapAround(inspector, boxmodel) {
info("Test that using arrow keys updates level.");
- let viewdoc = view.document;
- let boxmodel = viewdoc.querySelector(".boxmodel-container");
- boxmodel.focus();
+ let doc = boxmodel.document;
+ let container = doc.querySelector(".boxmodel-container");
+ container.focus();
EventUtils.synthesizeKey("KEY_Enter");
- let editLevel = boxmodel.getAttribute("activedescendant").split(" ")[0];
- let dataLevel = viewdoc.querySelector(`.${editLevel}`).getAttribute("data-box");
- let editBoxes = [...viewdoc.querySelectorAll(
+ let editLevel = container.getAttribute("activedescendant").split(" ")[0];
+ let dataLevel = doc.querySelector(`.${editLevel}`).getAttribute("data-box");
+ let editBoxes = [...doc.querySelectorAll(
`[data-box="${dataLevel}"].boxmodel-editable`)];
EventUtils.synthesizeKey("KEY_Escape");
editBoxes[3].focus();
EventUtils.synthesizeKey("KEY_Tab");
- is(editBoxes[0], viewdoc.activeElement, "Top edit box should have focus.");
+ is(editBoxes[0], doc.activeElement, "Top edit box should have focus.");
editBoxes[0].focus();
EventUtils.synthesizeKey("KEY_Tab", {shiftKey: true});
- is(editBoxes[3], viewdoc.activeElement, "Left edit box should have focus.");
+ is(editBoxes[3], doc.activeElement, "Left edit box should have focus.");
}
-function* testChangingLevelsByClicking(inspector, view) {
+function* testChangingLevelsByClicking(inspector, boxmodel) {
info("Test that clicking on levels updates level.");
- let viewdoc = view.document;
- let boxmodel = viewdoc.querySelector(".boxmodel-container");
- boxmodel.focus();
+ let doc = boxmodel.document;
+ let container = doc.querySelector(".boxmodel-container");
+ container.focus();
- 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 marginLayout = doc.querySelector(".boxmodel-margins");
+ let borderLayout = doc.querySelector(".boxmodel-borders");
+ let paddingLayout = doc.querySelector(".boxmodel-paddings");
+ let contentLayout = doc.querySelector(".boxmodel-contents");
let layouts = [contentLayout, paddingLayout, borderLayout, marginLayout];
layouts.forEach(layout => {
layout.click();
- is(boxmodel.getAttribute("activedescendant"), layout.className,
+ is(container.getAttribute("activedescendant"), layout.className,
"Should be set to" + layout.getAttribute("data-box") + "layout.");
});
}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
@@ -39,27 +39,27 @@ const res1 = [
{
selector: ".boxmodel-position.boxmodel-left > span",
value: 0
},
];
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
- let {inspector, view} = yield openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
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, view);
+ yield testPositionValues(inspector, boxmodel);
});
-function* testPositionValues(inspector, view) {
+function* testPositionValues(inspector, boxmodel) {
info("Test that the position values of the box model are correct");
- let viewdoc = view.document;
+ let doc = boxmodel.document;
for (let i = 0; i < res1.length; i++) {
- let elt = viewdoc.querySelector(res1[i].selector);
+ let elt = doc.querySelector(res1[i].selector);
is(elt.textContent, res1[i].value,
res1[i].selector + " has the right value.");
}
}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
@@ -94,27 +94,27 @@ const res1 = [
{
selector: ".boxmodel-border.boxmodel-right > span",
value: 0
},
];
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
- let {inspector, view} = yield openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
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, view);
+ yield testInitialValues(inspector, boxmodel);
});
-function* testInitialValues(inspector, view) {
+function* testInitialValues(inspector, boxmodel) {
info("Test that the initial values of the box model are correct");
- let viewdoc = view.document;
+ let doc = boxmodel.document;
for (let i = 0; i < res1.length; i++) {
- let elt = viewdoc.querySelector(res1[i].selector);
+ let elt = doc.querySelector(res1[i].selector);
is(elt.textContent, res1[i].value,
res1[i].selector + " has the right value.");
}
}
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
@@ -27,21 +27,21 @@ const TEST_URI = encodeURIComponent([
"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 openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
yield selectNode("div", inspector);
for (let i = 0; i < res1.length; i++) {
- let elt = view.document.querySelector(res1[i].selector);
+ let elt = boxmodel.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") ||
classList.contains("boxmodel-right");
let isRotated = classList.contains("boxmodel-rotate");
is(canBeRotated && isLong,
isRotated, res1[i].selector + " correctly rotated.");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
@@ -5,31 +5,31 @@
"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 openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
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 = view.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
- let editor = view.document.querySelector(".styleinspector-propertyeditor");
+ let span = boxmodel.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
+ EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
+ let editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
- EventUtils.synthesizeKey("7", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "7", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
let onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
let onRuleViewSelected = once(inspector.sidebar, "ruleview-selected");
info("Select the rule view and check that the property was synced there");
let ruleView = selectRuleView(inspector);
info("Wait for the rule view to be selected");
yield onRuleViewSelected;
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
@@ -67,53 +67,53 @@ 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 openBoxModelView();
+ let {inspector, boxmodel} = yield openLayoutView();
info("Checking the regions tooltips");
- ok(view.document.querySelector(".boxmodel-margins").hasAttribute("title"),
+ ok(boxmodel.document.querySelector(".boxmodel-margins").hasAttribute("title"),
"The margin region has a tooltip");
- is(view.document.querySelector(".boxmodel-margins").getAttribute("title"), "margin",
+ is(boxmodel.document.querySelector(".boxmodel-margins").getAttribute("title"), "margin",
"The margin region has the correct tooltip content");
- ok(view.document.querySelector(".boxmodel-borders").hasAttribute("title"),
+ ok(boxmodel.document.querySelector(".boxmodel-borders").hasAttribute("title"),
"The border region has a tooltip");
- is(view.document.querySelector(".boxmodel-borders").getAttribute("title"), "border",
+ is(boxmodel.document.querySelector(".boxmodel-borders").getAttribute("title"), "border",
"The border region has the correct tooltip content");
- ok(view.document.querySelector(".boxmodel-paddings").hasAttribute("title"),
+ ok(boxmodel.document.querySelector(".boxmodel-paddings").hasAttribute("title"),
"The padding region has a tooltip");
- is(view.document.querySelector(".boxmodel-paddings").getAttribute("title"), "padding",
- "The padding region has the correct tooltip content");
+ is(boxmodel.document.querySelector(".boxmodel-paddings").getAttribute("title"),
+ "padding", "The padding region has the correct tooltip content");
- ok(view.document.querySelector(".boxmodel-content").hasAttribute("title"),
+ ok(boxmodel.document.querySelector(".boxmodel-content").hasAttribute("title"),
"The content region has a tooltip");
- is(view.document.querySelector(".boxmodel-content").getAttribute("title"), "content",
- "The content region has the correct tooltip content");
+ is(boxmodel.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 view.map) {
+ for (let key in boxmodel.map) {
if (key === "position") {
continue;
}
- let name = view.map[key].property;
+ let name = boxmodel.map[key].property;
let expectedTooltipData = values.find(o => o.name === name);
- let el = view.document.querySelector(view.map[key].selector);
+ let el = boxmodel.document.querySelector(boxmodel.map[key].selector);
ok(el.hasAttribute("title"), "The " + name + " value has a tooltip");
if (expectedTooltipData) {
info("The " + name + " value comes from a css rule");
let expectedTooltip = name + "\n" + expectedTooltipData.ruleSelector +
"\n" + expectedTooltipData.styleSheetLocation;
is(el.getAttribute("title"), expectedTooltip, "The tooltip is correct");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
@@ -7,82 +7,82 @@
// 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_boxmodel_iframe1.html";
const IFRAME2 = URL_ROOT + "doc_boxmodel_iframe2.html";
add_task(function* () {
yield addTab(IFRAME1);
- let {inspector, view, testActor} = yield openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
- yield testFirstPage(inspector, view, testActor);
+ yield testFirstPage(inspector, boxmodel, testActor);
info("Navigate to the second page");
let onMarkupLoaded = waitForMarkupLoaded(inspector);
yield testActor.eval(`location.href="${IFRAME2}"`);
yield onMarkupLoaded;
- yield testSecondPage(inspector, view, testActor);
+ yield testSecondPage(inspector, boxmodel, testActor);
info("Go back to the first page");
onMarkupLoaded = waitForMarkupLoaded(inspector);
yield testActor.eval("history.back();");
yield onMarkupLoaded;
- yield testBackToFirstPage(inspector, view, testActor);
+ yield testBackToFirstPage(inspector, boxmodel, testActor);
});
-function* testFirstPage(inspector, view, testActor) {
+function* testFirstPage(inspector, boxmodel, 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 = view.document.querySelector(
+ let paddingElt = boxmodel.document.querySelector(
".boxmodel-padding.boxmodel-top > span");
is(paddingElt.textContent, "50");
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, "Box model view got updated");
info("Checking that the box model view shows the right value after update");
is(paddingElt.textContent, "20");
}
-function* testSecondPage(inspector, view, testActor) {
+function* testSecondPage(inspector, boxmodel, 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 = view.document.querySelector(".boxmodel-size > span");
+ let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
is(sizeElt.textContent, "100" + "\u00D7" + "100");
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, "Box model view got updated");
info("Checking that the box model view shows the right value after update");
is(sizeElt.textContent, "200" + "\u00D7" + "100");
}
-function* testBackToFirstPage(inspector, view, testActor) {
+function* testBackToFirstPage(inspector, boxmodel, 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 = view.document.querySelector(
+ let paddingElt = boxmodel.document.querySelector(
".boxmodel-padding.boxmodel-top > span");
is(paddingElt.textContent, "20");
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, "Box model view got updated");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
@@ -3,35 +3,35 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the box model view continues to work after the page is reloaded
add_task(function* () {
yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
- let {inspector, view, testActor} = yield openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
info("Test that the box model view works on the first page");
- yield assertBoxModelView(inspector, view, testActor);
+ yield assertBoxModelView(inspector, boxmodel, testActor);
info("Reload the page");
let onMarkupLoaded = waitForMarkupLoaded(inspector);
yield testActor.reload();
yield onMarkupLoaded;
info("Test that the box model view works on the reloaded page");
- yield assertBoxModelView(inspector, view, testActor);
+ yield assertBoxModelView(inspector, boxmodel, testActor);
});
-function* assertBoxModelView(inspector, view, testActor) {
+function* assertBoxModelView(inspector, boxmodel, testActor) {
yield selectNode("p", inspector);
info("Checking that the box model view shows the right value");
- let paddingElt = view.document.querySelector(
+ let paddingElt = boxmodel.document.querySelector(
".boxmodel-padding.boxmodel-top > span");
is(paddingElt.textContent, "50");
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, "Box model view got updated");
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
@@ -4,56 +4,56 @@
"use strict";
// Test that the box model view for elements within iframes also updates when they
// change
add_task(function* () {
yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
- let {inspector, view, testActor} = yield openBoxModelView();
+ let {inspector, boxmodel, testActor} = yield openLayoutView();
- yield testResizingInIframe(inspector, view, testActor);
- yield testReflowsAfterIframeDeletion(inspector, view, testActor);
+ yield testResizingInIframe(inspector, boxmodel, testActor);
+ yield testReflowsAfterIframeDeletion(inspector, boxmodel, testActor);
});
-function* testResizingInIframe(inspector, view, testActor) {
+function* testResizingInIframe(inspector, boxmodel, 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 = view.document.querySelector(".boxmodel-size > span");
+ let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
is(sizeElt.textContent, "400\u00D7200");
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, "Box model view got updated");
info("Checking that the box model view shows the right value after update");
is(sizeElt.textContent, "200\u00D7200");
}
-function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
+function* testReflowsAfterIframeDeletion(inspector, boxmodel, testActor) {
info("Test reflows are still sent to the box model view after deleting an " +
"iframe");
info("Deleting the iframe2");
let onInspectorUpdated = inspector.once("inspector-updated");
yield removeIframe2(testActor);
yield onInspectorUpdated;
info("Selecting the test node in iframe1");
yield selectNodeInIframe1("p", inspector);
info("Checking that the box model view shows the right value");
- let sizeElt = view.document.querySelector(".boxmodel-size > span");
+ let sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");
is(sizeElt.textContent, "100\u00D7100");
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, "Box model view got updated");
--- a/devtools/client/inspector/boxmodel/test/head.js
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -41,46 +41,16 @@ function* selectAndHighlightNode(selecto
* @param {DOMNode}
* @return {Boolean}
*/
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.
*
* @param {InspectorPanel} inspector
* The instance of InspectorPanel currently loaded in the toolbox.
* @param {Boolean} waitForSelectionUpdate
* Should the boxmodel-view-updated event come from a new selection.
* @return {Promise} a promise
*/
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -22,22 +22,16 @@ const {
VIEW_NODE_IMAGE_URL_TYPE,
VIEW_NODE_FONT_TYPE,
} = require("devtools/client/inspector/shared/node-types");
const StyleInspectorMenu = require("devtools/client/inspector/shared/style-inspector-menu");
const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overlay");
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);
const FILTER_CHANGED_TIMEOUT = 150;
const HTML_NS = "http://www.w3.org/1999/xhtml";
/**
@@ -151,17 +145,16 @@ UpdateProcess.prototype = {
* The document that will contain the computed view.
* @param {PageStyleFront} pageStyle
* Front for the page style actor that will be providing
* the style information.
*/
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;
this.propertyViews = [];
let cssProperties = getCssProperties(inspector.toolbox);
this._outputParser = new OutputParser(document, cssProperties);
@@ -172,17 +165,16 @@ function CssComputedView(inspector, docu
this._onClick = this._onClick.bind(this);
this._onCopy = this._onCopy.bind(this);
this._onFilterStyles = this._onFilterStyles.bind(this);
this._onClearSearch = this._onClearSearch.bind(this);
this._onIncludeBrowserStyles = this._onIncludeBrowserStyles.bind(this);
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");
this.shortcuts = new KeyShortcuts({ window: this.styleWindow });
this._onShortcut = this._onShortcut.bind(this);
this.shortcuts.on("CmdOrCtrl+F", this._onShortcut);
this.shortcuts.on("Escape", this._onShortcut);
@@ -204,17 +196,16 @@ function CssComputedView(inspector, docu
// original sources changes.
this._handlePrefChange = this._handlePrefChange.bind(this);
this._prefObserver = new PrefObserver("devtools.");
this._prefObserver.on("devtools.defaultColorUnit", this._handlePrefChange);
// 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 });
// Add the tooltips and highlightersoverlay
this.tooltips = new TooltipsOverlay(this);
this.highlighters.addToView(this);
@@ -572,20 +563,18 @@ CssComputedView.prototype = {
let filterTimeout = (this.searchField.value.length > 0)
? FILTER_CHANGED_TIMEOUT : 0;
this.searchClearButton.hidden = this.searchField.value.length === 0;
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();
this._filterChangeTimeout = null;
}, filterTimeout);
},
/**
@@ -618,48 +607,16 @@ CssComputedView.prototype = {
refreshSourceFilter: function () {
this._matchedProperties = null;
this._sourceFilter = this.includeBrowserStyles ?
CssLogic.FILTER.UA :
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.
*/
createStyleViews: function () {
if (CssComputedView.propertyNames) {
return;
}
CssComputedView.propertyNames = [];
@@ -792,30 +749,28 @@ CssComputedView.prototype = {
this.element.removeEventListener("contextmenu", this._onContextMenu);
this.searchField.removeEventListener("input", this._onFilterStyles);
this.searchClearButton.removeEventListener("click", this._onClearSearch);
this.includeBrowserStylesCheckbox.removeEventListener("input",
this._onIncludeBrowserStyles);
// Nodes used in templating
this.element = null;
- this.boxModelWrapper = null;
this.searchField = null;
this.searchClearButton = null;
this.includeBrowserStylesCheckbox = null;
// Property views
for (let propView of this.propertyViews) {
propView.destroy();
}
this.propertyViews = null;
this.inspector = null;
this.highlighters = null;
- this.store = null;
this.styleDocument = null;
this.styleWindow = null;
this._isDestroyed = true;
}
};
function PropertyInfo(tree, name) {
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
@@ -28,18 +28,16 @@ function* testToggleDefaultStyles(inspec
let checkbox = computedView.includeBrowserStylesCheckbox;
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 boxModelWrapper = doc.getElementById("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,18 +46,16 @@ 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(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
@@ -44,28 +44,24 @@ function* testAddTextInFilter(inspector,
"span " + name + " property visibility check");
});
}
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;
let onRefreshed = inspector.once("computed-view-refreshed");
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");
propertyViews.forEach((propView) => {
is(propView.visible, propView.hasMatchedSelectors,
"span " + propView.name + " property visibility check");
});
}
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -128,17 +128,16 @@
type="checkbox"
class="includebrowserstyles"/>
<label id="browser-style-checkbox-label" for="browser-style-checkbox"
data-localization="content=inspector.browserStyles.label"></label>
</div>
<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>
</div>
</div>
<div id="sidebar-panel-animationinspector" class="theme-sidebar inspector-tabpanel">
<iframe class="devtools-inspector-tab-frame"></iframe>
--- a/devtools/client/inspector/test/browser_inspector_textbox-menu.js
+++ b/devtools/client/inspector/test/browser_inspector_textbox-menu.js
@@ -54,20 +54,20 @@ add_task(function* () {
info("Testing the rule-view new property");
// Tabbing out of the value field triggers a ruleview-changed event that we need to wait
// for.
let onRuleViewChanged = once(ruleView, "ruleview-changed");
EventUtils.sendKey("tab", inspector.panelWin);
yield onRuleViewChanged;
yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
- info("Switching to the computed-view");
- let onComputedViewReady = inspector.once("boxmodel-view-updated");
- selectComputedView(inspector);
- yield onComputedViewReady;
+ info("Switching to the layout-view");
+ let onBoxModelUpdated = inspector.once("boxmodel-view-updated");
+ selectLayoutView(inspector);
+ yield onBoxModelUpdated;
info("Testing the box-model region");
let margin = inspector.panelDoc.querySelector(
".boxmodel-margin.boxmodel-top > span");
EventUtils.synthesizeMouseAtCenter(margin, {}, inspector.panelWin);
yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
// Move the mouse out of the box-model region to avoid triggering the box model
--- a/devtools/client/inspector/test/shared-head.js
+++ b/devtools/client/inspector/test/shared-head.js
@@ -46,17 +46,17 @@ var openInspector = Task.async(function*
* visible and ready
*/
var openInspectorSidebarTab = Task.async(function* (id) {
let {toolbox, inspector, testActor} = yield openInspector();
info("Selecting the " + id + " sidebar");
let onSidebarSelect = inspector.sidebar.once("select");
- if (id === "computedview" || id === "layoutview") {
+ if (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.
let onGridPanelReady = id === "layoutview" ?
inspector.once("grid-panel-updated") : Promise.resolve();
inspector.sidebar.select(id);
yield onBoxModelViewReady;
yield onGridPanelReady;
@@ -163,16 +163,27 @@ function selectRuleView(inspector) {
* @return {CssComputedView} the computed view
*/
function selectComputedView(inspector) {
inspector.sidebar.select("computedview");
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.
* @param {String|NodeFront} selector
* @param {InspectorPanel} inspector The instance of InspectorPanel currently
* loaded in the toolbox
* @return {Promise} Resolves to the NodeFront instance
*/
function getNodeFront(selector, {walker}) {
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -77,18 +77,16 @@ pref("devtools.new-animationinspector.en
// Grid highlighter preferences
pref("devtools.gridinspector.gridOutlineMaxColumns", 50);
pref("devtools.gridinspector.gridOutlineMaxRows", 50);
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
pref("devtools.layout.flexbox.opened", true);
// Whether or not the grid inspector panel is opened in the layout view
pref("devtools.layout.grid.opened", true);
// By how many times eyedropper will magnify pixels