Bug 1025880 - Avoid highlighting the default selection when the page is reloaded or when the inspector is opened; r=miker

This commit is contained in:
Patrick Brosset 2014-06-17 13:50:41 +02:00
Родитель 104d9a5c22
Коммит 10e671ad1a
4 изменённых файлов: 113 добавлений и 118 удалений

Просмотреть файл

@ -2,61 +2,30 @@
* 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, toolbox;
let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
let {require} = devtools;
let {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
let {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
"use strict";
waitForExplicitFinish();
// Test that hovering over nodes in the markup-view shows the highlighter over
// those nodes
gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function onload() {
gBrowser.selectedBrowser.removeEventListener("load", onload, true);
doc = content.document;
waitForFocus(setupTest, content);
}, true);
waitForExplicitFinish();
content.location = "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>";
let test = asyncTest(function*() {
info("Loading the test document and opening the inspector");
yield addTab("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
let {toolbox, inspector} = yield openInspector();
function setupTest() {
openInspector((aInspector, aToolbox) => {
toolbox = aToolbox;
inspector = aInspector;
inspector.selection.setNode(doc.querySelector("span"), "test");
inspector.toolbox.once("highlighter-ready", runTests);
});
}
info("Selecting the test node");
yield selectNode("span", inspector);
function runTests() {
Task.spawn(function() {
yield hoverH1InMarkupView();
yield assertH1Highlighted();
let container = getContainerForRawNode(inspector.markup, getNode("h1"));
finishUp();
}).then(null, Cu.reportError);
}
let onHighlighterReady = toolbox.once("highlighter-ready");
EventUtils.synthesizeMouseAtCenter(container.tagLine, {type: "mousemove"},
inspector.markup.doc.defaultView);
yield onHighlighterReady;
function hoverH1InMarkupView() {
let deferred = promise.defer();
let container = getContainerForRawNode(inspector.markup, doc.querySelector("h1"));
ok(isHighlighting(), "The highlighter is shown on a markup container hover");
is(getHighlitNode(), getNode("h1"), "The highlighter highlights the right node");
inspector.toolbox.once("highlighter-ready", deferred.resolve);
EventUtils.synthesizeMouseAtCenter(container.tagLine, {type: "mousemove"},
inspector.markup.doc.defaultView);
return deferred.promise;
}
function assertH1Highlighted() {
ok(isHighlighting(), "The highlighter is shown on a markup container hover");
is(getHighlitNode(), doc.querySelector("h1"), "The highlighter highlights the right node");
}
function finishUp() {
inspector = doc = toolbox = null;
gBrowser.removeCurrentTab();
finish();
}
}
gBrowser.removeCurrentTab();
});

Просмотреть файл

@ -4,90 +4,88 @@
* 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/. */
let doc;
let div;
let rotated;
let inspector;
let contentViewer;
"use strict";
function createDocument() {
div = doc.createElement("div");
// Test that the highlighter is correctly displayed over a variety of elements
waitForExplicitFinish();
let test = asyncTest(function*() {
info("Adding the test tab and creating the document");
yield addTab("data:text/html;charset=utf-8,browser_inspector_highlighter.js");
createDocument(content.document);
info("Opening the inspector");
let {toolbox, inspector} = yield openInspector();
info("Selecting the simple, non-transformed DIV");
let div = getNode(".simple-div");
yield selectNode(div, inspector, "highlight");
testSimpleDivHighlighted(div);
yield zoomTo(2);
testZoomedSimpleDivHighlighted(div);
yield zoomTo(1);
info("Selecting the rotated DIV");
let rotated = getNode(".rotated-div");
let onBoxModelUpdate = waitForBoxModelUpdate();
yield selectNode(rotated, inspector, "highlight");
yield onBoxModelUpdate;
testMouseOverRotatedHighlights(rotated);
gBrowser.removeCurrentTab();
});
function createDocument(doc) {
info("Creating the test document");
let div = doc.createElement("div");
div.className = "simple-div";
div.setAttribute("style",
"padding:5px; border:7px solid red; margin: 9px; " +
"position:absolute; top:30px; left:150px;");
let textNode = doc.createTextNode("Gort! Klaatu barada nikto!");
rotated = doc.createElement("div");
rotated.setAttribute("style",
div.appendChild(doc.createTextNode("Gort! Klaatu barada nikto!"));
doc.body.appendChild(div);
let rotatedDiv = doc.createElement("div");
rotatedDiv.className = "rotated-div";
rotatedDiv.setAttribute("style",
"padding:5px; border:7px solid red; margin: 9px; " +
"transform:rotate(45deg); " +
"position:absolute; top:30px; left:80px;");
div.appendChild(textNode);
doc.body.appendChild(div);
doc.body.appendChild(rotated);
openInspector(aInspector => {
inspector = aInspector;
inspector.selection.setNode(div, null);
inspector.once("inspector-updated", testMouseOverDivHighlights);
});
doc.body.appendChild(rotatedDiv);
}
function testMouseOverDivHighlights() {
ok(isHighlighting(), "Highlighter is shown");
is(getHighlitNode(), div, "Highlighter's outline correspond to the non-rotated div");
testNonTransformedBoxModelDimensionsNoZoom();
}
function testSimpleDivHighlighted(div) {
ok(isHighlighting(), "The highlighter is shown");
is(getHighlitNode(), div, "The highlighter's outline corresponds to the simple div");
function testNonTransformedBoxModelDimensionsNoZoom() {
info("Highlighted the non-rotated div");
info("Checking that the simple div is correctly highlighted");
isNodeCorrectlyHighlighted(div, "non-zoomed");
waitForBoxModelUpdate().then(testNonTransformedBoxModelDimensionsZoomed);
contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
.QueryInterface(Ci.nsIMarkupDocumentViewer);
contentViewer.fullZoom = 2;
}
function testNonTransformedBoxModelDimensionsZoomed() {
info("Highlighted the zoomed, non-rotated div");
function testZoomedSimpleDivHighlighted(div) {
info("Checking that the simple div is correctly highlighted, " +
"even when the page is zoomed");
isNodeCorrectlyHighlighted(div, "zoomed");
waitForBoxModelUpdate().then(testMouseOverRotatedHighlights);
contentViewer.fullZoom = 1;
}
function testMouseOverRotatedHighlights() {
let onBoxModelUpdate = waitForBoxModelUpdate();
inspector.selection.setNode(rotated);
inspector.once("inspector-updated", () => {
onBoxModelUpdate.then(() => {
ok(isHighlighting(), "Highlighter is shown");
info("Highlighted the rotated div");
isNodeCorrectlyHighlighted(rotated, "rotated");
function zoomTo(level) {
info("Zooming page to " + level);
let def = promise.defer();
executeSoon(finishUp);
});
});
waitForBoxModelUpdate().then(def.resolve);
let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
.QueryInterface(Ci.nsIMarkupDocumentViewer);
contentViewer.fullZoom = level;
return def.promise;
}
function finishUp() {
inspector.toolbox.highlighterUtils.stopPicker().then(() => {
doc = div = rotated = inspector = contentViewer = null;
let target = TargetFactory.forTab(gBrowser.selectedTab);
gDevTools.closeToolbox(target);
gBrowser.removeCurrentTab();
finish();
});
}
function test() {
waitForExplicitFinish();
gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function() {
gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
doc = content.document;
waitForFocus(createDocument, content);
}, true);
content.location = "data:text/html;charset=utf-8,browser_inspector_highlighter.js";
function testMouseOverRotatedHighlights(rotated) {
ok(isHighlighting(), "The highlighter is shown");
info("Checking that the rotated div is correctly highlighted");
isNodeCorrectlyHighlighted(rotated, "rotated");
}

Просмотреть файл

@ -44,6 +44,34 @@ SimpleTest.registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
});
/**
* Define an async test based on a generator function
*/
function asyncTest(generator) {
return () => Task.spawn(generator).then(null, ok.bind(null, false)).then(finish);
}
/**
* Add a new test tab in the browser and load the given url.
* @param {String} url The url to be loaded in the new tab
* @return a promise that resolves to the tab object when the url is loaded
*/
function addTab(url) {
let def = promise.defer();
let tab = gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function onload() {
gBrowser.selectedBrowser.removeEventListener("load", onload, true);
info("URL " + url + " loading complete into new test tab");
waitForFocus(() => {
def.resolve(tab);
}, content);
}, true);
content.location = url;
return def.promise;
}
/**
* Simple DOM node accesor function that takes either a node or a string css
* selector as argument and returns the corresponding node

Просмотреть файл

@ -293,7 +293,7 @@ MarkupView.prototype = {
*/
_shouldNewSelectionBeHighlighted: function() {
let reason = this._inspector.selection.reason;
let unwantedReasons = ["inspector-open", "navigateaway", "test"];
let unwantedReasons = ["inspector-open", "navigateaway", "nodeselected", "test"];
let isHighlitNode = this._hoveredNode === this._inspector.selection.nodeFront;
return !isHighlitNode && reason && unwantedReasons.indexOf(reason) === -1;
},