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

browser/devtools/inspector/test/browser_inspector_basic_highlighter.js

@@ -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);
-  }
-
-  function hoverH1InMarkupView() {
-    let deferred = promise.defer();
-    let container = getContainerForRawNode(inspector.markup, doc.querySelector("h1"));
-
-    inspector.toolbox.once("highlighter-ready", deferred.resolve);
+  let onHighlighterReady = toolbox.once("highlighter-ready");
   EventUtils.synthesizeMouseAtCenter(container.tagLine, {type: "mousemove"},
                                      inspector.markup.doc.defaultView);
+  yield onHighlighterReady;
 
-    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");
-  }
+  is(getHighlitNode(), getNode("h1"), "The highlighter highlights the right node");
 
-  function finishUp() {
-    inspector = doc = toolbox = null;
   gBrowser.removeCurrentTab();
-    finish();
-  }
-}
+});

browser/devtools/inspector/test/browser_inspector_highlighter.js

@@ -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");
+function zoomTo(level) {
+  info("Zooming page to " + level);
+  let def = promise.defer();
+
+  waitForBoxModelUpdate().then(def.resolve);
+  let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
+                              .QueryInterface(Ci.nsIMarkupDocumentViewer);
+  contentViewer.fullZoom = level;
+
+  return def.promise;
+}
+
+function testMouseOverRotatedHighlights(rotated) {
+  ok(isHighlighting(), "The highlighter is shown");
+  info("Checking that the rotated div is correctly highlighted");
   isNodeCorrectlyHighlighted(rotated, "rotated");
-
-      executeSoon(finishUp);
-    });
-  });
-}
-
-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";
 }

browser/devtools/inspector/test/head.js

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

browser/devtools/markupview/markup-view.js

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