--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -32,17 +32,33 @@ module.exports = createClass({
mixins: [ addons.PureRenderMixin ],
getBorderOrPaddingValue(property) {
let { layout } = this.props.boxModel;
return layout[property] ? parseFloat(layout[property]) : "-";
},
- getHeightOrWidthValue(property) {
+ getHeightValue(property) {
+ let { layout } = this.props.boxModel;
+
+ if (property == undefined) {
+ return "-";
+ }
+
+ property -= parseFloat(layout["border-top-width"]) +
+ parseFloat(layout["border-bottom-width"]) +
+ parseFloat(layout["padding-top"]) +
+ parseFloat(layout["padding-bottom"]);
+ property = parseFloat(property.toPrecision(6));
+
+ return property;
+ },
+
+ getWidthValue(property) {
let { layout } = this.props.boxModel;
if (property == undefined) {
return "-";
}
property -= parseFloat(layout["border-left-width"]) +
parseFloat(layout["border-right-width"]) +
@@ -78,35 +94,35 @@ module.exports = createClass({
showOnly: region,
onlyRegionArea: true,
});
},
render() {
let { boxModel, onShowBoxModelEditor } = this.props;
let { layout } = boxModel;
- let { width, height } = layout;
+ let { height, width } = layout;
let borderTop = this.getBorderOrPaddingValue("border-top-width");
let borderRight = this.getBorderOrPaddingValue("border-right-width");
let borderBottom = this.getBorderOrPaddingValue("border-bottom-width");
let borderLeft = this.getBorderOrPaddingValue("border-left-width");
let paddingTop = this.getBorderOrPaddingValue("padding-top");
let paddingRight = this.getBorderOrPaddingValue("padding-right");
let paddingBottom = this.getBorderOrPaddingValue("padding-bottom");
let paddingLeft = this.getBorderOrPaddingValue("padding-left");
let marginTop = this.getMarginValue("margin-top", "top");
let marginRight = this.getMarginValue("margin-right", "right");
let marginBottom = this.getMarginValue("margin-bottom", "bottom");
let marginLeft = this.getMarginValue("margin-left", "left");
- width = this.getHeightOrWidthValue(width);
- height = this.getHeightOrWidthValue(height);
+ height = this.getHeightValue(height);
+ width = this.getWidthValue(width);
return dom.div(
{
className: "boxmodel-main",
onMouseOver: this.onHighlightMouseOver,
onMouseOut: this.props.onHideBoxModelHighlighter,
},
dom.span(
--- a/devtools/client/inspector/boxmodel/moz.build
+++ b/devtools/client/inspector/boxmodel/moz.build
@@ -10,8 +10,10 @@ DIRS += [
'reducers',
'utils',
]
DevToolsModules(
'box-model.js',
'types.js',
)
+
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
rename from devtools/client/inspector/components/test/.eslintrc.js
rename to devtools/client/inspector/boxmodel/test/.eslintrc.js
rename from devtools/client/inspector/components/test/browser.ini
rename to devtools/client/inspector/boxmodel/test/browser.ini
--- a/devtools/client/inspector/components/test/browser.ini
+++ b/devtools/client/inspector/boxmodel/test/browser.ini
@@ -16,15 +16,17 @@ support-files =
[browser_boxmodel_editablemodel.js]
# [browser_boxmodel_editablemodel_allproperties.js]
# Disabled for too many intermittent failures (bug 1009322)
[browser_boxmodel_editablemodel_bluronclick.js]
[browser_boxmodel_editablemodel_border.js]
[browser_boxmodel_editablemodel_stylerules.js]
[browser_boxmodel_guides.js]
[browser_boxmodel_navigation.js]
+skip-if = true # Bug 1336198
[browser_boxmodel_rotate-labels-on-sides.js]
[browser_boxmodel_sync.js]
[browser_boxmodel_tooltips.js]
+skip-if = true # Bug 1336198
[browser_boxmodel_update-after-navigation.js]
[browser_boxmodel_update-after-reload.js]
# [browser_boxmodel_update-in-iframes.js]
# Bug 1020038 boxmodel-view updates for iframe elements changes
rename from devtools/client/inspector/components/test/browser_boxmodel.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel.js
--- a/devtools/client/inspector/components/test/browser_boxmodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
@@ -5,128 +5,128 @@
"use strict";
// Test that the box model displays the right values and that it updates when
// the node's style is changed
// Expected values:
var res1 = [
{
- selector: "#old-boxmodel-element-size",
+ selector: ".boxmodel-element-size",
value: "160" + "\u00D7" + "160.117"
},
{
- selector: ".old-boxmodel-size > span",
+ selector: ".boxmodel-size > span",
value: "100" + "\u00D7" + "100.117"
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-top > span",
+ selector: ".boxmodel-margin.boxmodel-top > span",
value: 30
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-left > span",
+ selector: ".boxmodel-margin.boxmodel-left > span",
value: "auto"
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-bottom > span",
+ selector: ".boxmodel-margin.boxmodel-bottom > span",
value: 30
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-right > span",
+ selector: ".boxmodel-margin.boxmodel-right > span",
value: "auto"
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-top > span",
+ selector: ".boxmodel-padding.boxmodel-top > span",
value: 20
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-left > span",
+ selector: ".boxmodel-padding.boxmodel-left > span",
value: 20
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-bottom > span",
+ selector: ".boxmodel-padding.boxmodel-bottom > span",
value: 20
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-right > span",
+ selector: ".boxmodel-padding.boxmodel-right > span",
value: 20
},
{
- selector: ".old-boxmodel-border.old-boxmodel-top > span",
+ selector: ".boxmodel-border.boxmodel-top > span",
value: 10
},
{
- selector: ".old-boxmodel-border.old-boxmodel-left > span",
+ selector: ".boxmodel-border.boxmodel-left > span",
value: 10
},
{
- selector: ".old-boxmodel-border.old-boxmodel-bottom > span",
+ selector: ".boxmodel-border.boxmodel-bottom > span",
value: 10
},
{
- selector: ".old-boxmodel-border.old-boxmodel-right > span",
+ selector: ".boxmodel-border.boxmodel-right > span",
value: 10
},
];
var res2 = [
{
- selector: "#old-boxmodel-element-size",
+ selector: ".boxmodel-element-size",
value: "190" + "\u00D7" + "210"
},
{
- selector: ".old-boxmodel-size > span",
+ selector: ".boxmodel-size > span",
value: "100" + "\u00D7" + "150"
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-top > span",
+ selector: ".boxmodel-margin.boxmodel-top > span",
value: 30
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-left > span",
+ selector: ".boxmodel-margin.boxmodel-left > span",
value: "auto"
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-bottom > span",
+ selector: ".boxmodel-margin.boxmodel-bottom > span",
value: 30
},
{
- selector: ".old-boxmodel-margin.old-boxmodel-right > span",
+ selector: ".boxmodel-margin.boxmodel-right > span",
value: "auto"
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-top > span",
+ selector: ".boxmodel-padding.boxmodel-top > span",
value: 20
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-left > span",
+ selector: ".boxmodel-padding.boxmodel-left > span",
value: 20
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-bottom > span",
+ selector: ".boxmodel-padding.boxmodel-bottom > span",
value: 20
},
{
- selector: ".old-boxmodel-padding.old-boxmodel-right > span",
+ selector: ".boxmodel-padding.boxmodel-right > span",
value: 50
},
{
- selector: ".old-boxmodel-border.old-boxmodel-top > span",
+ selector: ".boxmodel-border.boxmodel-top > span",
value: 10
},
{
- selector: ".old-boxmodel-border.old-boxmodel-left > span",
+ selector: ".boxmodel-border.boxmodel-left > span",
value: 10
},
{
- selector: ".old-boxmodel-border.old-boxmodel-bottom > span",
+ selector: ".boxmodel-border.boxmodel-bottom > span",
value: 10
},
{
- selector: ".old-boxmodel-border.old-boxmodel-right > span",
+ selector: ".boxmodel-border.boxmodel-right > span",
value: 10
},
];
add_task(function* () {
let style = "div { position: absolute; top: 42px; left: 42px; " +
"height: 100.111px; width: 100px; border: 10px solid black; " +
"padding: 20px; margin: 30px auto;}";
@@ -137,28 +137,28 @@ add_task(function* () {
yield selectNode("div", inspector);
yield testInitialValues(inspector, view);
yield testChangingValues(inspector, view, testActor);
});
function* testInitialValues(inspector, view) {
info("Test that the initial values of the box model are correct");
- let viewdoc = view.doc;
+ let viewdoc = view.document;
for (let i = 0; i < res1.length; i++) {
let elt = viewdoc.querySelector(res1[i].selector);
is(elt.textContent, res1[i].value,
res1[i].selector + " has the right value.");
}
}
function* testChangingValues(inspector, view, testActor) {
info("Test that changing the document updates the box model");
- let viewdoc = view.doc;
+ let viewdoc = view.document;
let onUpdated = waitForUpdate(inspector);
yield testActor.setAttribute("div", "style",
"height:150px;padding-right:50px;");
yield onUpdated;
for (let i = 0; i < res2.length; i++) {
let elt = viewdoc.querySelector(res2[i].selector);
rename from devtools/client/inspector/components/test/browser_boxmodel_editablemodel.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_editablemodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js
@@ -31,164 +31,164 @@ add_task(function* () {
function* testEditingMargins(inspector, view, testActor) {
info("Test that editing margin dynamically updates the document, pressing " +
"escape cancels the changes");
is((yield getStyle(testActor, "#div1", "margin-top")), "",
"Should be no margin-top on the element.");
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
+ let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("3", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("3", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "margin-top")), "3px",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, view.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) {
info("Test that arrow keys work correctly and pressing enter commits the " +
"changes");
is((yield getStyle(testActor, "#div1", "margin-left")), "",
"Should be no margin-top on the element.");
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-left > span");
+ let span = view.document.querySelector(".boxmodel-margin.boxmodel-left > span");
is(span.textContent, 10, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "10px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_UP", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_UP", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "11px", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "margin-left")), "11px",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_DOWN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_DOWN", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "10px", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "margin-left")), "10px",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "20px", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
"Should be the right margin-top on the element.");
is(span.textContent, 20, "Should have the right value in the box model.");
}
function* testEscapeToUndo(inspector, view, testActor) {
info("Test that deleting the value removes the property but escape undoes " +
"that");
is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
"Should be the right margin-top on the element.");
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-left > span");
+ let span = view.document.querySelector(".boxmodel-margin.boxmodel-left > span");
is(span.textContent, 20, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "20px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "margin-left")), "",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, view.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) {
info("Test that deleting the value removes the property");
yield setStyle(testActor, "#div1", "marginRight", "15px");
yield waitForUpdate(inspector);
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-right > span");
+ let span = view.document.querySelector(".boxmodel-margin.boxmodel-right > span");
is(span.textContent, 15, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "15px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "margin-right")), "",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
is((yield getStyle(testActor, "#div1", "margin-right")), "",
"Should be the right margin-top on the element.");
is(span.textContent, 10, "Should have the right value in the box model.");
}
function* testRefocusingOnClick(inspector, view, testActor) {
info("Test that clicking in the editor input does not remove focus");
yield selectNode("#div4", inspector);
- let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
+ let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
is(span.textContent, 1, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
info("Click in the already opened editor input");
- EventUtils.synthesizeMouseAtCenter(editor, {}, view.doc.defaultView);
- is(editor, view.doc.activeElement,
+ EventUtils.synthesizeMouseAtCenter(editor, {}, view.document.defaultView);
+ is(editor, view.document.activeElement,
"Inplace editor input should still have focus.");
info("Check the input can still be used as expected");
- EventUtils.synthesizeKey("VK_UP", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_UP", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "2px", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
"Should have updated the margin.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
"Should be the right margin-top on the element.");
is(span.textContent, 2, "Should have the right value in the box model.");
}
rename from devtools/client/inspector/components/test/browser_boxmodel_editablemodel_allproperties.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_allproperties.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js
@@ -27,120 +27,120 @@ add_task(function* () {
function* testEditing(inspector, view, testActor) {
info("When all properties are set on the node editing one should work");
yield setStyle(testActor, "#div1", "padding", "5px");
yield waitForUpdate(inspector);
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-bottom > span");
+ let span = view.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("7", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "7", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
"Should have updated the padding");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
"Should be the right padding.");
is(span.textContent, 7, "Should have the right value in the box model.");
}
function* testEditingAndCanceling(inspector, view, 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.doc.querySelector(".old-boxmodel-padding.old-boxmodel-left > span");
+ let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("8", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("8", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "8", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "padding-left")), "8px",
"Should have updated the padding");
- EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, view.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) {
info("When all properties are set on the node deleting one should work");
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-left > span");
+ let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "padding-left")), "",
"Should have updated the padding");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
is((yield getStyle(testActor, "#div1", "padding-left")), "",
"Should be the right padding.");
is(span.textContent, 3, "Should have the right value in the box model.");
}
function* testDeletingAndCanceling(inspector, view, 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.doc.querySelector(".old-boxmodel-padding.old-boxmodel-left > span");
+ let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
is(span.textContent, 5, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "padding-left")), "",
"Should have updated the padding");
- EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, view.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.");
}
rename from devtools/client/inspector/components/test/browser_boxmodel_editablemodel_bluronclick.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_bluronclick.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
@@ -25,50 +25,50 @@ add_task(function* () {
yield selectNode("#div1", inspector);
yield testClickingOutsideEditor(view);
yield testClickingBelowContainer(view);
});
function* testClickingOutsideEditor(view) {
info("Test that clicking outside the editor blurs it");
- let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
+ let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
is(span.textContent, 10, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
info("Click next to the opened editor input.");
let onBlur = once(editor, "blur");
let rect = editor.getBoundingClientRect();
EventUtils.synthesizeMouse(editor, rect.width + 10, rect.height / 2, {},
- view.doc.defaultView);
+ view.document.defaultView);
yield onBlur;
- is(view.doc.querySelector(".styleinspector-propertyeditor"), null,
+ is(view.document.querySelector(".styleinspector-propertyeditor"), null,
"Inplace editor has been removed.");
}
function* testClickingBelowContainer(view) {
info("Test that clicking below the box-model container blurs it");
- let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
+ let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
is(span.textContent, 10, "Should have the right value in the box model.");
- info("Test that clicking below the old-boxmodel-container blurs the opened editor");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ 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");
ok(editor, "Should have opened the editor.");
let onBlur = once(editor, "blur");
- let container = view.doc.querySelector("#old-boxmodel-container");
+ let container = view.document.querySelector(".boxmodel-container");
// Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
// use an erroneous height of ~50px for the boxmodel-container.
let bounds = container.getBoxQuads({relativeTo: view.doc})[0].bounds;
EventUtils.synthesizeMouseAtPoint(
bounds.left + 10,
bounds.top + bounds.height + 10,
- {}, view.doc.defaultView);
+ {}, view.document.defaultView);
yield onBlur;
- is(view.doc.querySelector(".styleinspector-propertyeditor"), null,
+ is(view.document.querySelector(".styleinspector-propertyeditor"), null,
"Inplace editor has been removed.");
}
rename from devtools/client/inspector/components/test/browser_boxmodel_editablemodel_border.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_border.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js
@@ -19,34 +19,34 @@ add_task(function* () {
let {inspector, view, testActor} = yield openBoxModelView();
is((yield getStyle(testActor, "#div1", "border-top-width")), "",
"Should have the right border");
is((yield getStyle(testActor, "#div1", "border-top-style")), "",
"Should have the right border");
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-border.old-boxmodel-top > span");
+ let span = view.document.querySelector(".boxmodel-border.boxmodel-top > span");
is(span.textContent, 0, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "0", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("1", {}, view.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.doc.defaultView);
+ EventUtils.synthesizeKey("VK_ESCAPE", {}, view.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.");
});
rename from devtools/client/inspector/components/test/browser_boxmodel_editablemodel_stylerules.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_editablemodel_stylerules.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js
@@ -26,88 +26,88 @@ add_task(function* () {
function* testUnits(inspector, view, testActor) {
info("Test that entering units works");
is((yield getStyle(testActor, "#div1", "padding-top")), "",
"Should have the right padding");
yield selectNode("#div1", inspector);
- let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-top > span");
+ let span = view.document.querySelector(".boxmodel-padding.boxmodel-top > span");
is(span.textContent, 3, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "3px", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("1", {}, view.document.defaultView);
yield waitForUpdate(inspector);
- EventUtils.synthesizeKey("e", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("e", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is((yield getStyle(testActor, "#div1", "padding-top")), "",
"An invalid value is handled cleanly");
- EventUtils.synthesizeKey("m", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("m", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "1em", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div1", "padding-top")),
"1em", "Should have updated the padding.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
is((yield getStyle(testActor, "#div1", "padding-top")), "1em",
"Should be the right padding.");
is(span.textContent, 16, "Should have the right value in the box model.");
}
function* testValueComesFromStyleRule(inspector, view, testActor) {
info("Test that we pick up the value from a higher style rule");
is((yield getStyle(testActor, "#div2", "border-bottom-width")), "",
"Should have the right border-bottom-width");
yield selectNode("#div2", inspector);
- let span = view.doc.querySelector(".old-boxmodel-border.old-boxmodel-bottom > span");
+ let span = view.document.querySelector(".boxmodel-border.boxmodel-bottom > span");
is(span.textContent, 16, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "1em", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("0", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("0", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "0", "Should have the right value in the editor.");
is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
"Should have updated the border.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
"Should be the right border-bottom-width.");
is(span.textContent, 0, "Should have the right value in the box model.");
}
function* testShorthandsAreParsed(inspector, view, testActor) {
info("Test that shorthand properties are parsed correctly");
is((yield getStyle(testActor, "#div3", "padding-right")), "",
"Should have the right padding");
yield selectNode("#div3", inspector);
- let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-right > span");
+ let span = view.document.querySelector(".boxmodel-padding.boxmodel-right > span");
is(span.textContent, 32, "Should have the right value in the box model.");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "2em", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.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.");
}
rename from devtools/client/inspector/components/test/browser_boxmodel_guides.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_guides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js
@@ -23,26 +23,26 @@ add_task(function* () {
yield selectNode("div", inspector);
// Mock the highlighter by replacing the showBoxModel method.
toolbox.highlighter.showBoxModel = function (nodeFront, options) {
highlightedNodeFront = nodeFront;
highlighterOptions = options;
};
- let elt = view.doc.getElementById("old-boxmodel-margins");
+ let elt = view.document.querySelector(".boxmodel-margins");
yield testGuideOnLayoutHover(elt, "margin", inspector, view);
- elt = view.doc.getElementById("old-boxmodel-borders");
+ elt = view.document.querySelector(".boxmodel-borders");
yield testGuideOnLayoutHover(elt, "border", inspector, view);
- elt = view.doc.getElementById("old-boxmodel-padding");
+ elt = view.document.querySelector(".boxmodel-paddings");
yield testGuideOnLayoutHover(elt, "padding", inspector, view);
- elt = view.doc.getElementById("old-boxmodel-content");
+ elt = view.document.querySelector(".boxmodel-content");
yield testGuideOnLayoutHover(elt, "content", inspector, view);
});
function* testGuideOnLayoutHover(elt, expectedRegion, inspector) {
info("Synthesizing mouseover on the boxmodel-view");
EventUtils.synthesizeMouse(elt, 2, 2, {type: "mouseover"},
elt.ownerDocument.defaultView);
rename from devtools/client/inspector/components/test/browser_boxmodel_navigation.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_navigation.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js
@@ -24,80 +24,80 @@ add_task(function* () {
yield testChangingLevels(inspector, view);
yield testTabbingWrapAround(inspector, view);
yield testChangingLevelsByClicking(inspector, view);
});
function* testInitialFocus(inspector, view) {
info("Test that the focus is on margin layout.");
let viewdoc = view.doc;
- let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
+ let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
boxmodel.focus();
EventUtils.synthesizeKey("VK_RETURN", {});
- is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-margins",
+ is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-margins",
"Should be set to the margin layout.");
}
function* testChangingLevels(inspector, view) {
info("Test that using arrow keys updates level.");
let viewdoc = view.doc;
- let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
+ let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
boxmodel.focus();
EventUtils.synthesizeKey("VK_RETURN", {});
EventUtils.synthesizeKey("VK_ESCAPE", {});
EventUtils.synthesizeKey("VK_DOWN", {});
- is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-borders",
+ is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-borders",
"Should be set to the border layout.");
EventUtils.synthesizeKey("VK_DOWN", {});
- is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-padding",
+ is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-padding",
"Should be set to the padding layout.");
EventUtils.synthesizeKey("VK_UP", {});
- is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-borders",
+ is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-borders",
"Should be set to the border layout.");
EventUtils.synthesizeKey("VK_UP", {});
- is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-margins",
+ is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-margins",
"Should be set to the margin layout.");
}
function* testTabbingWrapAround(inspector, view) {
info("Test that using arrow keys updates level.");
let viewdoc = view.doc;
- let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
+ let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
boxmodel.focus();
EventUtils.synthesizeKey("VK_RETURN", {});
let editLevel = boxmodel.getAttribute("aria-activedescendant");
let dataLevel = viewdoc.getElementById(editLevel).getAttribute("data-box");
let editBoxes = [...viewdoc.querySelectorAll(
- `[data-box="${dataLevel}"].old-boxmodel-editable`)];
+ `[data-box="${dataLevel}"].boxmodel-editable`)];
EventUtils.synthesizeKey("VK_ESCAPE", {});
editBoxes[3].focus();
EventUtils.synthesizeKey("VK_TAB", {});
is(editBoxes[0], viewdoc.activeElement, "Top edit box should have focus.");
editBoxes[0].focus();
EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
is(editBoxes[3], viewdoc.activeElement, "Left edit box should have focus.");
}
function* testChangingLevelsByClicking(inspector, view) {
info("Test that clicking on levels updates level.");
let viewdoc = view.doc;
- let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
+ let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
boxmodel.focus();
- let marginLayout = viewdoc.getElementById("old-boxmodel-margins");
- let borderLayout = viewdoc.getElementById("old-boxmodel-borders");
- let paddingLayout = viewdoc.getElementById("old-boxmodel-padding");
+ let marginLayout = viewdoc.getElementById("boxmodel-margins");
+ let borderLayout = viewdoc.getElementById("boxmodel-borders");
+ let paddingLayout = viewdoc.getElementById("boxmodel-padding");
let layouts = [paddingLayout, borderLayout, marginLayout];
layouts.forEach(layout => {
layout.click();
is(boxmodel.getAttribute("aria-activedescendant"), layout.id,
"Should be set to" + layout.getAttribute("data-box") + "layout.");
});
}
rename from devtools/client/inspector/components/test/browser_boxmodel_rotate-labels-on-sides.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_rotate-labels-on-sides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
@@ -2,28 +2,28 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that longer values are rotated on the side
const res1 = [
- {selector: ".old-boxmodel-margin.old-boxmodel-top > span", value: 30},
- {selector: ".old-boxmodel-margin.old-boxmodel-left > span", value: "auto"},
- {selector: ".old-boxmodel-margin.old-boxmodel-bottom > span", value: 30},
- {selector: ".old-boxmodel-margin.old-boxmodel-right > span", value: "auto"},
- {selector: ".old-boxmodel-padding.old-boxmodel-top > span", value: 20},
- {selector: ".old-boxmodel-padding.old-boxmodel-left > span", value: 2000000},
- {selector: ".old-boxmodel-padding.old-boxmodel-bottom > span", value: 20},
- {selector: ".old-boxmodel-padding.old-boxmodel-right > span", value: 20},
- {selector: ".old-boxmodel-border.old-boxmodel-top > span", value: 10},
- {selector: ".old-boxmodel-border.old-boxmodel-left > span", value: 10},
- {selector: ".old-boxmodel-border.old-boxmodel-bottom > span", value: 10},
- {selector: ".old-boxmodel-border.old-boxmodel-right > span", value: 10},
+ {selector: ".boxmodel-margin.boxmodel-top > span", value: 30},
+ {selector: ".boxmodel-margin.boxmodel-left > span", value: "auto"},
+ {selector: ".boxmodel-margin.boxmodel-bottom > span", value: 30},
+ {selector: ".boxmodel-margin.boxmodel-right > span", value: "auto"},
+ {selector: ".boxmodel-padding.boxmodel-top > span", value: 20},
+ {selector: ".boxmodel-padding.boxmodel-left > span", value: 2000000},
+ {selector: ".boxmodel-padding.boxmodel-bottom > span", value: 20},
+ {selector: ".boxmodel-padding.boxmodel-right > span", value: 20},
+ {selector: ".boxmodel-border.boxmodel-top > span", value: 10},
+ {selector: ".boxmodel-border.boxmodel-left > span", value: 10},
+ {selector: ".boxmodel-border.boxmodel-bottom > span", value: 10},
+ {selector: ".boxmodel-border.boxmodel-right > span", value: 10},
];
const TEST_URI = encodeURIComponent([
"<style>",
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
"margin: 30px auto; }",
"</style>",
"<div></div>"
@@ -31,19 +31,19 @@ const TEST_URI = encodeURIComponent([
const LONG_TEXT_ROTATE_LIMIT = 3;
add_task(function* () {
yield addTab("data:text/html," + TEST_URI);
let {inspector, view} = yield openBoxModelView();
yield selectNode("div", inspector);
for (let i = 0; i < res1.length; i++) {
- let elt = view.doc.querySelector(res1[i].selector);
+ let elt = view.document.querySelector(res1[i].selector);
let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
let classList = elt.parentNode.classList;
- let canBeRotated = classList.contains("old-boxmodel-left") ||
- classList.contains("old-boxmodel-right");
- let isRotated = classList.contains("old-boxmodel-rotate");
+ let canBeRotated = classList.contains("boxmodel-left") ||
+ classList.contains("boxmodel-right");
+ let isRotated = classList.contains("boxmodel-rotate");
is(canBeRotated && isLong,
isRotated, res1[i].selector + " correctly rotated.");
}
});
rename from devtools/client/inspector/components/test/browser_boxmodel_sync.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_sync.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js
@@ -12,24 +12,24 @@ add_task(function* () {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openBoxModelView();
info("When a property is edited, it should sync in the rule view");
yield selectNode("p", inspector);
info("Modify padding-bottom in box model view");
- let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-bottom > span");
- EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
- let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+ let span = view.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
+ EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+ let editor = view.document.querySelector(".styleinspector-propertyeditor");
- EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("7", {}, view.document.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "7", "Should have the right value in the editor.");
- EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.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;
rename from devtools/client/inspector/components/test/browser_boxmodel_tooltips.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_tooltips.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
@@ -71,49 +71,49 @@ const VALUES_TEST_DATA = [{
}];
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openBoxModelView();
info("Checking the regions tooltips");
- ok(view.doc.querySelector("#old-boxmodel-margins").hasAttribute("title"),
+ ok(view.document.querySelector(".boxmodel-margins").hasAttribute("title"),
"The margin region has a tooltip");
- is(view.doc.querySelector("#old-boxmodel-margins").getAttribute("title"), "margin",
+ is(view.document.querySelector(".boxmodel-margins").getAttribute("title"), "margin",
"The margin region has the correct tooltip content");
- ok(view.doc.querySelector("#old-boxmodel-borders").hasAttribute("title"),
+ ok(view.document.querySelector(".boxmodel-borders").hasAttribute("title"),
"The border region has a tooltip");
- is(view.doc.querySelector("#old-boxmodel-borders").getAttribute("title"), "border",
+ is(view.document.querySelector(".boxmodel-borders").getAttribute("title"), "border",
"The border region has the correct tooltip content");
- ok(view.doc.querySelector("#old-boxmodel-padding").hasAttribute("title"),
+ ok(view.document.querySelector(".boxmodel-paddings").hasAttribute("title"),
"The padding region has a tooltip");
- is(view.doc.querySelector("#old-boxmodel-padding").getAttribute("title"), "padding",
+ is(view.document.querySelector(".boxmodel-paddings").getAttribute("title"), "padding",
"The padding region has the correct tooltip content");
- ok(view.doc.querySelector("#old-boxmodel-content").hasAttribute("title"),
+ ok(view.document.querySelector(".boxmodel-content").hasAttribute("title"),
"The content region has a tooltip");
- is(view.doc.querySelector("#old-boxmodel-content").getAttribute("title"), "content",
+ is(view.document.querySelector(".boxmodel-content").getAttribute("title"), "content",
"The content region has the correct tooltip content");
for (let {selector, values} of VALUES_TEST_DATA) {
info("Selecting " + selector + " and checking the values tooltips");
yield selectNode(selector, inspector);
info("Iterate over all values");
for (let key in view.map) {
if (key === "position") {
continue;
}
let name = view.map[key].property;
let expectedTooltipData = values.find(o => o.name === name);
- let el = view.doc.querySelector(view.map[key].selector);
+ let el = view.document.querySelector(view.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");
rename from devtools/client/inspector/components/test/browser_boxmodel_update-after-navigation.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_update-after-navigation.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js
@@ -27,64 +27,61 @@ add_task(function* () {
yield inspector.once("markuploaded");
yield testBackToFirstPage(inspector, view, testActor);
});
function* testFirstPage(inspector, view, testActor) {
info("Test that the box model view works on the first page");
- info("Selecting the test node");
yield selectNode("p", inspector);
info("Checking that the box model view shows the right value");
- let paddingElt = view.doc.querySelector(
- ".old-boxmodel-padding.old-boxmodel-top > span");
+ let paddingElt = view.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) {
info("Test that the box model view works on the second page");
- info("Selecting the test node");
yield selectNode("p", inspector);
info("Checking that the box model view shows the right value");
- let sizeElt = view.doc.querySelector(".old-boxmodel-size > span");
+ let sizeElt = view.document.querySelector(".boxmodel-size > span");
is(sizeElt.textContent, "100" + "\u00D7" + "100");
info("Listening for box model view changes and modifying the size");
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) {
info("Test that the box model view works on the first page after going back");
- info("Selecting the test node");
yield selectNode("p", inspector);
info("Checking that the box model view shows the right value, which is the" +
"modified value from step one because of the bfcache");
- let paddingElt = view.doc.querySelector(
- ".old-boxmodel-padding.old-boxmodel-top > span");
+ let paddingElt = view.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");
rename from devtools/client/inspector/components/test/browser_boxmodel_update-after-reload.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_update-after-reload.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js
@@ -17,22 +17,21 @@ add_task(function* () {
yield testActor.reload();
yield inspector.once("markuploaded");
info("Test that the box model view works on the reloaded page");
yield assertBoxModelView(inspector, view, testActor);
});
function* assertBoxModelView(inspector, view, testActor) {
- info("Selecting the test node");
yield selectNode("p", inspector);
info("Checking that the box model view shows the right value");
- let paddingElt = view.doc.querySelector(
- ".old-boxmodel-padding.old-boxmodel-top > span");
+ let paddingElt = view.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");
rename from devtools/client/inspector/components/test/browser_boxmodel_update-in-iframes.js
rename to devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
--- a/devtools/client/inspector/components/test/browser_boxmodel_update-in-iframes.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js
@@ -17,17 +17,17 @@ add_task(function* () {
function* testResizingInIframe(inspector, view, testActor) {
info("Test that resizing an element in an iframe updates its box model");
info("Selecting the nested test node");
yield selectNodeInIframe2("div", inspector);
info("Checking that the box model view shows the right value");
- let sizeElt = view.doc.querySelector(".old-boxmodel-size > span");
+ let sizeElt = view.document.querySelector(".boxmodel-size > span");
is(sizeElt.textContent, "400\u00D7200");
info("Listening for box model view changes and modifying its size");
let onUpdated = waitForUpdate(inspector);
yield setStyleInIframe2(testActor, "div", "width", "200px");
yield onUpdated;
ok(true, "Box model view got updated");
@@ -42,17 +42,17 @@ function* testReflowsAfterIframeDeletion
info("Deleting the iframe2");
yield removeIframe2(testActor);
yield inspector.once("inspector-updated");
info("Selecting the test node in iframe1");
yield selectNodeInIframe1("p", inspector);
info("Checking that the box model view shows the right value");
- let sizeElt = view.doc.querySelector(".old-boxmodel-size > span");
+ let sizeElt = view.document.querySelector(".boxmodel-size > span");
is(sizeElt.textContent, "100\u00D7100");
info("Listening for box model view changes and modifying its size");
let onUpdated = waitForUpdate(inspector);
yield setStyleInIframe1(testActor, "p", "width", "200px");
yield onUpdated;
ok(true, "Box model view got updated");
rename from devtools/client/inspector/components/test/doc_boxmodel_iframe1.html
rename to devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe1.html
rename from devtools/client/inspector/components/test/doc_boxmodel_iframe2.html
rename to devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe2.html
rename from devtools/client/inspector/components/test/head.js
rename to devtools/client/inspector/boxmodel/test/head.js
--- a/devtools/client/inspector/components/test/head.js
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -53,17 +53,17 @@ function openBoxModelView() {
return promise.resolve();
};
}
mockHighlighter(data.toolbox);
return {
toolbox: data.toolbox,
inspector: data.inspector,
- view: data.inspector.computedview.boxModelView,
+ view: data.inspector.computedview,
testActor: data.testActor
};
});
}
/**
* Wait for the boxmodel-view-updated event.
* @return a promise
@@ -80,8 +80,19 @@ function getStyle(testActor, selector, p
}
function setStyle(testActor, selector, propertyName, value) {
return testActor.eval(`
content.document.querySelector("${selector}")
.style.${propertyName} = "${value}";
`);
}
+
+/**
+ * The box model doesn't participate in the inspector's update mechanism, so simply
+ * calling the default selectNode isn't enough to guarantee that the box model view has
+ * finished updating. We also need to wait for the "boxmodel-view-updated" event.
+ */
+var _selectNode = selectNode;
+selectNode = function* (node, inspector, reason) {
+ yield _selectNode(node, inspector, reason);
+ yield waitForUpdate(inspector);
+};
--- a/devtools/client/inspector/components/moz.build
+++ b/devtools/client/inspector/components/moz.build
@@ -3,10 +3,8 @@
# 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(
'inspector-tab-panel.css',
'inspector-tab-panel.js',
)
-
-BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -175,16 +175,17 @@ 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("propertyContainer");
+ this.boxModelWrapper = doc.getElementById("boxmodel-wrapper");
this.searchField = doc.getElementById("computedview-searchbox");
this.searchClearButton = doc.getElementById("computedview-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);
@@ -554,20 +555,20 @@ 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.inspector.emit("computed-view-filtered", true);
+ this.boxModelWrapper.hidden = true;
} else {
this.searchField.removeAttribute("filled");
- this.inspector.emit("computed-view-filtered", false);
+ this.boxModelWrapper.hidden = false;
}
this.refreshPanel();
this._filterChangeTimeout = null;
}, filterTimeout);
},
/**
@@ -627,17 +628,17 @@ CssComputedView.prototype = {
{ store: this.store },
BoxModelApp({
showBoxModelProperties: false,
onHideBoxModelHighlighter,
onShowBoxModelEditor,
onShowBoxModelHighlighter,
})
);
- ReactDOM.render(provider, this.styleDocument.getElementById("boxmodel-wrapper"));
+ ReactDOM.render(provider, this.boxModelWrapper);
},
/**
* The CSS as displayed by the UI.
*/
createStyleViews: function () {
if (CssComputedView.propertyNames) {
return;
@@ -808,17 +809,17 @@ CssComputedView.prototype = {
this.searchField.removeEventListener("contextmenu",
this.inspector.onTextBoxContextMenu);
this.searchClearButton.removeEventListener("click", this._onClearSearch);
this.includeBrowserStylesCheckbox.removeEventListener("input",
this._onIncludeBrowserStyles);
// Nodes used in templating
this.element = null;
- this.panel = null;
+ this.boxModelWrapper = null;
this.searchField = null;
this.searchClearButton = null;
this.includeBrowserStylesCheckbox = null;
// Property views
for (let propView of this.propertyViews) {
propView.destroy();
}
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
@@ -29,17 +29,17 @@ function* testToggleDefaultStyles(inspec
let onRefreshed = inspector.once("computed-view-refreshed");
checkbox.click();
yield onRefreshed;
}
function* testAddTextInFilter(inspector, computedView) {
info("setting filter text to \"color\"");
let doc = computedView.styleDocument;
- let boxModelWrapper = doc.querySelector("#old-boxmodel-wrapper");
+ 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 });
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
@@ -45,17 +45,17 @@ function* testAddTextInFilter(inspector,
});
}
function* testClearSearchFilter(inspector, computedView) {
info("Clearing the search filter");
let win = computedView.styleWindow;
let doc = computedView.styleDocument;
- let boxModelWrapper = doc.querySelector("#old-boxmodel-wrapper");
+ 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;
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -73,18 +73,16 @@ const PORTRAIT_MODE_WIDTH = 700;
* Fired when the computed rules view updates to a new node
* - computed-view-property-expanded
* Fired when a property is expanded in the computed rules view
* - computed-view-property-collapsed
* Fired when a property is collapsed in the computed rules view
* - computed-view-sourcelinks-updated
* Fired when the stylesheet source links have been updated (when switching
* to source-mapped files)
- * - computed-view-filtered
- * Fired when the computed rules view is filtered
* - rule-view-refreshed
* Fired when the rule view updates to a new node
* - rule-view-sourcelinks-updated
* Fired when the stylesheet source links have been updated (when switching
* to source-mapped files)
*/
function Inspector(toolbox) {
this._toolbox = toolbox;
--- a/devtools/client/inspector/test/browser_inspector_textbox-menu.js
+++ b/devtools/client/inspector/test/browser_inspector_textbox-menu.js
@@ -61,17 +61,17 @@ add_task(function* () {
info("Switching to the computed-view");
let onComputedViewReady = inspector.once("boxmodel-view-updated");
selectComputedView(inspector);
yield onComputedViewReady;
info("Testing the box-model region");
let margin = inspector.panelDoc.querySelector(
- ".old-boxmodel-margin.old-boxmodel-top > span");
+ ".boxmodel-margin.boxmodel-top > span");
EventUtils.synthesizeMouseAtCenter(margin, {}, inspector.panelWin);
yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
});
function* checkTextBox(textBox, {textBoxContextMenuPopup}) {
is(textBoxContextMenuPopup.state, "closed", "The menu is closed");
info("Simulating context click on the textbox and expecting the menu to open");