Bug 663778 - Changes to tests for box model highlighter r=jwalker

This commit is contained in:
Michael Ratcliffe 2014-03-12 14:01:31 +00:00
parent 8e40aabf44
commit 1137d41a9a
22 changed files with 229 additions and 170 deletions

View File

@ -207,4 +207,5 @@ registerCleanupFunction(function() {
gDebuggee = null;
gPanel = null;
gDebugger = null;
gVariables = null;
});

View File

@ -24,8 +24,8 @@ function test() {
openInspector((aInspector, aToolbox) => {
toolbox = aToolbox;
inspector = aInspector;
inspector.selection.setNode(doc.querySelector("h2"), null);
inspector.once("inspector-updated", runTests);
inspector.selection.setNode(doc.querySelector("span"), "test");
inspector.toolbox.once("highlighter-ready", runTests);
});
}
@ -33,8 +33,6 @@ function test() {
Task.spawn(function() {
yield hoverH1InMarkupView();
yield assertH1Highlighted();
yield mouseLeaveMarkupView();
yield assertNoNodeHighlighted();
finishUp();
}).then(null, Cu.reportError);
@ -42,11 +40,11 @@ function test() {
function hoverH1InMarkupView() {
let deferred = promise.defer();
let container = getContainerForRawNode(inspector.markup, doc.querySelector("h1"));
EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
inspector.markup.doc.defaultView);
inspector.toolbox.once("node-highlight", deferred.resolve);
inspector.toolbox.once("highlighter-ready", deferred.resolve);
EventUtils.synthesizeMouseAtCenter(container.tagLine, {type: "mousemove"},
inspector.markup.doc.defaultView);
return deferred.promise;
}
@ -54,25 +52,6 @@ function test() {
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 mouseLeaveMarkupView() {
let deferred = promise.defer();
// 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 assertNoNodeHighlighted() {
ok(!isHighlighting(), "After the mouse left the markup view, the highlighter is hidden");
return promise.resolve();
}
function finishUp() {

View File

@ -91,7 +91,7 @@ function test()
}
function finishUp() {
doc = nodes = null;
doc = nodes = inspector = null;
gBrowser.removeCurrentTab();
finish();
}

View File

@ -64,12 +64,17 @@ function test()
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 " + outlineRect[dim]);
}
let {p1, p2, p3, p4} = getBoxModelStatus().border.points;
let {top, right, bottom, left} = iframeNode.getBoundingClientRect();
is(top, p1.y, "iframeRect.top === boxModelStatus.p1.y");
is(top, p2.y, "iframeRect.top === boxModelStatus.p2.y");
is(right, p2.x, "iframeRect.right === boxModelStatus.p2.x");
is(right, p3.x, "iframeRect.right === boxModelStatus.p3.x");
is(bottom, p3.y, "iframeRect.bottom === boxModelStatus.p3.y");
is(bottom, p4.y, "iframeRect.bottom === boxModelStatus.p4.y");
is(left, p1.x, "iframeRect.left === boxModelStatus.p1.x");
is(left, p4.x, "iframeRect.left === boxModelStatus.p4.x");
iframeNode.style.marginBottom = doc.defaultView.innerHeight + "px";
doc.defaultView.scrollBy(0, 40);
@ -81,9 +86,8 @@ function test()
{
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");
let outlineRect = getSimpleBorderRect();
is(outlineRect.height, 200, "highlighter height");
inspector.toolbox.highlighterUtils.stopPicker().then(() => {
let target = TargetFactory.forTab(gBrowser.selectedTab);

View File

@ -18,12 +18,7 @@ function test() {
inspector.toolbox.highlighterUtils.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();
});
});
inspector.toolbox.once("highlighter-ready", cb);
});
}
@ -35,8 +30,7 @@ function test() {
ok(isHighlighting(), "Inspector is highlighting");
iframe.addEventListener("load", onIframeLoad, false);
executeSoon(function() {
executeSoon(() => {
iframe.contentWindow.location = "javascript:location.reload()";
});
});
@ -51,6 +45,7 @@ function test() {
}
iframe.removeEventListener("load", onIframeLoad, false);
info("Finished reloading iframe and inspector updated");
ok(isHighlighting(), "Inspector is highlighting after iframe nav");

View File

@ -57,23 +57,23 @@ function createDocument() {
}
function testMouseOverH1Highlights() {
inspector.toolbox.once("picker-node-hovered", () => {
inspector.toolbox.once("highlighter-ready", () => {
ok(isHighlighting(), "Highlighter is shown");
is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node");
testOutlineDimensions();
testBoxModelDimensions();
});
EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
}
function testOutlineDimensions() {
function testBoxModelDimensions() {
let h1Dims = h1.getBoundingClientRect();
let h1Width = h1Dims.width;
let h1Height = h1Dims.height;
let h1Width = Math.ceil(h1Dims.width);
let h1Height = Math.ceil(h1Dims.height);
let outlineDims = getHighlighterOutlineRect();
let outlineWidth = outlineDims.width;
let outlineHeight = outlineDims.height;
let outlineDims = getSimpleBorderRect();
let outlineWidth = Math.ceil(outlineDims.width);
let outlineHeight = Math.ceil(outlineDims.height);
// Disabled due to bug 716245
is(outlineWidth, h1Width, "outline width matches dimensions of element (no zoom)");
@ -84,27 +84,22 @@ function testOutlineDimensions() {
.QueryInterface(Ci.nsIMarkupDocumentViewer);
contentViewer.fullZoom = 2;
// We wait at least 500ms to make sure the highlighter is not "mutting" the
// resize event
// simulate the zoomed dimensions of the div element
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);
window.setTimeout(function() {
// simulate the zoomed dimensions of the div element
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);
let outlineDims = getSimpleBorderRect();
let outlineWidth = Math.floor(outlineDims.width);
let outlineHeight = Math.floor(outlineDims.height);
let outlineDims = getHighlighterOutlineRect();
let outlineWidth = Math.floor(outlineDims.width);
let outlineHeight = Math.floor(outlineDims.height);
is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
// Disabled due to bug 716245
is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
executeSoon(finishUp);
}, 500);
executeSoon(finishUp);
}
function finishUp() {

View File

@ -35,7 +35,9 @@ function createDocument() {
// Open the inspector, start the picker mode, and start the tests
openInspector(aInspector => {
inspector = aInspector;
inspector.toolbox.highlighterUtils.startPicker().then(runTests);
inspector.once("inspector-updated", () => {
inspector.toolbox.highlighterUtils.startPicker().then(runTests);
});
});
}, false);
@ -48,9 +50,7 @@ function createDocument() {
}
function moveMouseOver(aElement, cb) {
inspector.toolbox.once("picker-node-hovered", () => {
executeSoon(cb);
});
inspector.toolbox.once("picker-node-hovered", cb);
EventUtils.synthesizeMouseAtCenter(aElement, {type: "mousemove"},
aElement.ownerDocument.defaultView);
}
@ -61,15 +61,14 @@ function runTests() {
function testDiv1Highlighter() {
moveMouseOver(div1, () => {
getHighlighterOutline().setAttribute("disable-transitions", "true");
is(getHighlitNode(), div1, "highlighter matches selection");
is(getHighlitNode(), div1, "highlighter matches selection of div1");
testDiv2Highlighter();
});
}
function testDiv2Highlighter() {
moveMouseOver(div2, () => {
is(getHighlitNode(), div2, "highlighter matches selection");
is(getHighlitNode(), div2, "highlighter matches selection of div2");
selectRoot();
});
}

View File

@ -13,24 +13,24 @@ function test() {
openInspector(aInspector => {
inspector = aInspector;
inspector.toolbox.highlighter.showBoxModel(getNodeFront(div)).then(runTest);
inspector.once("inspector-updated", () => {
inspector.toolbox.highlighter.showBoxModel(getNodeFront(div)).then(runTest);
});
});
}
function runTest() {
let outline = getHighlighterOutline();
is(outline.style.width, "100px", "outline has the right width");
let rect = getSimpleBorderRect();
is(rect.width, 100, "outline has the right width");
div.style.width = "200px";
function pollTest() {
if (outline.style.width == "100px") {
setTimeout(pollTest, 10);
return;
}
is(outline.style.width, "200px", "outline updated");
finishUp();
}
setTimeout(pollTest, 10);
inspector.toolbox.once("highlighter-ready", testRectWidth);
}
function testRectWidth() {
let rect = getSimpleBorderRect();
is(rect.width, 200, "outline updated");
finishUp();
}
function finishUp() {

View File

@ -33,34 +33,34 @@ function inspectNode(aInspector)
{
inspector = aInspector;
inspector.once("inspector-updated", performScrollingTest);
executeSoon(function() {
inspector.selection.setNode(div, "");
});
let highlighter = inspector.toolbox.highlighter;
highlighter.showBoxModel(getNodeFront(div)).then(performScrollingTest);
}
function performScrollingTest()
{
executeSoon(function() {
// FIXME: this will fail on retina displays. EventUtils will only scroll
// 25px down instead of 50.
EventUtils.synthesizeWheel(div, 10, 10,
{ deltaY: 50.0, deltaMode: WheelEvent.DOM_DELTA_PIXEL },
iframe.contentWindow);
});
gBrowser.selectedBrowser.addEventListener("scroll", function() {
gBrowser.selectedBrowser.removeEventListener("scroll", arguments.callee,
false);
let isRetina = devicePixelRatio === 2;
is(iframe.contentDocument.body.scrollTop,
isRetina ? 25 : 50, "inspected iframe scrolled");
is(iframe.contentDocument.body.scrollTop, 50, "inspected iframe scrolled");
inspector = div = iframe = doc = null;
let target = TargetFactory.forTab(gBrowser.selectedTab);
gDevTools.closeToolbox(target);
gBrowser.removeCurrentTab();
finish();
finishUp();
}, false);
EventUtils.synthesizeWheel(div, 10, 10,
{ deltaY: 50.0, deltaMode: WheelEvent.DOM_DELTA_PIXEL },
iframe.contentWindow);
}
function finishUp()
{
inspector = div = iframe = doc = null;
let target = TargetFactory.forTab(gBrowser.selectedTab);
gDevTools.closeToolbox(target);
gBrowser.removeCurrentTab();
finish();
}
function test()

View File

@ -25,18 +25,19 @@ function inspectorRuleViewOpened()
gDevTools.once("toolbox-destroyed", inspectorClosed);
let target = TargetFactory.forTab(gBrowser.selectedTab);
gDevTools.getToolbox(target).destroy();
gDevTools.closeToolbox(target);
}
function inspectorClosed()
{
openInspector(function(panel) {
inspector = panel;
if (inspector.sidebar.getCurrentTabID()) {
// Default sidebar already selected.
info("Default sidebar already selected.")
testNewDefaultTab();
} else {
// Default sidebar still to be selected.
info("Default sidebar still to be selected, adding select listener.");
inspector.sidebar.once("select", testNewDefaultTab);
}
});

View File

@ -33,6 +33,7 @@ SimpleTest.registerCleanupFunction(() => {
console.error("DebuggerServer open connections: " + Object.getOwnPropertyNames(DebuggerServer._connections).length);
Services.prefs.clearUserPref("devtools.dump.emit");
Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
});
function openInspector(callback)
@ -60,63 +61,118 @@ function getHighlighter()
return gBrowser.selectedBrowser.parentNode.querySelector(".highlighter-container");
}
function getHighlighterOutline()
{
let h = getHighlighter();
if (h) {
return h.querySelector(".highlighter-outline");
}
function getSimpleBorderRect() {
let {p1, p2, p3, p4} = getBoxModelStatus().border.points;
return {
top: p1.y,
left: p1.x,
width: p2.x - p1.x,
height: p4.y - p1.y
};
}
function getHighlighterOutlineRect() {
let helper = new LayoutHelpers(window.content);
let outline = getHighlighterOutline();
function getBoxModelRoot() {
let highlighter = getHighlighter();
return highlighter.querySelector(".box-model-root");
}
if (outline) {
let browserOffsetRect = helper.getDirtyRect(gBrowser.selectedBrowser);
let outlineRect = helper.getDirtyRect(outline);
outlineRect.top -= browserOffsetRect.top;
outlineRect.left -= browserOffsetRect.left;
function getBoxModelStatus() {
let root = getBoxModelRoot();
let inspector = getActiveInspector();
return outlineRect;
}
return {
visible: !root.hasAttribute("hidden"),
currentNode: inspector.walker.currentNode,
margin: {
points: getPointsForRegion("margin"),
visible: isRegionHidden("margin")
},
border: {
points: getPointsForRegion("border"),
visible: isRegionHidden("border")
},
padding: {
points: getPointsForRegion("padding"),
visible: isRegionHidden("padding")
},
content: {
points: getPointsForRegion("content"),
visible: isRegionHidden("content")
},
guides: {
top: getGuideStatus("top"),
right: getGuideStatus("right"),
bottom: getGuideStatus("bottom"),
left: getGuideStatus("left")
}
};
}
function getGuideStatus(location) {
let root = getBoxModelRoot();
let guide = root.querySelector(".box-model-guide-" + location);
return {
visible: !guide.hasAttribute("hidden"),
x1: guide.getAttribute("x1"),
y1: guide.getAttribute("y1"),
x2: guide.getAttribute("x2"),
y2: guide.getAttribute("y2")
};
}
function getPointsForRegion(region) {
let root = getBoxModelRoot();
let box = root.querySelector(".box-model-" + region);
let points = box.getAttribute("points").split(/[, ]/);
// We multiply each value by 1 to cast it into a number
return {
p1: {
x: parseFloat(points[0]),
y: parseFloat(points[1])
},
p2: {
x: parseFloat(points[2]),
y: parseFloat(points[3])
},
p3: {
x: parseFloat(points[4]),
y: parseFloat(points[5])
},
p4: {
x: parseFloat(points[6]),
y: parseFloat(points[7])
}
};
}
function isRegionHidden(region) {
let root = getBoxModelRoot();
let box = root.querySelector(".box-model-" + region);
return !box.hasAttribute("hidden");
}
function isHighlighting()
{
let outline = getHighlighterOutline();
return outline && !outline.hasAttribute("hidden");
let root = getBoxModelRoot();
return !root.hasAttribute("hidden");
}
function getHighlitNode()
{
if (isHighlighting()) {
let helper = new LayoutHelpers(window.content);
let outlineRect = getHighlighterOutlineRect();
let points = getBoxModelStatus().content.points;
let x = (points.p1.x + points.p2.x + points.p3.x + points.p4.x) / 4;
let y = (points.p1.y + points.p2.y + points.p3.y + points.p4.y) / 4;
let a = {
x: outlineRect.left,
y: outlineRect.top
};
let b = {
x: a.x + outlineRect.width,
y: a.y + outlineRect.height
};
let {x, y} = getMidPoint(a, b);
return helper.getElementFromPoint(window.content.document, x, y);
}
}
function getMidPoint(aPointA, aPointB)
{
let pointC = {};
pointC.x = (aPointB.x - aPointA.x) / 2 + aPointA.x;
pointC.y = (aPointB.y - aPointA.y) / 2 + aPointA.y;
return pointC;
}
function computedView()
{
let sidebar = getActiveInspector().sidebar;

View File

@ -125,7 +125,7 @@ function test() {
break;
}
inspector.markup._waitForChildren().then(() => executeSoon(function BIMNT_newNode() {
inspector.markup._waitForChildren().then(() => executeSoon(() => {
let node = inspector.selection.node;
if (className == "*comment*") {

View File

@ -120,7 +120,7 @@ function hoverContainer(nodeOrSelector, inspector) {
info("Hovering over the markup-container for node " + nodeOrSelector);
let highlit = inspector.toolbox.once("node-highlight");
let container = getContainerForRawNode(inspector.markup, getNode(nodeOrSelector));
EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
EventUtils.synthesizeMouseAtCenter(container.tagLine, {type: "mousemove"},
inspector.markup.doc.defaultView);
return highlit;
}
@ -148,8 +148,9 @@ function clickContainer(nodeOrSelector, inspector) {
* @return {Boolean}
*/
function isHighlighterVisible() {
let outline = gBrowser.selectedBrowser.parentNode.querySelector(".highlighter-container .highlighter-outline");
return outline && !outline.hasAttribute("hidden");
let highlighter = gBrowser.selectedBrowser.parentNode
.querySelector(".highlighter-container .box-model-root");
return highlighter && !highlighter.hasAttribute("hidden");
}
/**
@ -164,7 +165,7 @@ function mouseLeaveMarkupView(inspector) {
// Find another element to mouseover over in order to leave the markup-view
let btn = inspector.toolbox.doc.querySelector(".toolbox-dock-button");
EventUtils.synthesizeMouse(btn, 2, 2, {type: "mousemove"},
EventUtils.synthesizeMouseAtCenter(btn, {type: "mousemove"},
inspector.toolbox.doc.defaultView);
executeSoon(def.resolve);

View File

@ -90,8 +90,7 @@ function testAfterSecondRevert() {
ok(menu.hasAttribute("disabled"),
"Revert menu entry is disabled after reverting to changed saved state.");
gFile.remove(false);
gFile = null;
gScratchpad = null;
gFile = gScratchpad = menu = null;
finish();
}

View File

@ -66,7 +66,7 @@ function onNodeListVviewFetched(aEvent, aVar)
// variable's highlightDomNode and see if it has the desired effect
prop.highlightDomNode();
} else {
finishTest();
finishUp();
}
}
@ -89,3 +89,9 @@ function onNodeListVviewFetched(aEvent, aVar)
hoverOverDomNodeVariableAndAssertHighlighter(0);
}
function finishUp() {
gWebConsole = gJSTerm = gVariablesView = gToolbox = null;
finishTest();
}

View File

@ -214,7 +214,7 @@ function testCompletion(hud) {
is(newItems.length, 0, "no items for foo2Obj[0]");
testDriver = null;
executeSoon(finishTest);
executeSoon(finishUp);
yield undefined;
}
@ -237,3 +237,8 @@ function onFramesAdded()
info("onFramesAdded, openConsole() now");
executeSoon(() => openConsole(null, testNext));
}
function finishUp() {
testDriver = gStackframes = null;
finishTest();
}

View File

@ -332,5 +332,10 @@ function popupHideAfterCompletionInText()
is(inputNode.selectionStart, inputNode.selectionEnd, "cursor location (confirmed)");
ok(!completeNode.value, "completeNode is empty");
finishUp();
}
function finishUp() {
HUD = popup = jsterm = inputNode = completeNode = null;
finishTest();
}

View File

@ -84,5 +84,10 @@ function onVariablesViewReady(aEvent, aView)
{
findVariableViewProperties(aView, [
{ name: "body", value: "<body>" },
], { webconsole: gHUD }).then(finishTest);
], { webconsole: gHUD }).then(finishUp);
}
function finishUp() {
gHUD = null;
finishTest();
}

View File

@ -89,5 +89,10 @@ function test() {
let {tab} = yield loadTab(TEST_URI);
let hud = yield openConsole(tab);
return checkOutputForInputs(hud, inputTests);
}).then(finishTest);
}).then(finishUp);
}
function finishUp() {
inputTests = null;
finishTest();
}

View File

@ -158,6 +158,12 @@ function test() {
browser.removeEventListener("load", onLoad, true);
openConsole().then((hud) => {
return checkOutputForInputs(hud, inputTests);
}).then(finishTest);
}).then(finishUp);
}, true);
}
function finishUp() {
inputTests = null;
finishTest();
}

View File

@ -71,14 +71,11 @@ let observer = {
ok(true, "the view source window was opened in response to clicking " +
"the location node");
// executeSoon() is necessary to avoid crashing Firefox. See bug 611543.
executeSoon(function() {
aSubject.close();
ok(containsValueInvoked, "custom containsValue() was invoked");
Sources.containsValue = containsValue;
Sources = containsValue = null;
finishTest();
});
aSubject.close();
ok(containsValueInvoked, "custom containsValue() was invoked");
Sources.containsValue = containsValue;
Sources = containsValue = null;
finishTest();
}
};

View File

@ -298,7 +298,7 @@ function dumpMessageElement(aMessage)
function finishTest()
{
browser = hudId = hud = filterBox = outputNode = cs = null;
browser = hudId = hud = filterBox = outputNode = cs = hudBox = null;
dumpConsoles();