mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 19:04:45 +00:00
Bug 1137285 - Convert inspector test to be remote friendly r=pbrosset
This commit is contained in:
parent
53f6f60a01
commit
64df94ae96
@ -2,7 +2,6 @@
|
||||
tags = devtools
|
||||
subsuite = devtools
|
||||
support-files =
|
||||
doc_frame_script.js
|
||||
doc_inspector_breadcrumbs.html
|
||||
doc_inspector_delete-selected-node-01.html
|
||||
doc_inspector_delete-selected-node-02.html
|
||||
|
@ -8,7 +8,7 @@
|
||||
// those nodes
|
||||
add_task(function*() {
|
||||
info("Loading the test document and opening the inspector");
|
||||
let {toolbox, inspector} = yield openInspectorForURL("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
|
||||
info("Selecting the test node");
|
||||
yield selectNode("span", inspector);
|
||||
let bcButtons = inspector.breadcrumbs["container"];
|
||||
@ -18,20 +18,18 @@ add_task(function*() {
|
||||
EventUtils.synthesizeMouseAtCenter(button, {type: "mousemove"}, button.ownerDocument.defaultView);
|
||||
yield onNodeHighlighted;
|
||||
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
let isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is shown on a markup container hover");
|
||||
|
||||
let highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode, getNode("body"), "The highlighter highlights the right node");
|
||||
ok((yield testActor.assertHighlightedNode("body")), "The highlighter highlights the right node");
|
||||
|
||||
onNodeHighlighted = toolbox.once("node-highlight");
|
||||
button = bcButtons.childNodes[2];
|
||||
EventUtils.synthesizeMouseAtCenter(button, {type: "mousemove"}, button.ownerDocument.defaultView);
|
||||
yield onNodeHighlighted;
|
||||
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is shown on a markup container hover");
|
||||
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode, getNode("span"), "The highlighter highlights the right node");
|
||||
ok((yield testActor.assertHighlightedNode("span")), "The highlighter highlights the right node");
|
||||
});
|
||||
|
@ -1,30 +0,0 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const TEST_URI = TEST_URL_ROOT + "doc_inspector_highlight_after_transition.html";
|
||||
|
||||
// Test that the nodeinfobar is never displayed above the top or below the
|
||||
// bottom of the content area.
|
||||
add_task(function*() {
|
||||
info("Loading the test document and opening the inspector");
|
||||
|
||||
let {inspector} = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
yield checkDivHeight(inspector);
|
||||
});
|
||||
|
||||
function* checkDivHeight(inspector) {
|
||||
let div = getNode("div");
|
||||
|
||||
div.setAttribute("visible", "true");
|
||||
|
||||
yield once(div, "transitionend");
|
||||
yield selectAndHighlightNode(div, inspector);
|
||||
|
||||
let height = div.getBoundingClientRect().height;
|
||||
|
||||
is (height, 201, "div is the correct height");
|
||||
}
|
@ -8,9 +8,9 @@
|
||||
// those nodes
|
||||
add_task(function*() {
|
||||
info("Loading the test document and opening the inspector");
|
||||
let {toolbox, inspector} = yield openInspectorForURL("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
|
||||
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
let isVisible = yield testActor.isHighlighting(toolbox);
|
||||
ok(!isVisible, "The highlighter is hidden by default");
|
||||
|
||||
info("Selecting the test node");
|
||||
@ -22,9 +22,8 @@ add_task(function*() {
|
||||
inspector.markup.doc.defaultView);
|
||||
yield onHighlighterReady;
|
||||
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is shown on a markup container hover");
|
||||
|
||||
let node = yield getHighlitNode(toolbox);
|
||||
is(node, getNode("h1"), "The highlighter highlights the right node");
|
||||
ok((yield testActor.assertHighlightedNode("h1")), "The highlighter highlights the right node");
|
||||
});
|
||||
|
@ -11,32 +11,28 @@
|
||||
const TEST_URI = TEST_URL_ROOT + "doc_inspector_highlighter.html";
|
||||
|
||||
add_task(function*() {
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_URI);
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
info("Selecting the simple, non-transformed DIV");
|
||||
yield selectAndHighlightNode("#simple-div", inspector);
|
||||
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
let isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is shown");
|
||||
let highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode, getNode("#simple-div"),
|
||||
ok((yield testActor.assertHighlightedNode("#simple-div")),
|
||||
"The highlighter's outline corresponds to the simple div");
|
||||
yield isNodeCorrectlyHighlighted("#simple-div", toolbox,
|
||||
"non-zoomed");
|
||||
yield testActor.isNodeCorrectlyHighlighted("#simple-div", is, "non-zoomed");
|
||||
|
||||
info("Selecting the rotated DIV");
|
||||
yield selectAndHighlightNode("#rotated-div", inspector);
|
||||
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is shown");
|
||||
yield isNodeCorrectlyHighlighted("#rotated-div", toolbox,
|
||||
"rotated");
|
||||
yield testActor.isNodeCorrectlyHighlighted("#rotated-div", is, "rotated");
|
||||
|
||||
info("Selecting the zero width height DIV");
|
||||
yield selectAndHighlightNode("#widthHeightZero-div", inspector);
|
||||
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is shown");
|
||||
yield isNodeCorrectlyHighlighted("#widthHeightZero-div", toolbox,
|
||||
"zero width height");
|
||||
yield testActor.isNodeCorrectlyHighlighted("#widthHeightZero-div", is, "zero width height");
|
||||
});
|
||||
|
@ -30,9 +30,7 @@ const DOCUMENT_SRC = "<style>" +
|
||||
const TEST_URI = "data:text/html;charset=utf-8," + DOCUMENT_SRC;
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
let iframeNode = getNode("iframe");
|
||||
let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
info("Waiting for box mode to show.");
|
||||
let body = yield getNodeFront("body", inspector);
|
||||
@ -42,31 +40,30 @@ add_task(function* () {
|
||||
yield toolbox.highlighterUtils.startPicker();
|
||||
|
||||
info("Moving mouse over iframe padding.");
|
||||
yield moveMouseOver(iframeNode, 1, 1);
|
||||
yield moveMouseOver("iframe", 1, 1);
|
||||
|
||||
info("Performing checks");
|
||||
yield isNodeCorrectlyHighlighted("iframe", toolbox);
|
||||
yield testActor.isNodeCorrectlyHighlighted("iframe", is);
|
||||
|
||||
info("Scrolling the document");
|
||||
iframeNode.style.marginBottom = content.innerHeight + "px";
|
||||
content.scrollBy(0, 40);
|
||||
yield testActor.setProperty("iframe", "style", "margin-bottom: 2000px");
|
||||
yield testActor.eval("window.scrollBy(0, 40);");
|
||||
|
||||
let iframeBodyNode = iframeNode.contentDocument.body;
|
||||
// target the body within the iframe
|
||||
let iframeBodySelector = ["iframe", "body"];
|
||||
|
||||
info("Moving mouse over iframe body");
|
||||
yield moveMouseOver(iframeNode, 40, 40);
|
||||
yield moveMouseOver("iframe", 40, 40);
|
||||
|
||||
let highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode, iframeBodyNode, "highlighter shows the right node");
|
||||
yield isNodeCorrectlyHighlighted("iframe || body", toolbox);
|
||||
ok((yield testActor.assertHighlightedNode(iframeBodySelector)), "highlighter shows the right node");
|
||||
yield testActor.isNodeCorrectlyHighlighted(iframeBodySelector, is);
|
||||
|
||||
info("Waiting for the element picker to deactivate.");
|
||||
yield inspector.toolbox.highlighterUtils.stopPicker();
|
||||
|
||||
function moveMouseOver(node, x, y) {
|
||||
info("Waiting for element " + node + " to be highlighted");
|
||||
executeInContent("Test:SynthesizeMouse", {x, y, options: {type: "mousemove"}},
|
||||
{node}, false);
|
||||
function moveMouseOver(selector, x, y) {
|
||||
info("Waiting for element " + selector + " to be highlighted");
|
||||
testActor.synthesizeMouse({selector, x, y, options: {type: "mousemove"}});
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}
|
||||
});
|
||||
|
@ -27,14 +27,14 @@ const ELEMENTS = ["box-model-root",
|
||||
"box-model-nodeinfobar-dimensions"];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("Show the box-model highlighter");
|
||||
let divFront = yield getNodeFront("div", inspector);
|
||||
yield toolbox.highlighter.showBoxModel(divFront);
|
||||
|
||||
for (let id of ELEMENTS) {
|
||||
let foundId = yield getHighlighterNodeAttribute(toolbox.highlighter, id, "id");
|
||||
let foundId = yield testActor.getHighlighterNodeAttribute(id, "id");
|
||||
is(foundId, id, "Element " + id + " found");
|
||||
}
|
||||
|
||||
|
@ -19,37 +19,37 @@ const TEST_PAGE = TEST_URL_ROOT +
|
||||
"doc_inspector_highlighter-comments.html";
|
||||
|
||||
add_task(function* () {
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_PAGE);
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_PAGE);
|
||||
let markupView = inspector.markup;
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Hovering over #id1 and waiting for highlighter to appear.");
|
||||
yield hoverElement("#id1");
|
||||
yield assertHighlighterShownOn("#id1");
|
||||
yield assertHighlighterShownOn(testActor, "#id1");
|
||||
|
||||
info("Hovering over comment node and ensuring highlighter doesn't appear.");
|
||||
yield hoverComment();
|
||||
yield assertHighlighterHidden();
|
||||
yield assertHighlighterHidden(testActor);
|
||||
|
||||
info("Hovering over #id1 again and waiting for highlighter to appear.");
|
||||
yield hoverElement("#id1");
|
||||
yield assertHighlighterShownOn("#id1");
|
||||
yield assertHighlighterShownOn(testActor, "#id1");
|
||||
|
||||
info("Hovering over #id2 and waiting for highlighter to appear.");
|
||||
yield hoverElement("#id2");
|
||||
yield assertHighlighterShownOn("#id2");
|
||||
yield assertHighlighterShownOn(testActor, "#id2");
|
||||
|
||||
info("Hovering over <script> and ensuring highlighter doesn't appear.");
|
||||
yield hoverElement("script");
|
||||
yield assertHighlighterHidden();
|
||||
yield assertHighlighterHidden(testActor);
|
||||
|
||||
info("Hovering over #id3 and waiting for highlighter to appear.");
|
||||
yield hoverElement("#id3");
|
||||
yield assertHighlighterShownOn("#id3");
|
||||
yield assertHighlighterShownOn(testActor, "#id3");
|
||||
|
||||
info("Hovering over hidden #id4 and ensuring highlighter doesn't appear.");
|
||||
yield hoverElement("#id4");
|
||||
yield assertHighlighterHidden();
|
||||
yield assertHighlighterHidden(testActor);
|
||||
|
||||
function hoverContainer(container) {
|
||||
let promise = inspector.toolbox.once("node-highlight");
|
||||
@ -74,14 +74,12 @@ add_task(function* () {
|
||||
}
|
||||
}
|
||||
|
||||
function* assertHighlighterShownOn(selector) {
|
||||
let node = getNode(selector);
|
||||
let highlightNode = yield getHighlitNode(toolbox);
|
||||
is(node, highlightNode, "Highlighter is shown on the right node: " + selector);
|
||||
function* assertHighlighterShownOn(testActor, selector) {
|
||||
ok((yield testActor.assertHighlightedNode(selector)), "Highlighter is shown on the right node: " + selector);
|
||||
}
|
||||
|
||||
function* assertHighlighterHidden() {
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
function* assertHighlighterHidden(testActor) {
|
||||
let isVisible = yield testActor.isHighlighting();
|
||||
ok(!isVisible, "Highlighter is hidden");
|
||||
}
|
||||
});
|
||||
|
@ -13,88 +13,80 @@ const TEST_URL = "data:text/html;charset=utf-8," +
|
||||
"<span id='inline' style='transform:rotate(90deg);'>this is an inline transformed element</span>";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("CssTransformHighlighter");
|
||||
|
||||
yield isHiddenByDefault(highlighter, inspector);
|
||||
yield has2PolygonsAnd4Lines(highlighter, inspector);
|
||||
yield isNotShownForUntransformed(highlighter, inspector);
|
||||
yield isNotShownForInline(highlighter, inspector);
|
||||
yield isVisibleWhenShown(highlighter, inspector);
|
||||
yield linesLinkThePolygons(highlighter, inspector);
|
||||
yield isHiddenByDefault(testActor, highlighter);
|
||||
yield has2PolygonsAnd4Lines(testActor, highlighter);
|
||||
yield isNotShownForUntransformed(testActor, inspector, highlighter);
|
||||
yield isNotShownForInline(testActor, inspector, highlighter);
|
||||
yield isVisibleWhenShown(testActor, inspector, highlighter);
|
||||
yield linesLinkThePolygons(testActor, inspector, highlighter);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* isHiddenByDefault(highlighterFront, inspector) {
|
||||
function* isHiddenByDefault(testActor, highlighterFront) {
|
||||
info("Checking that the highlighter is hidden by default");
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-elements", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
|
||||
ok(hidden, "The highlighter is hidden by default");
|
||||
}
|
||||
|
||||
function* has2PolygonsAnd4Lines(highlighterFront, inspector) {
|
||||
function* has2PolygonsAnd4Lines(testActor, highlighterFront) {
|
||||
info("Checking that the highlighter is made up of 4 lines and 2 polygons");
|
||||
|
||||
let value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-untransformed", "class");
|
||||
let value = yield testActor.getHighlighterNodeAttribute("css-transform-untransformed", "class", highlighterFront);
|
||||
is(value, "css-transform-untransformed", "The untransformed polygon exists");
|
||||
|
||||
value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-transformed", "class");
|
||||
value = yield testActor.getHighlighterNodeAttribute("css-transform-transformed", "class", highlighterFront);
|
||||
is(value, "css-transform-transformed", "The transformed polygon exists");
|
||||
|
||||
for (let nb of ["1", "2", "3", "4"]) {
|
||||
value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-line" + nb, "class");
|
||||
value = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "class", highlighterFront);
|
||||
is(value, "css-transform-line", "The line " + nb + " exists");
|
||||
}
|
||||
}
|
||||
|
||||
function* isNotShownForUntransformed(highlighterFront, inspector) {
|
||||
function* isNotShownForUntransformed(testActor, inspector, highlighterFront) {
|
||||
info("Asking to show the highlighter on the untransformed test node");
|
||||
|
||||
let node = yield getNodeFront("#untransformed", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-elements", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
|
||||
ok(hidden, "The highlighter is still hidden");
|
||||
}
|
||||
|
||||
function* isNotShownForInline(highlighterFront, inspector) {
|
||||
function* isNotShownForInline(testActor, inspector, highlighterFront) {
|
||||
info("Asking to show the highlighter on the inline test node");
|
||||
|
||||
let node = yield getNodeFront("#inline", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-elements", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
|
||||
ok(hidden, "The highlighter is still hidden");
|
||||
}
|
||||
|
||||
function* isVisibleWhenShown(highlighterFront, inspector) {
|
||||
function* isVisibleWhenShown(testActor, inspector, highlighterFront) {
|
||||
info("Asking to show the highlighter on the test node");
|
||||
|
||||
let node = yield getNodeFront("#transformed", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-elements", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
|
||||
ok(!hidden, "The highlighter is visible");
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighterFront.hide();
|
||||
|
||||
hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-elements", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("css-transform-elements", "hidden", highlighterFront);
|
||||
ok(hidden, "The highlighter is hidden");
|
||||
}
|
||||
|
||||
function* linesLinkThePolygons(highlighterFront, inspector) {
|
||||
function* linesLinkThePolygons(testActor, inspector, highlighterFront) {
|
||||
info("Showing the highlighter on the transformed node");
|
||||
|
||||
let node = yield getNodeFront("#transformed", inspector);
|
||||
@ -104,23 +96,17 @@ function* linesLinkThePolygons(highlighterFront, inspector) {
|
||||
|
||||
let lines = [];
|
||||
for (let nb of ["1", "2", "3", "4"]) {
|
||||
let x1 = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-line" + nb, "x1");
|
||||
let y1 = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-line" + nb, "y1");
|
||||
let x2 = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-line" + nb, "x2");
|
||||
let y2 = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-line" + nb, "y2");
|
||||
let x1 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "x1", highlighterFront);
|
||||
let y1 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "y1", highlighterFront);
|
||||
let x2 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "x2", highlighterFront);
|
||||
let y2 = yield testActor.getHighlighterNodeAttribute("css-transform-line" + nb, "y2", highlighterFront);
|
||||
lines.push({x1, y1, x2, y2});
|
||||
}
|
||||
|
||||
let points1 = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-untransformed", "points");
|
||||
let points1 = yield testActor.getHighlighterNodeAttribute("css-transform-untransformed", "points", highlighterFront);
|
||||
points1 = points1.split(" ");
|
||||
|
||||
let points2 = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
"css-transform-transformed", "points");
|
||||
let points2 = yield testActor.getHighlighterNodeAttribute("css-transform-transformed", "points", highlighterFront);
|
||||
points2 = points2.split(" ");
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
|
@ -21,7 +21,7 @@ transform highlighter applies those values correctly to the SVG elements
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_csstransform.html";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("CssTransformHighlighter");
|
||||
@ -31,13 +31,10 @@ add_task(function*() {
|
||||
info("Displaying the transform highlighter on test node");
|
||||
yield highlighter.show(nodeFront);
|
||||
|
||||
let {data} = yield executeInContent("Test:GetAllAdjustedQuads", {
|
||||
selector: "#test-node"
|
||||
});
|
||||
let data = yield testActor.getAllAdjustedQuads("#test-node");
|
||||
let [expected] = data.border;
|
||||
|
||||
let points = yield getHighlighterNodeAttribute(highlighter,
|
||||
"css-transform-transformed", "points");
|
||||
let points = yield testActor.getHighlighterNodeAttribute("css-transform-transformed", "points", highlighter);
|
||||
let polygonPoints = points.split(" ").map(p => {
|
||||
return {
|
||||
x: +p.substring(0, p.indexOf(",")),
|
||||
|
@ -15,87 +15,78 @@ const SIDES = ["left", "right", "top", "bottom"];
|
||||
const SIZES = ["width", "height"];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield hasArrowsAndLabels(highlighter, inspector);
|
||||
yield isHiddenForNonPositionedNonSizedElement(highlighter, inspector);
|
||||
yield sideArrowsAreDisplayedForPositionedNode(highlighter, inspector);
|
||||
yield sizeLabelIsDisplayedForSizedNode(highlighter, inspector);
|
||||
yield hasArrowsAndLabels(highlighter, inspector, testActor);
|
||||
yield isHiddenForNonPositionedNonSizedElement(highlighter, inspector, testActor);
|
||||
yield sideArrowsAreDisplayedForPositionedNode(highlighter, inspector, testActor);
|
||||
yield sizeLabelIsDisplayedForSizedNode(highlighter, inspector, testActor);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* hasArrowsAndLabels(highlighterFront, inspector) {
|
||||
function* hasArrowsAndLabels(highlighterFront, inspector, testActor) {
|
||||
info("Checking that the highlighter has the expected arrows and labels");
|
||||
|
||||
for (let name of [...SIDES]) {
|
||||
let value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "class");
|
||||
let value = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "class", highlighterFront);
|
||||
is(value, ID + "arrow " + name, "The " + name + " arrow exists");
|
||||
|
||||
value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-text-" + name, "class");
|
||||
value = yield testActor.getHighlighterNodeAttribute(ID + "label-text-" + name, "class", highlighterFront);
|
||||
is(value, ID + "label-text", "The " + name + " label exists");
|
||||
}
|
||||
|
||||
let value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-text-size", "class");
|
||||
let value = yield testActor.getHighlighterNodeAttribute(ID + "label-text-size", "class", highlighterFront);
|
||||
is(value, ID + "label-text", "The size label exists");
|
||||
}
|
||||
|
||||
function* isHiddenForNonPositionedNonSizedElement(highlighterFront, inspector) {
|
||||
function* isHiddenForNonPositionedNonSizedElement(highlighterFront, inspector, testActor) {
|
||||
info("Asking to show the highlighter on an inline, non positioned element");
|
||||
|
||||
let node = yield getNodeFront("#inline", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
for (let name of [...SIDES]) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
|
||||
is(hidden, "true", "The " + name + " arrow is hidden");
|
||||
}
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
|
||||
is(hidden, "true", "The size label is hidden");
|
||||
}
|
||||
|
||||
function* sideArrowsAreDisplayedForPositionedNode(highlighterFront, inspector) {
|
||||
function* sideArrowsAreDisplayedForPositionedNode(highlighterFront, inspector, testActor) {
|
||||
info("Asking to show the highlighter on the positioned node");
|
||||
|
||||
let node = yield getNodeFront("#positioned", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
for (let name of SIDES) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
|
||||
ok(!hidden, "The " + name + " arrow is visible for the positioned node");
|
||||
}
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
|
||||
is(hidden, "true", "The size label is hidden");
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighterFront.hide();
|
||||
}
|
||||
|
||||
function* sizeLabelIsDisplayedForSizedNode(highlighterFront, inspector) {
|
||||
function* sizeLabelIsDisplayedForSizedNode(highlighterFront, inspector, testActor) {
|
||||
info("Asking to show the highlighter on the sized node");
|
||||
|
||||
let node = yield getNodeFront("#sized", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
|
||||
ok(!hidden, "The size label is visible");
|
||||
|
||||
for (let name of SIDES) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
|
||||
is(hidden, "true", "The " + name + " arrow is hidden for the sized node");
|
||||
}
|
||||
|
||||
|
@ -79,18 +79,18 @@ const SIZED_ELEMENT_TESTS = [{
|
||||
}];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield positionLabelsAreCorrect(highlighter, inspector);
|
||||
yield sizeLabelIsCorrect(highlighter, inspector);
|
||||
yield positionLabelsAreCorrect(highlighter, inspector, testActor);
|
||||
yield sizeLabelIsCorrect(highlighter, inspector, testActor);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* positionLabelsAreCorrect(highlighterFront, inspector) {
|
||||
function* positionLabelsAreCorrect(highlighterFront, inspector, testActor) {
|
||||
info("Highlight nodes and check position labels");
|
||||
|
||||
for (let {selector, expectedLabels} of POSITIONED_ELEMENT_TESTS) {
|
||||
@ -101,11 +101,11 @@ function* positionLabelsAreCorrect(highlighterFront, inspector) {
|
||||
for (let {side, visible, label} of expectedLabels) {
|
||||
let id = ID + "label-" + side;
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront, id, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(id, "hidden", highlighterFront);
|
||||
if (visible) {
|
||||
ok(!hidden, "The " + side + " label is visible");
|
||||
|
||||
let value = yield getHighlighterNodeTextContent(highlighterFront, id);
|
||||
let value = yield testActor.getHighlighterNodeTextContent(id, highlighterFront);
|
||||
is(value, label, "The " + side + " label textcontent is correct");
|
||||
} else {
|
||||
is(hidden, "true", "The " + side + " label is hidden");
|
||||
@ -117,7 +117,7 @@ function* positionLabelsAreCorrect(highlighterFront, inspector) {
|
||||
}
|
||||
}
|
||||
|
||||
function* sizeLabelIsCorrect(highlighterFront, inspector) {
|
||||
function* sizeLabelIsCorrect(highlighterFront, inspector, testActor) {
|
||||
info("Highlight nodes and check size labels");
|
||||
|
||||
let id = ID + "label-size";
|
||||
@ -126,13 +126,13 @@ function* sizeLabelIsCorrect(highlighterFront, inspector) {
|
||||
let node = yield getNodeFront(selector, inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront, id, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(id, "hidden", highlighterFront);
|
||||
if (!visible) {
|
||||
is(hidden, "true", "The size label is hidden");
|
||||
} else {
|
||||
ok(!hidden, "The size label is visible");
|
||||
|
||||
let label = yield getHighlighterNodeTextContent(highlighterFront, id);
|
||||
let label = yield testActor.getHighlighterNodeTextContent(id, highlighterFront);
|
||||
is(label, expected, "The size label textcontent is correct");
|
||||
}
|
||||
|
||||
|
@ -12,24 +12,24 @@ const ID = "geometry-editor-";
|
||||
const PROPS = ["left", "right", "top", "bottom"];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield checkArrowsLabels("#node1", ["size"],
|
||||
highlighter, inspector);
|
||||
highlighter, inspector, testActor);
|
||||
|
||||
yield checkArrowsLabels("#node2", ["top", "left", "bottom", "right"],
|
||||
highlighter, inspector);
|
||||
highlighter, inspector, testActor);
|
||||
|
||||
yield checkArrowsLabels("#node3", ["top", "left", "size"],
|
||||
highlighter, inspector);
|
||||
highlighter, inspector, testActor);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* checkArrowsLabels(selector, expectedProperties, highlighterFront, inspector) {
|
||||
function* checkArrowsLabels(selector, expectedProperties, highlighterFront, inspector, testActor) {
|
||||
info("Getting node " + selector + " from the page");
|
||||
let node = yield getNodeFront(selector, inspector);
|
||||
|
||||
@ -39,11 +39,9 @@ function* checkArrowsLabels(selector, expectedProperties, highlighterFront, insp
|
||||
for (let name of expectedProperties) {
|
||||
let hidden;
|
||||
if (name === "size") {
|
||||
hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
|
||||
} else {
|
||||
hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
|
||||
}
|
||||
ok(!hidden, "The " + name + " arrow/label is visible for node " + selector);
|
||||
}
|
||||
@ -53,8 +51,7 @@ function* checkArrowsLabels(selector, expectedProperties, highlighterFront, insp
|
||||
if (expectedProperties.indexOf(name) !== -1) {
|
||||
continue;
|
||||
}
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
|
||||
is(hidden, "true", "The " + name + " arrow is hidden for node " + selector);
|
||||
}
|
||||
|
||||
|
@ -10,24 +10,24 @@ const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
|
||||
const ID = "geometry-editor-";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield checkArrows(highlighter, inspector, ".absolute-all-4", {
|
||||
yield checkArrows(highlighter, inspector, testActor, ".absolute-all-4", {
|
||||
"top": {x1: 506, y1: 51, x2: 506, y2: 61},
|
||||
"bottom": {x1: 506, y1: 451, x2: 506, y2: 251},
|
||||
"left": {x1: 401, y1: 156, x2: 411, y2: 156},
|
||||
"right": {x1: 901, y1: 156, x2: 601, y2: 156}
|
||||
});
|
||||
|
||||
yield checkArrows(highlighter, inspector, ".relative", {
|
||||
yield checkArrows(highlighter, inspector, testActor, ".relative", {
|
||||
"top": {x1: 901, y1: 51, x2: 901, y2: 91},
|
||||
"left": {x1: 401, y1: 97, x2: 651, y2: 97}
|
||||
});
|
||||
|
||||
yield checkArrows(highlighter, inspector, ".fixed", {
|
||||
yield checkArrows(highlighter, inspector, testActor, ".fixed", {
|
||||
"top": {x1: 25, y1: 0, x2: 25, y2: 400},
|
||||
"left": {x1: 0, y1: 425, x2: 0, y2: 425}
|
||||
});
|
||||
@ -37,19 +37,19 @@ add_task(function*() {
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* checkArrows(highlighter, inspector, selector, arrows) {
|
||||
function* checkArrows(highlighter, inspector, testActor, selector, arrows) {
|
||||
info("Highlighting the test node " + selector);
|
||||
let node = yield getNodeFront(selector, inspector);
|
||||
yield highlighter.show(node);
|
||||
|
||||
for (let side in arrows) {
|
||||
yield checkArrow(highlighter, side, arrows[side]);
|
||||
yield checkArrow(highlighter, testActor, side, arrows[side]);
|
||||
}
|
||||
}
|
||||
|
||||
function* checkArrow(highlighter, name, expectedCoordinates) {
|
||||
function* checkArrow(highlighter, testActor, name, expectedCoordinates) {
|
||||
for (let coordinate in expectedCoordinates) {
|
||||
let value = yield getHighlighterNodeAttribute(highlighter, ID + "arrow-" + name, coordinate);
|
||||
let value = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, coordinate, highlighter);
|
||||
is(Math.floor(value), expectedCoordinates[coordinate],
|
||||
coordinate + " coordinate for arrow " + name + " is correct");
|
||||
}
|
||||
|
@ -79,13 +79,13 @@ const TEST_DATA = [{
|
||||
}];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
for (let data of TEST_DATA) {
|
||||
yield testNode(inspector, highlighter, data);
|
||||
yield testNode(inspector, highlighter, testActor, data);
|
||||
}
|
||||
|
||||
info("Hiding the highlighter");
|
||||
@ -93,37 +93,34 @@ add_task(function*() {
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* testNode(inspector, highlighter, data) {
|
||||
function* testNode(inspector, highlighter, testActor, data) {
|
||||
info("Highlighting the test node " + data.selector);
|
||||
let node = yield getNodeFront(data.selector, inspector);
|
||||
yield highlighter.show(node);
|
||||
|
||||
is((yield isOffsetParentVisible(highlighter)), data.isOffsetParentVisible,
|
||||
is((yield isOffsetParentVisible(highlighter, testActor)), data.isOffsetParentVisible,
|
||||
"The offset-parent highlighter visibility is correct for node " + data.selector);
|
||||
is((yield isCurrentNodeVisible(highlighter)), data.isCurrentNodeVisible,
|
||||
is((yield isCurrentNodeVisible(highlighter, testActor)), data.isCurrentNodeVisible,
|
||||
"The current-node highlighter visibility is correct for node " + data.selector);
|
||||
is((yield hasVisibleArrows(highlighter)), data.hasVisibleArrows,
|
||||
is((yield hasVisibleArrows(highlighter, testActor)), data.hasVisibleArrows,
|
||||
"The arrows visibility is correct for node " + data.selector);
|
||||
is((yield isSizeVisible(highlighter)), data.isSizeVisible,
|
||||
is((yield isSizeVisible(highlighter, testActor)), data.isSizeVisible,
|
||||
"The size label visibility is correct for node " + data.selector);
|
||||
}
|
||||
|
||||
function* isOffsetParentVisible(highlighter) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "offset-parent", "hidden");
|
||||
function* isOffsetParentVisible(highlighter, testActor) {
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "offset-parent", "hidden", highlighter);
|
||||
return !hidden;
|
||||
}
|
||||
|
||||
function* isCurrentNodeVisible(highlighter) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "current-node", "hidden");
|
||||
function* isCurrentNodeVisible(highlighter, testActor) {
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "current-node", "hidden", highlighter);
|
||||
return !hidden;
|
||||
}
|
||||
|
||||
function* hasVisibleArrows(highlighter) {
|
||||
function* hasVisibleArrows(highlighter, testActor) {
|
||||
for (let side of ["top", "left", "bottom", "right"]) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "arrow-" + side, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + side, "hidden", highlighter);
|
||||
if (!hidden) {
|
||||
return true;
|
||||
}
|
||||
@ -131,8 +128,7 @@ function* hasVisibleArrows(highlighter) {
|
||||
return false;
|
||||
}
|
||||
|
||||
function* isSizeVisible(highlighter) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "label-size", "hidden");
|
||||
function* isSizeVisible(highlighter, testActor) {
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighter);
|
||||
return !hidden;
|
||||
}
|
||||
|
@ -11,23 +11,22 @@
|
||||
const TEST_URL = "data:text/html;charset=utf-8,<p>It's going to be legen....</p>";
|
||||
|
||||
add_task(function*() {
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_URL);
|
||||
let p = getNode("p");
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("hovering over the <p> line in the markup-view");
|
||||
yield hoverContainer("p", inspector);
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
let isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "the highlighter is still visible");
|
||||
|
||||
info("selecting the <p> line by clicking in the markup-view");
|
||||
yield clickContainer("p", inspector);
|
||||
|
||||
p.textContent = "wait for it ....";
|
||||
yield testActor.setProperty("p", "textContent", "wait for it ....");
|
||||
info("wait and see if the highlighter stays visible even after the node was selected");
|
||||
yield waitForTheBrieflyShowBoxModelTimeout();
|
||||
|
||||
p.textContent = "dary!!!!";
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
yield testActor.setProperty("p", "textContent", "dary!!!!");
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "the highlighter is still visible");
|
||||
});
|
||||
|
||||
@ -35,6 +34,6 @@ function waitForTheBrieflyShowBoxModelTimeout() {
|
||||
let deferred = promise.defer();
|
||||
// Note that the current timeout is 1 sec and is neither configurable nor
|
||||
// exported anywhere we can access, so hard-coding the timeout
|
||||
content.setTimeout(deferred.resolve, 1500);
|
||||
setTimeout(deferred.resolve, 1500);
|
||||
return deferred.promise;
|
||||
}
|
||||
|
@ -11,26 +11,26 @@
|
||||
const TEST_URL = "data:text/html;charset=utf-8,<p>Select me!</p>";
|
||||
|
||||
add_task(function*() {
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_URL);
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("hover over the <p> line in the markup-view so that it's the currently hovered node");
|
||||
yield hoverContainer("p", inspector);
|
||||
|
||||
info("select the <p> markup-container line by clicking");
|
||||
yield clickContainer("p", inspector);
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
let isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "the highlighter is shown");
|
||||
|
||||
info("listen to the highlighter's hidden event");
|
||||
let onHidden = waitForHighlighterEvent("hidden", toolbox.highlighter);
|
||||
let onHidden = testActor.waitForHighlighterEvent("hidden", toolbox.highlighter);
|
||||
info("mouse-leave the markup-view");
|
||||
yield mouseLeaveMarkupView(inspector);
|
||||
yield onHidden;
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(!isVisible, "the highlighter is hidden after mouseleave");
|
||||
|
||||
info("hover over the <p> line again, which is still selected");
|
||||
yield hoverContainer("p", inspector);
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "the highlighter is visible again");
|
||||
});
|
||||
|
@ -40,16 +40,16 @@ add_task(function*() {
|
||||
|
||||
info("Navigate to <p#two> with the keyboard");
|
||||
let onUpdated = inspector.once("inspector-updated");
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
EventUtils.synthesizeKey("VK_DOWN", {}, inspector.panelWin);
|
||||
yield onUpdated;
|
||||
onUpdated = inspector.once("inspector-updated");
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
EventUtils.synthesizeKey("VK_DOWN", {}, inspector.panelWin);
|
||||
yield onUpdated;
|
||||
yield isHighlighting("#two", "<p#two> is highlighted");
|
||||
|
||||
info("Navigate back to <p#one> with the keyboard");
|
||||
onUpdated = inspector.once("inspector-updated");
|
||||
EventUtils.synthesizeKey("VK_UP", {});
|
||||
EventUtils.synthesizeKey("VK_UP", {}, inspector.panelWin);
|
||||
yield onUpdated;
|
||||
yield isHighlighting("#one", "<p#one> is highlighted again");
|
||||
});
|
||||
|
@ -20,24 +20,22 @@ const TEST_URI = "data:text/html;charset=utf-8," +
|
||||
"<iframe src=\"" + OUTER_FRAME_SRC + "\" />";
|
||||
|
||||
add_task(function*() {
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_URI);
|
||||
let outerFrame = getNode("iframe");
|
||||
let outerFrameDiv = getNode("div", { document: outerFrame.contentDocument});
|
||||
let innerFrame = getNode("iframe", { document: outerFrame.contentDocument});
|
||||
let innerFrameDiv = getNode("div", { document: innerFrame.contentDocument});
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
|
||||
let outerFrame = "iframe";
|
||||
let outerFrameDiv = ["iframe", "div"];
|
||||
let innerFrame = ["iframe", "iframe"];
|
||||
let innerFrameDiv = ["iframe", "iframe", "div"];
|
||||
|
||||
info("Waiting for element picker to activate.");
|
||||
yield inspector.toolbox.highlighterUtils.startPicker();
|
||||
|
||||
info("Moving mouse over outerFrameDiv");
|
||||
yield moveMouseOver(outerFrameDiv);
|
||||
let highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode, outerFrameDiv, "outerFrameDiv is highlighted.");
|
||||
yield moveMouseOver(testActor, outerFrameDiv);
|
||||
ok((yield testActor.assertHighlightedNode(outerFrameDiv)), "outerFrameDiv is highlighted.");
|
||||
|
||||
info("Moving mouse over innerFrameDiv");
|
||||
yield moveMouseOver(innerFrameDiv);
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode, innerFrameDiv, "innerFrameDiv is highlighted.");
|
||||
yield moveMouseOver(testActor,innerFrameDiv);
|
||||
ok((yield testActor.assertHighlightedNode(innerFrameDiv)), "innerFrameDiv is highlighted.");
|
||||
|
||||
info("Selecting root node");
|
||||
yield selectNode(inspector.walker.rootNode, inspector);
|
||||
@ -52,12 +50,12 @@ add_task(function*() {
|
||||
info("Waiting for element picker to deactivate.");
|
||||
yield inspector.toolbox.highlighterUtils.stopPicker();
|
||||
|
||||
function moveMouseOver(node) {
|
||||
info("Waiting for element " + node + " to be highlighted");
|
||||
executeInContent("Test:SynthesizeMouse", {
|
||||
function moveMouseOver(testActor, selector) {
|
||||
info("Waiting for element " + selector + " to be highlighted");
|
||||
testActor.synthesizeMouse({
|
||||
selector: selector,
|
||||
options: {type: "mousemove"},
|
||||
center: true
|
||||
}, {node}, false);
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}).then(() => inspector.toolbox.once("picker-node-hovered"));
|
||||
}
|
||||
});
|
||||
|
@ -21,18 +21,18 @@ const TEST_DATA = [
|
||||
|
||||
add_task(function*() {
|
||||
info("Loading the test document and opening the inspector");
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_URL);
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
for (let selector of TEST_DATA) {
|
||||
info("Selecting and highlighting node " + selector);
|
||||
yield selectAndHighlightNode(selector, inspector);
|
||||
|
||||
info("Get all quads for this node");
|
||||
let {data} = yield executeInContent("Test:GetAllAdjustedQuads", {selector});
|
||||
let data = yield testActor.getAllAdjustedQuads(selector);
|
||||
|
||||
info("Iterate over the box-model regions and verify that the highlighter is correct");
|
||||
for (let region of ["margin", "border", "padding", "content"]) {
|
||||
let {points} = yield getHighlighterRegionPath(region, toolbox.highlighter);
|
||||
let {points} = yield testActor.getHighlighterRegionPath(region);
|
||||
is(points.length, data[region].length,
|
||||
"The highlighter's " + region + " path defines the correct number of boxes");
|
||||
}
|
||||
@ -56,7 +56,7 @@ add_task(function*() {
|
||||
expectedContentRect.p4.y = Math.max(expectedContentRect.p4.y, p4.y);
|
||||
}
|
||||
|
||||
let contentRect = yield getGuidesRectangle(toolbox);
|
||||
let contentRect = yield testActor.getGuidesRectangle();
|
||||
|
||||
for (let point of ["p1", "p2", "p3", "p4"]) {
|
||||
is((contentRect[point].x),
|
||||
|
@ -9,7 +9,7 @@
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_dom.html";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("Starting element picker");
|
||||
yield toolbox.highlighterUtils.startPicker();
|
||||
@ -17,49 +17,44 @@ add_task(function*() {
|
||||
info("Selecting the simple-div1 DIV");
|
||||
yield moveMouseOver("#simple-div1");
|
||||
|
||||
let highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "simple-div1", "The highlighter shows #simple-div1. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#simple-div1")), "The highlighter shows #simple-div1. OK.");
|
||||
|
||||
// First Child selection
|
||||
info("Testing first-child selection.");
|
||||
|
||||
yield doKeyHover({key: "VK_RIGHT", options: {}});
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "useless-para", "The highlighter shows #useless-para. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#useless-para")), "The highlighter shows #useless-para. OK.");
|
||||
|
||||
info("Selecting the useful-para paragraph DIV");
|
||||
yield moveMouseOver("#useful-para");
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "useful-para", "The highlighter shows #useful-para. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#useful-para")), "The highlighter shows #useful-para. OK.");
|
||||
|
||||
yield doKeyHover({key: "VK_RIGHT", options: {}});
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "bold", "The highlighter shows #bold. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#bold")), "The highlighter shows #bold. OK.");
|
||||
|
||||
info("Going back up to the simple-div1 DIV");
|
||||
yield doKeyHover({key: "VK_LEFT", options: {}});
|
||||
yield doKeyHover({key: "VK_LEFT", options: {}});
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "simple-div1", "The highlighter shows #simple-div1. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#simple-div1")), "The highlighter shows #simple-div1. OK.");
|
||||
|
||||
info("First child selection test Passed.");
|
||||
|
||||
info("Stopping the picker");
|
||||
yield toolbox.highlighterUtils.stopPicker();
|
||||
|
||||
function doKeyHover(msg) {
|
||||
function doKeyHover(args) {
|
||||
info("Key pressed. Waiting for element to be highlighted/hovered");
|
||||
executeInContent("Test:SynthesizeKey", msg);
|
||||
testActor.synthesizeKey(args);
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}
|
||||
|
||||
function moveMouseOver(selector) {
|
||||
info("Waiting for element " + selector + " to be highlighted");
|
||||
executeInContent("Test:SynthesizeMouse", {
|
||||
testActor.synthesizeMouse({
|
||||
options: {type: "mousemove"},
|
||||
center: true,
|
||||
selector: selector
|
||||
}, null, false);
|
||||
});
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}
|
||||
|
||||
|
@ -9,7 +9,7 @@
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_dom.html";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("Starting element picker");
|
||||
yield toolbox.highlighterUtils.startPicker();
|
||||
@ -20,44 +20,38 @@ add_task(function*() {
|
||||
info("Selecting the ahoy paragraph DIV");
|
||||
yield moveMouseOver("#ahoy");
|
||||
|
||||
let highlightedNode = yield getHighlitNode(toolbox);
|
||||
|
||||
yield doKeyHover({key: "VK_LEFT", options: {}});
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "simple-div2", "The highlighter shows #simple-div2. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#simple-div2")), "The highlighter shows #simple-div2. OK.");
|
||||
|
||||
yield doKeyHover({key: "VK_RIGHT", options: {}});
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "ahoy", "The highlighter shows #ahoy. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#ahoy")), "The highlighter shows #ahoy. OK.");
|
||||
|
||||
info("Going back up to the complex-div DIV");
|
||||
yield doKeyHover({key: "VK_LEFT", options: {}});
|
||||
yield doKeyHover({key: "VK_LEFT", options: {}});
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "complex-div", "The highlighter shows #complex-div. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#complex-div")), "The highlighter shows #complex-div. OK.");
|
||||
|
||||
yield doKeyHover({key: "VK_RIGHT", options: {}});
|
||||
highlightedNode = yield getHighlitNode(toolbox);
|
||||
is(highlightedNode.id, "simple-div2", "The highlighter shows #simple-div2. OK.");
|
||||
ok((yield testActor.assertHighlightedNode("#simple-div2")), "The highlighter shows #simple-div2. OK.");
|
||||
|
||||
info("Previously chosen child is remembered. Passed.");
|
||||
|
||||
info("Stopping the picker");
|
||||
yield toolbox.highlighterUtils.stopPicker();
|
||||
|
||||
function doKeyHover(msg) {
|
||||
function doKeyHover(args) {
|
||||
info("Key pressed. Waiting for element to be highlighted/hovered");
|
||||
executeInContent("Test:SynthesizeKey", msg);
|
||||
testActor.synthesizeKey(args);
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}
|
||||
|
||||
function moveMouseOver(selector) {
|
||||
info("Waiting for element " + selector + " to be highlighted");
|
||||
executeInContent("Test:SynthesizeMouse", {
|
||||
testActor.synthesizeMouse({
|
||||
options: {type: "mousemove"},
|
||||
center: true,
|
||||
selector: selector
|
||||
}, null, false);
|
||||
});
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}
|
||||
|
||||
|
@ -9,7 +9,7 @@
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_dom.html";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("Starting element picker");
|
||||
yield toolbox.highlighterUtils.startPicker();
|
||||
@ -33,28 +33,28 @@ add_task(function*() {
|
||||
yield doKeyStop({key: "VK_ESCAPE", options: {}});
|
||||
is(inspector.selection.nodeFront.id, "simple-div2", "The simple-div2 DIV is still selected. Passed.");
|
||||
|
||||
function doKeyPick(msg) {
|
||||
function doKeyPick(args) {
|
||||
info("Key pressed. Waiting for element to be picked");
|
||||
executeInContent("Test:SynthesizeKey", msg);
|
||||
testActor.synthesizeKey(args);
|
||||
return promise.all([
|
||||
toolbox.selection.once("new-node-front"),
|
||||
inspector.once("inspector-updated")
|
||||
]);
|
||||
}
|
||||
|
||||
function doKeyStop(msg) {
|
||||
function doKeyStop(args) {
|
||||
info("Key pressed. Waiting for picker to be canceled");
|
||||
executeInContent("Test:SynthesizeKey", msg);
|
||||
testActor.synthesizeKey(args);
|
||||
return inspector.toolbox.once("picker-stopped");
|
||||
}
|
||||
|
||||
function moveMouseOver(selector) {
|
||||
info("Waiting for element " + selector + " to be highlighted");
|
||||
executeInContent("Test:SynthesizeMouse", {
|
||||
testActor.synthesizeMouse({
|
||||
options: {type: "mousemove"},
|
||||
center: true,
|
||||
selector: selector
|
||||
}, null, false);
|
||||
});
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}
|
||||
|
||||
|
@ -10,26 +10,26 @@
|
||||
const TEST_URL = "data:text/html;charset=utf8,<div></div>";
|
||||
|
||||
add_task(function*() {
|
||||
let {toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("Start the element picker");
|
||||
yield toolbox.highlighterUtils.startPicker();
|
||||
|
||||
info("Start using the picker by hovering over nodes");
|
||||
let onHover = toolbox.once("picker-node-hovered");
|
||||
executeInContent("Test:SynthesizeMouse", {
|
||||
testActor.synthesizeMouse({
|
||||
options: {type: "mousemove"},
|
||||
center: true,
|
||||
selector: "div"
|
||||
}, null, false);
|
||||
});
|
||||
yield onHover;
|
||||
|
||||
info("Press escape and wait for the picker to stop");
|
||||
let onPickerStopped = toolbox.once("picker-stopped");
|
||||
executeInContent("Test:SynthesizeKey", {
|
||||
testActor.synthesizeKey({
|
||||
key: "VK_ESCAPE",
|
||||
options: {}
|
||||
}, null, false);
|
||||
});
|
||||
yield onPickerStopped;
|
||||
|
||||
info("Press escape again and wait for the split console to open");
|
||||
@ -37,7 +37,7 @@ add_task(function*() {
|
||||
let onConsoleReady = toolbox.once("webconsole-ready");
|
||||
// The escape key is synthesized in the main process, which is where the focus
|
||||
// should be after the picker was stopped.
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {});
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, inspector.panelWin);
|
||||
yield onSplitConsole;
|
||||
yield onConsoleReady;
|
||||
ok(toolbox.splitConsole, "The split console is shown.");
|
||||
|
@ -20,18 +20,15 @@ const TEST_DATA = [
|
||||
{
|
||||
desc: "Guides and infobar should be shown by default",
|
||||
options: {},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let hidden = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-nodeinfobar-container", "hidden");
|
||||
checkHighlighter: function*(testActor) {
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("box-model-nodeinfobar-container", "hidden");
|
||||
ok(!hidden, "Node infobar is visible");
|
||||
|
||||
hidden = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-elements", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("box-model-elements", "hidden");
|
||||
ok(!hidden, "SVG container is visible");
|
||||
|
||||
for (let side of ["top", "right", "bottom", "left"]) {
|
||||
hidden = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-" + side, "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("box-model-guide-" + side, "hidden");
|
||||
ok(!hidden, side + " guide is visible");
|
||||
}
|
||||
}
|
||||
@ -39,9 +36,9 @@ const TEST_DATA = [
|
||||
{
|
||||
desc: "All regions should be shown by default",
|
||||
options: {},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
checkHighlighter: function*(testActor) {
|
||||
for (let region of ["margin", "border", "padding", "content"]) {
|
||||
let {d} = yield getHighlighterRegionPath(region, toolbox.highlighter);
|
||||
let {d} = yield testActor.getHighlighterRegionPath(region);
|
||||
ok(d, "Region " + region + " has set coordinates");
|
||||
}
|
||||
}
|
||||
@ -49,10 +46,9 @@ const TEST_DATA = [
|
||||
{
|
||||
desc: "Guides can be hidden",
|
||||
options: {hideGuides: true},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
checkHighlighter: function*(testActor) {
|
||||
for (let side of ["top", "right", "bottom", "left"]) {
|
||||
let hidden = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-" + side, "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("box-model-guide-" + side, "hidden");
|
||||
is(hidden, "true", side + " guide has been hidden");
|
||||
}
|
||||
}
|
||||
@ -60,60 +56,55 @@ const TEST_DATA = [
|
||||
{
|
||||
desc: "Infobar can be hidden",
|
||||
options: {hideInfoBar: true},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let hidden = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-nodeinfobar-container", "hidden");
|
||||
checkHighlighter: function*(testActor) {
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("box-model-nodeinfobar-container", "hidden");
|
||||
is(hidden, "true", "nodeinfobar has been hidden");
|
||||
}
|
||||
},
|
||||
{
|
||||
desc: "One region only can be shown (1)",
|
||||
options: {showOnly: "content"},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let {d} = yield getHighlighterRegionPath("margin", toolbox.highlighter);
|
||||
checkHighlighter: function*(testActor) {
|
||||
let {d} = yield testActor.getHighlighterRegionPath("margin");
|
||||
ok(!d, "margin region is hidden");
|
||||
|
||||
({d} = yield getHighlighterRegionPath("border", toolbox.highlighter));
|
||||
({d} = yield testActor.getHighlighterRegionPath("border"));
|
||||
ok(!d, "border region is hidden");
|
||||
|
||||
({d} = yield getHighlighterRegionPath("padding", toolbox.highlighter));
|
||||
({d} = yield testActor.getHighlighterRegionPath("padding"));
|
||||
ok(!d, "padding region is hidden");
|
||||
|
||||
({d} = yield getHighlighterRegionPath("content", toolbox.highlighter));
|
||||
({d} = yield testActor.getHighlighterRegionPath("content"));
|
||||
ok(d, "content region is shown");
|
||||
}
|
||||
},
|
||||
{
|
||||
desc: "One region only can be shown (2)",
|
||||
options: {showOnly: "margin"},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let {d} = yield getHighlighterRegionPath("margin", toolbox.highlighter);
|
||||
checkHighlighter: function*(testActor) {
|
||||
let {d} = yield testActor.getHighlighterRegionPath("margin");
|
||||
ok(d, "margin region is shown");
|
||||
|
||||
({d} = yield getHighlighterRegionPath("border", toolbox.highlighter));
|
||||
({d} = yield testActor.getHighlighterRegionPath("border"));
|
||||
ok(!d, "border region is hidden");
|
||||
|
||||
({d} = yield getHighlighterRegionPath("padding", toolbox.highlighter));
|
||||
({d} = yield testActor.getHighlighterRegionPath("padding"));
|
||||
ok(!d, "padding region is hidden");
|
||||
|
||||
({d} = yield getHighlighterRegionPath("content", toolbox.highlighter));
|
||||
({d} = yield testActor.getHighlighterRegionPath("content"));
|
||||
ok(!d, "content region is hidden");
|
||||
}
|
||||
},
|
||||
{
|
||||
desc: "Guides can be drawn around a given region (1)",
|
||||
options: {region: "padding"},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let topY1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-top", "y1");
|
||||
let rightX1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-right", "x1");
|
||||
let bottomY1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-bottom", "y1");
|
||||
let leftX1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-left", "x1");
|
||||
checkHighlighter: function*(testActor) {
|
||||
let topY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-top", "y1");
|
||||
let rightX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-right", "x1");
|
||||
let bottomY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-bottom", "y1");
|
||||
let leftX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-left", "x1");
|
||||
|
||||
let {points} = yield getHighlighterRegionPath("padding", toolbox.highlighter);
|
||||
let {points} = yield testActor.getHighlighterRegionPath("padding");
|
||||
points = points[0];
|
||||
|
||||
is(Math.ceil(topY1), points[0][1], "Top guide's y1 is correct");
|
||||
@ -125,17 +116,13 @@ const TEST_DATA = [
|
||||
{
|
||||
desc: "Guides can be drawn around a given region (2)",
|
||||
options: {region: "margin"},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let topY1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-top", "y1");
|
||||
let rightX1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-right", "x1");
|
||||
let bottomY1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-bottom", "y1");
|
||||
let leftX1 = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-guide-left", "x1");
|
||||
checkHighlighter: function*(testActor) {
|
||||
let topY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-top", "y1");
|
||||
let rightX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-right", "x1");
|
||||
let bottomY1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-bottom", "y1");
|
||||
let leftX1 = yield testActor.getHighlighterNodeAttribute("box-model-guide-left", "x1");
|
||||
|
||||
let {points} = yield getHighlighterRegionPath("margin", toolbox.highlighter);
|
||||
let {points} = yield testActor.getHighlighterRegionPath("margin");
|
||||
points = points[0];
|
||||
|
||||
is(Math.ceil(topY1), points[0][1], "Top guide's y1 is correct");
|
||||
@ -147,14 +134,12 @@ const TEST_DATA = [
|
||||
{
|
||||
desc: "When showOnly is used, other regions can be faded",
|
||||
options: {showOnly: "margin", onlyRegionArea: true},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let h = toolbox.highlighter;
|
||||
|
||||
checkHighlighter: function*(testActor) {
|
||||
for (let region of ["margin", "border", "padding", "content"]) {
|
||||
let {d} = yield getHighlighterRegionPath(region, h);
|
||||
let {d} = yield testActor.getHighlighterRegionPath(region);
|
||||
ok(d, "Region " + region + " is shown (it has a d attribute)");
|
||||
|
||||
let faded = yield getHighlighterNodeAttribute(h,
|
||||
let faded = yield testActor.getHighlighterNodeAttribute(
|
||||
"box-model-" + region, "faded");
|
||||
if (region === "margin") {
|
||||
ok(!faded, "The margin region is not faded");
|
||||
@ -167,14 +152,12 @@ const TEST_DATA = [
|
||||
{
|
||||
desc: "When showOnly is used, other regions can be faded (2)",
|
||||
options: {showOnly: "padding", onlyRegionArea: true},
|
||||
checkHighlighter: function*(toolbox) {
|
||||
let h = toolbox.highlighter;
|
||||
|
||||
checkHighlighter: function*(testActor) {
|
||||
for (let region of ["margin", "border", "padding", "content"]) {
|
||||
let {d} = yield getHighlighterRegionPath(region, h);
|
||||
let {d} = yield testActor.getHighlighterRegionPath(region);
|
||||
ok(d, "Region " + region + " is shown (it has a d attribute)");
|
||||
|
||||
let faded = yield getHighlighterNodeAttribute(h,
|
||||
let faded = yield testActor.getHighlighterNodeAttribute(
|
||||
"box-model-" + region, "faded");
|
||||
if (region === "padding") {
|
||||
ok(!faded, "The padding region is not faded");
|
||||
@ -187,7 +170,7 @@ const TEST_DATA = [
|
||||
];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
let divFront = yield getNodeFront("div", inspector);
|
||||
|
||||
@ -197,7 +180,7 @@ add_task(function*() {
|
||||
info("Show the box-model highlighter with options " + options);
|
||||
yield toolbox.highlighter.showBoxModel(divFront, options);
|
||||
|
||||
yield checkHighlighter(toolbox);
|
||||
yield checkHighlighter(testActor);
|
||||
|
||||
info("Hide the box-model highlighter");
|
||||
yield toolbox.highlighter.hideBoxModel();
|
||||
|
@ -11,7 +11,7 @@
|
||||
const TEST_URL = "data:text/html;charset=utf-8,Rect Highlighter Test";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
let highlighter = yield front.getHighlighterByType("RectHighlighter");
|
||||
let body = yield getNodeFront("body", inspector);
|
||||
@ -26,13 +26,13 @@ add_task(function*() {
|
||||
|
||||
info("Check that the highlighter is hidden by default");
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden by default");
|
||||
|
||||
info("Check that nothing is shown if no rect is passed");
|
||||
|
||||
yield highlighter.show(body);
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when no rect is passed");
|
||||
|
||||
info("Check that nothing is shown if rect is incomplete or invalid");
|
||||
@ -40,25 +40,25 @@ add_task(function*() {
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0}
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is incomplete");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: -Infinity, height: 0}
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is invalid (1)");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: 5, height: -45}
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is invalid (2)");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: "test", y: 0, width: 5, height: 5}
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is invalid (3)");
|
||||
|
||||
info("Check that the highlighter is displayed when valid options are passed");
|
||||
@ -66,9 +66,9 @@ add_task(function*() {
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 5, y: 5, width: 50, height: 50}
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
ok(!hidden, "The highlighter is displayed");
|
||||
let style = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "style");
|
||||
let style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
|
||||
is(style, "left:5px;top:5px;width:50px;height:50px;",
|
||||
"The highlighter is positioned correctly");
|
||||
|
||||
@ -77,9 +77,9 @@ add_task(function*() {
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: 50, height: 50}
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
ok(!hidden, "The highlighter is displayed when x=0 and y=0");
|
||||
style = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "style");
|
||||
style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
|
||||
is(style, "left:0px;top:0px;width:50px;height:50px;",
|
||||
"The highlighter is positioned correctly");
|
||||
|
||||
@ -88,7 +88,7 @@ add_task(function*() {
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: 0, height: 0}
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden width and height are 0");
|
||||
|
||||
info("Check that a fill color can be passed");
|
||||
@ -97,9 +97,9 @@ add_task(function*() {
|
||||
rect: {x: 100, y: 200, width: 500, height: 200},
|
||||
fill: "red"
|
||||
});
|
||||
hidden = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "hidden", highlighter);
|
||||
ok(!hidden, "The highlighter is displayed");
|
||||
style = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "style");
|
||||
style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
|
||||
is(style, "left:100px;top:200px;width:500px;height:200px;background:red;",
|
||||
"The highlighter has the right background color");
|
||||
|
||||
|
@ -10,7 +10,7 @@
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_rect.html";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
let highlighter = yield front.getHighlighterByType("RectHighlighter");
|
||||
|
||||
@ -22,7 +22,7 @@ add_task(function*() {
|
||||
rect: {x: 50, y: 50, width: 100, height: 100}
|
||||
});
|
||||
|
||||
let style = yield getHighlighterNodeAttribute(highlighter, "highlighted-rect", "style");
|
||||
let style = yield testActor.getHighlighterNodeAttribute("highlighted-rect", "style", highlighter);
|
||||
|
||||
// The parent body has margin=50px and border=10px
|
||||
// The parent iframe also has margin=50px and border=10px
|
||||
|
@ -20,22 +20,22 @@ const RULERS_MAX_Y_AXIS = 15000;
|
||||
const RULERS_TEXT_STEP = 100;
|
||||
|
||||
add_task(function*() {
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URL);
|
||||
let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("RulersHighlighter");
|
||||
|
||||
yield isHiddenByDefault(highlighter, inspector);
|
||||
yield hasRightLabelsContent(highlighter, inspector);
|
||||
yield isHiddenByDefault(highlighter, inspector, testActor);
|
||||
yield hasRightLabelsContent(highlighter, inspector, testActor);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* isHiddenByDefault(highlighterFront, inspector) {
|
||||
function* isHiddenByDefault(highlighterFront, inspector, testActor) {
|
||||
info("Checking the highlighter is hidden by default");
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "elements", "hidden");
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
ID + "elements", "hidden", highlighterFront);
|
||||
|
||||
is(hidden, "true", "highlighter is hidden by default");
|
||||
|
||||
@ -45,17 +45,17 @@ function* isHiddenByDefault(highlighterFront, inspector) {
|
||||
let body = yield getNodeFront("body", inspector);
|
||||
yield highlighterFront.show(body);
|
||||
|
||||
hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "elements", "hidden");
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
ID + "elements", "hidden", highlighterFront);
|
||||
|
||||
isnot(hidden, "true", "highlighter is visible after show");
|
||||
}
|
||||
|
||||
function* hasRightLabelsContent(highlighterFront, inspector) {
|
||||
function* hasRightLabelsContent(highlighterFront, inspector, testActor) {
|
||||
info("Checking the rulers have the proper text, based on rulers' size");
|
||||
|
||||
let contentX = yield getHighlighterNodeTextContent(highlighterFront, `${ID}x-axis-text`);
|
||||
let contentY = yield getHighlighterNodeTextContent(highlighterFront, `${ID}y-axis-text`);
|
||||
let contentX = yield testActor.getHighlighterNodeTextContent(`${ID}x-axis-text`, highlighterFront);
|
||||
let contentY = yield testActor.getHighlighterNodeTextContent(`${ID}y-axis-text`, highlighterFront);
|
||||
|
||||
let expectedX = "";
|
||||
for (let i = RULERS_TEXT_STEP; i < RULERS_MAX_X_AXIS; i+= RULERS_TEXT_STEP)
|
||||
|
@ -12,7 +12,7 @@ const TEST_URL = "data:text/html;charset=utf-8," +
|
||||
const ID = "rulers-highlighter-";
|
||||
|
||||
add_task(function*() {
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URL);
|
||||
let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("RulersHighlighter");
|
||||
@ -22,22 +22,22 @@ add_task(function*() {
|
||||
let body = yield getNodeFront("body", inspector);
|
||||
yield highlighter.show(body);
|
||||
|
||||
yield isUpdatedAfterScroll(highlighter, inspector);
|
||||
yield isUpdatedAfterScroll(highlighter, inspector, testActor);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* isUpdatedAfterScroll(highlighterFront, inspector) {
|
||||
function* isUpdatedAfterScroll(highlighterFront, inspector, testActor) {
|
||||
info("Checking the rulers' position by default");
|
||||
|
||||
let xAxisRulerTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}x-axis-ruler`, "transform");
|
||||
let xAxisTextTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}x-axis-text`, "transform");
|
||||
let yAxisRulerTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}y-axis-ruler`, "transform");
|
||||
let yAxisTextTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}y-axis-text`, "transform");
|
||||
let xAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}x-axis-ruler`, "transform", highlighterFront);
|
||||
let xAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}x-axis-text`, "transform", highlighterFront);
|
||||
let yAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}y-axis-ruler`, "transform", highlighterFront);
|
||||
let yAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}y-axis-text`, "transform", highlighterFront);
|
||||
|
||||
is(xAxisRulerTransform, null, "x axis ruler is positioned properly");
|
||||
is(xAxisTextTransform, null, "x axis text are positioned properly");
|
||||
@ -48,21 +48,21 @@ function* isUpdatedAfterScroll(highlighterFront, inspector) {
|
||||
|
||||
let x = 200, y = 300;
|
||||
|
||||
let { data } = yield executeInContent("Test:ScrollWindow", { x, y });
|
||||
let data = yield testActor.scrollWindow(x, y);
|
||||
|
||||
is(data.x, x, "window scrolled properly horizontally");
|
||||
is(data.y, y, "window scrolled properly vertically");
|
||||
|
||||
info("Checking the rulers are properly positioned after the scrolling");
|
||||
|
||||
xAxisRulerTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}x-axis-ruler`, "transform");
|
||||
xAxisTextTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}x-axis-text`, "transform");
|
||||
yAxisRulerTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}y-axis-ruler`, "transform");
|
||||
yAxisTextTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}y-axis-text`, "transform");
|
||||
xAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}x-axis-ruler`, "transform", highlighterFront);
|
||||
xAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}x-axis-text`, "transform", highlighterFront);
|
||||
yAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}y-axis-ruler`, "transform", highlighterFront);
|
||||
yAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}y-axis-text`, "transform", highlighterFront);
|
||||
|
||||
is(xAxisRulerTransform, `translate(-${x})`, "x axis ruler is positioned properly");
|
||||
is(xAxisTextTransform, `translate(-${x})`, "x axis text are positioned properly");
|
||||
@ -71,25 +71,21 @@ function* isUpdatedAfterScroll(highlighterFront, inspector) {
|
||||
|
||||
info("Asking the content window to scroll relative to the current position");
|
||||
|
||||
({ data } = yield executeInContent("Test:ScrollWindow", {
|
||||
x: -50,
|
||||
y: -60,
|
||||
relative: true
|
||||
}));
|
||||
data = yield testActor.scrollWindow(-50, -60, true);
|
||||
|
||||
is(data.x, x - 50, "window scrolled properly horizontally");
|
||||
is(data.y, y - 60, "window scrolled properly vertically");
|
||||
|
||||
info("Checking the rulers are properly positioned after the relative scrolling");
|
||||
|
||||
xAxisRulerTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}x-axis-ruler`, "transform");
|
||||
xAxisTextTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}x-axis-text`, "transform");
|
||||
yAxisRulerTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}y-axis-ruler`, "transform");
|
||||
yAxisTextTransform = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
`${ID}y-axis-text`, "transform");
|
||||
xAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}x-axis-ruler`, "transform", highlighterFront);
|
||||
xAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}x-axis-text`, "transform", highlighterFront);
|
||||
yAxisRulerTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}y-axis-ruler`, "transform", highlighterFront);
|
||||
yAxisTextTransform = yield testActor.getHighlighterNodeAttribute(
|
||||
`${ID}y-axis-text`, "transform", highlighterFront);
|
||||
|
||||
is(xAxisRulerTransform, `translate(-${x - 50})`, "x axis ruler is positioned properly");
|
||||
is(xAxisTextTransform, `translate(-${x - 50})`, "x axis text are positioned properly");
|
||||
|
@ -38,7 +38,7 @@ const TEST_DATA = [{
|
||||
}];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
let highlighter = yield front.getHighlighterByType("SelectorHighlighter");
|
||||
|
||||
@ -50,9 +50,7 @@ add_task(function*() {
|
||||
|
||||
yield highlighter.show(contextNode, {selector});
|
||||
|
||||
let {actorID, connPrefix} = getHighlighterActorID(highlighter);
|
||||
let {data: nb} = yield executeInContent("Test:GetSelectorHighlighterBoxNb",
|
||||
{actorID, connPrefix});
|
||||
let nb = yield testActor.getSelectorHighlighterBoxNb(highlighter.actorID);
|
||||
ok(nb !== null, "The number of highlighters was retrieved");
|
||||
|
||||
is(nb, containerCount, "The correct number of highlighers were created");
|
||||
|
@ -31,7 +31,7 @@ const TEST_DATA = [{
|
||||
}];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
let highlighter = yield front.getHighlighterByType("SelectorHighlighter");
|
||||
|
||||
@ -48,9 +48,7 @@ add_task(function*() {
|
||||
|
||||
yield highlighter.show(contextNode, {selector});
|
||||
|
||||
let {actorID, connPrefix} = getHighlighterActorID(highlighter);
|
||||
let {data: nb} = yield executeInContent("Test:GetSelectorHighlighterBoxNb",
|
||||
{actorID, connPrefix});
|
||||
let nb = yield testActor.getSelectorHighlighterBoxNb(highlighter.actorID);
|
||||
ok(nb !== null, "The number of highlighters was retrieved");
|
||||
|
||||
is(nb, containerCount, "The correct number of highlighers were created");
|
||||
|
@ -8,7 +8,7 @@
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_xbl.xul";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("Starting element picker");
|
||||
yield toolbox.highlighterUtils.startPicker();
|
||||
@ -21,7 +21,7 @@ add_task(function*() {
|
||||
|
||||
function doKeyPick(msg) {
|
||||
info("Key pressed. Waiting for element to be picked");
|
||||
executeInContent("Test:SynthesizeKey", msg);
|
||||
testActor.synthesizeKey(msg);
|
||||
return promise.all([
|
||||
toolbox.selection.once("new-node-front"),
|
||||
inspector.once("inspector-updated")
|
||||
@ -30,11 +30,11 @@ add_task(function*() {
|
||||
|
||||
function moveMouseOver(selector) {
|
||||
info("Waiting for element " + selector + " to be highlighted");
|
||||
executeInContent("Test:SynthesizeMouse", {
|
||||
testActor.synthesizeMouse({
|
||||
options: {type: "mousemove"},
|
||||
center: true,
|
||||
selector: selector
|
||||
}, null, false);
|
||||
});
|
||||
return inspector.toolbox.once("picker-node-hovered");
|
||||
}
|
||||
|
||||
|
@ -25,27 +25,26 @@ const TEST_LEVELS = [{
|
||||
}];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
info("Highlighting the test node");
|
||||
|
||||
yield hoverElement("div", inspector);
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
let isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is visible");
|
||||
|
||||
for (let {level, expected} of TEST_LEVELS) {
|
||||
info("Zoom to level " + level + " and check that the highlighter is correct");
|
||||
|
||||
let {actorID, connPrefix} = getHighlighterActorID(toolbox.highlighter);
|
||||
yield zoomPageTo(level, actorID, connPrefix);
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
yield testActor.zoomPageTo(level);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "The highlighter is still visible at zoom level " + level);
|
||||
|
||||
yield isNodeCorrectlyHighlighted("div", toolbox);
|
||||
yield testActor.isNodeCorrectlyHighlighted("div", is);
|
||||
|
||||
info("Check that the highlighter root wrapper node was scaled down");
|
||||
|
||||
let style = yield getRootNodeStyle(toolbox);
|
||||
let style = yield getRootNodeStyle(testActor);
|
||||
is(style, expected, "The style attribute of the root element is correct");
|
||||
}
|
||||
});
|
||||
@ -63,8 +62,7 @@ function* hoverContainer(container, inspector) {
|
||||
yield onHighlight;
|
||||
}
|
||||
|
||||
function* getRootNodeStyle(toolbox) {
|
||||
let value = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-root", "style");
|
||||
function* getRootNodeStyle(testActor) {
|
||||
let value = yield testActor.getHighlighterNodeAttribute("box-model-root", "style");
|
||||
return value;
|
||||
}
|
||||
|
@ -11,40 +11,33 @@ const TEST_URI = "data:text/html;charset=utf-8," +
|
||||
"<iframe src='data:text/html;charset=utf-8,hello world'></iframe>";
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URI);
|
||||
let iframe = getNode("iframe");
|
||||
let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
info("Starting element picker.");
|
||||
yield toolbox.highlighterUtils.startPicker();
|
||||
|
||||
info("Waiting for highlighter to activate.");
|
||||
let highlighterShowing = toolbox.once("highlighter-ready");
|
||||
executeInContent("Test:SynthesizeMouse", {
|
||||
testActor.synthesizeMouse({
|
||||
selector: "body",
|
||||
options: {type: "mousemove"},
|
||||
x: 1,
|
||||
y: 1
|
||||
}, {node: content.document.body}, false);
|
||||
});
|
||||
yield highlighterShowing;
|
||||
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
let isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "Inspector is highlighting.");
|
||||
|
||||
yield reloadFrame();
|
||||
yield testActor.reloadFrame("iframe");
|
||||
info("Frame reloaded. Reloading again.");
|
||||
|
||||
yield reloadFrame();
|
||||
yield testActor.reloadFrame("iframe");
|
||||
info("Frame reloaded twice.");
|
||||
|
||||
isVisible = yield isHighlighting(toolbox);
|
||||
isVisible = yield testActor.isHighlighting();
|
||||
ok(isVisible, "Inspector is highlighting after iframe nav.");
|
||||
|
||||
info("Stopping element picker.");
|
||||
yield toolbox.highlighterUtils.stopPicker();
|
||||
|
||||
function reloadFrame() {
|
||||
info("Reloading frame.");
|
||||
let frameLoaded = once(iframe, "load");
|
||||
iframe.contentWindow.location.reload();
|
||||
return frameLoaded;
|
||||
}
|
||||
});
|
||||
|
@ -9,7 +9,7 @@
|
||||
const TEST_URI = TEST_URL_ROOT + "doc_inspector_infobar_01.html";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector} = yield openInspectorForURL(TEST_URI);
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
let testData = [
|
||||
{
|
||||
@ -46,37 +46,31 @@ add_task(function*() {
|
||||
];
|
||||
|
||||
for (let currTest of testData) {
|
||||
yield testPosition(currTest, inspector);
|
||||
yield testPosition(currTest, inspector, testActor);
|
||||
}
|
||||
});
|
||||
|
||||
function* testPosition(test, inspector) {
|
||||
function* testPosition(test, inspector, testActor) {
|
||||
info("Testing " + test.selector);
|
||||
|
||||
yield selectAndHighlightNode(test.selector, inspector);
|
||||
|
||||
let highlighter = inspector.toolbox.highlighter;
|
||||
let position = yield getHighlighterNodeAttribute(highlighter,
|
||||
"box-model-nodeinfobar-container", "position");
|
||||
let position = yield testActor.getHighlighterNodeAttribute("box-model-nodeinfobar-container", "position");
|
||||
is(position, test.position, "Node " + test.selector + ": position matches");
|
||||
|
||||
let tag = yield getHighlighterNodeTextContent(highlighter,
|
||||
"box-model-nodeinfobar-tagname");
|
||||
let tag = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-tagname");
|
||||
is(tag, test.tag, "node " + test.selector + ": tagName matches.");
|
||||
|
||||
if (test.id) {
|
||||
let id = yield getHighlighterNodeTextContent(highlighter,
|
||||
"box-model-nodeinfobar-id");
|
||||
let id = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-id");
|
||||
is(id, "#" + test.id, "node " + test.selector + ": id matches.");
|
||||
}
|
||||
|
||||
let classes = yield getHighlighterNodeTextContent(highlighter,
|
||||
"box-model-nodeinfobar-classes");
|
||||
let classes = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-classes");
|
||||
is(classes, test.classes, "node " + test.selector + ": classes match.");
|
||||
|
||||
if (test.dims) {
|
||||
let dims = yield getHighlighterNodeTextContent(highlighter,
|
||||
"box-model-nodeinfobar-dimensions");
|
||||
let dims = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-dimensions");
|
||||
is(dims, test.dims, "node " + test.selector + ": dims match.");
|
||||
}
|
||||
}
|
||||
|
@ -27,9 +27,15 @@ add_task(function* () {
|
||||
content.document.body.innerHTML = DOCUMENT_HTML;
|
||||
content.document.title = "Inspector Initialization Test";
|
||||
|
||||
let deferred = promise.defer();
|
||||
executeSoon(deferred.resolve);
|
||||
yield deferred.promise;
|
||||
|
||||
let testActor = yield getTestActorWithoutToolbox(tab);
|
||||
|
||||
yield testToolboxInitialization(tab);
|
||||
yield testContextMenuInitialization();
|
||||
yield testContextMenuInspectorAlreadyOpen();
|
||||
yield testContextMenuInitialization(testActor);
|
||||
yield testContextMenuInspectorAlreadyOpen(testActor);
|
||||
});
|
||||
|
||||
function* testToolboxInitialization(tab) {
|
||||
@ -64,25 +70,22 @@ function* testToolboxInitialization(tab) {
|
||||
ok(!gDevTools.getToolbox(target), "Toolbox destroyed.");
|
||||
}
|
||||
|
||||
function* testContextMenuInitialization() {
|
||||
function* testContextMenuInitialization(testActor) {
|
||||
info("Opening inspector by clicking on 'Inspect Element' context menu item");
|
||||
let salutation = getNode("#salutation");
|
||||
|
||||
yield clickOnInspectMenuItem(salutation);
|
||||
yield clickOnInspectMenuItem(testActor, "#salutation");
|
||||
|
||||
info("Checking inspector state.");
|
||||
yield testMarkupView("#salutation");
|
||||
yield testBreadcrumbs("#salutation");
|
||||
}
|
||||
|
||||
function* testContextMenuInspectorAlreadyOpen() {
|
||||
function* testContextMenuInspectorAlreadyOpen(testActor) {
|
||||
info("Changing node by clicking on 'Inspect Element' context menu item");
|
||||
|
||||
let inspector = getActiveInspector();
|
||||
ok(inspector, "Inspector is active");
|
||||
|
||||
let closing = getNode("#closing");
|
||||
yield clickOnInspectMenuItem(closing);
|
||||
yield clickOnInspectMenuItem(testActor, "#closing");
|
||||
|
||||
ok(true, "Inspector was updated when 'Inspect Element' was clicked.");
|
||||
yield testMarkupView("#closing", inspector);
|
||||
@ -112,18 +115,19 @@ function* testBreadcrumbs(selector, inspector) {
|
||||
is(button.getAttribute("tooltiptext"), expectedText, "Crumb refers to the right node");
|
||||
}
|
||||
|
||||
function* clickOnInspectMenuItem(node) {
|
||||
info("Showing the contextual menu on node " + node);
|
||||
yield executeInContent("Test:SynthesizeMouse", {
|
||||
function* clickOnInspectMenuItem(testActor, selector) {
|
||||
info("Showing the contextual menu on node " + selector);
|
||||
yield testActor.synthesizeMouse({
|
||||
selector: selector,
|
||||
center: true,
|
||||
options: {type: "contextmenu", button: 2}
|
||||
}, {node});
|
||||
});
|
||||
|
||||
// nsContextMenu also requires the popupNode to be set, but we can't set it to
|
||||
// node under e10s as it's a CPOW, not a DOM node. But under e10s,
|
||||
// nsContextMenu won't use the property anyway, so just try/catching is ok.
|
||||
try {
|
||||
document.popupNode = node;
|
||||
document.popupNode = content.document.querySelector(selector);
|
||||
} catch (e) {}
|
||||
|
||||
let contentAreaContextMenu = document.querySelector("#contentAreaContextMenu");
|
||||
|
@ -11,8 +11,8 @@ const TEST_URI = "data:text/html;charset=utf-8," +
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector } = yield openInspectorForURL(TEST_URI);
|
||||
let objectNode = getNode("object");
|
||||
ok(objectNode, "We have the object node");
|
||||
|
||||
yield selectNode("object", inspector);
|
||||
|
||||
ok(true, "Selected <object> without throwing");
|
||||
});
|
||||
|
@ -11,26 +11,22 @@ const TEST_URI = "data:text/html;charset=utf-8," +
|
||||
"<div style=\"width: 100px; height: 100px; background:yellow;\"></div>";
|
||||
|
||||
add_task(function*() {
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_URI);
|
||||
let div = getNode("div");
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URI);
|
||||
let divFront = yield getNodeFront("div", inspector);
|
||||
|
||||
info("Waiting for highlighter to activate");
|
||||
yield inspector.toolbox.highlighter.showBoxModel(divFront);
|
||||
|
||||
let rect = yield getSimpleBorderRect(toolbox);
|
||||
let rect = yield testActor.getSimpleBorderRect();
|
||||
is(rect.width, 100, "The highlighter has the right width.");
|
||||
|
||||
info("Changing the test element's size and waiting for the highlighter to update");
|
||||
let {actorID, connPrefix} = getHighlighterActorID(toolbox.highlighter);
|
||||
yield executeInContent("Test:ChangeHighlightedNodeWaitForUpdate", {
|
||||
name: "style",
|
||||
value: "width: 200px; height: 100px; background:yellow;",
|
||||
actorID,
|
||||
connPrefix
|
||||
});
|
||||
yield testActor.changeHighlightedNodeWaitForUpdate(
|
||||
"style",
|
||||
"width: 200px; height: 100px; background:yellow;"
|
||||
);
|
||||
|
||||
rect = yield getSimpleBorderRect(toolbox);
|
||||
rect = yield testActor.getSimpleBorderRect();
|
||||
is(rect.width, 200, "The highlighter has the right width after update");
|
||||
|
||||
info("Waiting for highlighter to hide");
|
||||
|
@ -37,7 +37,7 @@ registerCleanupFunction(() => {
|
||||
});
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector } = yield openInspectorForURL(TEST_URL);
|
||||
let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
yield testPasteOuterHTMLMenu();
|
||||
yield testPasteInnerHTMLMenu();
|
||||
@ -60,9 +60,10 @@ add_task(function* () {
|
||||
info("Waiting for inspector selection to update");
|
||||
yield onNodeReselected;
|
||||
|
||||
ok(content.document.body.outerHTML.includes(clipboard.get()),
|
||||
let outerHTML = yield testActor.getProperty("body", "outerHTML");
|
||||
ok(outerHTML.includes(clipboard.get()),
|
||||
"Clipboard content was pasted into the node's outer HTML.");
|
||||
ok(!getNode(outerHTMLSelector, { expectNoMatch: true }),
|
||||
ok(!(yield testActor.hasNode(outerHTMLSelector)),
|
||||
"The original node was removed.");
|
||||
}
|
||||
|
||||
@ -70,8 +71,8 @@ add_task(function* () {
|
||||
info("Testing that 'Paste Inner HTML' menu item works.");
|
||||
clipboard.set("this was pasted (innerHTML)");
|
||||
let innerHTMLSelector = "#paste-area .inner";
|
||||
let getInnerHTML = () => content.document.querySelector(innerHTMLSelector).innerHTML;
|
||||
let origInnerHTML = getInnerHTML();
|
||||
let getInnerHTML = () => testActor.getProperty(innerHTMLSelector, "innerHTML");
|
||||
let origInnerHTML = yield getInnerHTML();
|
||||
|
||||
let nodeFront = yield getNodeFront(innerHTMLSelector, inspector);
|
||||
yield selectNode(nodeFront, inspector);
|
||||
@ -85,17 +86,17 @@ add_task(function* () {
|
||||
info("Waiting for mutation to occur");
|
||||
yield onMutation;
|
||||
|
||||
ok(getInnerHTML() === clipboard.get(),
|
||||
ok((yield getInnerHTML()) === clipboard.get(),
|
||||
"Clipboard content was pasted into the node's inner HTML.");
|
||||
ok(getNode(innerHTMLSelector), "The original node has been preserved.");
|
||||
ok((yield testActor.hasNode(innerHTMLSelector)), "The original node has been preserved.");
|
||||
yield undoChange(inspector);
|
||||
ok(getInnerHTML() === origInnerHTML, "Previous innerHTML has been " +
|
||||
ok((yield getInnerHTML()) === origInnerHTML, "Previous innerHTML has been " +
|
||||
"restored after undo");
|
||||
}
|
||||
|
||||
function* testPasteAdjacentHTMLMenu() {
|
||||
let refSelector = "#paste-area .adjacent .ref";
|
||||
let adjacentNode = content.document.querySelector(refSelector).parentNode;
|
||||
let adjacentNodeSelector = "#paste-area .adjacent";
|
||||
let nodeFront = yield getNodeFront(refSelector, inspector);
|
||||
yield selectNode(nodeFront, inspector);
|
||||
let markupTagLine = getContainerForNodeFront(nodeFront, inspector).tagLine;
|
||||
@ -113,11 +114,13 @@ add_task(function* () {
|
||||
yield onMutation;
|
||||
}
|
||||
|
||||
ok(adjacentNode.innerHTML.trim() === "1<span class=\"ref\">234</span>" +
|
||||
ok((yield testActor.getProperty(adjacentNodeSelector, "innerHTML")).trim() ===
|
||||
"1<span class=\"ref\">234</span>" +
|
||||
"<span>5</span>", "The Paste as Last Child / as First Child / Before " +
|
||||
"/ After worked as expected");
|
||||
yield undoChange(inspector);
|
||||
ok(adjacentNode.innerHTML.trim() === "1<span class=\"ref\">234</span>",
|
||||
ok((yield testActor.getProperty(adjacentNodeSelector, "innerHTML")).trim() ===
|
||||
"1<span class=\"ref\">234</span>",
|
||||
"Undo works for paste adjacent HTML");
|
||||
}
|
||||
|
||||
|
@ -8,7 +8,7 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_menu.html";
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URL);
|
||||
let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
yield testShowDOMProperties();
|
||||
yield testDeleteNode();
|
||||
@ -49,7 +49,7 @@ add_task(function* () {
|
||||
dispatchCommandEvent(deleteNode);
|
||||
yield updated;
|
||||
|
||||
ok(!getNode("#delete", { expectNoMatch: true }), "Node deleted");
|
||||
ok(!(yield testActor.hasNode("#delete")), "Node deleted");
|
||||
}
|
||||
|
||||
function* testDeleteRootNode() {
|
||||
@ -59,9 +59,12 @@ add_task(function* () {
|
||||
let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
|
||||
dispatchCommandEvent(deleteNode);
|
||||
|
||||
executeSoon(() => {
|
||||
ok(content.document.documentElement, "Document element still alive.");
|
||||
});
|
||||
let deferred = promise.defer();
|
||||
executeSoon(deferred.resolve);
|
||||
yield deferred.promise;
|
||||
|
||||
ok((yield testActor.eval("!!content.document.documentElement")),
|
||||
"Document element still alive.");
|
||||
}
|
||||
|
||||
function* testScrollIntoView() {
|
||||
|
@ -14,7 +14,7 @@ const TEST_URL_1 = "http://test1.example.org/" + TEST_URL_FILE;
|
||||
const TEST_URL_2 = "http://test2.example.org/" + TEST_URL_FILE;
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector } = yield openInspectorForURL(TEST_URL_1);
|
||||
let { inspector, toolbox, testActor } = yield openInspectorForURL(TEST_URL_1);
|
||||
let markuploaded = inspector.once("markuploaded");
|
||||
|
||||
yield selectNode("#i1", inspector);
|
||||
@ -31,13 +31,13 @@ add_task(function* () {
|
||||
markuploaded = inspector.once("markuploaded");
|
||||
|
||||
info("Going back in history");
|
||||
content.history.go(-1);
|
||||
yield testActor.eval("history.go(-1)");
|
||||
|
||||
info("Waiting for markup view to load after going back in history.");
|
||||
yield markuploaded;
|
||||
|
||||
ok(true, "Old page loaded");
|
||||
is(content.location.href, TEST_URL_1, "URL is correct.");
|
||||
is((yield testActor.eval("location.href;")), TEST_URL_1, "URL is correct.");
|
||||
|
||||
yield selectNode("#i1", inspector);
|
||||
});
|
||||
|
@ -19,7 +19,7 @@ const TEST_URL = 'data:text/html;charset=UTF-8,' +
|
||||
|
||||
add_task(function*() {
|
||||
info("Creating the test tab and opening the rule-view");
|
||||
let {toolbox, inspector} = yield openInspectorForURL(TEST_URL);
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
let view = yield ensureRuleView(inspector);
|
||||
|
||||
@ -27,18 +27,23 @@ add_task(function*() {
|
||||
yield selectNode("#div-1", inspector);
|
||||
|
||||
yield togglePseudoClass(inspector);
|
||||
yield assertPseudoAddedToNode(inspector, view);
|
||||
yield assertPseudoAddedToNode(inspector, testActor, view);
|
||||
|
||||
yield togglePseudoClass(inspector);
|
||||
yield assertPseudoRemovedFromNode();
|
||||
yield assertPseudoRemovedFromView(inspector, view);
|
||||
yield assertPseudoRemovedFromNode(testActor);
|
||||
yield assertPseudoRemovedFromView(inspector, testActor, view);
|
||||
|
||||
yield togglePseudoClass(inspector);
|
||||
yield testNavigate(inspector, view);
|
||||
yield testNavigate(inspector, testActor, view);
|
||||
|
||||
info("Destroying the toolbox");
|
||||
let tab = toolbox.target.tab;
|
||||
yield toolbox.destroy();
|
||||
yield assertPseudoRemovedFromNode(getNode("#div-1"));
|
||||
|
||||
// As the toolbox get detroyed, we need to fetch a new test-actor
|
||||
testActor = yield getTestActorWithoutToolbox(tab);
|
||||
|
||||
yield assertPseudoRemovedFromNode(testActor);
|
||||
});
|
||||
|
||||
|
||||
@ -59,24 +64,19 @@ function* togglePseudoClass(inspector) {
|
||||
yield onMutations;
|
||||
}
|
||||
|
||||
function* testNavigate(inspector, ruleview) {
|
||||
function* testNavigate(inspector, testActor, ruleview) {
|
||||
yield selectNode("#parent-div", inspector);
|
||||
|
||||
info("Make sure the pseudoclass is still on after navigating to a parent");
|
||||
let res = yield executeInContent("Test:HasPseudoClassLock",
|
||||
{pseudo: PSEUDO},
|
||||
{node: getNode("#div-1")});
|
||||
ok(res.data, "pseudo-class lock is still applied after inspecting ancestor");
|
||||
|
||||
ok((yield testActor.hasPseudoClassLock("#div-1", PSEUDO)), "pseudo-class lock is still applied after inspecting ancestor");
|
||||
|
||||
let onPseudo = inspector.selection.once("pseudoclass");
|
||||
yield selectNode("#div-2", inspector);
|
||||
yield onPseudo;
|
||||
|
||||
info("Make sure the pseudoclass is removed after navigating to a non-hierarchy node");
|
||||
res = yield executeInContent("Test:HasPseudoClassLock",
|
||||
{pseudo: PSEUDO},
|
||||
{node: getNode("#div-1")});
|
||||
ok(!res.data, "pseudo-class lock is removed after inspecting sibling node");
|
||||
ok(!(yield testActor.hasPseudoClassLock("#div-1", PSEUDO)), "pseudo-class lock is removed after inspecting sibling node");
|
||||
|
||||
yield selectNode("#div-1", inspector);
|
||||
yield togglePseudoClass(inspector);
|
||||
@ -88,16 +88,15 @@ function* showPickerOn(selector, inspector) {
|
||||
yield highlighter.showBoxModel(nodeFront);
|
||||
}
|
||||
|
||||
function* assertPseudoAddedToNode(inspector, ruleview) {
|
||||
function* assertPseudoAddedToNode(inspector, testActor, ruleview) {
|
||||
info("Make sure the pseudoclass lock is applied to #div-1 and its ancestors");
|
||||
|
||||
let node = getNode("#div-1");
|
||||
do {
|
||||
let {data: hasLock} = yield executeInContent("Test:HasPseudoClassLock",
|
||||
{pseudo: PSEUDO}, {node});
|
||||
ok(hasLock, "pseudo-class lock has been applied");
|
||||
node = node.parentNode;
|
||||
} while (node.parentNode)
|
||||
let hasLock = yield testActor.hasPseudoClassLock("#div-1", PSEUDO);
|
||||
ok(hasLock, "pseudo-class lock has been applied");
|
||||
hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
|
||||
ok(hasLock, "pseudo-class lock has been applied");
|
||||
hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
|
||||
ok(hasLock, "pseudo-class lock has been applied");
|
||||
|
||||
info("Check that the ruleview contains the pseudo-class rule");
|
||||
let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
|
||||
@ -108,32 +107,30 @@ function* assertPseudoAddedToNode(inspector, ruleview) {
|
||||
yield showPickerOn("#div-1", inspector);
|
||||
|
||||
info("Check that the infobar selector contains the pseudo-class");
|
||||
let value = yield getHighlighterNodeTextContent(inspector.toolbox.highlighter,
|
||||
"box-model-nodeinfobar-pseudo-classes");
|
||||
let value = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-pseudo-classes");
|
||||
is(value, PSEUDO, "pseudo-class in infobar selector");
|
||||
yield inspector.toolbox.highlighter.hideBoxModel();
|
||||
}
|
||||
|
||||
function* assertPseudoRemovedFromNode() {
|
||||
function* assertPseudoRemovedFromNode(testActor) {
|
||||
info("Make sure the pseudoclass lock is removed from #div-1 and its ancestors");
|
||||
let node = getNode("#div-1");
|
||||
do {
|
||||
let {data: hasLock} = yield executeInContent("Test:HasPseudoClassLock",
|
||||
{pseudo: PSEUDO}, {node});
|
||||
ok(!hasLock, "pseudo-class lock has been removed");
|
||||
node = node.parentNode;
|
||||
} while (node.parentNode)
|
||||
|
||||
let hasLock = yield testActor.hasPseudoClassLock("#div-1", PSEUDO);
|
||||
ok(!hasLock, "pseudo-class lock has been removed");
|
||||
hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
|
||||
ok(!hasLock, "pseudo-class lock has been removed");
|
||||
hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
|
||||
ok(!hasLock, "pseudo-class lock has been removed");
|
||||
}
|
||||
|
||||
function* assertPseudoRemovedFromView(inspector, ruleview) {
|
||||
function* assertPseudoRemovedFromView(inspector, testActor, ruleview) {
|
||||
info("Check that the ruleview no longer contains the pseudo-class rule");
|
||||
let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
|
||||
is(rules.length, 2, "rule view is showing 2 rules after removing lock");
|
||||
|
||||
yield showPickerOn("#div-1", inspector);
|
||||
|
||||
let value = yield getHighlighterNodeTextContent(inspector.toolbox.highlighter,
|
||||
"box-model-nodeinfobar-pseudo-classes");
|
||||
let value = yield testActor.getHighlighterNodeTextContent("box-model-nodeinfobar-pseudo-classes");
|
||||
is(value, "", "pseudo-class removed from infobar selector");
|
||||
yield inspector.toolbox.highlighter.hideBoxModel();
|
||||
}
|
||||
|
@ -6,26 +6,22 @@
|
||||
// Test that the inspector has the correct pseudo-class locking menu items and
|
||||
// that these items actually work
|
||||
|
||||
const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
|
||||
const TEST_URI = "data:text/html;charset=UTF-8," +
|
||||
"pseudo-class lock node menu tests";
|
||||
"pseudo-class lock node menu tests" +
|
||||
"<div>test div</div>";
|
||||
const PSEUDOS = ["hover", "active", "focus"];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector} = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
info("Creating the test element");
|
||||
let div = content.document.createElement("div");
|
||||
div.textContent = "test div";
|
||||
content.document.body.appendChild(div);
|
||||
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
info("Getting the inspector ctx menu and opening it");
|
||||
let menu = inspector.panelDoc.getElementById("inspector-node-popup");
|
||||
yield openMenu(menu);
|
||||
|
||||
yield testMenuItems(div, menu, inspector);
|
||||
yield testMenuItems(testActor, menu, inspector);
|
||||
|
||||
menu.hidePopup();
|
||||
});
|
||||
|
||||
function openMenu(menu) {
|
||||
@ -34,7 +30,7 @@ function openMenu(menu) {
|
||||
return promise;
|
||||
}
|
||||
|
||||
function* testMenuItems(div, menu, inspector) {
|
||||
function* testMenuItems(testActor, menu, inspector) {
|
||||
for (let pseudo of PSEUDOS) {
|
||||
let menuitem = inspector.panelDoc.getElementById("node-menu-pseudo-" + pseudo);
|
||||
ok(menuitem, ":" + pseudo + " menuitem exists");
|
||||
@ -52,9 +48,7 @@ function* testMenuItems(div, menu, inspector) {
|
||||
yield onRefresh;
|
||||
yield onMutations;
|
||||
|
||||
let {data: hasLock} = yield executeInContent("Test:HasPseudoClassLock",
|
||||
{pseudo: ":" + pseudo},
|
||||
{node: div});
|
||||
let hasLock = yield testActor.hasPseudoClassLock("div", ":" + pseudo);
|
||||
ok(hasLock, "pseudo-class lock has been applied");
|
||||
}
|
||||
}
|
||||
|
@ -13,13 +13,13 @@
|
||||
const TEST_URI = "data:text/html,<p id='1'>p</p>";
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URI);
|
||||
let { inspector, testActor } = yield openInspectorForURL(TEST_URI);
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
let markupLoaded = inspector.once("markuploaded");
|
||||
|
||||
info("Reloading page.");
|
||||
content.location.reload();
|
||||
yield testActor.eval("location.reload()");
|
||||
|
||||
info("Waiting for markupview to load after reload.");
|
||||
yield markupLoaded;
|
||||
|
@ -24,12 +24,12 @@ const TEST_URI = 'data:text/xml,<?xml version="1.0" standalone="no"?>' +
|
||||
'</svg>';
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector, toolbox } = yield openInspectorForURL(TEST_URI);
|
||||
let { inspector, testActor } = yield openInspectorForURL(TEST_URI);
|
||||
|
||||
let markupLoaded = inspector.once("markuploaded");
|
||||
|
||||
info("Reloading page.");
|
||||
content.location.reload();
|
||||
yield testActor.eval("location.reload()");
|
||||
|
||||
info("Waiting for markupview to load after reload.");
|
||||
yield markupLoaded;
|
||||
@ -41,7 +41,7 @@ add_task(function* () {
|
||||
yield selectNode("rect", inspector);
|
||||
|
||||
info("Reloading page.");
|
||||
content.location.reload();
|
||||
yield testActor.eval("location.reload");
|
||||
|
||||
let rectFront = yield getNodeFront("rect", inspector);
|
||||
is(inspector.selection.nodeFront, rectFront, "<rect> selected after reload.");
|
||||
|
@ -9,38 +9,39 @@
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_remove-iframe-during-load.html";
|
||||
|
||||
add_task(function* () {
|
||||
let {inspector, toolbox} = yield openInspectorForURL("about:blank");
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL("about:blank");
|
||||
yield selectNode("body", inspector);
|
||||
|
||||
// We do not want to wait for the inspector to be fully ready before testing
|
||||
// so we load TEST_URL and just wait for the content window to be done loading.
|
||||
let done = waitForContentMessage("Test:TestPageProcessingDone");
|
||||
content.location = TEST_URL;
|
||||
yield done;
|
||||
yield testActor.loadAndWaitForCustomEvent(TEST_URL);
|
||||
|
||||
// The content doc contains a script that creates iframes and deletes them
|
||||
// immediately after. It does this before the load event, after
|
||||
// DOMContentLoaded and after load. This is what used to make the inspector go
|
||||
// blank when navigating to that page.
|
||||
// At this stage, there should be no iframes in the page anymore.
|
||||
ok(!getNode("iframe", {expectNoMatch: true}),
|
||||
"Iframes added by the content page should have been removed");
|
||||
ok(!(yield testActor.hasNode("iframe")),
|
||||
"Iframes added by the content page should have been removed");
|
||||
|
||||
// Create/remove an extra one now, after the load event.
|
||||
info("Creating and removing an iframe.");
|
||||
let iframe = content.document.createElement("iframe");
|
||||
content.document.body.appendChild(iframe);
|
||||
iframe.remove();
|
||||
let onMarkupLoaded = inspector.once("markuploaded");
|
||||
testActor.eval("new " + function () {
|
||||
var iframe = document.createElement("iframe");
|
||||
document.body.appendChild(iframe);
|
||||
iframe.remove();
|
||||
});
|
||||
|
||||
ok(!getNode("iframe", {expectNoMatch: true}),
|
||||
"The after-load iframe should have been removed.");
|
||||
ok(!(yield testActor.hasNode("iframe")),
|
||||
"The after-load iframe should have been removed.");
|
||||
|
||||
info("Waiting for markup-view to load.");
|
||||
yield inspector.once("markuploaded");
|
||||
yield onMarkupLoaded;
|
||||
|
||||
// Assert that the markup-view is displayed and works
|
||||
ok(!getNode("iframe", {expectNoMatch: true}), "Iframe has been removed.");
|
||||
is(getNode("#yay").textContent, "load", "Load event fired.");
|
||||
ok(!(yield testActor.hasNode("iframe")), "Iframe has been removed.");
|
||||
is((yield testActor.getProperty("#yay", "textContent")), "load", "Load event fired.");
|
||||
|
||||
yield selectNode("#yay", inspector);
|
||||
});
|
||||
|
@ -15,11 +15,10 @@ const URL = "data:text/html;charset=UTF-8," +
|
||||
add_task(function*() {
|
||||
Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
|
||||
|
||||
let {toolbox, inspector} = yield openInspectorForURL(URL);
|
||||
let {inspector, toolbox, testActor} = yield openInspectorForURL(URL);
|
||||
|
||||
// Verify we are on the top level document
|
||||
let testNode = content.document.querySelector("#top");
|
||||
ok(testNode, "We have the test node on the top level document");
|
||||
ok((yield testActor.hasNode("#top")), "We have the test node on the top level document");
|
||||
|
||||
assertMarkupViewIsLoaded(inspector);
|
||||
|
||||
@ -40,22 +39,9 @@ add_task(function*() {
|
||||
assertMarkupViewIsEmpty(inspector);
|
||||
});
|
||||
|
||||
let newRoot = inspector.once("new-root").then(() => {
|
||||
info("Navigation to the iframe is done, the inspector should be back up");
|
||||
|
||||
// Verify we are on page one
|
||||
//let testNode = content.frames[0].document.querySelector("#frame");
|
||||
let testNode = getNode("#frame", { document: content.frames[0].document});
|
||||
ok(testNode, "We have the test node on the iframe");
|
||||
|
||||
// On page 2 load, verify we have the right content
|
||||
assertMarkupViewIsLoaded(inspector);
|
||||
|
||||
return selectNode("#frame", inspector);
|
||||
});
|
||||
|
||||
// Only select the iframe after we are able to select an element from the top
|
||||
// level document.
|
||||
let newRoot = inspector.once("new-root");
|
||||
yield selectNode("#top", inspector);
|
||||
info("Select the iframe");
|
||||
frameBtns[0].click();
|
||||
@ -63,6 +49,17 @@ add_task(function*() {
|
||||
yield willNavigate;
|
||||
yield newRoot;
|
||||
|
||||
info("Navigation to the iframe is done, the inspector should be back up");
|
||||
|
||||
// Verify we are on page one
|
||||
ok(!(yield testActor.hasNode("iframe")), "We not longer have access to the top frame elements");
|
||||
ok((yield testActor.hasNode("#frame")), "But now have direct access to the iframe elements");
|
||||
|
||||
// On page 2 load, verify we have the right content
|
||||
assertMarkupViewIsLoaded(inspector);
|
||||
|
||||
yield selectNode("#frame", inspector);
|
||||
|
||||
Services.prefs.clearUserPref("devtools.command-button-frames.enabled");
|
||||
});
|
||||
|
||||
|
@ -53,7 +53,7 @@ let TEST_DATA = [
|
||||
];
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector } = yield openInspectorForURL(PAGE_1);
|
||||
let { inspector, toolbox, testActor } = yield openInspectorForURL(PAGE_1);
|
||||
|
||||
for (let { url, nodeToSelect, selectedNode } of TEST_DATA) {
|
||||
if (nodeToSelect) {
|
||||
@ -61,28 +61,38 @@ add_task(function* () {
|
||||
yield selectNode(nodeToSelect, inspector);
|
||||
}
|
||||
|
||||
yield navigateToAndWaitForNewRoot(url);
|
||||
let onNewRoot = inspector.once("new-root");
|
||||
yield navigateToAndWaitForNewRoot(toolbox, testActor, url);
|
||||
|
||||
info("Waiting for new root.");
|
||||
yield onNewRoot;
|
||||
|
||||
info("Waiting for inspector to update after new-root event.");
|
||||
yield inspector.once("inspector-updated");
|
||||
|
||||
let nodeFront = yield getNodeFront(selectedNode, inspector);
|
||||
ok(nodeFront, "Got expected node front");
|
||||
is(inspector.selection.nodeFront, nodeFront,
|
||||
selectedNode + " is selected after navigation.");
|
||||
}
|
||||
|
||||
function navigateToAndWaitForNewRoot(url) {
|
||||
function navigateToAndWaitForNewRoot(toolbox, testActor, url) {
|
||||
info("Navigating and waiting for new-root event after navigation.");
|
||||
|
||||
let newRoot = inspector.once("new-root");
|
||||
|
||||
if (url == content.location) {
|
||||
info("Reloading page.");
|
||||
content.location.reload();
|
||||
} else {
|
||||
info("Navigating to " + url);
|
||||
content.location = url;
|
||||
}
|
||||
return testActor.eval("location.href")
|
||||
.then(current => {
|
||||
if (url == current) {
|
||||
info("Reloading page.");
|
||||
let activeTab = toolbox.target.activeTab;
|
||||
return activeTab.reload();
|
||||
} else {
|
||||
info("Navigating to " + url);
|
||||
navigateTo(toolbox, url);
|
||||
}
|
||||
|
||||
return newRoot;
|
||||
return newRoot;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -1,356 +0,0 @@
|
||||
/* 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/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// A helper frame-script for brower/devtools/inspector tests.
|
||||
//
|
||||
// Most listeners in the script expect "Test:"-namespaced messages from chrome,
|
||||
// then execute code upon receiving, and immediately send back a message.
|
||||
// This is so that chrome test code can execute code in content and wait for a
|
||||
// response.
|
||||
// Some listeners do not send a response message back.
|
||||
|
||||
let {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
|
||||
let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
|
||||
let LayoutHelpers = devtools.require("devtools/toolkit/layout-helpers");
|
||||
let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
|
||||
let loader = Cc["@mozilla.org/moz/jssubscript-loader;1"]
|
||||
.getService(Ci.mozIJSSubScriptLoader);
|
||||
let EventUtils = {};
|
||||
loader.loadSubScript("chrome://marionette/content/EventUtils.js", EventUtils);
|
||||
|
||||
/**
|
||||
* If the test page creates and triggeres the custom event
|
||||
* "test-page-processing-done", then the Test:TestPageProcessingDone message
|
||||
* will be sent to the parent process for tests to wait for this event if needed.
|
||||
*/
|
||||
addEventListener("DOMWindowCreated", () => {
|
||||
content.addEventListener("test-page-processing-done", () => {
|
||||
sendAsyncMessage("Test:TestPageProcessingDone");
|
||||
}, false);
|
||||
});
|
||||
|
||||
/**
|
||||
* Given an actorID and connection prefix, get the corresponding actor from the
|
||||
* debugger-server connection.
|
||||
* @param {String} actorID
|
||||
* @param {String} connPrefix
|
||||
*/
|
||||
function getHighlighterActor(actorID, connPrefix) {
|
||||
let {require} = Cu.import("resource://gre/modules/devtools/Loader.jsm");
|
||||
let {DebuggerServer} = require("devtools/server/main");
|
||||
if (!DebuggerServer.initialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
let conn = DebuggerServer._connections[connPrefix];
|
||||
if (!conn) {
|
||||
return;
|
||||
}
|
||||
|
||||
return conn.getActor(actorID);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the instance of CanvasFrameAnonymousContentHelper used by a given
|
||||
* highlighter actor.
|
||||
* The instance provides methods to get/set attributes/text/style on nodes of
|
||||
* the highlighter, inserted into the nsCanvasFrame.
|
||||
* @see /toolkit/devtools/server/actors/highlighter.js
|
||||
* @param {String} actorID
|
||||
* @param {String} connPrefix
|
||||
*/
|
||||
function getHighlighterCanvasFrameHelper(actorID, connPrefix) {
|
||||
let actor = getHighlighterActor(actorID, connPrefix);
|
||||
if (actor && actor._highlighter) {
|
||||
return actor._highlighter.markup;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a value for a given attribute name, on one of the elements of the box
|
||||
* model highlighter, given its ID.
|
||||
* @param {Object} msg The msg.data part expects the following properties
|
||||
* - {String} nodeID The full ID of the element to get the attribute for
|
||||
* - {String} name The name of the attribute to get
|
||||
* - {String} actorID The highlighter actor ID
|
||||
* - {String} connPrefix The highlighter actor ID's connection prefix
|
||||
* @return {String} The value, if found, null otherwise
|
||||
*/
|
||||
addMessageListener("Test:GetHighlighterAttribute", function(msg) {
|
||||
let {nodeID, name, actorID, connPrefix} = msg.data;
|
||||
|
||||
let value;
|
||||
let helper = getHighlighterCanvasFrameHelper(actorID, connPrefix);
|
||||
if (helper) {
|
||||
value = helper.getAttributeForElement(nodeID, name);
|
||||
}
|
||||
|
||||
sendAsyncMessage("Test:GetHighlighterAttribute", value);
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the textcontent of one of the elements of the box model highlighter,
|
||||
* given its ID.
|
||||
* @param {Object} msg The msg.data part expects the following properties
|
||||
* - {String} nodeID The full ID of the element to get the attribute for
|
||||
* - {String} actorID The highlighter actor ID
|
||||
* - {String} connPrefix The highlighter connection prefix
|
||||
* @return {String} The textcontent value
|
||||
*/
|
||||
addMessageListener("Test:GetHighlighterTextContent", function(msg) {
|
||||
let {nodeID, actorID, connPrefix} = msg.data;
|
||||
|
||||
let value;
|
||||
let helper = getHighlighterCanvasFrameHelper(actorID, connPrefix);
|
||||
if (helper) {
|
||||
value = helper.getTextContentForElement(nodeID);
|
||||
}
|
||||
|
||||
sendAsyncMessage("Test:GetHighlighterTextContent", value);
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the number of box-model highlighters created by the SelectorHighlighter
|
||||
* @param {Object} msg The msg.data part expects the following properties:
|
||||
* - {String} actorID The highlighter actor ID
|
||||
* - {String} connPrefix The highlighter connection prefix
|
||||
* @return {Number} The number of box-model highlighters created, or null if the
|
||||
* SelectorHighlighter was not found.
|
||||
*/
|
||||
addMessageListener("Test:GetSelectorHighlighterBoxNb", function(msg) {
|
||||
let {actorID, connPrefix} = msg.data;
|
||||
let {_highlighter: h} = getHighlighterActor(actorID, connPrefix);
|
||||
if (!h || !h._highlighters) {
|
||||
sendAsyncMessage("Test:GetSelectorHighlighterBoxNb", null);
|
||||
} else {
|
||||
sendAsyncMessage("Test:GetSelectorHighlighterBoxNb", h._highlighters.length);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Subscribe to the box-model highlighter's update event, modify an attribute of
|
||||
* the currently highlighted node and send a message when the highlighter has
|
||||
* updated.
|
||||
* @param {Object} msg The msg.data part expects the following properties
|
||||
* - {String} the name of the attribute to be changed
|
||||
* - {String} the new value for the attribute
|
||||
* - {String} actorID The highlighter actor ID
|
||||
* - {String} connPrefix The highlighter connection prefix
|
||||
*/
|
||||
addMessageListener("Test:ChangeHighlightedNodeWaitForUpdate", function(msg) {
|
||||
// The name and value of the attribute to be changed
|
||||
let {name, value, actorID, connPrefix} = msg.data;
|
||||
let {_highlighter: h} = getHighlighterActor(actorID, connPrefix);
|
||||
|
||||
h.once("updated", () => {
|
||||
sendAsyncMessage("Test:ChangeHighlightedNodeWaitForUpdate");
|
||||
});
|
||||
|
||||
h.currentNode.setAttribute(name, value);
|
||||
});
|
||||
|
||||
/**
|
||||
* Subscribe to a given highlighter event and respond when the event is received.
|
||||
* @param {Object} msg The msg.data part expects the following properties
|
||||
* - {String} event The name of the highlighter event to listen to
|
||||
* - {String} actorID The highlighter actor ID
|
||||
* - {String} connPrefix The highlighter connection prefix
|
||||
*/
|
||||
addMessageListener("Test:WaitForHighlighterEvent", function(msg) {
|
||||
let {event, actorID, connPrefix} = msg.data;
|
||||
let {_highlighter: h} = getHighlighterActor(actorID, connPrefix);
|
||||
|
||||
h.once(event, () => {
|
||||
sendAsyncMessage("Test:WaitForHighlighterEvent");
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Change the zoom level of the page.
|
||||
* Optionally subscribe to the box-model highlighter's update event and waiting
|
||||
* for it to refresh before responding.
|
||||
* @param {Object} msg The msg.data part expects the following properties
|
||||
* - {Number} level The new zoom level
|
||||
* - {String} actorID Optional. The highlighter actor ID
|
||||
* - {String} connPrefix Optional. The highlighter connection prefix
|
||||
*/
|
||||
addMessageListener("Test:ChangeZoomLevel", function(msg) {
|
||||
let {level, actorID, connPrefix} = msg.data;
|
||||
dumpn("Zooming page to " + level);
|
||||
|
||||
if (actorID) {
|
||||
let {_highlighter: h} = getHighlighterActor(actorID, connPrefix);
|
||||
h.once("updated", () => {
|
||||
sendAsyncMessage("Test:ChangeZoomLevel");
|
||||
});
|
||||
}
|
||||
|
||||
let docShell = content.QueryInterface(Ci.nsIInterfaceRequestor)
|
||||
.getInterface(Ci.nsIWebNavigation)
|
||||
.QueryInterface(Ci.nsIDocShell);
|
||||
docShell.contentViewer.fullZoom = level;
|
||||
|
||||
if (!actorID) {
|
||||
sendAsyncMessage("Test:ChangeZoomLevel");
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the element at the given x/y coordinates.
|
||||
* @param {Object} msg The msg.data part expects the following properties
|
||||
* - {Number} x
|
||||
* - {Number} y
|
||||
* @return {DOMNode} The CPOW of the element
|
||||
*/
|
||||
addMessageListener("Test:ElementFromPoint", function(msg) {
|
||||
let {x, y} = msg.data;
|
||||
dumpn("Getting the element at " + x + "/" + y);
|
||||
|
||||
let helper = new LayoutHelpers(content);
|
||||
let element = helper.getElementFromPoint(content.document, x, y);
|
||||
sendAsyncMessage("Test:ElementFromPoint", null, {element});
|
||||
});
|
||||
|
||||
/**
|
||||
* Get all box-model regions' adjusted boxquads for the given element
|
||||
* @param {Object} msg The msg.data part should contain the node selector.
|
||||
* @return {Object} An object with each property being a box-model region, each
|
||||
* of them being an array of objects with the p1/p2/p3/p4 properties.
|
||||
*/
|
||||
addMessageListener("Test:GetAllAdjustedQuads", function(msg) {
|
||||
let {selector} = msg.data;
|
||||
let node = superQuerySelector(selector);
|
||||
|
||||
let regions = {};
|
||||
|
||||
let helper = new LayoutHelpers(content);
|
||||
for (let boxType of ["content", "padding", "border", "margin"]) {
|
||||
regions[boxType] = helper.getAdjustedQuads(node, boxType);
|
||||
}
|
||||
|
||||
sendAsyncMessage("Test:GetAllAdjustedQuads", regions);
|
||||
});
|
||||
|
||||
/**
|
||||
* Synthesize a mouse event on an element. This handler doesn't send a message
|
||||
* back. Consumers should listen to specific events on the inspector/highlighter
|
||||
* to know when the event got synthesized.
|
||||
* @param {Object} msg The msg.data part expects the following properties:
|
||||
* - {Number} x
|
||||
* - {Number} y
|
||||
* - {Boolean} center If set to true, x/y will be ignored and
|
||||
* synthesizeMouseAtCenter will be used instead
|
||||
* - {Object} options Other event options
|
||||
* - {String} selector An optional selector that will be used to find the node to
|
||||
* synthesize the event on, if msg.objects doesn't contain the CPOW.
|
||||
* The msg.objects part should be the element.
|
||||
* @param {Object} data Event detail properties:
|
||||
*/
|
||||
addMessageListener("Test:SynthesizeMouse", function(msg) {
|
||||
let {x, y, center, options, selector} = msg.data;
|
||||
let {node} = msg.objects;
|
||||
|
||||
if (!node && selector) {
|
||||
node = superQuerySelector(selector);
|
||||
}
|
||||
|
||||
if (center) {
|
||||
EventUtils.synthesizeMouseAtCenter(node, options, node.ownerDocument.defaultView);
|
||||
} else {
|
||||
EventUtils.synthesizeMouse(node, x, y, options, node.ownerDocument.defaultView);
|
||||
}
|
||||
|
||||
// Most consumers won't need to listen to this message, unless they want to
|
||||
// wait for the mouse event to be synthesized and don't have another event
|
||||
// to listen to instead.
|
||||
sendAsyncMessage("Test:SynthesizeMouse");
|
||||
});
|
||||
|
||||
/**
|
||||
* Synthesize a key event for an element. This handler doesn't send a message
|
||||
* back. Consumers should listen to specific events on the inspector/highlighter
|
||||
* to know when the event got synthesized.
|
||||
* @param {Object} msg The msg.data part expects the following properties:
|
||||
* - {String} key
|
||||
* - {Object} options
|
||||
*/
|
||||
addMessageListener("Test:SynthesizeKey", function(msg) {
|
||||
let {key, options} = msg.data;
|
||||
|
||||
EventUtils.synthesizeKey(key, options, content);
|
||||
});
|
||||
|
||||
/**
|
||||
* Check that an element currently has a pseudo-class lock.
|
||||
* @param {Object} msg The msg.data part expects the following properties:
|
||||
* - {String} pseudo The pseudoclass to check for
|
||||
* The msg.objects part should be the element.
|
||||
* @param {Object}
|
||||
* @return {Boolean}
|
||||
*/
|
||||
addMessageListener("Test:HasPseudoClassLock", function(msg) {
|
||||
let {node} = msg.objects;
|
||||
let {pseudo} = msg.data
|
||||
sendAsyncMessage("Test:HasPseudoClassLock", DOMUtils.hasPseudoClassLock(node, pseudo));
|
||||
});
|
||||
|
||||
/**
|
||||
* Scrolls the window to a particular set of coordinates in the document, or
|
||||
* by the given amount if `relative` is set to `true`.
|
||||
*
|
||||
* @param {Object} data
|
||||
* - {Number} x
|
||||
* - {Number} y
|
||||
* - {Boolean} relative
|
||||
*
|
||||
* @return {Object} An object with x / y properties, representing the number
|
||||
* of pixels that the document has been scrolled horizontally and vertically.
|
||||
*/
|
||||
addMessageListener("Test:ScrollWindow", function(msg) {
|
||||
let {x, y, relative} = msg.data;
|
||||
|
||||
if (isNaN(x) || isNaN(y)) {
|
||||
sendAsyncMessage("Test:ScrollWindow", {});
|
||||
return;
|
||||
}
|
||||
|
||||
content.addEventListener("scroll", function onScroll(event) {
|
||||
this.removeEventListener("scroll", onScroll);
|
||||
|
||||
let data = {x: content.scrollX, y: content.scrollY};
|
||||
sendAsyncMessage("Test:ScrollWindow", data);
|
||||
});
|
||||
|
||||
content[relative ? "scrollBy" : "scrollTo"](x, y);
|
||||
});
|
||||
|
||||
/**
|
||||
* Like document.querySelector but can go into iframes too.
|
||||
* ".container iframe || .sub-container div" will first try to find the node
|
||||
* matched by ".container iframe" in the root document, then try to get the
|
||||
* content document inside it, and then try to match ".sub-container div" inside
|
||||
* this document.
|
||||
* Any selector coming before the || separator *MUST* match a frame node.
|
||||
* @param {String} superSelector.
|
||||
* @return {DOMNode} The node, or null if not found.
|
||||
*/
|
||||
function superQuerySelector(superSelector, root=content.document) {
|
||||
let frameIndex = superSelector.indexOf("||");
|
||||
if (frameIndex === -1) {
|
||||
return root.querySelector(superSelector);
|
||||
} else {
|
||||
let rootSelector = superSelector.substring(0, frameIndex).trim();
|
||||
let childSelector = superSelector.substring(frameIndex+2).trim();
|
||||
root = root.querySelector(rootSelector);
|
||||
if (!root || !root.contentWindow) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return superQuerySelector(childSelector, root.contentWindow.document);
|
||||
}
|
||||
}
|
||||
|
||||
let dumpn = msg => dump(msg + "\n");
|
@ -7,6 +7,7 @@
|
||||
const Cu = Components.utils;
|
||||
const Ci = Components.interfaces;
|
||||
const Cc = Components.classes;
|
||||
const CC = Components.Constructor;
|
||||
|
||||
// Services.prefs.setBoolPref("devtools.debugger.log", true);
|
||||
// SimpleTest.registerCleanupFunction(() => {
|
||||
@ -16,9 +17,8 @@ const Cc = Components.classes;
|
||||
// Uncomment this pref to dump all devtools emitted events to the console.
|
||||
// Services.prefs.setBoolPref("devtools.dump.emit", true);
|
||||
|
||||
const TEST_URL_ROOT = "http://example.com/browser/browser/devtools/inspector/test/";
|
||||
const ROOT_TEST_DIR = getRootDirectory(gTestPath);
|
||||
const FRAME_SCRIPT_URL = ROOT_TEST_DIR + "doc_frame_script.js";
|
||||
let TEST_URL_ROOT = "http://example.com/browser/browser/devtools/inspector/test/";
|
||||
let ROOT_TEST_DIR = getRootDirectory(gTestPath);
|
||||
|
||||
// All test are asynchronous
|
||||
waitForExplicitFinish();
|
||||
@ -33,6 +33,9 @@ let promise = require("promise");
|
||||
let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
|
||||
Services.scriptloader.loadSubScript(testDir + "../../../commandline/test/helpers.js", this);
|
||||
|
||||
// Import helpers registering the test-actor in remote targets
|
||||
Services.scriptloader.loadSubScript(testDir + "../../../shared/test/test-actor-registry.js", this);
|
||||
|
||||
DevToolsUtils.testing = true;
|
||||
registerCleanupFunction(() => {
|
||||
DevToolsUtils.testing = false;
|
||||
@ -71,9 +74,6 @@ let addTab = Task.async(function* (url) {
|
||||
let tab = gBrowser.selectedTab = gBrowser.addTab(url);
|
||||
let browser = tab.linkedBrowser;
|
||||
|
||||
info("Loading the helper frame script " + FRAME_SCRIPT_URL);
|
||||
browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
|
||||
|
||||
yield once(browser, "load", true);
|
||||
info("URL '" + url + "' loading complete");
|
||||
|
||||
@ -162,10 +162,11 @@ let selectNode = Task.async(function*(selector, inspector, reason="test") {
|
||||
*/
|
||||
let openInspectorForURL = Task.async(function*(url, hostType) {
|
||||
let tab = yield addTab(url);
|
||||
let { inspector, toolbox } = yield openInspector(null, hostType);
|
||||
return { tab, inspector, toolbox };
|
||||
let { inspector, toolbox, testActor } = yield openInspector(null, hostType);
|
||||
return { tab, inspector, toolbox, testActor };
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Open the toolbox, with the inspector tool visible.
|
||||
* @param {Function} cb Optional callback, if you don't want to use the returned
|
||||
@ -177,43 +178,30 @@ let openInspector = Task.async(function*(cb, hostType) {
|
||||
info("Opening the inspector");
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
|
||||
let inspector, toolbox;
|
||||
|
||||
// Checking if the toolbox and the inspector are already loaded
|
||||
// The inspector-updated event should only be waited for if the inspector
|
||||
// isn't loaded yet
|
||||
toolbox = gDevTools.getToolbox(target);
|
||||
let toolbox = gDevTools.getToolbox(target);
|
||||
if (toolbox) {
|
||||
inspector = toolbox.getPanel("inspector");
|
||||
if (inspector) {
|
||||
if (toolbox.getPanel("inspector")) {
|
||||
info("Toolbox and inspector already open");
|
||||
if (cb) {
|
||||
return cb(inspector, toolbox);
|
||||
} else {
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector
|
||||
};
|
||||
}
|
||||
throw new Error("Inspector is already opened, please use getActiveInspector");
|
||||
}
|
||||
}
|
||||
|
||||
info("Opening the toolbox");
|
||||
toolbox = yield gDevTools.showToolbox(target, "inspector", hostType);
|
||||
yield waitForToolboxFrameFocus(toolbox);
|
||||
inspector = toolbox.getPanel("inspector");
|
||||
let inspector = toolbox.getPanel("inspector");
|
||||
|
||||
info("Waiting for the inspector to update");
|
||||
yield inspector.once("inspector-updated");
|
||||
|
||||
if (cb) {
|
||||
return cb(inspector, toolbox);
|
||||
} else {
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector
|
||||
};
|
||||
}
|
||||
yield registerTestActor(toolbox.target.client);
|
||||
let testActor = yield getTestActor(toolbox);
|
||||
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector,
|
||||
testActor: testActor
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
@ -268,196 +256,6 @@ let getNodeFrontInFrame = Task.async(function*(selector, frameSelector,
|
||||
return inspector.walker.querySelector(nodes[0], selector);
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the current rect of the border region of the box-model highlighter
|
||||
*/
|
||||
let getSimpleBorderRect = Task.async(function*(toolbox) {
|
||||
let {border} = yield getBoxModelStatus(toolbox);
|
||||
let {p1, p2, p3, p4} = border.points;
|
||||
|
||||
return {
|
||||
top: p1.y,
|
||||
left: p1.x,
|
||||
width: p2.x - p1.x,
|
||||
height: p4.y - p1.y
|
||||
};
|
||||
});
|
||||
|
||||
function getHighlighterActorID(highlighter) {
|
||||
let actorID = highlighter.actorID;
|
||||
let connPrefix = actorID.substring(0, actorID.indexOf(highlighter.typeName));
|
||||
|
||||
return {actorID, connPrefix};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current positions and visibility of the various box-model highlighter
|
||||
* elements.
|
||||
*/
|
||||
let getBoxModelStatus = Task.async(function*(toolbox) {
|
||||
let isVisible = yield isHighlighting(toolbox);
|
||||
|
||||
let ret = {
|
||||
visible: isVisible
|
||||
};
|
||||
|
||||
for (let region of ["margin", "border", "padding", "content"]) {
|
||||
let points = yield getPointsForRegion(region, toolbox);
|
||||
let visible = yield isRegionHidden(region, toolbox);
|
||||
ret[region] = {points, visible};
|
||||
}
|
||||
|
||||
ret.guides = {};
|
||||
for (let guide of ["top", "right", "bottom", "left"]) {
|
||||
ret.guides[guide] = yield getGuideStatus(guide, toolbox);
|
||||
}
|
||||
|
||||
return ret;
|
||||
});
|
||||
|
||||
/**
|
||||
* Get data about one of the toolbox box-model highlighter's guides.
|
||||
* @param {String} location One of top, right, bottom, left.
|
||||
* @param {Toolbox} toolbox The toolbox instance, used to retrieve the highlighter.
|
||||
* @return {Object} The returned object has the following form:
|
||||
* - visible {Boolean} Whether that guide is visible.
|
||||
* - x1/y1/x2/y2 {String} The <line>'s coordinates.
|
||||
*/
|
||||
let getGuideStatus = Task.async(function*(location, {highlighter}) {
|
||||
let id = "box-model-guide-" + location;
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter, id, "hidden");
|
||||
let x1 = yield getHighlighterNodeAttribute(highlighter, id, "x1");
|
||||
let y1 = yield getHighlighterNodeAttribute(highlighter, id, "y1");
|
||||
let x2 = yield getHighlighterNodeAttribute(highlighter, id, "x2");
|
||||
let y2 = yield getHighlighterNodeAttribute(highlighter, id, "y2");
|
||||
|
||||
return {
|
||||
visible: !hidden,
|
||||
x1: x1,
|
||||
y1: y1,
|
||||
x2: x2,
|
||||
y2: y2
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the coordinates of the rectangle that is defined by the 4 guides displayed
|
||||
* in the toolbox box-model highlighter.
|
||||
* @param {Toolbox} toolbox The toolbox instance, used to retrieve the highlighter.
|
||||
* @return {Object} Null if at least one guide is hidden. Otherwise an object
|
||||
* with p1, p2, p3, p4 properties being {x, y} objects.
|
||||
*/
|
||||
let getGuidesRectangle = Task.async(function*(toolbox) {
|
||||
let tGuide = yield getGuideStatus("top", toolbox);
|
||||
let rGuide = yield getGuideStatus("right", toolbox);
|
||||
let bGuide = yield getGuideStatus("bottom", toolbox);
|
||||
let lGuide = yield getGuideStatus("left", toolbox);
|
||||
|
||||
if (!tGuide.visible || !rGuide.visible || !bGuide.visible || !lGuide.visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
p1: {x: lGuide.x1, y: tGuide.y1},
|
||||
p2: {x: rGuide.x1, y: tGuide. y1},
|
||||
p3: {x: rGuide.x1, y: bGuide.y1},
|
||||
p4: {x: lGuide.x1, y: bGuide.y1}
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the coordinate (points defined by the d attribute) from one of the path
|
||||
* elements in the box model highlighter.
|
||||
*/
|
||||
let getPointsForRegion = Task.async(function*(region, toolbox) {
|
||||
let d = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-" + region, "d");
|
||||
let polygons = d.match(/M[^M]+/g);
|
||||
if (!polygons) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let points = polygons[0].trim().split(" ").map(i => {
|
||||
return i.replace(/M|L/, "").split(",")
|
||||
});
|
||||
|
||||
return {
|
||||
p1: {
|
||||
x: parseFloat(points[0][0]),
|
||||
y: parseFloat(points[0][1])
|
||||
},
|
||||
p2: {
|
||||
x: parseFloat(points[1][0]),
|
||||
y: parseFloat(points[1][1])
|
||||
},
|
||||
p3: {
|
||||
x: parseFloat(points[2][0]),
|
||||
y: parseFloat(points[2][1])
|
||||
},
|
||||
p4: {
|
||||
x: parseFloat(points[3][0]),
|
||||
y: parseFloat(points[3][1])
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Is a given region path element of the box-model highlighter currently
|
||||
* hidden?
|
||||
*/
|
||||
let isRegionHidden = Task.async(function*(region, toolbox) {
|
||||
let value = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-" + region, "hidden");
|
||||
return value !== null;
|
||||
});
|
||||
|
||||
/**
|
||||
* Is the highlighter currently visible on the page?
|
||||
*/
|
||||
let isHighlighting = Task.async(function*(toolbox) {
|
||||
let value = yield getHighlighterNodeAttribute(toolbox.highlighter,
|
||||
"box-model-elements", "hidden");
|
||||
return value === null;
|
||||
});
|
||||
|
||||
let getHighlitNode = Task.async(function*(toolbox) {
|
||||
let {visible, content} = yield getBoxModelStatus(toolbox);
|
||||
let points = content.points;
|
||||
if (visible) {
|
||||
let x = (points.p1.x + points.p2.x + points.p3.x + points.p4.x) / 4;
|
||||
let y = (points.p1.y + points.p2.y + points.p3.y + points.p4.y) / 4;
|
||||
|
||||
let {objects} = yield executeInContent("Test:ElementFromPoint", {x, y});
|
||||
return objects.element;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Assert that the box-model highlighter's current position corresponds to the
|
||||
* given node boxquads.
|
||||
* @param {String} selector The selector for the node to get the boxQuads from
|
||||
* @param {String} prefix An optional prefix for logging information to the
|
||||
* console.
|
||||
*/
|
||||
let isNodeCorrectlyHighlighted = Task.async(function*(selector, toolbox, prefix="") {
|
||||
let boxModel = yield getBoxModelStatus(toolbox);
|
||||
let {data: regions} = yield executeInContent("Test:GetAllAdjustedQuads",
|
||||
{selector});
|
||||
|
||||
for (let boxType of ["content", "padding", "border", "margin"]) {
|
||||
let [quad] = regions[boxType];
|
||||
for (let point in boxModel[boxType].points) {
|
||||
is(boxModel[boxType].points[point].x, quad[point].x,
|
||||
"Node " + selector + " " + boxType + " point " + point +
|
||||
" x coordinate is correct");
|
||||
is(boxModel[boxType].points[point].y, quad[point].y,
|
||||
"Node " + selector + " " + boxType + " point " + point +
|
||||
" y coordinate is correct");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function synthesizeKeyFromKeyTag(aKeyId, aDocument = null) {
|
||||
let document = aDocument || document;
|
||||
let key = document.getElementById(aKeyId);
|
||||
@ -571,90 +369,6 @@ let clickContainer = Task.async(function*(selector, inspector) {
|
||||
return updated;
|
||||
});
|
||||
|
||||
/**
|
||||
* Zoom the current page to a given level.
|
||||
* @param {Number} level The new zoom level.
|
||||
* @param {String} actorID Optional highlighter actor ID. If provided, the
|
||||
* returned promise will only resolve when the highlighter has updated to the
|
||||
* new zoom level.
|
||||
* @return {Promise}
|
||||
*/
|
||||
let zoomPageTo = Task.async(function*(level, actorID, connPrefix) {
|
||||
yield executeInContent("Test:ChangeZoomLevel",
|
||||
{level, actorID, connPrefix});
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the value of an attribute on one of the highlighter's node.
|
||||
* @param {Front} highlighter The front of the highlighter.
|
||||
* @param {String} nodeID The Id of the node in the highlighter.
|
||||
* @param {String} name The name of the attribute.
|
||||
* @return {String} value
|
||||
*/
|
||||
let getHighlighterNodeAttribute = Task.async(function*(highlighter, nodeID, name) {
|
||||
let {actorID, connPrefix} = getHighlighterActorID(highlighter);
|
||||
let {data: value} = yield executeInContent("Test:GetHighlighterAttribute",
|
||||
{nodeID, name, actorID, connPrefix});
|
||||
return value;
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the "d" attribute value for one of the box-model highlighter's region
|
||||
* <path> elements, and parse it to a list of points.
|
||||
* @param {String} region The box model region name.
|
||||
* @param {Front} highlighter The front of the highlighter.
|
||||
* @return {Object} The object returned has the following form:
|
||||
* - d {String} the d attribute value
|
||||
* - points {Array} an array of all the polygons defined by the path. Each box
|
||||
* is itself an Array of points, themselves being [x,y] coordinates arrays.
|
||||
*/
|
||||
let getHighlighterRegionPath = Task.async(function*(region, highlighter) {
|
||||
let d = yield getHighlighterNodeAttribute(highlighter, "box-model-" + region, "d");
|
||||
if (!d) {
|
||||
return {d: null};
|
||||
}
|
||||
|
||||
let polygons = d.match(/M[^M]+/g);
|
||||
if (!polygons) {
|
||||
return {d};
|
||||
}
|
||||
|
||||
let points = [];
|
||||
for (let polygon of polygons) {
|
||||
points.push(polygon.trim().split(" ").map(i => {
|
||||
return i.replace(/M|L/, "").split(",")
|
||||
}));
|
||||
}
|
||||
|
||||
return {d, points};
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the textContent value of one of the highlighter's node.
|
||||
* @param {Front} highlighter The front of the highlighter.
|
||||
* @param {String} nodeID The Id of the node in the highlighter.
|
||||
* @return {String} value
|
||||
*/
|
||||
let getHighlighterNodeTextContent = Task.async(function*(highlighter, nodeID) {
|
||||
let {actorID, connPrefix} = getHighlighterActorID(highlighter);
|
||||
let {data: value} = yield executeInContent("Test:GetHighlighterTextContent",
|
||||
{nodeID, actorID, connPrefix});
|
||||
return value;
|
||||
});
|
||||
|
||||
/**
|
||||
* Subscribe to a given highlighter event and return a promise that resolves
|
||||
* when the event is received.
|
||||
* @param {String} event The name of the highlighter event to listen to.
|
||||
* @param {Front} highlighter The front of the highlighter.
|
||||
* @return {Promise}
|
||||
*/
|
||||
function waitForHighlighterEvent(event, highlighter) {
|
||||
let {actorID, connPrefix} = getHighlighterActorID(highlighter);
|
||||
return executeInContent("Test:WaitForHighlighterEvent",
|
||||
{event, actorID, connPrefix});
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulate the mouse leaving the markup-view area
|
||||
* @param {InspectorPanel} inspector The instance of InspectorPanel currently loaded in the toolbox
|
||||
@ -665,7 +379,7 @@ function mouseLeaveMarkupView(inspector) {
|
||||
let def = promise.defer();
|
||||
|
||||
// Find another element to mouseover over in order to leave the markup-view
|
||||
let btn = inspector.toolbox.doc.querySelector(".toolbox-dock-button");
|
||||
let btn = inspector.toolbox.doc.querySelector("#toolbox-controls");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(btn, {type: "mousemove"},
|
||||
inspector.toolbox.doc.defaultView);
|
||||
@ -705,29 +419,6 @@ function once(target, eventName, useCapture=false) {
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for a content -> chrome message on the message manager (the window
|
||||
* messagemanager is used).
|
||||
* @param {String} name The message name
|
||||
* @return {Promise} A promise that resolves to the response data when the
|
||||
* message has been received
|
||||
*/
|
||||
function waitForContentMessage(name) {
|
||||
let mm = gBrowser.selectedBrowser.messageManager;
|
||||
|
||||
let def = promise.defer();
|
||||
mm.addMessageListener(name, function onMessage(msg) {
|
||||
mm.removeMessageListener(name, onMessage);
|
||||
def.resolve(msg);
|
||||
});
|
||||
return def.promise;
|
||||
}
|
||||
|
||||
function wait(ms) {
|
||||
let def = promise.defer();
|
||||
setTimeout(def.resolve, ms);
|
||||
return def.promise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatch the copy event on the given element
|
||||
@ -738,29 +429,6 @@ function fireCopyEvent(element) {
|
||||
element.dispatchEvent(evt);
|
||||
}
|
||||
|
||||
/**
|
||||
* Send an async message to the frame script (chrome -> content) and wait for a
|
||||
* response message with the same name (content -> chrome).
|
||||
* @param {String} name The message name. Should be one of the messages defined
|
||||
* in doc_frame_script.js
|
||||
* @param {Object} data Optional data to send along
|
||||
* @param {Object} objects Optional CPOW objects to send along
|
||||
* @param {Boolean} expectResponse If set to false, don't wait for a response
|
||||
* with the same name from the content script. Defaults to true.
|
||||
* @return {Promise} Resolves to the response data if a response is expected,
|
||||
* immediately resolves otherwise
|
||||
*/
|
||||
function executeInContent(name, data={}, objects={}, expectResponse=true) {
|
||||
let mm = gBrowser.selectedBrowser.messageManager;
|
||||
|
||||
mm.sendAsyncMessage(name, data, objects);
|
||||
if (expectResponse) {
|
||||
return waitForContentMessage(name);
|
||||
} else {
|
||||
return promise.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Undo the last markup-view action and wait for the corresponding mutation to
|
||||
* occur
|
||||
|
@ -16,6 +16,8 @@ support-files =
|
||||
html-mdn-css-no-syntax.html
|
||||
html-mdn-css-syntax-old-style.html
|
||||
leakhunt.js
|
||||
test-actor.js
|
||||
test-actor-registry.js
|
||||
|
||||
[browser_css_color.js]
|
||||
[browser_cubic-bezier-01.js]
|
||||
|
122
browser/devtools/shared/test/test-actor-registry.js
Normal file
122
browser/devtools/shared/test/test-actor-registry.js
Normal file
@ -0,0 +1,122 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
(function (exports) {
|
||||
|
||||
let Cu = Components.utils;
|
||||
let Ci = Components.interfaces;
|
||||
let Cc = Components.classes;
|
||||
let CC = Components.Constructor;
|
||||
|
||||
let { require } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
|
||||
let { NetUtil } = Cu.import("resource://gre/modules/NetUtil.jsm", {});
|
||||
let promise = require("promise");
|
||||
|
||||
let TEST_URL_ROOT = "http://example.com/browser/browser/devtools/shared/test/";
|
||||
let ACTOR_URL = TEST_URL_ROOT + "test-actor.js";
|
||||
|
||||
// Register a test actor that can operate on the remote document
|
||||
exports.registerTestActor = Task.async(function* (client) {
|
||||
// First, instanciate ActorRegistryFront to be able to dynamically
|
||||
// register an actor
|
||||
let deferred = promise.defer();
|
||||
client.listTabs(deferred.resolve);
|
||||
let response = yield deferred.promise;
|
||||
let { ActorRegistryFront } = require("devtools/server/actors/actor-registry");
|
||||
let registryFront = ActorRegistryFront(client, response);
|
||||
|
||||
// Then ask to register our test-actor to retrieve its front
|
||||
let options = {
|
||||
type: { tab: true },
|
||||
constructor: "TestActor",
|
||||
prefix: "testActor"
|
||||
};
|
||||
let testActorFront = yield registryFront.registerActor(ACTOR_URL, options);
|
||||
return testActorFront;
|
||||
});
|
||||
|
||||
// Load the test actor in a custom sandbox
|
||||
// as we can't use SDK module loader with URIs
|
||||
let loadFront = Task.async(function* () {
|
||||
let sourceText = yield request(ACTOR_URL);
|
||||
const principal = CC("@mozilla.org/systemprincipal;1", "nsIPrincipal")();
|
||||
const sandbox = Cu.Sandbox(principal);
|
||||
const exports = sandbox.exports = {};
|
||||
sandbox.require = require;
|
||||
Cu.evalInSandbox(sourceText, sandbox, "1.8", ACTOR_URL, 1);
|
||||
return sandbox.exports;
|
||||
});
|
||||
|
||||
// Ensure fetching a live TabActor form for the targeted app
|
||||
// (helps fetching the test actor registered dynamically)
|
||||
let getUpdatedForm = function (client, tab) {
|
||||
return client.getTab({tab: tab})
|
||||
.then(response => response.tab);
|
||||
};
|
||||
|
||||
// Spawn an instance of the test actor for the given toolbox
|
||||
exports.getTestActor = Task.async(function* (toolbox) {
|
||||
let client = toolbox.target.client;
|
||||
return getTestActor(client, toolbox.target.tab, toolbox);
|
||||
});
|
||||
|
||||
|
||||
// Sometimes, we need the test actor before opening or without a toolbox
|
||||
// then just create a front for the given `tab`
|
||||
exports.getTestActorWithoutToolbox = Task.async(function* (tab) {
|
||||
let { DebuggerServer } = require("devtools/server/main");
|
||||
let { DebuggerClient } = require("devtools/toolkit/client/main");
|
||||
|
||||
// We need to spawn a client instance,
|
||||
// but for that we have to first ensure a server is running
|
||||
if (!DebuggerServer.initialized) {
|
||||
DebuggerServer.init();
|
||||
DebuggerServer.addBrowserActors();
|
||||
}
|
||||
let client = new DebuggerClient(DebuggerServer.connectPipe());
|
||||
|
||||
let deferred = promise.defer();
|
||||
client.connect(deferred.resolve);
|
||||
yield deferred.promise;
|
||||
|
||||
return getTestActor(client, tab);
|
||||
});
|
||||
|
||||
// Fetch the content of a URI
|
||||
let request = function (uri) {
|
||||
let deferred = promise.defer();
|
||||
try {
|
||||
uri = Services.io.newURI(uri, null, null);
|
||||
} catch (e) {
|
||||
deferred.reject(e);
|
||||
}
|
||||
|
||||
NetUtil.asyncFetch(uri, (stream, status, req) => {
|
||||
if (!Components.isSuccessCode(status)) {
|
||||
deferred.reject(new Error("Request failed with status code = "
|
||||
+ status
|
||||
+ " after NetUtil.asyncFetch for url = "
|
||||
+ uri.spec));
|
||||
return;
|
||||
}
|
||||
|
||||
let source = NetUtil.readInputStreamToString(stream, stream.available());
|
||||
stream.close();
|
||||
deferred.resolve(source);
|
||||
});
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
let getTestActor = Task.async(function* (client, tab, toolbox) {
|
||||
// We may have to update the form in order to get the dynamically registered
|
||||
// test actor.
|
||||
let form = yield getUpdatedForm(client, tab);
|
||||
|
||||
let { TestActorFront } = yield loadFront();
|
||||
|
||||
return new TestActorFront(client, form, toolbox);
|
||||
});
|
||||
|
||||
})(this);
|
767
browser/devtools/shared/test/test-actor.js
Normal file
767
browser/devtools/shared/test/test-actor.js
Normal file
@ -0,0 +1,767 @@
|
||||
/* 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/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// A helper actor for brower/devtools/inspector tests.
|
||||
|
||||
let { Cc, Ci, Cu, Cr } = require("chrome");
|
||||
const LayoutHelpers = require("devtools/toolkit/layout-helpers");
|
||||
const promise = require("promise");
|
||||
const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
|
||||
let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
|
||||
let loader = Cc["@mozilla.org/moz/jssubscript-loader;1"]
|
||||
.getService(Ci.mozIJSSubScriptLoader);
|
||||
let EventUtils = {};
|
||||
loader.loadSubScript("chrome://marionette/content/EventUtils.js", EventUtils);
|
||||
|
||||
const protocol = require("devtools/server/protocol");
|
||||
const {Arg, Option, method, RetVal, types} = protocol;
|
||||
|
||||
let dumpn = msg => {
|
||||
dump(msg + "\n");
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the instance of CanvasFrameAnonymousContentHelper used by a given
|
||||
* highlighter actor.
|
||||
* The instance provides methods to get/set attributes/text/style on nodes of
|
||||
* the highlighter, inserted into the nsCanvasFrame.
|
||||
* @see /toolkit/devtools/server/actors/highlighter.js
|
||||
* @param {String} actorID
|
||||
*/
|
||||
function getHighlighterCanvasFrameHelper(conn, actorID) {
|
||||
let actor = conn.getActor(actorID);
|
||||
if (actor && actor._highlighter) {
|
||||
return actor._highlighter.markup;
|
||||
}
|
||||
}
|
||||
|
||||
const TestActor = exports.TestActor = protocol.ActorClass({
|
||||
typeName: "testActor",
|
||||
|
||||
initialize: function(conn, tabActor, options) {
|
||||
this.conn = conn;
|
||||
this.tabActor = tabActor;
|
||||
},
|
||||
|
||||
get content() {
|
||||
return this.tabActor.window;
|
||||
},
|
||||
|
||||
/**
|
||||
* Helper to retrieve a DOM element.
|
||||
* @param {string | array} selector Either a regular selector string
|
||||
* or a selector array. If an array, each item, except the last one
|
||||
* are considered matching an iframe, so that we can query element
|
||||
* within deep iframes.
|
||||
*/
|
||||
_querySelector: function (selector) {
|
||||
let document = this.content.document;
|
||||
if (Array.isArray(selector)) {
|
||||
let fullSelector = selector.join(" >> ");
|
||||
while(selector.length > 1) {
|
||||
let str = selector.shift();
|
||||
let iframe = document.querySelector(str);
|
||||
if (!iframe) {
|
||||
throw new Error("Unable to find element with selector \"" + str + "\"" +
|
||||
" (full selector:" + fullSelector + ")");
|
||||
}
|
||||
if (!iframe.contentWindow) {
|
||||
throw new Error("Iframe selector doesn't target an iframe \"" + str + "\"" +
|
||||
" (full selector:" + fullSelector + ")");
|
||||
}
|
||||
document = iframe.contentWindow.document;
|
||||
}
|
||||
selector = selector.shift();
|
||||
}
|
||||
let node = document.querySelector(selector);
|
||||
if (!node) {
|
||||
throw new Error("Unable to find element with selector \"" + selector + "\"");
|
||||
}
|
||||
return node;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get a value for a given attribute name, on one of the elements of the box
|
||||
* model highlighter, given its ID.
|
||||
* @param {Object} msg The msg.data part expects the following properties
|
||||
* - {String} nodeID The full ID of the element to get the attribute for
|
||||
* - {String} name The name of the attribute to get
|
||||
* - {String} actorID The highlighter actor ID
|
||||
* @return {String} The value, if found, null otherwise
|
||||
*/
|
||||
getHighlighterAttribute: protocol.method(function (nodeID, name, actorID) {
|
||||
let helper = getHighlighterCanvasFrameHelper(this.conn, actorID);
|
||||
if (helper) {
|
||||
return helper.getAttributeForElement(nodeID, name);
|
||||
}
|
||||
}, {
|
||||
request: {
|
||||
nodeID: Arg(0, "string"),
|
||||
name: Arg(1, "string"),
|
||||
actorID: Arg(2, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("string")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the textcontent of one of the elements of the box model highlighter,
|
||||
* given its ID.
|
||||
* @param {String} nodeID The full ID of the element to get the attribute for
|
||||
* @param {String} actorID The highlighter actor ID
|
||||
* @return {String} The textcontent value
|
||||
*/
|
||||
getHighlighterNodeTextContent: protocol.method(function (nodeID, actorID) {
|
||||
let value;
|
||||
let helper = getHighlighterCanvasFrameHelper(this.conn, actorID);
|
||||
if (helper) {
|
||||
value = helper.getTextContentForElement(nodeID);
|
||||
}
|
||||
return value;
|
||||
}, {
|
||||
request: {
|
||||
nodeID: Arg(0, "string"),
|
||||
actorID: Arg(1, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("string")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the number of box-model highlighters created by the SelectorHighlighter
|
||||
* @param {String} actorID The highlighter actor ID
|
||||
* @return {Number} The number of box-model highlighters created, or null if the
|
||||
* SelectorHighlighter was not found.
|
||||
*/
|
||||
getSelectorHighlighterBoxNb: protocol.method(function (actorID) {
|
||||
let highlighter = this.conn.getActor(actorID);
|
||||
let {_highlighter: h} = highlighter;
|
||||
if (!h || !h._highlighters) {
|
||||
return null;
|
||||
} else {
|
||||
return h._highlighters.length;
|
||||
}
|
||||
}, {
|
||||
request: {
|
||||
highlighter: Arg(0, "string"),
|
||||
},
|
||||
response: {
|
||||
value: RetVal("number")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Subscribe to the box-model highlighter's update event, modify an attribute of
|
||||
* the currently highlighted node and send a message when the highlighter has
|
||||
* updated.
|
||||
* @param {String} the name of the attribute to be changed
|
||||
* @param {String} the new value for the attribute
|
||||
* @param {String} actorID The highlighter actor ID
|
||||
*/
|
||||
changeHighlightedNodeWaitForUpdate: protocol.method(function (name, value, actorID) {
|
||||
let deferred = promise.defer();
|
||||
|
||||
let highlighter = this.conn.getActor(actorID);
|
||||
let {_highlighter: h} = highlighter;
|
||||
|
||||
h.once("updated", () => {
|
||||
deferred.resolve();
|
||||
});
|
||||
|
||||
h.currentNode.setAttribute(name, value);
|
||||
|
||||
return deferred.promise;
|
||||
}, {
|
||||
request: {
|
||||
name: Arg(0, "string"),
|
||||
value: Arg(1, "string"),
|
||||
actorID: Arg(2, "string")
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Subscribe to a given highlighter event and respond when the event is received.
|
||||
* @param {String} event The name of the highlighter event to listen to
|
||||
* @param {String} actorID The highlighter actor ID
|
||||
*/
|
||||
waitForHighlighterEvent: protocol.method(function (event, actorID) {
|
||||
let highlighter = this.conn.getActor(actorID);
|
||||
let {_highlighter: h} = highlighter;
|
||||
|
||||
return h.once(event);
|
||||
}, {
|
||||
request: {
|
||||
event: Arg(0, "string"),
|
||||
actorID: Arg(1, "string")
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Change the zoom level of the page.
|
||||
* Optionally subscribe to the box-model highlighter's update event and waiting
|
||||
* for it to refresh before responding.
|
||||
* @param {Number} level The new zoom level
|
||||
* @param {String} actorID Optional. The highlighter actor ID
|
||||
*/
|
||||
changeZoomLevel: protocol.method(function (level, actorID) {
|
||||
dumpn("Zooming page to " + level);
|
||||
let deferred = promise.defer();
|
||||
|
||||
if (actorID) {
|
||||
let actor = this.conn.getActor(actorID);
|
||||
let {_highlighter: h} = actor;
|
||||
h.once("updated", () => {
|
||||
deferred.resolve();
|
||||
});
|
||||
} else {
|
||||
deferred.resolve();
|
||||
}
|
||||
|
||||
let docShell = this.content.QueryInterface(Ci.nsIInterfaceRequestor)
|
||||
.getInterface(Ci.nsIWebNavigation)
|
||||
.QueryInterface(Ci.nsIDocShell);
|
||||
docShell.contentViewer.fullZoom = level;
|
||||
|
||||
return deferred.promise;
|
||||
}, {
|
||||
request: {
|
||||
level: Arg(0, "string"),
|
||||
actorID: Arg(1, "string"),
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
assertElementAtPoint: protocol.method(function (x, y, selector) {
|
||||
let helper = new LayoutHelpers(this.content);
|
||||
let elementAtPoint = helper.getElementFromPoint(this.content.document, x, y);
|
||||
if (!elementAtPoint) {
|
||||
throw new Error("Unable to find element at (" + x + ", " + y + ")");
|
||||
}
|
||||
let node = this._querySelector(selector);
|
||||
return node == elementAtPoint;
|
||||
}, {
|
||||
request: {
|
||||
x: Arg(0, "number"),
|
||||
y: Arg(1, "number"),
|
||||
selector: Arg(2, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("boolean")
|
||||
}
|
||||
}),
|
||||
|
||||
|
||||
/**
|
||||
* Get all box-model regions' adjusted boxquads for the given element
|
||||
* @param {String} selector The node selector to target a given element
|
||||
* @return {Object} An object with each property being a box-model region, each
|
||||
* of them being an object with the p1/p2/p3/p4 properties
|
||||
*/
|
||||
getAllAdjustedQuads: protocol.method(function(selector) {
|
||||
let regions = {};
|
||||
let helper = new LayoutHelpers(this.content);
|
||||
let node = this._querySelector(selector);
|
||||
for (let boxType of ["content", "padding", "border", "margin"]) {
|
||||
regions[boxType] = helper.getAdjustedQuads(node, boxType);
|
||||
}
|
||||
|
||||
return regions;
|
||||
}, {
|
||||
request: {
|
||||
selector: Arg(0, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("json")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Synthesize a mouse event on an element. This handler doesn't send a message
|
||||
* back. Consumers should listen to specific events on the inspector/highlighter
|
||||
* to know when the event got synthesized.
|
||||
* @param {String} selector The node selector to get the node target for the event
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @param {Boolean} center If set to true, x/y will be ignored and
|
||||
* synthesizeMouseAtCenter will be used instead
|
||||
* @param {Object} options Other event options
|
||||
*/
|
||||
synthesizeMouse: protocol.method(function({ selector, x, y, center, options }) {
|
||||
let node = this._querySelector(selector);
|
||||
|
||||
if (center) {
|
||||
EventUtils.synthesizeMouseAtCenter(node, options, node.ownerDocument.defaultView);
|
||||
} else {
|
||||
EventUtils.synthesizeMouse(node, x, y, options, node.ownerDocument.defaultView);
|
||||
}
|
||||
}, {
|
||||
request: {
|
||||
object: Arg(0, "json")
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Synthesize a key event for an element. This handler doesn't send a message
|
||||
* back. Consumers should listen to specific events on the inspector/highlighter
|
||||
* to know when the event got synthesized.
|
||||
*/
|
||||
synthesizeKey: protocol.method(function ({key, options, content}) {
|
||||
EventUtils.synthesizeKey(key, options, this.content);
|
||||
}, {
|
||||
request: {
|
||||
args: Arg(0, "json")
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Check that an element currently has a pseudo-class lock.
|
||||
* @param {String} selector The node selector to get the pseudo-class from
|
||||
* @param {String} pseudo The pseudoclass to check for
|
||||
* @return {Boolean}
|
||||
*/
|
||||
hasPseudoClassLock: protocol.method(function (selector, pseudo) {
|
||||
let node = this._querySelector(selector);
|
||||
return DOMUtils.hasPseudoClassLock(node, pseudo);
|
||||
}, {
|
||||
request: {
|
||||
selector: Arg(0, "string"),
|
||||
pseudo: Arg(1, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("boolean")
|
||||
}
|
||||
}),
|
||||
|
||||
loadAndWaitForCustomEvent: protocol.method(function (url) {
|
||||
let deferred = promise.defer();
|
||||
let self = this;
|
||||
// Wait for DOMWindowCreated first, as listening on the current outerwindow
|
||||
// doesn't allow receiving test-page-processing-done.
|
||||
this.tabActor.chromeEventHandler.addEventListener("DOMWindowCreated", function onWindowCreated() {
|
||||
self.tabActor.chromeEventHandler.removeEventListener("DOMWindowCreated", onWindowCreated);
|
||||
self.content.addEventListener("test-page-processing-done", function onEvent() {
|
||||
self.content.removeEventListener("test-page-processing-done", onEvent);
|
||||
deferred.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
this.content.location = url;
|
||||
return deferred.promise;
|
||||
}, {
|
||||
request: {
|
||||
url: Arg(0, "string")
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
hasNode: protocol.method(function (selector) {
|
||||
try {
|
||||
// _querySelector throws if the node doesn't exists
|
||||
this._querySelector(selector);
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
}, {
|
||||
request: {
|
||||
selector: Arg(0, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("boolean")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the bounding rect for a given DOM node once.
|
||||
* @param {String} selector selector identifier to select the DOM node
|
||||
* @return {json} the bounding rect info
|
||||
*/
|
||||
getBoundingClientRect: protocol.method(function (selector) {
|
||||
let node = this._querySelector(selector);
|
||||
return node.getBoundingClientRect();
|
||||
}, {
|
||||
request: {
|
||||
selector: Arg(0, "string"),
|
||||
},
|
||||
response: {
|
||||
value: RetVal("json")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Set a JS property on a DOM Node.
|
||||
* @param {String} selector The node selector
|
||||
* @param {String} attribute The attribute name
|
||||
* @param {String} value The attribute value
|
||||
*/
|
||||
setProperty: protocol.method(function (selector, property, value) {
|
||||
let node = this._querySelector(selector);
|
||||
node[property] = value;
|
||||
}, {
|
||||
request: {
|
||||
selector: Arg(0, "string"),
|
||||
property: Arg(1, "string"),
|
||||
value: Arg(2, "string")
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get a JS property on a DOM Node.
|
||||
* @param {String} selector The node selector
|
||||
* @param {String} attribute The attribute name
|
||||
* @return {String} value The attribute value
|
||||
*/
|
||||
getProperty: protocol.method(function (selector, property) {
|
||||
let node = this._querySelector(selector);
|
||||
return node[property];
|
||||
}, {
|
||||
request: {
|
||||
selector: Arg(0, "string"),
|
||||
property: Arg(1, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("string")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Reload an iframe and wait for its load event.
|
||||
* @param {String} selector The node selector
|
||||
*/
|
||||
reloadFrame: protocol.method(function (selector) {
|
||||
let node = this._querySelector(selector);
|
||||
|
||||
let deferred = promise.defer();
|
||||
|
||||
let onLoad = function () {
|
||||
node.removeEventListener("load", onLoad);
|
||||
deferred.resolve();
|
||||
};
|
||||
node.addEventListener("load", onLoad);
|
||||
|
||||
node.contentWindow.location.reload();
|
||||
return deferred.promise;
|
||||
}, {
|
||||
request: {
|
||||
selector: Arg(0, "string"),
|
||||
},
|
||||
response: {}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Evaluate a JS string in the context of the content document.
|
||||
* @param {String} js JS string to evaluate
|
||||
* @return {json} The evaluation result
|
||||
*/
|
||||
eval: protocol.method(function (js) {
|
||||
// We have to use a sandbox, as CSP prevent us from using eval on apps...
|
||||
let sb = Cu.Sandbox(this.content, { sandboxPrototype: this.content });
|
||||
return Cu.evalInSandbox(js, sb);
|
||||
}, {
|
||||
request: {
|
||||
js: Arg(0, "string")
|
||||
},
|
||||
response: {
|
||||
value: RetVal("nullable:json")
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Scrolls the window to a particular set of coordinates in the document, or
|
||||
* by the given amount if `relative` is set to `true`.
|
||||
*
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @param {Boolean} relative
|
||||
*
|
||||
* @return {Object} An object with x / y properties, representing the number
|
||||
* of pixels that the document has been scrolled horizontally and vertically.
|
||||
*/
|
||||
scrollWindow: protocol.method(function (x, y, relative) {
|
||||
if (isNaN(x) || isNaN(y)) {
|
||||
return {};
|
||||
}
|
||||
|
||||
let deferred = promise.defer();
|
||||
this.content.addEventListener("scroll", function onScroll(event) {
|
||||
this.removeEventListener("scroll", onScroll);
|
||||
|
||||
let data = {x: this.content.scrollX, y: this.content.scrollY};
|
||||
deferred.resolve(data);
|
||||
});
|
||||
|
||||
this.content[relative ? "scrollBy" : "scrollTo"](x, y);
|
||||
|
||||
return deferred.promise;
|
||||
}, {
|
||||
request: {
|
||||
x: Arg(0, "number"),
|
||||
y: Arg(1, "number"),
|
||||
relative: Arg(2, "nullable:boolean"),
|
||||
},
|
||||
response: {
|
||||
value: RetVal("json")
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
const TestActorFront = exports.TestActorFront = protocol.FrontClass(TestActor, {
|
||||
initialize: function(client, { testActor }, toolbox) {
|
||||
protocol.Front.prototype.initialize.call(this, client, { actor: testActor });
|
||||
this.manage(this);
|
||||
this.toolbox = toolbox;
|
||||
},
|
||||
|
||||
/**
|
||||
* Zoom the current page to a given level.
|
||||
* @param {Number} level The new zoom level.
|
||||
* @return {Promise} The returned promise will only resolve when the
|
||||
* highlighter has updated to the new zoom level.
|
||||
*/
|
||||
zoomPageTo: function(level) {
|
||||
return this.changeZoomLevel(level, this.toolbox.highlighter.actorID);
|
||||
},
|
||||
|
||||
changeHighlightedNodeWaitForUpdate: protocol.custom(function(name, value, highlighter) {
|
||||
return this._changeHighlightedNodeWaitForUpdate(name, value, (highlighter || this.toolbox.highlighter).actorID);
|
||||
}, {
|
||||
impl: "_changeHighlightedNodeWaitForUpdate"
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the value of an attribute on one of the highlighter's node.
|
||||
* @param {String} nodeID The Id of the node in the highlighter.
|
||||
* @param {String} name The name of the attribute.
|
||||
* @param {Object} highlighter Optional custom highlither to target
|
||||
* @return {String} value
|
||||
*/
|
||||
getHighlighterNodeAttribute: function(nodeID, name, highlighter) {
|
||||
return this.getHighlighterAttribute(nodeID, name, (highlighter || this.toolbox.highlighter).actorID);
|
||||
},
|
||||
|
||||
getHighlighterNodeTextContent: protocol.custom(function(nodeID, highlighter) {
|
||||
return this._getHighlighterNodeTextContent(nodeID, (highlighter || this.toolbox.highlighter).actorID);
|
||||
}, {
|
||||
impl: "_getHighlighterNodeTextContent"
|
||||
}),
|
||||
|
||||
/**
|
||||
* Is the highlighter currently visible on the page?
|
||||
*/
|
||||
isHighlighting: function() {
|
||||
return this.getHighlighterNodeAttribute("box-model-elements", "hidden")
|
||||
.then(value => value === null);
|
||||
},
|
||||
|
||||
assertHighlightedNode: Task.async(function* (selector) {
|
||||
let {visible, content} = yield this._getBoxModelStatus();
|
||||
let points = content.points;
|
||||
if (visible) {
|
||||
let x = (points.p1.x + points.p2.x + points.p3.x + points.p4.x) / 4;
|
||||
let y = (points.p1.y + points.p2.y + points.p3.y + points.p4.y) / 4;
|
||||
|
||||
return this.assertElementAtPoint(x, y, selector);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Assert that the box-model highlighter's current position corresponds to the
|
||||
* given node boxquads.
|
||||
* @param {String} selector The node selector to get the boxQuads from
|
||||
* @param {Function} is assertion function to call for equality checks
|
||||
* @param {String} prefix An optional prefix for logging information to the
|
||||
* console.
|
||||
*/
|
||||
isNodeCorrectlyHighlighted: Task.async(function*(selector, is, prefix="") {
|
||||
prefix += (prefix ? " " : "") + selector + " ";
|
||||
|
||||
let boxModel = yield this._getBoxModelStatus();
|
||||
let regions = yield this.getAllAdjustedQuads(selector);
|
||||
|
||||
for (let boxType of ["content", "padding", "border", "margin"]) {
|
||||
let [quad] = regions[boxType];
|
||||
for (let point in boxModel[boxType].points) {
|
||||
is(boxModel[boxType].points[point].x, quad[point].x,
|
||||
prefix + boxType + " point " + point + " x coordinate is correct");
|
||||
is(boxModel[boxType].points[point].y, quad[point].y,
|
||||
prefix + boxType + " point " + point + " y coordinate is correct");
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the current rect of the border region of the box-model highlighter
|
||||
*/
|
||||
getSimpleBorderRect: Task.async(function*(toolbox) {
|
||||
let {border} = yield this._getBoxModelStatus(toolbox);
|
||||
let {p1, p2, p3, p4} = border.points;
|
||||
|
||||
return {
|
||||
top: p1.y,
|
||||
left: p1.x,
|
||||
width: p2.x - p1.x,
|
||||
height: p4.y - p1.y
|
||||
};
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the current positions and visibility of the various box-model highlighter
|
||||
* elements.
|
||||
*/
|
||||
_getBoxModelStatus: Task.async(function*() {
|
||||
let isVisible = yield this.isHighlighting();
|
||||
|
||||
let ret = {
|
||||
visible: isVisible
|
||||
};
|
||||
|
||||
for (let region of ["margin", "border", "padding", "content"]) {
|
||||
let points = yield this._getPointsForRegion(region);
|
||||
let visible = yield this._isRegionHidden(region);
|
||||
ret[region] = {points, visible};
|
||||
}
|
||||
|
||||
ret.guides = {};
|
||||
for (let guide of ["top", "right", "bottom", "left"]) {
|
||||
ret.guides[guide] = yield this._getGuideStatus(guide);
|
||||
}
|
||||
|
||||
return ret;
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the coordinate (points attribute) from one of the polygon elements in the
|
||||
* box model highlighter.
|
||||
*/
|
||||
_getPointsForRegion: Task.async(function*(region) {
|
||||
let d = yield this.getHighlighterNodeAttribute("box-model-" + region, "d");
|
||||
|
||||
let polygons = d.match(/M[^M]+/g);
|
||||
if (!polygons) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let points = polygons[0].trim().split(" ").map(i => {
|
||||
return i.replace(/M|L/, "").split(",")
|
||||
});
|
||||
|
||||
return {
|
||||
p1: {
|
||||
x: parseFloat(points[0][0]),
|
||||
y: parseFloat(points[0][1])
|
||||
},
|
||||
p2: {
|
||||
x: parseFloat(points[1][0]),
|
||||
y: parseFloat(points[1][1])
|
||||
},
|
||||
p3: {
|
||||
x: parseFloat(points[2][0]),
|
||||
y: parseFloat(points[2][1])
|
||||
},
|
||||
p4: {
|
||||
x: parseFloat(points[3][0]),
|
||||
y: parseFloat(points[3][1])
|
||||
}
|
||||
};
|
||||
}),
|
||||
|
||||
/**
|
||||
* Is a given region polygon element of the box-model highlighter currently
|
||||
* hidden?
|
||||
*/
|
||||
_isRegionHidden: Task.async(function*(region) {
|
||||
let value = yield this.getHighlighterNodeAttribute("box-model-" + region, "hidden");
|
||||
return value !== null;
|
||||
}),
|
||||
|
||||
_getGuideStatus: Task.async(function*(location) {
|
||||
let id = "box-model-guide-" + location;
|
||||
|
||||
let hidden = yield this.getHighlighterNodeAttribute(id, "hidden");
|
||||
let x1 = yield this.getHighlighterNodeAttribute(id, "x1");
|
||||
let y1 = yield this.getHighlighterNodeAttribute(id, "y1");
|
||||
let x2 = yield this.getHighlighterNodeAttribute(id, "x2");
|
||||
let y2 = yield this.getHighlighterNodeAttribute(id, "y2");
|
||||
|
||||
return {
|
||||
visible: !hidden,
|
||||
x1: x1,
|
||||
y1: y1,
|
||||
x2: x2,
|
||||
y2: y2
|
||||
};
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the coordinates of the rectangle that is defined by the 4 guides displayed
|
||||
* in the toolbox box-model highlighter.
|
||||
* @return {Object} Null if at least one guide is hidden. Otherwise an object
|
||||
* with p1, p2, p3, p4 properties being {x, y} objects.
|
||||
*/
|
||||
getGuidesRectangle: Task.async(function*() {
|
||||
let tGuide = yield this._getGuideStatus("top");
|
||||
let rGuide = yield this._getGuideStatus("right");
|
||||
let bGuide = yield this._getGuideStatus("bottom");
|
||||
let lGuide = yield this._getGuideStatus("left");
|
||||
|
||||
if (!tGuide.visible || !rGuide.visible || !bGuide.visible || !lGuide.visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
p1: {x: lGuide.x1, y: tGuide.y1},
|
||||
p2: {x: rGuide.x1, y: tGuide. y1},
|
||||
p3: {x: rGuide.x1, y: bGuide.y1},
|
||||
p4: {x: lGuide.x1, y: bGuide.y1}
|
||||
};
|
||||
}),
|
||||
|
||||
waitForHighlighterEvent: protocol.custom(function(event) {
|
||||
return this._waitForHighlighterEvent(event, this.toolbox.highlighter.actorID);
|
||||
}, {
|
||||
impl: "_waitForHighlighterEvent"
|
||||
}),
|
||||
|
||||
/**
|
||||
* Get the "d" attribute value for one of the box-model highlighter's region
|
||||
* <path> elements, and parse it to a list of points.
|
||||
* @param {String} region The box model region name.
|
||||
* @param {Front} highlighter The front of the highlighter.
|
||||
* @return {Object} The object returned has the following form:
|
||||
* - d {String} the d attribute value
|
||||
* - points {Array} an array of all the polygons defined by the path. Each box
|
||||
* is itself an Array of points, themselves being [x,y] coordinates arrays.
|
||||
*/
|
||||
getHighlighterRegionPath: Task.async(function*(region, highlighter) {
|
||||
let d = yield this.getHighlighterNodeAttribute("box-model-" + region, "d", highlighter);
|
||||
if (!d) {
|
||||
return {d: null};
|
||||
}
|
||||
|
||||
let polygons = d.match(/M[^M]+/g);
|
||||
if (!polygons) {
|
||||
return {d};
|
||||
}
|
||||
|
||||
let points = [];
|
||||
for (let polygon of polygons) {
|
||||
points.push(polygon.trim().split(" ").map(i => {
|
||||
return i.replace(/M|L/, "").split(",")
|
||||
}));
|
||||
}
|
||||
|
||||
return {d, points};
|
||||
})
|
||||
});
|
Loading…
Reference in New Issue
Block a user