mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 916443 - part 2 - Toolbox level remote highlighter (tests), r=paul
This commit is contained in:
parent
cb863d2cfe
commit
5b107c6af9
@ -17,6 +17,7 @@ function test()
|
||||
gBrowser.selectedBrowser.addEventListener("load", function onload() {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", onload, true);
|
||||
doc = content.document;
|
||||
node = doc.querySelector("h1");
|
||||
waitForFocus(setupKeyBindingsTest, content);
|
||||
}, true);
|
||||
|
||||
@ -63,24 +64,37 @@ function test()
|
||||
keysetMap.inspector.synthesizeKey();
|
||||
}
|
||||
|
||||
function moveMouseOver(aElement, aInspector, cb)
|
||||
{
|
||||
EventUtils.synthesizeMouse(aElement, 2, 2, {type: "mousemove"},
|
||||
aElement.ownerDocument.defaultView);
|
||||
aInspector.toolbox.once("picker-node-hovered", () => {
|
||||
executeSoon(cb);
|
||||
});
|
||||
}
|
||||
|
||||
function isHighlighting()
|
||||
{
|
||||
let outline = gBrowser.selectedBrowser.parentNode
|
||||
.querySelector(".highlighter-container .highlighter-outline");
|
||||
return outline && !outline.hasAttribute("hidden");
|
||||
}
|
||||
|
||||
function inspectorShouldBeOpenAndHighlighting(aInspector, aToolbox)
|
||||
{
|
||||
is (aToolbox.currentToolId, "inspector", "Correct tool has been loaded");
|
||||
is (aInspector.highlighter.locked, true, "Highlighter should be locked");
|
||||
|
||||
aInspector.highlighter.once("unlocked", () => {
|
||||
is (aInspector.highlighter.locked, false, "Highlighter should be unlocked");
|
||||
aToolbox.once("picker-started", () => {
|
||||
ok(true, "picker-started event received, highlighter started");
|
||||
keysetMap.inspector.synthesizeKey();
|
||||
is (aInspector.highlighter.locked, true, "Highlighter should be locked");
|
||||
keysetMap.inspector.synthesizeKey();
|
||||
is (aInspector.highlighter.locked, false, "Highlighter should be unlocked");
|
||||
keysetMap.inspector.synthesizeKey();
|
||||
is (aInspector.highlighter.locked, true, "Highlighter should be locked");
|
||||
|
||||
aToolbox.once("webconsole-ready", (e, panel) => {
|
||||
webconsoleShouldBeSelected(aToolbox, panel);
|
||||
aToolbox.once("picker-stopped", () => {
|
||||
ok(true, "picker-stopped event received, highlighter stopped");
|
||||
aToolbox.once("webconsole-ready", (e, panel) => {
|
||||
webconsoleShouldBeSelected(aToolbox, panel);
|
||||
});
|
||||
keysetMap.webconsole.synthesizeKey();
|
||||
});
|
||||
keysetMap.webconsole.synthesizeKey();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -24,14 +24,12 @@ support-files =
|
||||
[browser_inspector_bug_831693_input_suggestion.js]
|
||||
# [browser_inspector_bug_831693_searchbox_panel_navigation.js]
|
||||
# Disabled for too many intermittent failures (bug 851349)
|
||||
[browser_inspector_bug_835722_infobar_reappears.js]
|
||||
[browser_inspector_bug_840156_destroy_after_navigation.js]
|
||||
[browser_inspector_changes.js]
|
||||
[browser_inspector_cmd_inspect.js]
|
||||
[browser_inspector_dead_node_exception.js]
|
||||
[browser_inspector_destroyselection.js]
|
||||
[browser_inspector_highlighter.js]
|
||||
[browser_inspector_highlighter_autohide.js]
|
||||
[browser_inspector_iframeTest.js]
|
||||
[browser_inspector_infobar.js]
|
||||
[browser_inspector_initialization.js]
|
||||
|
@ -2,13 +2,12 @@
|
||||
* 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/. */
|
||||
|
||||
|
||||
function test() {
|
||||
let inspector, doc;
|
||||
let inspector, doc, toolbox;
|
||||
let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
|
||||
let {require} = devtools;
|
||||
let promise = require("sdk/core/promise");
|
||||
let { Task } = Cu.import("resource://gre/modules/Task.jsm", {});
|
||||
let {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
|
||||
|
||||
waitForExplicitFinish();
|
||||
|
||||
@ -19,75 +18,67 @@ function test() {
|
||||
waitForFocus(setupTest, content);
|
||||
}, true);
|
||||
|
||||
content.location = "data:text/html,<h1>foo<h1><h2>bar</h2>";
|
||||
content.location = "data:text/html,<h1>foo</h1><h2>bar</h2>";
|
||||
|
||||
function setupTest() {
|
||||
let h = require("devtools/inspector/highlighter");
|
||||
h._forceBasic.value = true;
|
||||
openInspector(runTests);
|
||||
openInspector((aInspector, aToolbox) => {
|
||||
toolbox = aToolbox;
|
||||
inspector = aInspector;
|
||||
inspector.selection.setNode(doc.querySelector("h2"), null);
|
||||
inspector.once("inspector-updated", runTests);
|
||||
});
|
||||
}
|
||||
|
||||
function runTests(aInspector) {
|
||||
inspector = aInspector;
|
||||
|
||||
getHighlighterOutline().setAttribute("disable-transitions", "true");
|
||||
Task.spawn(function() {
|
||||
yield selectH1();
|
||||
yield verifyH1Selected();
|
||||
yield deselect();
|
||||
yield verifyNoNodeSelected();
|
||||
|
||||
yield selectH1();
|
||||
yield verifyH1Selected();
|
||||
yield destroyInspector();
|
||||
yield verifyNoNodeSelected();
|
||||
yield hoverH1InMarkupView();
|
||||
yield assertH1Highlighted();
|
||||
yield mouseLeaveMarkupView();
|
||||
yield assertNoNodeHighlighted();
|
||||
|
||||
finishUp();
|
||||
}).then(null, Cu.reportError);
|
||||
}
|
||||
|
||||
function selectH1() {
|
||||
function hoverH1InMarkupView() {
|
||||
let deferred = promise.defer();
|
||||
let h1 = doc.querySelector("h1");
|
||||
inspector.selection.once("new-node-front", () => {
|
||||
executeSoon(deferred.resolve);
|
||||
});
|
||||
inspector.selection.setNode(h1);
|
||||
|
||||
let container = getContainerForRawNode(inspector.markup, doc.querySelector("h1"));
|
||||
EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
|
||||
inspector.markup.doc.defaultView);
|
||||
inspector.markup.once("node-highlight", deferred.resolve);
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function verifyH1Selected() {
|
||||
let h1 = doc.querySelector("h1");
|
||||
let nodes = doc.querySelectorAll(":-moz-devtools-highlighted");
|
||||
is(nodes.length, 1, "only one node selected");
|
||||
is(nodes[0], h1, "h1 selected");
|
||||
function assertH1Highlighted() {
|
||||
ok(isHighlighting(), "The highlighter is shown on a markup container hover");
|
||||
is(getHighlitNode(), doc.querySelector("h1"), "The highlighter highlights the right node");
|
||||
return promise.resolve();
|
||||
}
|
||||
|
||||
function deselect() {
|
||||
function mouseLeaveMarkupView() {
|
||||
let deferred = promise.defer();
|
||||
inspector.selection.once("new-node-front", () => {
|
||||
executeSoon(deferred.resolve);
|
||||
});
|
||||
inspector.selection.setNode(null);
|
||||
|
||||
// Find another element to mouseover over in order to leave the markup-view
|
||||
let btn = toolbox.doc.querySelector(".toolbox-dock-button");
|
||||
|
||||
EventUtils.synthesizeMouse(btn, 2, 2, {type: "mousemove"},
|
||||
toolbox.doc.defaultView);
|
||||
executeSoon(deferred.resolve);
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function destroyInspector() {
|
||||
return inspector.destroy();
|
||||
}
|
||||
|
||||
function verifyNoNodeSelected() {
|
||||
is(doc.querySelectorAll(":-moz-devtools-highlighted").length, 0, "no node selected");
|
||||
function assertNoNodeHighlighted() {
|
||||
ok(!isHighlighting(), "After the mouse left the markup view, the highlighter is hidden");
|
||||
return promise.resolve();
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
let h = require("devtools/inspector/highlighter");
|
||||
h._forceBasic.value = false;
|
||||
inspector = doc = null;
|
||||
inspector = doc = toolbox = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -57,7 +57,10 @@ function test()
|
||||
|
||||
if (cursor >= nodes.length) {
|
||||
inspector.off("breadcrumbs-updated", nodeSelected);
|
||||
finishUp();
|
||||
// breadcrumbs-updated is an event that is fired before the rest of the
|
||||
// inspector is updated, so there'll be hanging connections if we finish
|
||||
// up before waiting for everything to end.
|
||||
inspector.once("inspector-updated", finishUp);
|
||||
} else {
|
||||
let node = nodes[cursor].node;
|
||||
inspector.selection.setNode(node);
|
||||
|
@ -1,9 +1,7 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
|
||||
function test()
|
||||
{
|
||||
function test() {
|
||||
waitForExplicitFinish();
|
||||
ignoreAllUncaughtExceptions();
|
||||
|
||||
@ -19,22 +17,18 @@ function test()
|
||||
|
||||
content.location = "data:text/html,<object style='padding: 100px'><p>foobar</p></object>";
|
||||
|
||||
function setupObjectInspectionTest()
|
||||
{
|
||||
function setupObjectInspectionTest() {
|
||||
objectNode = doc.querySelector("object");
|
||||
ok(objectNode, "we have the object node");
|
||||
openInspector(runObjectInspectionTest);
|
||||
}
|
||||
|
||||
function runObjectInspectionTest(inspector)
|
||||
{
|
||||
inspector.highlighter.once("locked", performTestComparison);
|
||||
inspector.highlighter.unlock();
|
||||
function runObjectInspectionTest(inspector) {
|
||||
inspector.once("inspector-updated", performTestComparison);
|
||||
inspector.selection.setNode(objectNode, "");
|
||||
}
|
||||
|
||||
function performTestComparison()
|
||||
{
|
||||
function performTestComparison() {
|
||||
is(getActiveInspector().selection.node, objectNode, "selection matches node");
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
executeSoon(function() {
|
||||
@ -43,7 +37,6 @@ function test()
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function finishUp() {
|
||||
doc = objectNode = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
|
@ -7,6 +7,7 @@ function test()
|
||||
|
||||
let doc;
|
||||
let iframeNode, iframeBodyNode;
|
||||
let inspector;
|
||||
|
||||
let iframeSrc = "<style>" +
|
||||
"body {" +
|
||||
@ -45,57 +46,63 @@ function test()
|
||||
iframeBodyNode = iframeNode.contentDocument.querySelector("body");
|
||||
ok(iframeNode, "we have the iframe node");
|
||||
ok(iframeBodyNode, "we have the body node");
|
||||
openInspector(runTests);
|
||||
}
|
||||
|
||||
function runTests(inspector)
|
||||
{
|
||||
inspector.highlighter.unlock();
|
||||
executeSoon(function() {
|
||||
inspector.highlighter.once("highlighting", isTheIframeSelected);
|
||||
moveMouseOver(iframeNode, 1, 1);
|
||||
openInspector(aInspector => {
|
||||
inspector = aInspector;
|
||||
// Make sure the highlighter is shown so we can disable transitions
|
||||
inspector.toolbox.highlighter.showBoxModel(getNodeFront(doc.body)).then(() => {
|
||||
getHighlighterOutline().setAttribute("disable-transitions", "true");
|
||||
runTests();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function isTheIframeSelected()
|
||||
function runTests()
|
||||
{
|
||||
let inspector = getActiveInspector();
|
||||
inspector.toolbox.startPicker().then(() => {
|
||||
moveMouseOver(iframeNode, 1, 1, isTheIframeHighlighted);
|
||||
});
|
||||
}
|
||||
|
||||
function isTheIframeHighlighted()
|
||||
{
|
||||
let outlineRect = getHighlighterOutlineRect();
|
||||
let iframeRect = iframeNode.getBoundingClientRect();
|
||||
for (let dim of ["width", "height", "top", "left"]) {
|
||||
is(Math.floor(outlineRect[dim]), Math.floor(iframeRect[dim]), "Outline dimension is correct");
|
||||
}
|
||||
|
||||
is(inspector.selection.node, iframeNode, "selection matches node");
|
||||
iframeNode.style.marginBottom = doc.defaultView.innerHeight + "px";
|
||||
doc.defaultView.scrollBy(0, 40);
|
||||
|
||||
executeSoon(function() {
|
||||
inspector.selection.once("new-node", isTheIframeContentSelected);
|
||||
moveMouseOver(iframeNode, 40, 40);
|
||||
moveMouseOver(iframeNode, 40, 40, isTheIframeContentHighlighted);
|
||||
}
|
||||
|
||||
function isTheIframeContentHighlighted()
|
||||
{
|
||||
is(getHighlitNode(), iframeBodyNode, "highlighter shows the right node");
|
||||
|
||||
// 184 == 200 + 11(border) + 13(padding) - 40(scroll)
|
||||
let outlineRect = getHighlighterOutlineRect();
|
||||
is(outlineRect.height, 184, "highlighter height");
|
||||
|
||||
inspector.toolbox.stopPicker().then(() => {
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
gDevTools.closeToolbox(target);
|
||||
finishUp();
|
||||
});
|
||||
}
|
||||
|
||||
function isTheIframeContentSelected()
|
||||
function finishUp()
|
||||
{
|
||||
let inspector = getActiveInspector();
|
||||
is(inspector.selection.node, iframeBodyNode, "selection matches node");
|
||||
// 184 == 200 + 11(border) + 13(padding) - 40(scroll)
|
||||
is(inspector.highlighter._highlightRect.height, 184,
|
||||
"highlighter height");
|
||||
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
gDevTools.closeToolbox(target);
|
||||
finishUp();
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
doc = iframeNode = iframeBodyNode = null;
|
||||
doc = inspector = iframeNode = iframeBodyNode = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
}
|
||||
|
||||
|
||||
function moveMouseOver(aElement, x, y)
|
||||
function moveMouseOver(aElement, x, y, cb)
|
||||
{
|
||||
EventUtils.synthesizeMouse(aElement, x, y, {type: "mousemove"},
|
||||
aElement.ownerDocument.defaultView);
|
||||
inspector.toolbox.once("picker-node-hovered", cb);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -8,21 +8,37 @@ function test() {
|
||||
let inspector;
|
||||
|
||||
function startTest() {
|
||||
openInspector(runInspectorTests);
|
||||
openInspector(aInspector => {
|
||||
inspector = aInspector;
|
||||
runInspectorTests();
|
||||
});
|
||||
}
|
||||
|
||||
function runInspectorTests(aInspector) {
|
||||
inspector = aInspector;
|
||||
function showHighlighter(cb) {
|
||||
inspector.toolbox.startPicker().then(() => {
|
||||
EventUtils.synthesizeMouse(content.document.body, 1, 1,
|
||||
{type: "mousemove"}, content);
|
||||
inspector.toolbox.once("picker-node-hovered", () => {
|
||||
executeSoon(() => {
|
||||
getHighlighterOutline().setAttribute("disable-transitions", "true");
|
||||
cb();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function runInspectorTests() {
|
||||
iframe = content.document.querySelector("iframe");
|
||||
ok(iframe, "found the iframe element");
|
||||
|
||||
ok(inspector.highlighter._highlighting, "Inspector is highlighting");
|
||||
showHighlighter(() => {
|
||||
ok(isHighlighting(), "Inspector is highlighting");
|
||||
|
||||
iframe.addEventListener("load", onIframeLoad, false);
|
||||
iframe.addEventListener("load", onIframeLoad, false);
|
||||
|
||||
executeSoon(function() {
|
||||
iframe.contentWindow.location = "javascript:location.reload()";
|
||||
executeSoon(function() {
|
||||
iframe.contentWindow.location = "javascript:location.reload()";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -36,7 +52,7 @@ function test() {
|
||||
|
||||
iframe.removeEventListener("load", onIframeLoad, false);
|
||||
|
||||
ok(inspector.highlighter._highlighting, "Inspector is highlighting after iframe nav");
|
||||
ok(isHighlighting(), "Inspector is highlighting after iframe nav");
|
||||
|
||||
checksAfterLoads = true;
|
||||
|
||||
@ -47,9 +63,11 @@ function test() {
|
||||
is(iframeLoads, 2, "iframe loads");
|
||||
ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
|
||||
|
||||
iframe = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
executeSoon(finish);
|
||||
inspector.toolbox.stopPicker().then(() => {
|
||||
iframe = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
executeSoon(finish);
|
||||
});
|
||||
}
|
||||
|
||||
waitForExplicitFinish();
|
||||
|
@ -1,103 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
function test() {
|
||||
let inspector, utils;
|
||||
|
||||
function startLocationTests() {
|
||||
openInspector(runInspectorTests);
|
||||
}
|
||||
|
||||
function runInspectorTests(aInspector) {
|
||||
inspector = aInspector;
|
||||
utils = inspector.panelWin
|
||||
.QueryInterface(Ci.nsIInterfaceRequestor)
|
||||
.getInterface(Ci.nsIDOMWindowUtils);
|
||||
ok(utils, "utils is defined");
|
||||
executeSoon(function() {
|
||||
inspector.selection.once("new-node", onNewSelection);
|
||||
info("selecting the DOCTYPE node");
|
||||
inspector.selection.setNode(content.document.doctype, "test");
|
||||
});
|
||||
}
|
||||
|
||||
function sendMouseEvent(node, type, x, y) {
|
||||
let rect = node.getBoundingClientRect();
|
||||
let left = rect.left + x;
|
||||
let top = rect.top + y;
|
||||
utils.sendMouseEventToWindow(type, left, top, 0, 1, 0, false, 0, 0);
|
||||
}
|
||||
|
||||
function onNewSelection() {
|
||||
is(inspector.highlighter.isHidden(), true,
|
||||
"The infobar should be hidden now on selecting a non element node.");
|
||||
inspector.sidebar.select("ruleview");
|
||||
let ruleView = inspector.sidebar.getTab("ruleview");
|
||||
ruleView.addEventListener("mouseover", function onMouseOver() {
|
||||
ruleView.removeEventListener("mouseover", onMouseOver, false);
|
||||
is(inspector.highlighter.isHidden(), true,
|
||||
"The infobar was hidden so mouseover on the rules view did nothing");
|
||||
executeSoon(mouseOutAndContinue);
|
||||
}, false);
|
||||
sendMouseEvent(ruleView, "mouseover", 10, 10);
|
||||
}
|
||||
|
||||
function mouseOutAndContinue() {
|
||||
let ruleView = inspector.sidebar.getTab("ruleview");
|
||||
info("adding mouseout listener");
|
||||
ruleView.addEventListener("mouseout", function onMouseOut() {
|
||||
info("mouseout happened");
|
||||
ruleView.removeEventListener("mouseout", onMouseOut, false);
|
||||
is(inspector.highlighter.isHidden(), true,
|
||||
"The infobar should not be visible after we mouseout of rules view");
|
||||
switchToWebConsole();
|
||||
}, false);
|
||||
info("Synthesizing mouseout on " + ruleView);
|
||||
sendMouseEvent(inspector._markupBox, "mousemove", 50, 50);
|
||||
info("mouseout synthesized");
|
||||
}
|
||||
|
||||
function switchToWebConsole() {
|
||||
inspector.selection.once("new-node", function() {
|
||||
is(inspector.highlighter.isHidden(), false,
|
||||
"The infobar should be visible after we select a div.");
|
||||
gDevTools.showToolbox(inspector.target, "webconsole").then(function() {
|
||||
is(inspector.highlighter.isHidden(), true,
|
||||
"The infobar should not be visible after we switched to webconsole");
|
||||
reloadAndWait();
|
||||
});
|
||||
});
|
||||
inspector.selection.setNode(content.document.querySelector("div"), "test");
|
||||
}
|
||||
|
||||
function reloadAndWait() {
|
||||
gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
|
||||
waitForFocus(testAfterReload, content);
|
||||
}, true);
|
||||
content.location.reload();
|
||||
}
|
||||
|
||||
function testAfterReload() {
|
||||
is(inspector.highlighter.isHidden(), true,
|
||||
"The infobar should not be visible after we reload with webconsole shown");
|
||||
testEnd();
|
||||
}
|
||||
|
||||
function testEnd() {
|
||||
gBrowser.removeCurrentTab();
|
||||
utils = null;
|
||||
executeSoon(finish);
|
||||
}
|
||||
|
||||
waitForExplicitFinish();
|
||||
|
||||
gBrowser.selectedTab = gBrowser.addTab();
|
||||
gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
|
||||
waitForFocus(startLocationTests, content);
|
||||
}, true);
|
||||
|
||||
content.location = "data:text/html,<!DOCTYPE html><div>Infobar should not " +
|
||||
"reappear</div><p>init</p>";
|
||||
}
|
@ -33,6 +33,13 @@ function test() {
|
||||
// select the inspector
|
||||
.then(function () toolbox.selectTool("inspector"))
|
||||
|
||||
// wait until inspector ready
|
||||
.then(function () {
|
||||
let deferred = promise.defer();
|
||||
toolbox.getPanel("inspector").once("inspector-updated", deferred.resolve);
|
||||
return deferred.promise;
|
||||
})
|
||||
|
||||
// navigate to URL_2
|
||||
.then(function () {
|
||||
let deferred = promise.defer();
|
||||
|
@ -139,8 +139,5 @@ function test() {
|
||||
let breadcrumbs = inspector.panelDoc.getElementById("inspector-breadcrumbs");
|
||||
is(breadcrumbs.querySelector("button[checked=true]").textContent, crumbLabel,
|
||||
"The right breadcrumb is selected");
|
||||
|
||||
// Highlighter is shown?
|
||||
ok(!inspector.highlighter.isHidden(), "The highlighter is shown");
|
||||
}
|
||||
}
|
||||
|
@ -34,7 +34,6 @@ function test() {
|
||||
// select the inspector
|
||||
return toolbox.selectTool("inspector").then(i => {
|
||||
inspector = i;
|
||||
|
||||
// Verify we are on page one
|
||||
let testNode = content.document.querySelector("#one");
|
||||
ok(testNode, "We have the test node on page 1");
|
||||
|
@ -32,7 +32,7 @@ function test() {
|
||||
function runInspectorTests(aInspector)
|
||||
{
|
||||
inspector = aInspector;
|
||||
inspector.sidebar.once("computedview-ready", function() {
|
||||
inspector.sidebar.once("computedview-ready", () => {
|
||||
info("Computed View ready");
|
||||
inspector.sidebar.select("computedview");
|
||||
|
||||
@ -41,8 +41,9 @@ function test() {
|
||||
testDiv.style.fontSize = "10px";
|
||||
|
||||
// Start up the style inspector panel...
|
||||
inspector.once("computed-view-refreshed", computedStylePanelTests);
|
||||
|
||||
inspector.once("computed-view-refreshed", () => {
|
||||
executeSoon(computedStylePanelTests);
|
||||
});
|
||||
inspector.selection.setNode(testDiv);
|
||||
});
|
||||
}
|
||||
@ -59,7 +60,9 @@ function test() {
|
||||
|
||||
// Wait until layout-change fires from mutation to skip earlier refresh event
|
||||
inspector.once("layout-change", () => {
|
||||
inspector.once("computed-view-refreshed", computedStylePanelAfterChange);
|
||||
inspector.once("computed-view-refreshed", () => {
|
||||
executeSoon(computedStylePanelAfterChange);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -79,12 +82,11 @@ function test() {
|
||||
// Tests changes made while the style panel is not active.
|
||||
inspector.sidebar.select("ruleview");
|
||||
|
||||
testDiv.style.fontSize = "20px";
|
||||
testDiv.style.color = "blue";
|
||||
testDiv.style.textAlign = "center";
|
||||
testDiv.style.cssText = "font-size: 20px; color: blue; text-align: center";
|
||||
|
||||
inspector.once("computed-view-refreshed", computedStylePanelAfterSwitch);
|
||||
inspector.sidebar.select("computedview");
|
||||
inspector.once("computed-view-refreshed", () => {
|
||||
executeSoon(computedStylePanelAfterSwitch);
|
||||
});
|
||||
}
|
||||
|
||||
function computedStylePanelAfterSwitch()
|
||||
@ -110,13 +112,11 @@ function test() {
|
||||
let propView = getInspectorRuleProp("text-align");
|
||||
is(propView.value, "center", "Style inspector should be showing the new text align.");
|
||||
|
||||
testDiv.style.textAlign = "right";
|
||||
testDiv.style.color = "lightgoldenrodyellow";
|
||||
testDiv.style.fontSize = "3em";
|
||||
testDiv.style.textTransform = "uppercase";
|
||||
testDiv.style.cssText = "font-size: 3em; color: lightgoldenrodyellow; text-align: right; text-transform: uppercase";
|
||||
|
||||
|
||||
inspector.once("rule-view-refreshed", rulePanelAfterChange);
|
||||
inspector.once("rule-view-refreshed", () => {
|
||||
executeSoon(rulePanelAfterChange);
|
||||
});
|
||||
}
|
||||
|
||||
function rulePanelAfterChange()
|
||||
|
@ -4,7 +4,6 @@
|
||||
function test()
|
||||
{
|
||||
waitForExplicitFinish();
|
||||
//ignoreAllUncaughtExceptions();
|
||||
|
||||
let node, iframe, inspector;
|
||||
|
||||
@ -28,20 +27,24 @@ function test()
|
||||
inspector = aInspector;
|
||||
inspector.selection.setNode(node);
|
||||
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
iframe = null;
|
||||
inspector.once("inspector-updated", () => {
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
iframe = null;
|
||||
|
||||
let tmp = {};
|
||||
Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", tmp);
|
||||
let lh = new tmp.LayoutHelpers(window.content);
|
||||
ok(!lh.isNodeConnected(node), "Node considered as disconnected.");
|
||||
ok(!inspector.selection.isConnected(), "Selection considered as disconnected");
|
||||
let tmp = {};
|
||||
Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", tmp);
|
||||
let lh = new tmp.LayoutHelpers(window.content);
|
||||
ok(!lh.isNodeConnected(node), "Node considered as disconnected.");
|
||||
ok(!inspector.selection.isConnected(), "Selection considered as disconnected");
|
||||
|
||||
finishUp();
|
||||
inspector.once("inspector-updated", () => {
|
||||
finishUp();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
node = null;
|
||||
node = inspector = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
}
|
||||
|
@ -6,12 +6,11 @@
|
||||
|
||||
let doc;
|
||||
let h1;
|
||||
let div;
|
||||
let inspector;
|
||||
|
||||
function createDocument()
|
||||
{
|
||||
function createDocument() {
|
||||
let div = doc.createElement("div");
|
||||
let h1 = doc.createElement("h1");
|
||||
h1 = doc.createElement("h1");
|
||||
let p1 = doc.createElement("p");
|
||||
let p2 = doc.createElement("p");
|
||||
let div2 = doc.createElement("div");
|
||||
@ -48,80 +47,38 @@ function createDocument()
|
||||
doc.body.appendChild(div2);
|
||||
doc.body.appendChild(div3);
|
||||
|
||||
openInspector(setupHighlighterTests);
|
||||
}
|
||||
|
||||
function setupHighlighterTests()
|
||||
{
|
||||
h1 = doc.querySelector("h1");
|
||||
ok(h1, "we have the header");
|
||||
|
||||
let i = getActiveInspector();
|
||||
i.selection.setNode(div);
|
||||
i.highlighter.unlockAndFocus();
|
||||
i.highlighter.outline.setAttribute("disable-transitions", "true");
|
||||
|
||||
executeSoon(function() {
|
||||
i.selection.once("new-node", performToggleComparisons);
|
||||
EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
|
||||
openInspector(aInspector => {
|
||||
inspector = aInspector;
|
||||
inspector.selection.setNode(div, null);
|
||||
inspector.once("inspector-updated", () => {
|
||||
getHighlighterOutline().setAttribute("disable-transitions", "true");
|
||||
inspector.toolbox.startPicker().then(testMouseOverH1Highlights);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function performToggleComparisons(evt)
|
||||
{
|
||||
let i = getActiveInspector();
|
||||
|
||||
i.highlighter.toggleLockState();
|
||||
ok(i.highlighter.locked, "highlighter locks");
|
||||
is(i.selection.node, div);
|
||||
i.highlighter.toggleLockState();
|
||||
ok(!i.highlighter.locked, "highlighter unlocks");
|
||||
|
||||
i.highlighter.toggleLockState();
|
||||
ok(i.highlighter.locked, "highlighter locks if selection is unchanged");
|
||||
i.highlighter.toggleLockState();
|
||||
|
||||
executeSoon(function() {
|
||||
i.selection.once("new-node", performTestComparisons);
|
||||
EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
|
||||
function testMouseOverH1Highlights() {
|
||||
inspector.toolbox.once("picker-node-hovered", () => {
|
||||
ok(isHighlighting(), "Highlighter is shown");
|
||||
is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node");
|
||||
testOutlineDimensions();
|
||||
});
|
||||
|
||||
EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
|
||||
}
|
||||
|
||||
function performTestComparisons(evt)
|
||||
{
|
||||
let i = getActiveInspector();
|
||||
i.highlighter.lock();
|
||||
ok(isHighlighting(), "highlighter is highlighting");
|
||||
is(getHighlitNode(), h1, "highlighter matches selection")
|
||||
is(i.selection.node, h1, "selection matches node");
|
||||
is(i.selection.node, getHighlitNode(), "selection matches highlighter");
|
||||
function testOutlineDimensions() {
|
||||
let h1Dims = h1.getBoundingClientRect();
|
||||
let h1Width = h1Dims.width;
|
||||
let h1Height = h1Dims.height;
|
||||
|
||||
|
||||
div = doc.querySelector("div#checkOutThisWickedSpread");
|
||||
|
||||
executeSoon(function() {
|
||||
i.selection.once("new-node", finishTestComparisons);
|
||||
i.selection.setNode(div);
|
||||
});
|
||||
}
|
||||
|
||||
function finishTestComparisons()
|
||||
{
|
||||
let i = getActiveInspector();
|
||||
|
||||
// get dimensions of div element
|
||||
let divDims = div.getBoundingClientRect();
|
||||
let divWidth = divDims.width;
|
||||
let divHeight = divDims.height;
|
||||
|
||||
// get dimensions of the outline
|
||||
let outlineDims = i.highlighter.outline.getBoundingClientRect();
|
||||
let outlineDims = getHighlighterOutlineRect();
|
||||
let outlineWidth = outlineDims.width;
|
||||
let outlineHeight = outlineDims.height;
|
||||
|
||||
// Disabled due to bug 716245
|
||||
//is(outlineWidth, divWidth, "outline width matches dimensions of element (no zoom)");
|
||||
//is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
|
||||
is(outlineWidth, h1Width, "outline width matches dimensions of element (no zoom)");
|
||||
is(outlineHeight, h1Height, "outline height matches dimensions of element (no zoom)");
|
||||
|
||||
// zoom the page by a factor of 2
|
||||
let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
|
||||
@ -132,38 +89,36 @@ function finishTestComparisons()
|
||||
// resize event
|
||||
|
||||
window.setTimeout(function() {
|
||||
// check what zoom factor we're at, should be 2
|
||||
let zoom = i.highlighter.zoom;
|
||||
is(zoom, 2, "zoom is 2?");
|
||||
|
||||
// simulate the zoomed dimensions of the div element
|
||||
let divDims = div.getBoundingClientRect();
|
||||
let divWidth = divDims.width * zoom;
|
||||
let divHeight = divDims.height * zoom;
|
||||
let h1Dims = h1.getBoundingClientRect();
|
||||
// There seems to be some very minor differences in the floats, so let's
|
||||
// floor the values
|
||||
let h1Width = Math.floor(h1Dims.width * contentViewer.fullZoom);
|
||||
let h1Height = Math.floor(h1Dims.height * contentViewer.fullZoom);
|
||||
|
||||
// now zoomed, get new dimensions the outline
|
||||
let outlineDims = i.highlighter.outline.getBoundingClientRect();
|
||||
let outlineWidth = outlineDims.width;
|
||||
let outlineHeight = outlineDims.height;
|
||||
let outlineDims = getHighlighterOutlineRect();
|
||||
let outlineWidth = Math.floor(outlineDims.width);
|
||||
let outlineHeight = Math.floor(outlineDims.height);
|
||||
|
||||
// Disabled due to bug 716245
|
||||
//is(outlineWidth, divWidth, "outline width matches dimensions of element (no zoom)");
|
||||
//is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
|
||||
is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
|
||||
is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
|
||||
|
||||
doc = h1 = div = null;
|
||||
executeSoon(finishUp);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
gDevTools.closeToolbox(target);
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
inspector.toolbox.stopPicker().then(() => {
|
||||
doc = h1 = inspector = null;
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
gDevTools.closeToolbox(target);
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
});
|
||||
}
|
||||
|
||||
function test()
|
||||
{
|
||||
function test() {
|
||||
waitForExplicitFinish();
|
||||
gBrowser.selectedTab = gBrowser.addTab();
|
||||
gBrowser.selectedBrowser.addEventListener("load", function() {
|
||||
@ -174,4 +129,3 @@ function test()
|
||||
|
||||
content.location = "data:text/html,basic tests for inspector";
|
||||
}
|
||||
|
||||
|
@ -1,46 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
|
||||
function test()
|
||||
{
|
||||
let toolbox;
|
||||
let inspector;
|
||||
|
||||
waitForExplicitFinish();
|
||||
|
||||
gBrowser.selectedTab = gBrowser.addTab();
|
||||
gBrowser.selectedBrowser.addEventListener("load", function onload() {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", onload, true);
|
||||
waitForFocus(startInspector, content);
|
||||
}, true);
|
||||
content.location = "data:text/html,mop"
|
||||
|
||||
function startInspector() {
|
||||
info("Tab loaded");
|
||||
openInspector(function(aInspector) {
|
||||
inspector = aInspector;
|
||||
ok(!inspector.highlighter.hidden, "Highlighter is visible");
|
||||
toolbox = inspector._toolbox;
|
||||
toolbox.once("webconsole-selected", onWebConsoleSelected);
|
||||
toolbox.selectTool("webconsole");
|
||||
});
|
||||
}
|
||||
|
||||
function onWebConsoleSelected() {
|
||||
executeSoon(function() {
|
||||
ok(inspector.highlighter.hidden, "Highlighter is hidden");
|
||||
toolbox.once("inspector-selected", onInspectorSelected);
|
||||
toolbox.selectTool("inspector");
|
||||
});
|
||||
}
|
||||
|
||||
function onInspectorSelected() {
|
||||
executeSoon(function() {
|
||||
ok(!inspector.highlighter.hidden, "Highlighter is visible once inspector reopen");
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -9,9 +9,9 @@ let div1;
|
||||
let div2;
|
||||
let iframe1;
|
||||
let iframe2;
|
||||
let inspector;
|
||||
|
||||
function createDocument()
|
||||
{
|
||||
function createDocument() {
|
||||
doc.title = "Inspector iframe Tests";
|
||||
|
||||
iframe1 = doc.createElement('iframe');
|
||||
@ -32,7 +32,11 @@ function createDocument()
|
||||
div2.textContent = 'nested div';
|
||||
iframe2.contentDocument.body.appendChild(div2);
|
||||
|
||||
openInspector(runIframeTests);
|
||||
// Open the inspector, start the picker mode, and start the tests
|
||||
openInspector(aInspector => {
|
||||
inspector = aInspector;
|
||||
inspector.toolbox.startPicker().then(runTests);
|
||||
});
|
||||
}, false);
|
||||
|
||||
iframe2.src = 'data:text/html,nested iframe';
|
||||
@ -43,58 +47,56 @@ function createDocument()
|
||||
doc.body.appendChild(iframe1);
|
||||
}
|
||||
|
||||
function moveMouseOver(aElement)
|
||||
{
|
||||
function moveMouseOver(aElement, cb) {
|
||||
EventUtils.synthesizeMouse(aElement, 2, 2, {type: "mousemove"},
|
||||
aElement.ownerDocument.defaultView);
|
||||
}
|
||||
|
||||
function runIframeTests()
|
||||
{
|
||||
getActiveInspector().highlighter.unlock();
|
||||
getActiveInspector().selection.once("new-node", performTestComparisons1);
|
||||
moveMouseOver(div1)
|
||||
}
|
||||
|
||||
function performTestComparisons1()
|
||||
{
|
||||
let i = getActiveInspector();
|
||||
is(i.selection.node, div1, "selection matches div1 node");
|
||||
is(getHighlitNode(), div1, "highlighter matches selection");
|
||||
|
||||
i.selection.once("new-node", performTestComparisons2);
|
||||
executeSoon(function() {
|
||||
moveMouseOver(div2);
|
||||
inspector.toolbox.once("picker-node-hovered", () => {
|
||||
executeSoon(cb);
|
||||
});
|
||||
}
|
||||
|
||||
function performTestComparisons2()
|
||||
{
|
||||
let i = getActiveInspector();
|
||||
|
||||
is(i.selection.node, div2, "selection matches div2 node");
|
||||
is(getHighlitNode(), div2, "highlighter matches selection");
|
||||
|
||||
selectRoot();
|
||||
function runTests() {
|
||||
testDiv1Highlighter();
|
||||
}
|
||||
|
||||
function selectRoot()
|
||||
{
|
||||
function testDiv1Highlighter() {
|
||||
moveMouseOver(div1, () => {
|
||||
getHighlighterOutline().setAttribute("disable-transitions", "true");
|
||||
is(getHighlitNode(), div1, "highlighter matches selection");
|
||||
testDiv2Highlighter();
|
||||
});
|
||||
}
|
||||
|
||||
function testDiv2Highlighter() {
|
||||
moveMouseOver(div2, () => {
|
||||
is(getHighlitNode(), div2, "highlighter matches selection");
|
||||
selectRoot();
|
||||
});
|
||||
}
|
||||
|
||||
function selectRoot() {
|
||||
// Select the root document element to clear the breadcrumbs.
|
||||
let i = getActiveInspector();
|
||||
i.selection.setNode(doc.documentElement);
|
||||
i.once("inspector-updated", selectIframe);
|
||||
inspector.selection.setNode(doc.documentElement);
|
||||
inspector.once("inspector-updated", selectIframe);
|
||||
}
|
||||
|
||||
function selectIframe()
|
||||
{
|
||||
function selectIframe() {
|
||||
// Directly select an element in an iframe (without navigating to it
|
||||
// with mousemoves).
|
||||
let i = getActiveInspector();
|
||||
i.selection.setNode(div2);
|
||||
i.once("inspector-updated", () => {
|
||||
let breadcrumbs = i.breadcrumbs;
|
||||
inspector.selection.setNode(div2);
|
||||
inspector.once("inspector-updated", () => {
|
||||
let breadcrumbs = inspector.breadcrumbs;
|
||||
is(breadcrumbs.nodeHierarchy.length, 9, "Should have 9 items");
|
||||
finishUp();
|
||||
});
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
inspector.toolbox.stopPicker().then(() => {
|
||||
doc = div1 = div2 = iframe1 = iframe2 = inspector = null;
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
gDevTools.closeToolbox(target);
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
});
|
||||
}
|
||||
@ -111,11 +113,4 @@ function test() {
|
||||
}, true);
|
||||
|
||||
content.location = "data:text/html,iframe tests for inspector";
|
||||
|
||||
registerCleanupFunction(function () {
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
gDevTools.closeToolbox(target);
|
||||
gBrowser.removeCurrentTab();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1,8 +1,7 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
function test()
|
||||
{
|
||||
function test() {
|
||||
waitForExplicitFinish();
|
||||
ignoreAllUncaughtExceptions();
|
||||
|
||||
@ -23,8 +22,7 @@ function test()
|
||||
|
||||
content.location = "data:text/html," + encodeURIComponent(html);
|
||||
|
||||
function setupInfobarTest()
|
||||
{
|
||||
function setupInfobarTest() {
|
||||
nodes = [
|
||||
{node: doc.querySelector("#top"), position: "bottom", tag: "DIV", id: "#top", classes: ".class1.class2"},
|
||||
{node: doc.querySelector("#vertical"), position: "overlap", tag: "DIV", id: "#vertical", classes: ""},
|
||||
@ -40,18 +38,25 @@ function test()
|
||||
openInspector(runTests);
|
||||
}
|
||||
|
||||
function runTests(aInspector)
|
||||
{
|
||||
function mouseOverContainerToShowHighlighter(node, cb) {
|
||||
let container = getContainerForRawNode(inspector.markup, node);
|
||||
EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
|
||||
inspector.markup.doc.defaultView);
|
||||
executeSoon(cb);
|
||||
}
|
||||
|
||||
function runTests(aInspector) {
|
||||
inspector = aInspector;
|
||||
cursor = 0;
|
||||
executeSoon(function() {
|
||||
inspector.selection.setNode(nodes[0].node, "");
|
||||
nodeSelected();
|
||||
inspector.selection.setNode(content.document.querySelector("body"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
cursor = 0;
|
||||
executeSoon(function() {
|
||||
mouseOverContainerToShowHighlighter(nodes[0].node, nodeSelected);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function nodeSelected()
|
||||
{
|
||||
function nodeSelected() {
|
||||
executeSoon(function() {
|
||||
performTest();
|
||||
cursor++;
|
||||
@ -59,18 +64,16 @@ function test()
|
||||
finishUp();
|
||||
} else {
|
||||
let node = nodes[cursor].node;
|
||||
inspector.selection.setNode(node, "");
|
||||
nodeSelected();
|
||||
mouseOverContainerToShowHighlighter(node, nodeSelected);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function performTest()
|
||||
{
|
||||
function performTest() {
|
||||
let browser = gBrowser.selectedBrowser;
|
||||
let stack = browser.parentNode;
|
||||
|
||||
let container = stack.querySelector(".highlighter-nodeinfobar-container");
|
||||
let container = stack.querySelector(".highlighter-nodeinfobar-positioner");
|
||||
is(container.getAttribute("position"), nodes[cursor].position, "node " + cursor + ": position matches.");
|
||||
|
||||
let tagNameLabel = stack.querySelector(".highlighter-nodeinfobar-tagname");
|
||||
@ -89,4 +92,3 @@ function test()
|
||||
finish();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -35,13 +35,11 @@ function startInspectorTests(toolbox)
|
||||
ok(inspector, "Inspector instance is accessible");
|
||||
ok(inspector.isReady, "Inspector instance is ready");
|
||||
is(inspector.target.tab, gBrowser.selectedTab, "Valid target");
|
||||
ok(inspector.highlighter, "Highlighter is up");
|
||||
|
||||
let p = doc.querySelector("p");
|
||||
|
||||
inspector.selection.setNode(p);
|
||||
inspector.once("inspector-updated", () => {
|
||||
testHighlighter(p);
|
||||
testMarkupView(p);
|
||||
testBreadcrumbs(p);
|
||||
|
||||
@ -50,7 +48,6 @@ function startInspectorTests(toolbox)
|
||||
|
||||
inspector.selection.setNode(span);
|
||||
inspector.once("inspector-updated", () => {
|
||||
testHighlighter(span);
|
||||
testMarkupView(span);
|
||||
testBreadcrumbs(span);
|
||||
|
||||
@ -65,13 +62,6 @@ function startInspectorTests(toolbox)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function testHighlighter(node)
|
||||
{
|
||||
ok(isHighlighting(), "Highlighter is highlighting");
|
||||
is(getHighlitNode(), node, "Right node is highlighted");
|
||||
}
|
||||
|
||||
let callNo = 0;
|
||||
function testMarkupView(node)
|
||||
{
|
||||
@ -112,7 +102,6 @@ function runContextMenuTest()
|
||||
}
|
||||
|
||||
function testInitialNodeIsSelected() {
|
||||
testHighlighter(salutation);
|
||||
testMarkupView(salutation);
|
||||
testBreadcrumbs(salutation);
|
||||
inspectNodesFromContextTestWhileOpen();
|
||||
@ -124,10 +113,9 @@ function inspectNodesFromContextTestWhileOpen()
|
||||
getActiveInspector().selection.once("new-node", function() {
|
||||
ok(true, "Get selection's 'new-node' selection");
|
||||
executeSoon(function() {
|
||||
testHighlighter(closing);
|
||||
testMarkupView(closing);
|
||||
testBreadcrumbs(closing);
|
||||
finishInspectorTests();
|
||||
getActiveInspector().once("inspector-updated", finishInspectorTests)
|
||||
}
|
||||
)});
|
||||
_clickOnInspectMenuItem(closing);
|
||||
|
@ -2,39 +2,42 @@
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
function test() {
|
||||
|
||||
let doc;
|
||||
let div;
|
||||
let inspector;
|
||||
|
||||
function createDocument()
|
||||
{
|
||||
function createDocument() {
|
||||
div = doc.createElement("div");
|
||||
div.setAttribute("style", "width: 100px; height: 100px; background:yellow;");
|
||||
doc.body.appendChild(div);
|
||||
|
||||
openInspector(runTest);
|
||||
openInspector(aInspector => {
|
||||
inspector = aInspector;
|
||||
inspector.toolbox.highlighter.showBoxModel(getNodeFront(div)).then(runTest);
|
||||
});
|
||||
}
|
||||
|
||||
function runTest(inspector)
|
||||
{
|
||||
inspector.selection.setNode(div);
|
||||
function runTest() {
|
||||
let outline = getHighlighterOutline();
|
||||
is(outline.style.width, "100px", "outline has the right width");
|
||||
|
||||
executeSoon(function() {
|
||||
let outline = inspector.highlighter.outline;
|
||||
is(outline.style.width, "100px", "selection has the right width");
|
||||
|
||||
div.style.width = "200px";
|
||||
function pollTest() {
|
||||
if (outline.style.width == "100px") {
|
||||
setTimeout(pollTest, 10);
|
||||
return;
|
||||
}
|
||||
is(outline.style.width, "200px", "selection updated");
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
div.style.width = "200px";
|
||||
function pollTest() {
|
||||
if (outline.style.width == "100px") {
|
||||
setTimeout(pollTest, 10);
|
||||
return;
|
||||
}
|
||||
setTimeout(pollTest, 10);
|
||||
is(outline.style.width, "200px", "outline updated");
|
||||
finishUp();
|
||||
}
|
||||
setTimeout(pollTest, 10);
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
inspector.toolbox.highlighter.hideBoxModel().then(() => {
|
||||
doc = div = inspector = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -103,7 +103,7 @@ function test() {
|
||||
let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
|
||||
ok(deleteNode, "the popup menu has a delete menu item");
|
||||
|
||||
inspector.once("markupmutation", deleteTest);
|
||||
inspector.once("inspector-updated", deleteTest);
|
||||
|
||||
let commandEvent = document.createEvent("XULCommandEvent");
|
||||
commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
|
||||
@ -120,12 +120,15 @@ function test() {
|
||||
|
||||
function deleteRootNode() {
|
||||
inspector.selection.setNode(doc.documentElement);
|
||||
let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
|
||||
let commandEvent = inspector.panelDoc.createEvent("XULCommandEvent");
|
||||
commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
|
||||
false, false, null);
|
||||
deleteNode.dispatchEvent(commandEvent);
|
||||
executeSoon(isRootStillAlive);
|
||||
|
||||
inspector.once("inspector-updated", () => {
|
||||
let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
|
||||
let commandEvent = inspector.panelDoc.createEvent("XULCommandEvent");
|
||||
commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
|
||||
false, false, null);
|
||||
deleteNode.dispatchEvent(commandEvent);
|
||||
executeSoon(isRootStillAlive);
|
||||
});
|
||||
}
|
||||
|
||||
function isRootStillAlive() {
|
||||
|
@ -37,7 +37,7 @@ function test() {
|
||||
{
|
||||
inspector = aInspector;
|
||||
inspector.selection.setNode(div);
|
||||
performTests();
|
||||
inspector.once("inspector-updated", performTests);
|
||||
}
|
||||
|
||||
function performTests()
|
||||
|
@ -67,22 +67,24 @@ function performTests()
|
||||
// Wait for the "pseudoclass" event so we know the
|
||||
// inspector has been told of the pseudoclass lock change.
|
||||
inspector.selection.once("pseudoclass", () => {
|
||||
// Give the rule view time to update.
|
||||
inspector.once("rule-view-refreshed", () => {
|
||||
testAdded();
|
||||
// Change the pseudo class and give the rule view time to update.
|
||||
inspector.togglePseudoClass(pseudo);
|
||||
inspector.selection.once("pseudoclass", () => {
|
||||
inspector.once("rule-view-refreshed", () => {
|
||||
testRemoved();
|
||||
testRemovedFromUI();
|
||||
|
||||
// toggle it back on
|
||||
inspector.togglePseudoClass(pseudo);
|
||||
inspector.selection.once("pseudoclass", () => {
|
||||
testNavigate(() => {
|
||||
// close the inspector
|
||||
finishUp();
|
||||
testAdded(() => {
|
||||
// Change the pseudo class and give the rule view time to update.
|
||||
inspector.togglePseudoClass(pseudo);
|
||||
inspector.selection.once("pseudoclass", () => {
|
||||
inspector.once("rule-view-refreshed", () => {
|
||||
testRemoved();
|
||||
testRemovedFromUI(() => {
|
||||
// toggle it back on
|
||||
inspector.togglePseudoClass(pseudo);
|
||||
inspector.selection.once("pseudoclass", () => {
|
||||
inspector.once("rule-view-refreshed", () => {
|
||||
testNavigate(() => {
|
||||
// close the inspector
|
||||
finishUp();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -98,46 +100,52 @@ function testNavigate(callback)
|
||||
|
||||
// make sure it's still on after naving to parent
|
||||
is(DOMUtils.hasPseudoClassLock(div, pseudo), true,
|
||||
"pseudo-class lock is still applied after inspecting ancestor");
|
||||
"pseudo-class lock is still applied after inspecting ancestor");
|
||||
|
||||
inspector.selection.setNode(div2);
|
||||
inspector.selection.once("pseudoclass", () => {
|
||||
// make sure it's removed after naving to a non-hierarchy node
|
||||
is(DOMUtils.hasPseudoClassLock(div, pseudo), false,
|
||||
"pseudo-class lock is removed after inspecting sibling node");
|
||||
"pseudo-class lock is removed after inspecting sibling node");
|
||||
|
||||
// toggle it back on
|
||||
inspector.selection.setNode(div);
|
||||
inspector.once("inspector-updated", () => {
|
||||
inspector.togglePseudoClass(pseudo);
|
||||
inspector.selection.once("pseudoclass", () => {
|
||||
callback();
|
||||
});
|
||||
inspector.once("computed-view-refreshed", callback);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function testAdded()
|
||||
function showPickerOn(node, cb)
|
||||
{
|
||||
let highlighter = inspector.toolbox.highlighter;
|
||||
highlighter.showBoxModel(getNodeFront(node)).then(cb);
|
||||
}
|
||||
|
||||
function testAdded(cb)
|
||||
{
|
||||
// lock is applied to it and ancestors
|
||||
let node = div;
|
||||
do {
|
||||
is(DOMUtils.hasPseudoClassLock(node, pseudo), true,
|
||||
"pseudo-class lock has been applied");
|
||||
"pseudo-class lock has been applied");
|
||||
node = node.parentNode;
|
||||
} while (node.parentNode)
|
||||
|
||||
// infobar selector contains pseudo-class
|
||||
let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
|
||||
is(pseudoClassesBox.textContent, pseudo, "pseudo-class in infobar selector");
|
||||
|
||||
// ruleview contains pseudo-class rule
|
||||
is(ruleview.element.children.length, 3,
|
||||
"rule view is showing 3 rules for pseudo-class locked div");
|
||||
let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
|
||||
is(rules.length, 3, "rule view is showing 3 rules for pseudo-class locked div");
|
||||
is(rules[1]._ruleEditor.rule.selectorText, "div:hover", "rule view is showing " + pseudo + " rule");
|
||||
|
||||
is(ruleview.element.children[1]._ruleEditor.rule.selectorText,
|
||||
"div:hover", "rule view is showing " + pseudo + " rule");
|
||||
// Show the highlighter by starting the pick mode and hovering over the div
|
||||
showPickerOn(div, () => {
|
||||
// infobar selector contains pseudo-class
|
||||
let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");
|
||||
is(pseudoClassesBox.textContent, pseudo, "pseudo-class in infobar selector");
|
||||
cb();
|
||||
});
|
||||
}
|
||||
|
||||
function testRemoved()
|
||||
@ -151,15 +159,17 @@ function testRemoved()
|
||||
} while (node.parentNode)
|
||||
}
|
||||
|
||||
function testRemovedFromUI()
|
||||
function testRemovedFromUI(cb)
|
||||
{
|
||||
// infobar selector doesn't contain pseudo-class
|
||||
let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
|
||||
is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");
|
||||
|
||||
// ruleview no longer contains pseudo-class rule
|
||||
is(ruleview.element.children.length, 2,
|
||||
"rule view is showing 2 rules after removing lock");
|
||||
let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
|
||||
is(rules.length, 2, "rule view is showing 2 rules after removing lock");
|
||||
|
||||
showPickerOn(div, () => {
|
||||
let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");
|
||||
is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");
|
||||
cb();
|
||||
});
|
||||
}
|
||||
|
||||
function finishUp()
|
||||
|
@ -44,6 +44,7 @@ function test() {
|
||||
inspector.once("inspector-updated", () => {
|
||||
is(inspector.selection.node, p, "Node re-selected.");
|
||||
toolbox.destroy();
|
||||
toolbox = inspector = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
});
|
||||
|
@ -33,9 +33,8 @@ function inspectNode(aInspector)
|
||||
{
|
||||
inspector = aInspector;
|
||||
|
||||
inspector.highlighter.once("locked", performScrollingTest);
|
||||
inspector.once("inspector-updated", performScrollingTest);
|
||||
executeSoon(function() {
|
||||
inspector.highlighter.unlock();
|
||||
inspector.selection.setNode(div, "");
|
||||
});
|
||||
}
|
||||
|
@ -30,9 +30,8 @@ function test() {
|
||||
}
|
||||
|
||||
function endTests() {
|
||||
inspector.destroy().then(() =>
|
||||
toolbox.destroy()
|
||||
).then(() => {
|
||||
inspector.destroy();
|
||||
toolbox.destroy().then(() => {
|
||||
toolbox = inspector = page1 = page2 = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
@ -40,7 +39,7 @@ function test() {
|
||||
}
|
||||
|
||||
function loadPageAnd(page, callback) {
|
||||
inspector.once("markuploaded", () => {
|
||||
inspector.once("new-root", () => {
|
||||
callback();
|
||||
});
|
||||
|
||||
|
@ -6,11 +6,10 @@ const Cu = Components.utils;
|
||||
const Ci = Components.interfaces;
|
||||
const Cc = Components.classes;
|
||||
|
||||
Services.prefs.setBoolPref("devtools.debugger.log", true);
|
||||
SimpleTest.registerCleanupFunction(() => {
|
||||
Services.prefs.clearUserPref("devtools.debugger.log");
|
||||
});
|
||||
|
||||
// Services.prefs.setBoolPref("devtools.debugger.log", true);
|
||||
// SimpleTest.registerCleanupFunction(() => {
|
||||
// Services.prefs.clearUserPref("devtools.debugger.log");
|
||||
// });
|
||||
|
||||
let tempScope = {};
|
||||
Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", tempScope);
|
||||
@ -52,40 +51,63 @@ function getNodeFront(node)
|
||||
return inspector.walker.frontForRawNode(node);
|
||||
}
|
||||
|
||||
function getHighlighter()
|
||||
{
|
||||
return gBrowser.selectedBrowser.parentNode.querySelector(".highlighter-container");
|
||||
}
|
||||
|
||||
function getHighlighterOutline()
|
||||
{
|
||||
let h = getHighlighter();
|
||||
if (h) {
|
||||
return h.querySelector(".highlighter-outline");
|
||||
}
|
||||
}
|
||||
|
||||
function getHighlighterOutlineRect() {
|
||||
let helper = new LayoutHelpers(window.content);
|
||||
let outline = getHighlighterOutline();
|
||||
|
||||
if (outline) {
|
||||
let browserOffsetRect = helper.getDirtyRect(gBrowser.selectedBrowser);
|
||||
let outlineRect = helper.getDirtyRect(outline);
|
||||
outlineRect.top -= browserOffsetRect.top;
|
||||
outlineRect.left -= browserOffsetRect.left;
|
||||
|
||||
return outlineRect;
|
||||
}
|
||||
}
|
||||
|
||||
function isHighlighting()
|
||||
{
|
||||
let outline = getActiveInspector().highlighter.outline;
|
||||
return !(outline.getAttribute("hidden") == "true");
|
||||
let outline = getHighlighterOutline();
|
||||
return outline && !outline.hasAttribute("hidden");
|
||||
}
|
||||
|
||||
function getHighlitNode()
|
||||
{
|
||||
let h = getActiveInspector().highlighter;
|
||||
if (!isHighlighting() || !h._contentRect)
|
||||
return null;
|
||||
if (isHighlighting()) {
|
||||
let helper = new LayoutHelpers(window.content);
|
||||
let outlineRect = getHighlighterOutlineRect();
|
||||
|
||||
let a = {
|
||||
x: h._contentRect.left,
|
||||
y: h._contentRect.top
|
||||
};
|
||||
let a = {
|
||||
x: outlineRect.left,
|
||||
y: outlineRect.top
|
||||
};
|
||||
|
||||
let b = {
|
||||
x: a.x + h._contentRect.width,
|
||||
y: a.y + h._contentRect.height
|
||||
};
|
||||
let b = {
|
||||
x: a.x + outlineRect.width,
|
||||
y: a.y + outlineRect.height
|
||||
};
|
||||
|
||||
// Get midpoint of diagonal line.
|
||||
let midpoint = midPoint(a, b);
|
||||
|
||||
let lh = new LayoutHelpers(window.content);
|
||||
return lh.getElementFromPoint(h.win.document, midpoint.x,
|
||||
midpoint.y);
|
||||
let {x, y} = getMidPoint(a, b);
|
||||
return helper.getElementFromPoint(window.content.document, x, y);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function midPoint(aPointA, aPointB)
|
||||
function getMidPoint(aPointA, aPointB)
|
||||
{
|
||||
let pointC = { };
|
||||
let pointC = {};
|
||||
pointC.x = (aPointB.x - aPointA.x) / 2 + aPointA.x;
|
||||
pointC.y = (aPointB.y - aPointA.y) / 2 + aPointA.y;
|
||||
return pointC;
|
||||
@ -189,6 +211,13 @@ function getComputedPropertyValue(aName)
|
||||
}
|
||||
}
|
||||
|
||||
function getContainerForRawNode(markupView, rawNode)
|
||||
{
|
||||
let front = markupView.walker.frontForRawNode(rawNode);
|
||||
let container = markupView.getContainer(front);
|
||||
return container;
|
||||
}
|
||||
|
||||
SimpleTest.registerCleanupFunction(function () {
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
gDevTools.closeToolbox(target);
|
||||
|
@ -681,9 +681,6 @@ function test() {
|
||||
assertAttributes(doc.querySelector("#node18"), {
|
||||
id: "node18",
|
||||
});
|
||||
|
||||
is(inspector.highlighter.nodeInfo.classesBox.textContent, "",
|
||||
"No classes in the infobar before edit.");
|
||||
},
|
||||
execute: function(after) {
|
||||
inspector.once("markupmutation", function() {
|
||||
@ -701,9 +698,6 @@ function test() {
|
||||
class: "newclass",
|
||||
style: "color:green"
|
||||
});
|
||||
|
||||
is(inspector.highlighter.nodeInfo.classesBox.textContent, ".newclass",
|
||||
"Correct classes in the infobar after edit.");
|
||||
}
|
||||
};
|
||||
testAsyncSetup(test, editTagName);
|
||||
|
@ -123,7 +123,7 @@ function test() {
|
||||
if(!container) {
|
||||
ok(false, "Node not found");
|
||||
} else {
|
||||
ok(container.highlighter.classList.contains("theme-bg-contrast"),
|
||||
ok(container.tagState.classList.contains("theme-bg-contrast"),
|
||||
"Node is flashing");
|
||||
}
|
||||
}
|
||||
|
@ -67,17 +67,18 @@ function testModifyRules()
|
||||
rule.editor.addProperty("font-weight", "bold", "");
|
||||
}
|
||||
|
||||
reselectElement(doc.querySelector("#target"), () => {
|
||||
executeSoon(() => {
|
||||
reselectElement(doc.querySelector("#target"), () => {
|
||||
for (let rule of ruleView._elementStyle.rules) {
|
||||
let lastRule = rule.textProps[rule.textProps.length - 1];
|
||||
|
||||
for (let rule of ruleView._elementStyle.rules) {
|
||||
let lastRule = rule.textProps[rule.textProps.length - 1];
|
||||
is (lastRule.name, "font-weight", "Last rule name is font-weight");
|
||||
is (lastRule.value, "bold", "Last rule value is bold");
|
||||
}
|
||||
|
||||
is (lastRule.name, "font-weight", "Last rule name is font-weight");
|
||||
is (lastRule.value, "bold", "Last rule value is bold");
|
||||
}
|
||||
|
||||
gBrowser.removeCurrentTab();
|
||||
openXUL();
|
||||
gBrowser.removeCurrentTab();
|
||||
openXUL();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -20,34 +20,35 @@ function simpleOverride(aInspector, aRuleView)
|
||||
|
||||
let styleNode = addStyle(doc, style);
|
||||
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
|
||||
inspector.once("markupmutation", () => {
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
let idRule = elementStyle.rules[1];
|
||||
let idProp = idRule.textProps[0];
|
||||
is(idProp.name, "background-color", "First ID prop should be background-color");
|
||||
ok(!idProp.overridden, "ID prop should not be overridden.");
|
||||
|
||||
let idRule = elementStyle.rules[1];
|
||||
let idProp = idRule.textProps[0];
|
||||
is(idProp.name, "background-color", "First ID prop should be background-color");
|
||||
ok(!idProp.overridden, "ID prop should not be overridden.");
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
is(classProp.name, "background-color", "First class prop should be background-color");
|
||||
ok(classProp.overridden, "Class property should be overridden.");
|
||||
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
is(classProp.name, "background-color", "First class prop should be background-color");
|
||||
ok(classProp.overridden, "Class property should be overridden.");
|
||||
// Override background-color by changing the element style.
|
||||
let elementRule = elementStyle.rules[0];
|
||||
elementRule.createProperty("background-color", "purple", "");
|
||||
promiseDone(elementRule._applyingModifications.then(() => {
|
||||
let elementProp = elementRule.textProps[0];
|
||||
is(classProp.name, "background-color", "First element prop should now be background-color");
|
||||
ok(!elementProp.overridden, "Element style property should not be overridden");
|
||||
ok(idProp.overridden, "ID property should be overridden");
|
||||
ok(classProp.overridden, "Class property should be overridden");
|
||||
|
||||
// Override background-color by changing the element style.
|
||||
let elementRule = elementStyle.rules[0];
|
||||
elementRule.createProperty("background-color", "purple", "");
|
||||
promiseDone(elementRule._applyingModifications.then(() => {
|
||||
let elementProp = elementRule.textProps[0];
|
||||
is(classProp.name, "background-color", "First element prop should now be background-color");
|
||||
ok(!elementProp.overridden, "Element style property should not be overridden");
|
||||
ok(idProp.overridden, "ID property should be overridden");
|
||||
ok(classProp.overridden, "Class property should be overridden");
|
||||
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
partialOverride();
|
||||
}));
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
partialOverride();
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -65,25 +66,26 @@ function partialOverride()
|
||||
|
||||
let styleNode = addStyle(doc, style);
|
||||
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
|
||||
inspector.once("markupmutation", () => {
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
ok(!classProp.overridden, "Class prop shouldn't be overridden, some props are still being used.");
|
||||
for (let computed of classProp.computed) {
|
||||
if (computed.name.indexOf("margin-left") == 0) {
|
||||
ok(computed.overridden, "margin-left props should be overridden.");
|
||||
} else {
|
||||
ok(!computed.overridden, "Non-margin-left props should not be overridden.");
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
ok(!classProp.overridden, "Class prop shouldn't be overridden, some props are still being used.");
|
||||
for (let computed of classProp.computed) {
|
||||
if (computed.name.indexOf("margin-left") == 0) {
|
||||
ok(computed.overridden, "margin-left props should be overridden.");
|
||||
} else {
|
||||
ok(!computed.overridden, "Non-margin-left props should not be overridden.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
|
||||
importantOverride();
|
||||
importantOverride();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -100,29 +102,30 @@ function importantOverride()
|
||||
'}';
|
||||
let styleNode = addStyle(doc, style);
|
||||
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
|
||||
inspector.once("markupmutation", () => {
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
let idRule = elementStyle.rules[1];
|
||||
let idProp = idRule.textProps[0];
|
||||
ok(idProp.overridden, "Not-important rule should be overridden.");
|
||||
|
||||
let idRule = elementStyle.rules[1];
|
||||
let idProp = idRule.textProps[0];
|
||||
ok(idProp.overridden, "Not-important rule should be overridden.");
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
ok(!classProp.overridden, "Important rule should not be overridden.");
|
||||
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
ok(!classProp.overridden, "Important rule should not be overridden.");
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
let elementRule = elementStyle.rules[0];
|
||||
let elementProp = elementRule.createProperty("background-color", "purple", "important");
|
||||
promiseDone(elementRule._applyingModifications.then(() => {
|
||||
ok(classProp.overridden, "New important prop should override class property.");
|
||||
ok(!elementProp.overridden, "New important prop should not be overriden.");
|
||||
|
||||
let elementRule = elementStyle.rules[0];
|
||||
let elementProp = elementRule.createProperty("background-color", "purple", "important");
|
||||
promiseDone(elementRule._applyingModifications.then(() => {
|
||||
ok(classProp.overridden, "New important prop should override class property.");
|
||||
ok(!elementProp.overridden, "New important prop should not be overriden.");
|
||||
|
||||
disableOverride();
|
||||
}));
|
||||
disableOverride();
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -137,23 +140,24 @@ function disableOverride()
|
||||
'}';
|
||||
let styleNode = addStyle(doc, style);
|
||||
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
|
||||
inspector.once("markupmutation", () => {
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
|
||||
inspector.selection.setNode(doc.getElementById("testid"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
let elementStyle = view._elementStyle;
|
||||
let idRule = elementStyle.rules[1];
|
||||
let idProp = idRule.textProps[0];
|
||||
idProp.setEnabled(false);
|
||||
promiseDone(idRule._applyingModifications.then(() => {
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
ok(!classProp.overridden, "Class prop should not be overridden after id prop was disabled.");
|
||||
|
||||
let idRule = elementStyle.rules[1];
|
||||
let idProp = idRule.textProps[0];
|
||||
idProp.setEnabled(false);
|
||||
promiseDone(idRule._applyingModifications.then(() => {
|
||||
let classRule = elementStyle.rules[2];
|
||||
let classProp = classRule.textProps[0];
|
||||
ok(!classProp.overridden, "Class prop should not be overridden after id prop was disabled.");
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
|
||||
styleNode.parentNode.removeChild(styleNode);
|
||||
|
||||
finishTest();
|
||||
}));
|
||||
finishTest();
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -5,11 +5,13 @@
|
||||
|
||||
// Tests that the $0 console helper works as intended.
|
||||
|
||||
let inspector, h1;
|
||||
|
||||
function createDocument()
|
||||
{
|
||||
let doc = content.document;
|
||||
let div = doc.createElement("div");
|
||||
let h1 = doc.createElement("h1");
|
||||
h1 = doc.createElement("h1");
|
||||
let p1 = doc.createElement("p");
|
||||
let p2 = doc.createElement("p");
|
||||
let div2 = doc.createElement("div");
|
||||
@ -42,39 +44,37 @@ function createDocument()
|
||||
|
||||
function setupHighlighterTests()
|
||||
{
|
||||
let h1 = content.document.querySelector("h1");
|
||||
ok(h1, "we have the header node");
|
||||
|
||||
openInspector(runSelectionTests);
|
||||
}
|
||||
|
||||
function runSelectionTests(aInspector)
|
||||
{
|
||||
aInspector.highlighter.unlockAndFocus();
|
||||
aInspector.highlighter.outline.setAttribute("disable-transitions", "true");
|
||||
|
||||
executeSoon(function() {
|
||||
aInspector.selection.once("new-node", performTestComparisons);
|
||||
let h1 = content.document.querySelector("h1");
|
||||
inspector = aInspector;
|
||||
inspector.toolbox.startPicker();
|
||||
inspector.toolbox.once("picker-started", () => {
|
||||
EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
|
||||
inspector.toolbox.once("picker-node-hovered", () => {
|
||||
executeSoon(performTestComparisons);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getHighlighterOutline()
|
||||
{
|
||||
return gBrowser.selectedBrowser.parentNode
|
||||
.querySelector(".highlighter-container .highlighter-outline");
|
||||
}
|
||||
|
||||
function performTestComparisons()
|
||||
{
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
let inspector = gDevTools.getToolbox(target).getPanel("inspector");
|
||||
inspector.highlighter.lock();
|
||||
let outline = getHighlighterOutline();
|
||||
ok(outline && !outline.hasAttribute("hidden"), "inspector is highlighting");
|
||||
|
||||
let isHighlighting =
|
||||
!(inspector.highlighter.outline.getAttribute("hidden") == "true");
|
||||
|
||||
ok(isHighlighting, "inspector is highlighting");
|
||||
|
||||
let h1 = content.document.querySelector("h1");
|
||||
is(inspector.selection.node, h1, "selection matches node");
|
||||
|
||||
openConsole(gBrowser.selectedTab, performWebConsoleTests);
|
||||
EventUtils.synthesizeMouseAtCenter(h1, {}, content);
|
||||
inspector.toolbox.once("picker-stopped", () => {
|
||||
openConsole(gBrowser.selectedTab, performWebConsoleTests);
|
||||
});
|
||||
}
|
||||
|
||||
function performWebConsoleTests(hud)
|
||||
@ -98,10 +98,10 @@ function performWebConsoleTests(hud)
|
||||
{
|
||||
isnot(node.textContent.indexOf("bug653531"), -1,
|
||||
"correct output for $0.textContent");
|
||||
let inspector = gDevTools.getToolbox(target).getPanel("inspector");
|
||||
is(inspector.selection.node.textContent, "bug653531",
|
||||
"node successfully updated");
|
||||
|
||||
inspector = h1 = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finishTest();
|
||||
}
|
||||
@ -110,6 +110,7 @@ function performWebConsoleTests(hud)
|
||||
function test()
|
||||
{
|
||||
waitForExplicitFinish();
|
||||
|
||||
gBrowser.selectedTab = gBrowser.addTab();
|
||||
gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
|
||||
@ -118,4 +119,3 @@ function test()
|
||||
|
||||
content.location = "data:text/html;charset=utf-8,test for highlighter helper in web console";
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user