1 files changed, 81 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js b/devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js
new file mode 100644
index 0000000000..b95793c71c
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+"use strict";
+
+// Check hovering logged nodes highlight them in the content page.
+
+const HTML = `
+  <!DOCTYPE html>
+  <html>
+    <body>
+      <h1>Node Highlight  Test</h1>
+    </body>
+    <script>
+      function logNode(selector) {
+        console.log(document.querySelector(selector));
+      }
+    </script>
+  </html>
+`;
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+add_task(async function () {
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const toolbox = hud.toolbox;
+
+  const highlighterTestFront = await getHighlighterTestFront(toolbox);
+  const highlighter = toolbox.getHighlighter();
+  let onHighlighterShown;
+  let onHighlighterHidden;
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.wrappedJSObject.logNode("h1");
+  });
+
+  const msg = await waitFor(() => findConsoleAPIMessage(hud, "<h1>"));
+  const node = msg.querySelector(".objectBox-node");
+  ok(node !== null, "Node was logged as expected");
+  const view = node.ownerDocument.defaultView;
+  const nonHighlightEl = toolbox.doc.getElementById(
+    "toolbox-meatball-menu-button"
+  );
+
+  info("Highlight the node by moving the cursor on it");
+  onHighlighterShown = highlighter.waitForHighlighterShown();
+
+  EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view);
+
+  const { nodeFront } = await onHighlighterShown;
+  is(nodeFront.displayName, "h1", "The correct node was highlighted");
+  isVisible = await highlighterTestFront.isHighlighting();
+  ok(isVisible, "Highlighter is displayed");
+
+  info("Unhighlight the node by moving away from the node");
+  onHighlighterHidden = highlighter.waitForHighlighterHidden();
+  EventUtils.synthesizeMouseAtCenter(
+    nonHighlightEl,
+    { type: "mousemove" },
+    view
+  );
+
+  await onHighlighterHidden;
+  ok(true, "node-unhighlight event was fired when moving away from the node");
+
+  info("Check we don't have zombie highlighters when briefly hovering a node");
+  onHighlighterShown = highlighter.waitForHighlighterShown();
+  onHighlighterHidden = highlighter.waitForHighlighterHidden();
+  // Move hover the node and then right after move out.
+  EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view);
+  EventUtils.synthesizeMouseAtCenter(
+    nonHighlightEl,
+    { type: "mousemove" },
+    view
+  );
+  await Promise.all([onHighlighterShown, onHighlighterHidden]);
+  ok(true, "The highlighter was removed");
+
+  isVisible = await highlighterTestFront.isHighlighting();
+  is(isVisible, false, "The highlighter is not displayed anymore");
+});