wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1244755 - 3 - Remove CPOW usages and eslint warnings from devtools/client/inspector/layout; r=miker

Browse Source
This commit is contained in:
Patrick Brosset 2016-02-04 20:56:32 +01:00
parent e01b41bab4
commit ca717b4138
13 changed files with 211 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -92,7 +92,6 @@ devtools/client/framework/**
# included in the ignore list.
devtools/client/inspector/computed/**
devtools/client/inspector/fonts/**
devtools/client/inspector/layout/**
devtools/client/inspector/markup/test/**
devtools/client/inspector/rules/**
devtools/client/inspector/shared/test/**

11
devtools/client/inspector/layout/layout.js
View File

@ -307,8 +307,8 @@ LayoutView.prototype = {
element: element,
initial: initialValue,
start: editor => {
editor.elt.parentNode.classList.add("layout-editing");
start: self => {
self.elt.parentNode.classList.add("layout-editing");
},
change: value => {
@ -457,7 +457,7 @@ LayoutView.prototype = {
update: function() {
let lastRequest = Task.spawn((function*() {
if (!this.isViewVisibleAndNodeValid()) {
return;
return null;
}
let node = this.inspector.selection.nodeFront;
@ -546,7 +546,8 @@ LayoutView.prototype = {
this.inspector.emit("layoutview-updated");
}).bind(this)).then(null, console.error);
return this._lastRequest = lastRequest;
this._lastRequest = lastRequest;
return this._lastRequest;
},
/**
@ -587,7 +588,7 @@ LayoutView.prototype = {
* Show the box-model highlighter on the currently selected element
* @param {Object} options Options passed to the highlighter actor
*/
showBoxModel: function(options={}) {
showBoxModel: function(options = {}) {
let toolbox = this.inspector.toolbox;
let nodeFront = this.inspector.selection.nodeFront;

83
devtools/client/inspector/layout/test/browser_layout_editablemodel.js
View File

@ -19,28 +19,24 @@ const TEST_URI = "<style>" +
"<div id='div3'></div><div id='div4'></div>" +
"<div id='div5'></div>";
function getStyle(node, property) {
return node.style.getPropertyValue(property);
}
add_task(function*() {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openLayoutView();
let {inspector, view, testActor} = yield openLayoutView();
yield testEditingMargins(inspector, view);
yield testKeyBindings(inspector, view);
yield testEscapeToUndo(inspector, view);
yield testDeletingValue(inspector, view);
yield testRefocusingOnClick(inspector, view);
yield testEditingMargins(inspector, view, testActor);
yield testKeyBindings(inspector, view, testActor);
yield testEscapeToUndo(inspector, view, testActor);
yield testDeletingValue(inspector, view, testActor);
yield testRefocusingOnClick(inspector, view, testActor);
yield testBluringOnClick(inspector, view);
});
function* testEditingMargins(inspector, view) {
function* testEditingMargins(inspector, view, testActor) {
info("Test that editing margin dynamically updates the document, pressing " +
"escape cancels the changes");
let node = content.document.getElementById("div1");
is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
is((yield getStyle(testActor, "#div1", "margin-top")), "",
"Should be no margin-top on the element.");
yield selectNode("#div1", inspector);
let span = view.doc.querySelector(".layout-margin.layout-top > span");
@ -54,21 +50,23 @@ function* testEditingMargins(inspector, view) {
EventUtils.synthesizeKey("3", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(getStyle(node, "margin-top"), "3px", "Should have updated the margin.");
is((yield getStyle(testActor, "#div1", "margin-top")), "3px",
"Should have updated the margin.");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
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) {
function* testKeyBindings(inspector, view, testActor) {
info("Test that arrow keys work correctly and pressing enter commits the " +
"changes");
let node = content.document.getElementById("div1");
is(getStyle(node, "margin-left"), "", "Should be no margin-top on the element.")
is((yield getStyle(testActor, "#div1", "margin-left")), "",
"Should be no margin-top on the element.");
yield selectNode("#div1", inspector);
let span = view.doc.querySelector(".layout-margin.layout-left > span");
@ -83,31 +81,35 @@ function* testKeyBindings(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "11px", "Should have the right value in the editor.");
is(getStyle(node, "margin-left"), "11px", "Should have updated the margin.");
is((yield getStyle(testActor, "#div1", "margin-left")), "11px",
"Should have updated the margin.");
EventUtils.synthesizeKey("VK_DOWN", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "10px", "Should have the right value in the editor.");
is(getStyle(node, "margin-left"), "10px", "Should have updated the margin.");
is((yield getStyle(testActor, "#div1", "margin-left")), "10px",
"Should have updated the margin.");
EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view.doc.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "20px", "Should have the right value in the editor.");
is(getStyle(node, "margin-left"), "20px", "Should have updated the margin.");
is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
"Should have updated the margin.");
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
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) {
function* testEscapeToUndo(inspector, view, testActor) {
info("Test that deleting the value removes the property but escape undoes " +
"that");
let node = content.document.getElementById("div1");
is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
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(".layout-margin.layout-left > span");
@ -122,21 +124,21 @@ function* testEscapeToUndo(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is(getStyle(node, "margin-left"), "", "Should have updated the margin.");
is((yield getStyle(testActor, "#div1", "margin-left")), "",
"Should have updated the margin.");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
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) {
function* testDeletingValue(inspector, view, testActor) {
info("Test that deleting the value removes the property");
let node = content.document.getElementById("div1");
node.style.marginRight = "15px";
yield setStyle(testActor, "#div1", "marginRight", "15px");
yield waitForUpdate(inspector);
yield selectNode("#div1", inspector);
@ -153,19 +155,19 @@ function* testDeletingValue(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is(getStyle(node, "margin-right"), "", "Should have updated the margin.");
is((yield getStyle(testActor, "#div1", "margin-right")), "",
"Should have updated the margin.");
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "margin-right"), "", "Should be the right margin-top on the element.")
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) {
function* testRefocusingOnClick(inspector, view, testActor) {
info("Test that clicking in the editor input does not remove focus");
let node = content.document.getElementById("div4");
yield selectNode("#div4", inspector);
let span = view.doc.querySelector(".layout-margin.layout-top > span");
@ -185,19 +187,18 @@ function* testRefocusingOnClick(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "2px", "Should have the right value in the editor.");
is(getStyle(node, "margin-top"), "2px", "Should have updated the margin.");
is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
"Should have updated the margin.");
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "margin-top"), "2px",
"Should be the right margin-top on the element.");
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.");
}
function* testBluringOnClick(inspector, view) {
info("Test that clicking outside the editor blurs it");
let node = content.document.getElementById("div5");
yield selectNode("#div5", inspector);
let span = view.doc.querySelector(".layout-margin.layout-top > span");

62
devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
View File

@ -14,26 +14,20 @@ const TEST_URI = "<style>" +
"</style>" +
"<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
function getStyle(node, property) {
return node.style.getPropertyValue(property);
}
add_task(function*() {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openLayoutView();
let {inspector, view, testActor} = yield openLayoutView();
yield testEditing(inspector, view);
yield testEditingAndCanceling(inspector, view);
yield testDeleting(inspector, view);
yield testDeletingAndCanceling(inspector, view);
yield testEditing(inspector, view, testActor);
yield testEditingAndCanceling(inspector, view, testActor);
yield testDeleting(inspector, view, testActor);
yield testDeletingAndCanceling(inspector, view, testActor);
});
function* testEditing(inspector, view) {
function* testEditing(inspector, view, testActor) {
info("When all properties are set on the node editing one should work");
let node = content.document.getElementById("div1");
node.style.padding = "5px";
yield setStyle(testActor, "#div1", "padding", "5px");
yield waitForUpdate(inspector);
yield selectNode("#div1", inspector);
@ -50,21 +44,21 @@ function* testEditing(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "7", "Should have the right value in the editor.");
is(getStyle(node, "padding-bottom"), "7px", "Should have updated the padding");
is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
"Should have updated the padding");
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "padding-bottom"), "7px", "Should be the right padding.")
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) {
function* testEditingAndCanceling(inspector, view, testActor) {
info("When all properties are set on the node editing one and then " +
"cancelling with ESCAPE should work");
let node = content.document.getElementById("div1");
node.style.padding = "5px";
yield setStyle(testActor, "#div1", "padding", "5px");
yield waitForUpdate(inspector);
yield selectNode("#div1", inspector);
@ -81,22 +75,20 @@ function* testEditingAndCanceling(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "8", "Should have the right value in the editor.");
is(getStyle(node, "padding-left"), "8px", "Should have updated the padding");
is((yield getStyle(testActor, "#div1", "padding-left")), "8px",
"Should have updated the padding");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(getStyle(node, "padding-left"), "5px", "Should be the right padding.")
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) {
function* testDeleting(inspector, view, testActor) {
info("When all properties are set on the node deleting one should work");
let node = content.document.getElementById("div1");
node.style.padding = "5px";
yield selectNode("#div1", inspector);
let span = view.doc.querySelector(".layout-padding.layout-left > span");
@ -111,21 +103,21 @@ function* testDeleting(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is(getStyle(node, "padding-left"), "", "Should have updated the padding");
is((yield getStyle(testActor, "#div1", "padding-left")), "",
"Should have updated the padding");
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "padding-left"), "", "Should be the right padding.")
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) {
function* testDeletingAndCanceling(inspector, view, testActor) {
info("When all properties are set on the node deleting one then cancelling " +
"should work");
let node = content.document.getElementById("div1");
node.style.padding = "5px";
yield setStyle(testActor, "#div1", "padding", "5px");
yield waitForUpdate(inspector);
yield selectNode("#div1", inspector);
@ -142,11 +134,13 @@ function* testDeletingAndCanceling(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "", "Should have the right value in the editor.");
is(getStyle(node, "padding-left"), "", "Should have updated the padding");
is((yield getStyle(testActor, "#div1", "padding-left")), "",
"Should have updated the padding");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(getStyle(node, "padding-left"), "5px", "Should be the right padding.")
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.");
}

25
devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
View File

@ -14,17 +14,14 @@ const TEST_URI = "<style>" +
"</style>" +
"<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
function getStyle(node, property) {
return node.style.getPropertyValue(property);
}
add_task(function*() {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openLayoutView();
let {inspector, view, testActor} = yield openLayoutView();
let node = content.document.getElementById("div1");
is(getStyle(node, "border-top-width"), "", "Should have the right border");
is(getStyle(node, "border-top-style"), "", "Should have the right border");
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(".layout-border.layout-top > span");
@ -39,13 +36,17 @@ add_task(function*() {
yield waitForUpdate(inspector);
is(editor.value, "1", "Should have the right value in the editor.");
is(getStyle(node, "border-top-width"), "1px", "Should have the right border");
is(getStyle(node, "border-top-style"), "solid", "Should have the right border");
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);
yield waitForUpdate(inspector);
is(getStyle(node, "border-top-width"), "", "Should be the right padding.")
is(getStyle(node, "border-top-style"), "", "Should have the right border");
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.");
});

45
devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
View File

@ -15,24 +15,20 @@ const TEST_URI = "<style>" +
"</style>" +
"<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
function getStyle(node, property) {
return node.style.getPropertyValue(property);
}
add_task(function*() {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openLayoutView();
let {inspector, view, testActor} = yield openLayoutView();
yield testUnits(inspector, view);
yield testValueComesFromStyleRule(inspector, view);
yield testShorthandsAreParsed(inspector, view);
yield testUnits(inspector, view, testActor);
yield testValueComesFromStyleRule(inspector, view, testActor);
yield testShorthandsAreParsed(inspector, view, testActor);
});
function* testUnits(inspector, view) {
function* testUnits(inspector, view, testActor) {
info("Test that entering units works");
let node = content.document.getElementById("div1");
is(getStyle(node, "padding-top"), "", "Should have the right padding");
is((yield getStyle(testActor, "#div1", "padding-top")), "",
"Should have the right padding");
yield selectNode("#div1", inspector);
let span = view.doc.querySelector(".layout-padding.layout-top > span");
@ -48,25 +44,27 @@ function* testUnits(inspector, view) {
EventUtils.synthesizeKey("e", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(getStyle(node, "padding-top"), "", "An invalid value is handled cleanly");
is((yield getStyle(testActor, "#div1", "padding-top")), "",
"An invalid value is handled cleanly");
EventUtils.synthesizeKey("m", {}, view.doc.defaultView);
yield waitForUpdate(inspector);
is(editor.value, "1em", "Should have the right value in the editor.");
is(getStyle(node, "padding-top"), "1em", "Should have updated the padding.");
is((yield getStyle(testActor, "#div1", "padding-top")),
"1em", "Should have updated the padding.");
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "padding-top"), "1em", "Should be the right padding.")
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) {
function* testValueComesFromStyleRule(inspector, view, testActor) {
info("Test that we pick up the value from a higher style rule");
let node = content.document.getElementById("div2");
is(getStyle(node, "border-bottom-width"), "",
is((yield getStyle(testActor, "#div2", "border-bottom-width")), "",
"Should have the right border-bottom-width");
yield selectNode("#div2", inspector);
@ -82,21 +80,21 @@ function* testValueComesFromStyleRule(inspector, view) {
yield waitForUpdate(inspector);
is(editor.value, "0", "Should have the right value in the editor.");
is(getStyle(node, "border-bottom-width"), "0px",
is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
"Should have updated the border.");
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "border-bottom-width"), "0px",
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) {
function* testShorthandsAreParsed(inspector, view, testActor) {
info("Test that shorthand properties are parsed correctly");
let node = content.document.getElementById("div3");
is(getStyle(node, "padding-right"), "", "Should have the right padding");
is((yield getStyle(testActor, "#div3", "padding-right")), "",
"Should have the right padding");
yield selectNode("#div3", inspector);
let span = view.doc.querySelector(".layout-padding.layout-right > span");
@ -109,6 +107,7 @@ function* testShorthandsAreParsed(inspector, view) {
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(getStyle(node, "padding-right"), "", "Should be the right padding.")
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.");
}

11
devtools/client/inspector/layout/test/browser_layout_guides.js
View File

@ -9,8 +9,9 @@
// devtools/inspector/test folder. This test only cares about checking that the
// layout-view does call the highlighter, and it does so by mocking it.
const STYLE = "div { position: absolute; top: 50px; left: 50px; height: 10px; " +
"width: 10px; border: 10px solid black; padding: 10px; margin: 10px;}";
const STYLE = "div { position: absolute; top: 50px; left: 50px; " +
"height: 10px; width: 10px; border: 10px solid black; " +
"padding: 10px; margin: 10px;}";
const HTML = "<style>" + STYLE + "</style><div></div>";
const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
@ -25,7 +26,7 @@ add_task(function*() {
toolbox.highlighter.showBoxModel = function(nodeFront, options) {
highlightedNodeFront = nodeFront;
highlighterOptions = options;
}
};
let elt = view.doc.getElementById("layout-margins");
yield testGuideOnLayoutHover(elt, "margin", inspector, view);
@ -40,9 +41,9 @@ add_task(function*() {
yield testGuideOnLayoutHover(elt, "content", inspector, view);
});
function* testGuideOnLayoutHover(elt, expectedRegion, inspector, view) {
function* testGuideOnLayoutHover(elt, expectedRegion, inspector) {
info("Synthesizing mouseover on the layout-view");
EventUtils.synthesizeMouse(elt, 2, 2, {type:'mouseover'},
EventUtils.synthesizeMouse(elt, 2, 2, {type: "mouseover"},
elt.ownerDocument.defaultView);
info("Waiting for the node-highlight event from the toolbox");

29
devtools/client/inspector/layout/test/browser_layout_rotate-labels-on-sides.js
View File

@ -7,23 +7,24 @@
// Test that longer values are rotated on the side
const res1 = [
{selector: ".layout-margin.layout-top > span", value: 30},
{selector: ".layout-margin.layout-left > span", value: "auto"},
{selector: ".layout-margin.layout-bottom > span", value: 30},
{selector: ".layout-margin.layout-right > span", value: "auto"},
{selector: ".layout-padding.layout-top > span", value: 20},
{selector: ".layout-padding.layout-left > span", value: 2000000},
{selector: ".layout-padding.layout-bottom > span", value: 20},
{selector: ".layout-padding.layout-right > span", value: 20},
{selector: ".layout-border.layout-top > span", value: 10},
{selector: ".layout-border.layout-left > span", value: 10},
{selector: ".layout-border.layout-bottom > span", value: 10},
{selector: ".layout-border.layout-right > span", value: 10},
{selector: ".layout-margin.layout-top > span", value: 30},
{selector: ".layout-margin.layout-left > span", value: "auto"},
{selector: ".layout-margin.layout-bottom > span", value: 30},
{selector: ".layout-margin.layout-right > span", value: "auto"},
{selector: ".layout-padding.layout-top > span", value: 20},
{selector: ".layout-padding.layout-left > span", value: 2000000},
{selector: ".layout-padding.layout-bottom > span", value: 20},
{selector: ".layout-padding.layout-right > span", value: 20},
{selector: ".layout-border.layout-top > span", value: 10},
{selector: ".layout-border.layout-left > span", value: 10},
{selector: ".layout-border.layout-bottom > span", value: 10},
{selector: ".layout-border.layout-right > span", value: 10},
];
const TEST_URI = encodeURIComponent([
"<style>",
"div{border:10px solid black; padding: 20px 20px 20px 2000000px; margin: 30px auto;}",
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
"margin: 30px auto; }",
"</style>",
"<div></div>"
].join(""));
@ -31,7 +32,7 @@ const LONG_TEXT_ROTATE_LIMIT = 3;
add_task(function*() {
yield addTab("data:text/html," + TEST_URI);
let {toolbox, inspector, view} = yield openLayoutView();
let {inspector, view} = yield openLayoutView();
yield selectNode("div", inspector);
for (let i = 0; i < res1.length; i++) {

6
devtools/client/inspector/layout/test/browser_layout_tooltips.js
View File

@ -42,14 +42,14 @@ const VALUES_TEST_DATA = [{
ruleSelector: "#div1",
styleSheetLocation: "null:1"
}]
},{
}, {
selector: "#div2",
values: [{
name: "border-bottom-width",
ruleSelector: "#div2",
styleSheetLocation: "null:2"
}]
},{
}, {
selector: "#div3",
values: [{
name: "padding-top",
@ -72,7 +72,7 @@ const VALUES_TEST_DATA = [{
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openLayoutView();
let {inspector, view} = yield openLayoutView();
info("Checking the regions tooltips");

45
devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
View File

@ -7,26 +7,29 @@
// Test that the layout-view continues to work after a page navigation and that
// it also works after going back
add_task(function*() {
yield addTab(URL_ROOT + "doc_layout_iframe1.html");
let {inspector, view} = yield openLayoutView();
const IFRAME1 = URL_ROOT + "doc_layout_iframe1.html";
const IFRAME2 = URL_ROOT + "doc_layout_iframe2.html";
yield testFirstPage(inspector, view);
add_task(function*() {
yield addTab(IFRAME1);
let {inspector, view, testActor} = yield openLayoutView();
yield testFirstPage(inspector, view, testActor);
info("Navigate to the second page");
yield navigateTo(URL_ROOT + "doc_layout_iframe2.html");
yield testActor.eval(`content.location.href="${IFRAME2}"`);
yield inspector.once("markuploaded");
yield testSecondPage(inspector, view);
yield testSecondPage(inspector, view, testActor);
info("Go back to the first page");
content.history.back();
yield testActor.eval("content.history.back();");
yield inspector.once("markuploaded");
yield testBackToFirstPage(inspector, view);
yield testBackToFirstPage(inspector, view, testActor);
});
function* testFirstPage(inspector, view) {
function* testFirstPage(inspector, view, testActor) {
info("Test that the layout-view works on the first page");
info("Selecting the test node");
@ -38,7 +41,7 @@ function* testFirstPage(inspector, view) {
info("Listening for layout-view changes and modifying the padding");
let onUpdated = waitForUpdate(inspector);
getNode("p").style.padding = "20px";
yield setStyle(testActor, "p", "padding", "20px");
yield onUpdated;
ok(true, "Layout-view got updated");
@ -46,7 +49,7 @@ function* testFirstPage(inspector, view) {
is(paddingElt.textContent, "20");
}
function* testSecondPage(inspector, view) {
function* testSecondPage(inspector, view, testActor) {
info("Test that the layout-view works on the second page");
info("Selecting the test node");
@ -58,7 +61,7 @@ function* testSecondPage(inspector, view) {
info("Listening for layout-view changes and modifying the size");
let onUpdated = waitForUpdate(inspector);
getNode("p").style.width = "200px";
yield setStyle(testActor, "p", "width", "200px");
yield onUpdated;
ok(true, "Layout-view got updated");
@ -66,7 +69,7 @@ function* testSecondPage(inspector, view) {
is(sizeElt.textContent, "200" + "\u00D7" + "100");
}
function* testBackToFirstPage(inspector, view) {
function* testBackToFirstPage(inspector, view, testActor) {
info("Test that the layout-view works on the first page after going back");
info("Selecting the test node");
@ -79,24 +82,10 @@ function* testBackToFirstPage(inspector, view) {
info("Listening for layout-view changes and modifying the padding");
let onUpdated = waitForUpdate(inspector);
getNode("p").style.padding = "100px";
yield setStyle(testActor, "p", "padding", "100px");
yield onUpdated;
ok(true, "Layout-view got updated");
info("Checking that the layout-view shows the right value after update");
is(paddingElt.textContent, "100");
}
function navigateTo(url) {
info("Navigating to " + url);
let def = promise.defer();
gBrowser.selectedBrowser.addEventListener("load", function onload() {
gBrowser.selectedBrowser.removeEventListener("load", onload, true);
info("URL " + url + " loading complete");
waitForFocus(def.resolve, content);
}, true);
content.location = url;
return def.promise;
}

12
devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
View File

@ -8,20 +8,20 @@
add_task(function*() {
yield addTab(URL_ROOT + "doc_layout_iframe1.html");
let {toolbox, inspector, view} = yield openLayoutView();
let {inspector, view, testActor} = yield openLayoutView();
info("Test that the layout-view works on the first page");
yield assertLayoutView(inspector, view);
yield assertLayoutView(inspector, view, testActor);
info("Reload the page");
content.location.reload();
yield testActor.eval("content.location.reload();");
yield inspector.once("markuploaded");
info("Test that the layout-view works on the reloaded page");
yield assertLayoutView(inspector, view);
yield assertLayoutView(inspector, view, testActor);
});
function* assertLayoutView(inspector, view) {
function* assertLayoutView(inspector, view, testActor) {
info("Selecting the test node");
yield selectNode("p", inspector);
@ -31,7 +31,7 @@ function* assertLayoutView(inspector, view) {
info("Listening for layout-view changes and modifying the padding");
let onUpdated = waitForUpdate(inspector);
getNode("p").style.padding = "20px";
yield setStyle(testActor, "p", "padding", "20px");
yield onUpdated;
ok(true, "Layout-view got updated");

46
devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
View File

@ -9,18 +9,16 @@
add_task(function*() {
yield addTab(URL_ROOT + "doc_layout_iframe1.html");
let iframe2 = getNode("iframe").contentDocument.querySelector("iframe");
let {inspector, view, testActor} = yield openLayoutView();
let {inspector, view} = yield openLayoutView();
yield testResizingInIframe(inspector, view, iframe2);
yield testReflowsAfterIframeDeletion(inspector, view, iframe2);
yield testResizingInIframe(inspector, view, testActor);
yield testReflowsAfterIframeDeletion(inspector, view, testActor);
});
function* testResizingInIframe(inspector, view, iframe2) {
function* testResizingInIframe(inspector, view, testActor) {
info("Test that resizing an element in an iframe updates its box model");
info("Selecting the nested test node");
let node = iframe2.contentDocument.querySelector("div");
yield selectNodeInIframe2("div", inspector);
info("Checking that the layout-view shows the right value");
@ -29,7 +27,7 @@ function* testResizingInIframe(inspector, view, iframe2) {
info("Listening for layout-view changes and modifying its size");
let onUpdated = waitForUpdate(inspector);
node.style.width = "200px";
yield setStyleInIframe2(testActor, "div", "width", "200px");
yield onUpdated;
ok(true, "Layout-view got updated");
@ -37,16 +35,15 @@ function* testResizingInIframe(inspector, view, iframe2) {
is(sizeElt.textContent, "200\u00D7200");
}
function* testReflowsAfterIframeDeletion(inspector, view, iframe2) {
function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
info("Test reflows are still sent to the layout-view after deleting an " +
"iframe");
info("Deleting the iframe2");
iframe2.remove();
yield removeIframe2(testActor);
yield inspector.once("inspector-updated");
info("Selecting the test node in iframe1");
let node = getNode("iframe").contentDocument.querySelector("p");
yield selectNodeInIframe1("p", inspector);
info("Checking that the layout-view shows the right value");
@ -55,7 +52,7 @@ function* testReflowsAfterIframeDeletion(inspector, view, iframe2) {
info("Listening for layout-view changes and modifying its size");
let onUpdated = waitForUpdate(inspector);
node.style.width = "200px";
yield setStyleInIframe1(testActor, "p", "width", "200px");
yield onUpdated;
ok(true, "Layout-view got updated");
@ -75,3 +72,30 @@ function* selectNodeInIframe2(selector, inspector) {
let node = yield getNodeFrontInFrame(selector, iframe2, inspector);
yield selectNode(node, inspector);
}
function* setStyleInIframe1(testActor, selector, propertyName, value) {
yield testActor.eval(`
content.document.querySelector("iframe")
.contentDocument.querySelector("${selector}")
.style.${propertyName} = "${value}";
`);
}
function* setStyleInIframe2(testActor, selector, propertyName, value) {
yield testActor.eval(`
content.document.querySelector("iframe")
.contentDocument
.querySelector("iframe")
.contentDocument.querySelector("${selector}")
.style.${propertyName} = "${value}";
`);
}
function* removeIframe2(testActor) {
yield testActor.eval(`
content.document.querySelector("iframe")
.contentDocument
.querySelector("iframe")
.remove();
`);
}

19
devtools/client/inspector/layout/test/head.js
View File

@ -1,6 +1,9 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint no-unused-vars: [2, {"vars": "local"}] */
/* import-globals-from ../../../framework/test/shared-head.js */
/* import-globals-from ../../test/head.js */
"use strict";
// Import the inspector's head.js first (which itself imports shared-head.js).
@ -56,7 +59,7 @@ function openLayoutView() {
// The actual highligher show/hide methods are mocked in layoutview tests.
// The highlighter is tested in devtools/inspector/test.
function mockHighlighter({highlighter}) {
highlighter.showBoxModel = function(nodeFront) {
highlighter.showBoxModel = function() {
return promise.resolve();
};
highlighter.hideBoxModel = function() {
@ -81,3 +84,17 @@ function openLayoutView() {
function waitForUpdate(inspector) {
return inspector.once("layoutview-updated");
}
function getStyle(testActor, selector, propertyName) {
return testActor.eval(`
content.document.querySelector("${selector}")
.style.getPropertyValue("${propertyName}");
`);
}
function setStyle(testActor, selector, propertyName, value) {
return testActor.eval(`
content.document.querySelector("${selector}")
.style.${propertyName} = "${value}";
`);
}