Bug 1318060 - Add tests to ensure the right nodes are highlighted on hover. r=Honza
authorMatt R <matthieu.rigolot@gmail.com>
Mon, 08 Apr 2019 11:29:25 +0200
changeset 527449 4c17b4deacd3538880c61a347a8c53c884e6fce0
parent 527448 69d6fc2992eb8e592e71fc6bcc8767ecec505a58
child 527450 46c255ed5a314a9ff548eaf77b53b85ffa432866
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1318060
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1318060 - Add tests to ensure the right nodes are highlighted on hover. r=Honza Differential Revision: https://phabricator.services.mozilla.com/D26486
devtools/client/dom/test/browser.ini
devtools/client/dom/test/browser_dom_nodes_highlight.js
devtools/client/dom/test/head.js
devtools/client/dom/test/page_dom_nodes.html
--- a/devtools/client/dom/test/browser.ini
+++ b/devtools/client/dom/test/browser.ini
@@ -1,14 +1,16 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 support-files =
   head.js
   page_array.html
   page_basic.html
+  page_dom_nodes.html
   !/devtools/client/shared/test/frame-script-utils.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
 
 [browser_dom_array.js]
 [browser_dom_basic.js]
 [browser_dom_refresh.js]
+[browser_dom_nodes_highlight.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/dom/test/browser_dom_nodes_highlight.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_PAGE_URL = URL_ROOT + "page_dom_nodes.html";
+
+/**
+ * Checks whether hovering nodes highlight them in the content page
+ */
+add_task(async function() {
+  info("Test DOM panel node highlight started");
+
+  const { panel } = await addTestTab(TEST_PAGE_URL);
+  const toolbox = gDevTools.getToolbox(panel.target);
+
+  info("Highlight the node by moving the cursor on it");
+  let node = getRowByIndex(panel, 2).querySelector(".objectBox-node");
+  // the inspector should be initialized first and then the node should
+  // highlight after the hover effect.
+  let onNodeHighlight = toolbox.target.once("inspector")
+    .then(inspector => inspector.highlighter.once("node-highlight"));
+  EventUtils.synthesizeMouseAtCenter(node, {
+    type: "mouseover",
+  }, node.ownerDocument.defaultView);
+  let nodeFront = await onNodeHighlight;
+  is(nodeFront.displayName, "h1", "The correct node was highlighted");
+
+  info("Unhighlight the node by moving away from the node");
+  let onNodeUnhighlight = toolbox.highlighter.once("node-unhighlight");
+  const btn = toolbox.doc.querySelector("#toolbox-meatball-menu-button");
+  EventUtils.synthesizeMouseAtCenter(btn, {
+    type: "mouseover",
+  }, btn.ownerDocument.defaultView);
+  await onNodeUnhighlight;
+  ok(true, "node-unhighlight event was fired when moving away from the node");
+
+  info("Expand specified row and wait till children are displayed");
+  await expandRow(panel, "_b");
+
+  info("Highlight the node by moving the cursor on it");
+  node = getRowByIndex(panel, 3).querySelector(".objectBox-node");
+
+  EventUtils.synthesizeMouseAtCenter(node, {
+    type: "mouseover",
+  }, node.ownerDocument.defaultView);
+  onNodeHighlight = toolbox.highlighter.once("node-highlight");
+  nodeFront = await onNodeHighlight;
+  is(nodeFront.displayName, "h2", "The correct node was highlighted");
+
+  info("Unhighlight the node by moving away from the node");
+  EventUtils.synthesizeMouseAtCenter(btn, {
+    type: "mouseover",
+  }, btn.ownerDocument.defaultView);
+  onNodeUnhighlight = toolbox.highlighter.once("node-unhighlight");
+  await onNodeUnhighlight;
+  ok(true, "node-unhighlight event was fired when moving away from the node");
+});
--- a/devtools/client/dom/test/head.js
+++ b/devtools/client/dom/test/head.js
@@ -87,16 +87,26 @@ function synthesizeMouseClickSoon(panel,
 function getRowByLabel(panel, text) {
   const doc = panel.panelWin.document;
   const labels = [...doc.querySelectorAll(".treeLabel")];
   const label = labels.find(node => node.textContent == text);
   return label ? label.closest(".treeRow") : null;
 }
 
 /**
+ * Returns tree row with specified index.
+ */
+function getRowByIndex(panel, id) {
+  const doc = panel.panelWin.document;
+  const labels = [...doc.querySelectorAll(".treeLabel")];
+  const label = labels.find((node, i) => i == id);
+  return label ? label.closest(".treeRow") : null;
+}
+
+/**
  * Returns the children (tree row text) of the specified object name as an
  * array.
  */
 function getAllRowsForLabel(panel, text) {
   let rootObjectLevel;
   let node;
   const result = [];
   const doc = panel.panelWin.document;
new file mode 100644
--- /dev/null
+++ b/devtools/client/dom/test/page_dom_nodes.html
@@ -0,0 +1,18 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>DOM test hovering nodes page</title>
+  </head>
+  <body>
+    <h1 id="a">Node highlight test</h1>
+    <h2 id="b">Node highlight test inside object</h2>
+    <script>
+      "use strict";
+      window._a = document.getElementById("a");
+      window._b = {_data: document.getElementById("b")};
+    </script>
+  </body>
+</html>