Bug 916443 - part 2 - Toolbox level remote highlighter (tests), r=paul

This commit is contained in:
Patrick Brosset 2014-01-09 12:36:06 +01:00
parent cb863d2cfe
commit 5b107c6af9
31 changed files with 533 additions and 670 deletions

View File

@ -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();
});
}

View File

@ -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]

View File

@ -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();
}
}

View File

@ -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);

View File

@ -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();

View File

@ -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);
}
}

View File

@ -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();

View File

@ -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>";
}

View File

@ -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();

View File

@ -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");
}
}

View File

@ -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");

View File

@ -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()

View File

@ -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();
}

View File

@ -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";
}

View File

@ -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();
});
}
}

View File

@ -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();
});
}

View File

@ -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();
}
}

View File

@ -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);

View File

@ -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();
});
}

View File

@ -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() {

View File

@ -37,7 +37,7 @@ function test() {
{
inspector = aInspector;
inspector.selection.setNode(div);
performTests();
inspector.once("inspector-updated", performTests);
}
function performTests()

View File

@ -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()

View File

@ -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();
});

View File

@ -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, "");
});
}

View File

@ -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();
});

View File

@ -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);

View File

@ -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);

View File

@ -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");
}
}

View File

@ -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();
});
});
}

View File

@ -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();
}));
});
});
}

View File

@ -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";
}