diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js index 1ef3da423f47..0ed069f096af 100644 --- a/devtools/client/inspector/markup/markup.js +++ b/devtools/client/inspector/markup/markup.js @@ -131,6 +131,7 @@ function MarkupView(inspector, frame, controllerWindow) { this._onToolboxPickerHover = this._onToolboxPickerHover.bind(this); this._onCollapseAttributesPrefChange = this._onCollapseAttributesPrefChange.bind(this); + this._isImagePreviewTarget = this._isImagePreviewTarget.bind(this) this._onBlur = this._onBlur.bind(this); EventEmitter.decorate(this); @@ -169,17 +170,18 @@ MarkupView.prototype = { _selectedContainer: null, _initTooltips: function () { - this.tooltip = new Tooltip(this._inspector.panelDoc); - this._makeTooltipPersistent(false); + this.eventDetailsTooltip = new Tooltip(this._inspector.panelDoc); + this.imagePreviewTooltip = new Tooltip(this._inspector.panelDoc); + this._enableImagePreviewTooltip(); }, - _makeTooltipPersistent: function (state) { - if (state) { - this.tooltip.stopTogglingOnHover(); - } else { - this.tooltip.startTogglingOnHover(this._elt, - this._isImagePreviewTarget.bind(this)); - } + _enableImagePreviewTooltip: function () { + this.imagePreviewTooltip.startTogglingOnHover(this._elt, + this._isImagePreviewTarget); + }, + + _disableImagePreviewTooltip: function () { + this.imagePreviewTooltip.stopTogglingOnHover(); }, _onToolboxPickerHover: function (event, nodeFront) { @@ -298,7 +300,8 @@ MarkupView.prototype = { if (container instanceof MarkupElementContainer) { // With the newly found container, delegate the tooltip content creation // and decision to show or not the tooltip - container._buildEventTooltipContent(event.target, this.tooltip); + container._buildEventTooltipContent(event.target, + this.eventDetailsTooltip); } }, @@ -494,7 +497,7 @@ MarkupView.prototype = { if (container instanceof MarkupElementContainer) { // With the newly found container, delegate the tooltip content creation // and decision to show or not the tooltip - return container.isImagePreviewTarget(target, this.tooltip); + return container.isImagePreviewTarget(target, this.imagePreviewTooltip); } return false; @@ -1714,8 +1717,11 @@ MarkupView.prototype = { } this._containers = null; - this.tooltip.destroy(); - this.tooltip = null; + this.eventDetailsTooltip.destroy(); + this.eventDetailsTooltip = null; + + this.imagePreviewTooltip.destroy(); + this.imagePreviewTooltip = null; this.win = null; this.doc = null; @@ -2596,9 +2602,11 @@ MarkupElementContainer.prototype = Heritage.extend(MarkupContainer.prototype, { toolbox: this.markup._inspector.toolbox }); - this.markup._makeTooltipPersistent(true); + // Disable the image preview tooltip while we display the event details + this.markup._disableImagePreviewTooltip(); tooltip.once("hidden", () => { - this.markup._makeTooltipPersistent(false); + // Enable the image preview tooltip after closing the event details + this.markup._enableImagePreviewTooltip(); }); tooltip.show(target); }); diff --git a/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js b/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js index 437fc87c4b8f..77472800ee0c 100644 --- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js +++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_tooltip.js @@ -16,20 +16,20 @@ add_task(function* () { let target = img.editor.getAttributeElement("src").querySelector(".link"); info("Check that the src attribute of the image is a valid tooltip target"); - let isValid = yield isHoverTooltipTarget(markup.tooltip, target); + let isValid = yield isHoverTooltipTarget(markup.imagePreviewTooltip, target); ok(isValid, "The element is a valid tooltip target"); info("Start dragging the test div"); yield simulateNodeDrag(inspector, "div"); info("Now check that the src attribute of the image isn't a valid target"); - isValid = yield isHoverTooltipTarget(markup.tooltip, target); + isValid = yield isHoverTooltipTarget(markup.imagePreviewTooltip, target); ok(!isValid, "The element is not a valid tooltip target"); info("Stop dragging the test div"); yield simulateNodeDrop(inspector, "div"); info("Check again the src attribute of the image"); - isValid = yield isHoverTooltipTarget(markup.tooltip, target); + isValid = yield isHoverTooltipTarget(markup.imagePreviewTooltip, target); ok(isValid, "The element is a valid tooltip target"); }); diff --git a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js index f52877bf15ae..828be09a4532 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js +++ b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js @@ -35,7 +35,7 @@ add_task(function* () { let markupContainer = yield getContainerForSelector("#events", inspector); let evHolder = markupContainer.elt.querySelector(".markupview-events"); - let tooltip = inspector.markup.tooltip; + let tooltip = inspector.markup.eventDetailsTooltip; info("Clicking to open event tooltip."); EventUtils.synthesizeMouseAtCenter(evHolder, {}, diff --git a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js index f9c39c1105d2..b2dbf28cb6ca 100644 --- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js +++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js @@ -43,17 +43,18 @@ function* getImageTooltipTarget({selector}, inspector) { function* assertTooltipShownOn(element, {markup}) { info("Is the element a valid hover target"); - let isValid = yield isHoverTooltipTarget(markup.tooltip, element); + let isValid = yield isHoverTooltipTarget(markup.imagePreviewTooltip, element); ok(isValid, "The element is a valid hover target for the image tooltip"); } function checkImageTooltip({selector, size}, {markup}) { - let images = markup.tooltip.panel.getElementsByTagName("image"); + let panel = markup.imagePreviewTooltip.panel; + let images = panel.getElementsByTagName("image"); is(images.length, 1, "Tooltip for [" + selector + "] contains an image"); - let label = markup.tooltip.panel.querySelector(".devtools-tooltip-caption"); + let label = panel.querySelector(".devtools-tooltip-caption"); is(label.textContent, size, "Tooltip label for [" + selector + "] displays the right image size"); - markup.tooltip.hide(); + markup.imagePreviewTooltip.hide(); } diff --git a/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js b/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js index 6f97c64299f9..7e6361325b27 100644 --- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js +++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js @@ -37,7 +37,7 @@ add_task(function* () { ok(target, "Found the src attribute in the markup view."); info("Showing tooltip on the src link."); - yield isHoverTooltipTarget(inspector.markup.tooltip, target); + yield isHoverTooltipTarget(inspector.markup.imagePreviewTooltip, target); checkImageTooltip(INITIAL_SRC_SIZE, inspector); @@ -48,7 +48,7 @@ add_task(function* () { ok(target, "Found the src attribute in the markup view after mutation."); info("Showing tooltip on the src link."); - yield isHoverTooltipTarget(inspector.markup.tooltip, target); + yield isHoverTooltipTarget(inspector.markup.imagePreviewTooltip, target); info("Checking that the new image was shown."); checkImageTooltip(UPDATED_SRC_SIZE, inspector); @@ -72,11 +72,12 @@ function updateImageSrc(img, newSrc, inspector) { * size. */ function checkImageTooltip(size, {markup}) { - let images = markup.tooltip.panel.getElementsByTagName("image"); + let panel = markup.imagePreviewTooltip.panel; + let images = panel.getElementsByTagName("image"); is(images.length, 1, "Tooltip contains an image"); - let label = markup.tooltip.panel.querySelector(".devtools-tooltip-caption"); + let label = panel.querySelector(".devtools-tooltip-caption"); is(label.textContent, size, "Tooltip label displays the right image size"); - markup.tooltip.hide(); + markup.imagePreviewTooltip.hide(); } diff --git a/devtools/client/inspector/markup/test/helper_events_test_runner.js b/devtools/client/inspector/markup/test/helper_events_test_runner.js index d7072b30a235..5df11acd63de 100644 --- a/devtools/client/inspector/markup/test/helper_events_test_runner.js +++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js @@ -58,7 +58,7 @@ function* checkEventsForNode(test, inspector, testActor) { return; } - let tooltip = inspector.markup.tooltip; + let tooltip = inspector.markup.eventDetailsTooltip; yield selectNode(selector, inspector);