☠☠ backed out by 77b0ddb1fd71 ☠ ☠ | |
author | Gabriel Luong <gabriel.luong@gmail.com> |
Wed, 22 Feb 2017 19:26:57 +0100 | |
changeset 344652 | e1624f6a808758de2ea3bb7bcaf426b155663ec3 |
parent 344651 | a174ae51463a00a58e042d76e7eb57723767c1a0 |
child 344653 | fd85a5aafa9fdc2fbe012408e996f573308fb697 |
push id | 31414 |
push user | cbook@mozilla.com |
push date | Fri, 24 Feb 2017 10:47:41 +0000 |
treeherder | mozilla-central@be661bae6cb9 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | jdescottes |
bugs | 1336198 |
milestone | 54.0a1 |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
--- 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");