Bug 1736183 - [devtools] Add test for reset of node picker hovered node reference. r=ochameau.

Differential Revision: https://phabricator.services.mozilla.com/D133879

devtools/client/inspector/test/browser.ini

@@ -202,6 +202,7 @@ skip-if = (os == 'win' && processor == 'aarch64') # bug 1533492
 [browser_inspector_pane-toggle-03.js]
 [browser_inspector_pane-toggle-04.js]
 [browser_inspector_pane-toggle-layout-invariant.js]
+[browser_inspector_picker-reset-reference.js]
 [browser_inspector_picker-shift-key.js]
 [browser_inspector_picker-stop-on-eyedropper.js]
 [browser_inspector_picker-stop-on-tool-change.js]

devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js

@@ -22,10 +22,7 @@ add_task(async function() {
   await onHover;
 
   info("Press escape and wait for the picker to stop");
-  const onPickerStopped = toolbox.nodePicker.once("picker-node-canceled");
-  BrowserTestUtils.synthesizeKey("VK_ESCAPE", {}, gBrowser.selectedBrowser);
-
-  await onPickerStopped;
+  await stopPickerWithEscapeKey(toolbox);
 
   info("Press escape again and wait for the split console to open");
   const onSplitConsole = toolbox.once("split-console");

devtools/client/inspector/test/browser_inspector_picker-reset-reference.js

@@ -0,0 +1,72 @@
+/* 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";
+
+// Test that the node picker reset its reference for the last hovered node when the user
+// stops picking (See Bug 1736183).
+
+const TEST_URL =
+  "data:text/html;charset=utf8,<h1 id=target>Pick target</h1><h2>ignore me</h2>";
+
+add_task(async () => {
+  const {
+    inspector,
+    toolbox,
+    highlighterTestFront,
+  } = await openInspectorForURL(TEST_URL);
+
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+
+  info(
+    "Start the picker and hover an element to populate the picker hovered node reference"
+  );
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#target");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#target"),
+    "The highlighter is shown on the expected node"
+  );
+
+  info("Hit Escape to cancel picking");
+  let onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  await stopPickerWithEscapeKey(toolbox);
+  await onHighlighterHidden;
+
+  info("And start it again, and hover the same node again");
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#target");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#target"),
+    "The highlighter is shown on the expected node again"
+  );
+
+  info("Pick the element to stop the picker");
+  onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  // nodePicker isPicking property is set to false _after_ picker-node-picked event, so
+  // we need to wait for picker-stopped here.
+  const onPickerStopped = toolbox.nodePicker.once("picker-stopped");
+  await pickElement(inspector, "#target", 5, 5);
+  await onHighlighterHidden;
+  await onPickerStopped;
+
+  info("And start it and hover the same node, again");
+  await startPicker(toolbox);
+  await hoverElement(inspector, "#target");
+  ok(
+    await highlighterTestFront.assertHighlightedNode("#target"),
+    "The highlighter is shown on the expected node again"
+  );
+
+  info("Stop the picker to avoid pending Promise");
+  onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  await stopPickerWithEscapeKey(toolbox);
+  await onHighlighterHidden;
+});

devtools/client/inspector/test/head.js

@@ -66,6 +66,16 @@ var startPicker = async function(toolbox, skipFocus) {
   }
 };
 
+/**
+ * Stop the element picker using the Escape keyboard shortcut
+ * @param {Toolbox} toolbox
+ */
+var stopPickerWithEscapeKey = async function(toolbox) {
+  const onPickerStopped = toolbox.nodePicker.once("picker-node-canceled");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, toolbox.win);
+  await onPickerStopped;
+};
+
 /**
  * Start the eye dropper tool.
  * @param {Toolbox} toolbox