Bug 1344504 - do not catch click events closing the event tooltip;r=gl
MozReview-Commit-ID: 3ebzs0RwbJo
--- 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");
+});