1 files changed, 102 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
new file mode 100644
index 0000000000..ed410fb85b
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_events_test_runner.js */
+
+"use strict";
+
+// Tests that click events that close the current event tooltip are still propagated to
+// the target underneath.
+
+const TEST_URL = `
+  <body>
+    <div id="d1" onclick="console.log(1)">test</div>
+    <!--                                        -->
+    <!-- adding some comments to make sure      -->
+    <!-- the second event icon is not hidden by -->
+    <!-- the tooltip of the first event icon    -->
+    <!--                                        -->
+    <div id="d2" onclick="console.log(2)">test</div>
+  </body>
+`;
+
+add_task(async function () {
+  // Make the toolbox tall enough to show the full markup without the need
+  // to manage scrolling event badges into view.
+  await pushPref("devtools.toolbox.footer.height", 400);
+
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL)
+  );
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+
+  await inspector.markup.expandAll();
+
+  const container1 = await getContainerForSelector("#d1", inspector);
+  const evHolder1 = container1.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+
+  const container2 = await getContainerForSelector("#d2", inspector);
+  const evHolder2 = container2.elt.querySelector(
+    ".inspector-badge.interactive[data-event]"
+  );
+
+  const tooltip = inspector.markup.eventDetailsTooltip;
+
+  info("Click the event icon for the first element");
+  let onShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(evHolder1, {}, inspector.markup.win);
+  await onShown;
+  info("event tooltip for the first div is shown");
+
+  info("Click the event icon for the second element");
+  let onHidden = tooltip.once("hidden");
+  onShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(evHolder2, {}, inspector.markup.win);
+
+  await onHidden;
+  info("previous tooltip hidden");
+
+  await onShown;
+  info("event tooltip for the second div is shown");
+
+  info("Check that clicking on evHolder2 again hides the tooltip");
+  onHidden = tooltip.once("hidden");
+  EventUtils.synthesizeMouseAtCenter(evHolder2, {}, inspector.markup.win);
+  await onHidden;
+
+  info("Check that the tooltip does not reappear immediately after");
+  await waitForTime(1000);
+  is(
+    tooltip.isVisible(),
+    false,
+    "The tooltip is still hidden after waiting for one second"
+  );
+
+  info("Open the tooltip on evHolder2 again");
+  onShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(evHolder2, {}, inspector.markup.win);
+  await onShown;
+
+  info("Click on the computed view tab");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  const onTabComputedViewSelected = inspector.sidebar.once(
+    "computedview-selected"
+  );
+  const computedViewTab = inspector.panelDoc.querySelector("#computedview-tab");
+  EventUtils.synthesizeMouseAtCenter(
+    computedViewTab,
+    {},
+    inspector.panelDoc.defaultView
+  );
+
+  await onTabComputedViewSelected;
+  info("computed view was selected");
+
+  await onHighlighterHidden;
+  info(
+    "box model highlighter hidden after moving the mouse out of the markup view"
+  );
+});