1 files changed, 80 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js
new file mode 100644
index 0000000000..4b44561b61
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js
@@ -0,0 +1,80 @@
+/* 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 geometry highlighter gets hidden when the user performs other actions.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+   <h1 style='background:yellow;position:absolute;left:5rem;'>Hello</h1>`;
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Select the absolute positioned element");
+  await selectNode("h1", inspector);
+  const boxModelPanel = inspector.getPanel("boxmodel");
+
+  info("Click on the button enabling the highlighter");
+  const button = await waitFor(() =>
+    boxModelPanel.document.querySelector(".layout-geometry-editor")
+  );
+
+  let onHighlighterShown = getOnceHighlighterShown(inspector);
+  button.click();
+
+  await onHighlighterShown;
+  ok(true, "Highlighter is displayed");
+
+  info("Check that hovering a node in the markup view hides the highlighter");
+  const h1Nodecontainer = await getContainerForSelector("h1", inspector);
+
+  let onHighlighterHidden = getOnceHighlighterHidden(inspector);
+  EventUtils.synthesizeMouseAtCenter(
+    h1Nodecontainer.tagLine,
+    { type: "mousemove" },
+    inspector.markup.doc.defaultView
+  );
+  await onHighlighterHidden;
+  ok("Highlighter was hidden when hovering a node in the markup view");
+
+  info("Check that leaving the markupview shows the highlighter again");
+  onHighlighterShown = getOnceHighlighterShown(inspector);
+  EventUtils.synthesizeMouseAtCenter(
+    button,
+    { type: "mousemove" },
+    button.ownerDocument.defaultView
+  );
+  await onHighlighterShown;
+  ok(true, "Highlighter is shown again when leaving the markup view");
+
+  info("Check that starting the node picker disable the highlighter");
+  onHighlighterHidden = getOnceHighlighterHidden(inspector);
+  await startPicker(toolbox);
+  await onHighlighterHidden;
+  ok("Highlighter was hidden when using the node picker");
+
+  // stop the node picker
+  await toolbox.nodePicker.stop({ canceled: true });
+
+  info("Check that selecting another node does hide the highlighter");
+  onHighlighterShown = onHighlighterShown = getOnceHighlighterShown(inspector);
+  button.click();
+  await onHighlighterShown;
+  ok(true, "highlighter is displayed again");
+
+  onHighlighterHidden = onHighlighterHidden =
+    getOnceHighlighterHidden(inspector);
+  await selectNode("body", inspector);
+  await onHighlighterHidden;
+  ok(true, "Selecting another node hides the highlighter");
+});
+
+function getOnceHighlighterShown(inspector) {
+  return inspector.highlighters.once("geometry-editor-highlighter-shown");
+}
+
+function getOnceHighlighterHidden(inspector) {
+  return inspector.highlighters.once("geometry-editor-highlighter-hidden");
+}