зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1351685 - Remove the box model from the computed view. r=pbro
This commit is contained in:
Gabriel Luong
Родитель
8fc40e9eec
Коммит
eb68c68e8b
|
|
@ -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);
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
DevToolsModules(
|
||||
'BoxModel.js',
|
||||
'BoxModelApp.js',
|
||||
'BoxModelEditable.js',
|
||||
'BoxModelInfo.js',
|
||||
'BoxModelMain.js',
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ support-files =
|
|||
!/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]
|
||||
|
|
|
|||
|
|
@ -157,27 +157,27 @@ add_task(function* () {
|
|||
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",
|
||||
|
|
@ -185,7 +185,7 @@ function* testChangingValues(inspector, view, testActor) {
|
|||
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.");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,89 +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.
|
||||
|
||||
// There are shutdown issues for which multiple rejections are left uncaught.
|
||||
// See bug 1018184 for resolving these issues.
|
||||
const { PromiseTestUtils } = scopedCuImport("resource://testing-common/PromiseTestUtils.jsm");
|
||||
PromiseTestUtils.whitelistRejectionsGlobally(/Connection closed/);
|
||||
|
||||
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.`);
|
||||
}
|
||||
|
|
@ -18,26 +18,27 @@ const TEST_URI = `
|
|||
|
||||
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");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,18 +17,20 @@ const TEST_URI = "<style>" +
|
|||
"<div id='div1'></div><div id='div2'></div>" +
|
||||
"<div id='div3'></div><div id='div4'></div>";
|
||||
|
||||
requestLongerTimeout(5);
|
||||
|
||||
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");
|
||||
|
||||
|
|
@ -36,21 +38,21 @@ function* testEditingMargins(inspector, view, testActor) {
|
|||
"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")), "",
|
||||
|
|
@ -58,7 +60,7 @@ function* testEditingMargins(inspector, view, testActor) {
|
|||
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");
|
||||
|
||||
|
|
@ -66,42 +68,42 @@ function* testKeyBindings(inspector, view, testActor) {
|
|||
"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");
|
||||
|
||||
|
|
@ -109,22 +111,22 @@ function* testEscapeToUndo(inspector, view, testActor) {
|
|||
"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",
|
||||
|
|
@ -132,7 +134,7 @@ function* testEscapeToUndo(inspector, view, testActor) {
|
|||
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");
|
||||
|
|
@ -140,53 +142,53 @@ function* testDeletingValue(inspector, view, testActor) {
|
|||
|
||||
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.");
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@ const TEST_URI = "<style>" +
|
|||
|
||||
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");
|
||||
|
|
@ -32,29 +32,29 @@ function* testEditing(inspector, view, testActor) {
|
|||
|
||||
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");
|
||||
|
||||
|
|
@ -63,22 +63,22 @@ function* testEditingAndCanceling(inspector, view, testActor) {
|
|||
|
||||
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",
|
||||
|
|
@ -86,34 +86,34 @@ function* testEditingAndCanceling(inspector, view, testActor) {
|
|||
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");
|
||||
|
||||
|
|
@ -122,22 +122,22 @@ function* testDeletingAndCanceling(inspector, view, testActor) {
|
|||
|
||||
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",
|
||||
|
|
|
|||
|
|
@ -21,54 +21,54 @@ add_task(function* () {
|
|||
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.");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const TEST_URI = "<style>" +
|
|||
|
||||
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");
|
||||
|
|
@ -24,15 +24,15 @@ add_task(function* () {
|
|||
"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.");
|
||||
|
|
@ -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", {}, view.document.defaultView);
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "border-top-width")), "",
|
||||
|
|
|
|||
|
|
@ -22,24 +22,25 @@ const TEST_URI =
|
|||
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -17,95 +17,95 @@ const TEST_URI = "<style>" +
|
|||
|
||||
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.");
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ 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.
|
||||
|
|
@ -28,17 +28,17 @@ add_task(async function () {
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -17,104 +17,104 @@ const TEST_URI = `
|
|||
|
||||
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.");
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,21 +44,21 @@ const res1 = [
|
|||
|
||||
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.");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,21 +99,21 @@ const res1 = [
|
|||
|
||||
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.");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@ 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") ||
|
||||
|
|
|
|||
|
|
@ -10,21 +10,21 @@ 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");
|
||||
|
|
|
|||
|
|
@ -72,43 +72,43 @@ const VALUES_TEST_DATA = [{
|
|||
|
||||
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");
|
||||
|
||||
|
|
|
|||
|
|
@ -12,32 +12,32 @@ 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");
|
||||
|
||||
|
|
@ -51,13 +51,13 @@ function* testFirstPage(inspector, view, testActor) {
|
|||
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");
|
||||
|
|
@ -70,14 +70,14 @@ function* testSecondPage(inspector, view, testActor) {
|
|||
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");
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
|
||||
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);
|
||||
|
|
@ -19,14 +19,14 @@ add_task(function* () {
|
|||
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");
|
||||
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@
|
|||
|
||||
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");
|
||||
|
|
@ -35,7 +35,7 @@ function* testResizingInIframe(inspector, view, testActor) {
|
|||
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");
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
|
|||
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");
|
||||
|
|
|
|||
|
|
@ -45,36 +45,6 @@ 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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -27,12 +27,6 @@ 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);
|
||||
|
|
@ -156,7 +150,6 @@ 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;
|
||||
|
|
@ -177,7 +170,6 @@ 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");
|
||||
|
|
@ -209,7 +201,6 @@ 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 });
|
||||
|
|
@ -577,10 +568,8 @@ 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();
|
||||
|
|
@ -622,38 +611,6 @@ 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.
|
||||
*/
|
||||
|
|
@ -797,7 +754,6 @@ CssComputedView.prototype = {
|
|||
|
||||
// Nodes used in templating
|
||||
this.element = null;
|
||||
this.boxModelWrapper = null;
|
||||
this.searchField = null;
|
||||
this.searchClearButton = null;
|
||||
this.includeBrowserStylesCheckbox = null;
|
||||
|
|
@ -810,7 +766,6 @@ CssComputedView.prototype = {
|
|||
|
||||
this.inspector = null;
|
||||
this.highlighters = null;
|
||||
this.store = null;
|
||||
this.styleDocument = null;
|
||||
this.styleWindow = null;
|
||||
|
||||
|
|
|
|||
|
|
@ -33,8 +33,6 @@ 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;
|
||||
|
|
@ -53,8 +51,6 @@ 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;
|
||||
|
|
|
|||
|
|
@ -49,8 +49,6 @@ 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;
|
||||
|
|
@ -59,8 +57,6 @@ 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");
|
||||
|
|
|
|||
|
|
@ -133,7 +133,6 @@
|
|||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -64,10 +64,10 @@ add_task(function* () {
|
|||
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(
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ var openInspectorSidebarTab = Task.async(function* (id) {
|
|||
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.
|
||||
|
|
@ -167,6 +167,17 @@ 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.
|
||||
|
|
|
|||
|
|
@ -82,8 +82,6 @@ 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
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче