Bug 1344504 - do not catch click events closing the event tooltip;r=gl
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 15 Mar 2017 18:47:27 +0100
changeset 500852 916169e1e3eeeebda14b9cfa95c2de6f017121f9
parent 500851 d29aa1530b0db3b7ead81326f2d243a2624d4f33
child 500853 bb5c698bff0a4d73ee015230818faacc587b07d5
push id49816
push userbmo:tchiovoloni@mozilla.com
push dateFri, 17 Mar 2017 20:44:02 +0000
reviewersgl
bugs1344504
milestone55.0a1
Bug 1344504 - do not catch click events closing the event tooltip;r=gl MozReview-Commit-ID: 3ebzs0RwbJo
devtools/client/inspector/markup/markup.js
devtools/client/inspector/markup/test/browser.ini
devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -158,20 +158,24 @@ MarkupView.prototype = {
   _handleRejectionIfNotDestroyed: function (e) {
     if (!this._destroyer) {
       console.error(e);
     }
   },
 
   _initTooltips: function () {
     // The tooltips will be attached to the toolbox document.
-    this.eventDetailsTooltip = new HTMLTooltip(this.toolbox.doc,
-      {type: "arrow"});
-    this.imagePreviewTooltip = new HTMLTooltip(this.toolbox.doc,
-      {type: "arrow", useXulWrapper: "true"});
+    this.eventDetailsTooltip = new HTMLTooltip(this.toolbox.doc, {
+      type: "arrow",
+      consumeOutsideClicks: false,
+    });
+    this.imagePreviewTooltip = new HTMLTooltip(this.toolbox.doc, {
+      type: "arrow",
+      useXulWrapper: true,
+    });
     this._enableImagePreviewTooltip();
   },
 
   _enableImagePreviewTooltip: function () {
     this.imagePreviewTooltip.startTogglingOnHover(this._elt,
       this._isImagePreviewTarget);
   },
 
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -92,16 +92,17 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_markup_dragdrop_escapeKeyPress.js]
 [browser_markup_dragdrop_invalidNodes.js]
 [browser_markup_dragdrop_reorder.js]
 [browser_markup_dragdrop_tooltip.js]
 [browser_markup_events_01.js]
 [browser_markup_events_02.js]
 [browser_markup_events_03.js]
 [browser_markup_events_04.js]
+[browser_markup_events_click_to_close.js]
 [browser_markup_events_form.js]
 [browser_markup_events_jquery_1.0.js]
 [browser_markup_events_jquery_1.1.js]
 [browser_markup_events_jquery_1.2.js]
 [browser_markup_events_jquery_1.3.js]
 [browser_markup_events_jquery_1.4.js]
 [browser_markup_events_jquery_1.6.js]
 [browser_markup_events_jquery_1.7.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
@@ -0,0 +1,68 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* 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(function* () {
+  let {inspector, toolbox} = yield openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURI(TEST_URL));
+
+  yield inspector.markup.expandAll();
+
+  let container1 = yield getContainerForSelector("#d1", inspector);
+  let evHolder1 = container1.elt.querySelector(".markupview-events");
+
+  let container2 = yield getContainerForSelector("#d2", inspector);
+  let evHolder2 = container2.elt.querySelector(".markupview-events");
+
+  let tooltip = inspector.markup.eventDetailsTooltip;
+
+  info("Click the event icon for the first element");
+  let onShown = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(evHolder1, {},
+    inspector.markup.doc.defaultView);
+  yield 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.doc.defaultView);
+
+  yield onHidden;
+  info("previous tooltip hidden");
+
+  yield onShown;
+  info("event tooltip for the second div is shown");
+
+  info("Click on the animation inspector tab");
+  let onHighlighterHidden = toolbox.once("node-unhighlight");
+  let onTabInspectorSelected = inspector.sidebar.once("animationinspector-selected");
+  let animationInspectorTab = inspector.panelDoc.querySelector("#animationinspector-tab");
+  EventUtils.synthesizeMouseAtCenter(animationInspectorTab, {},
+    inspector.panelDoc.defaultView);
+
+  yield onTabInspectorSelected;
+  info("animation inspector was selected");
+
+  yield onHighlighterHidden;
+  info("box model highlighter hidden after moving the mouse out of the markup view");
+});