Bug 1266448 - part2: markup view: use dedicated Tooltip instance for image previews;r=ochameau

In preparation for using the HTML Tooltip in the markup view, we use now
a different tooltip instance for the image previews.

MozReview-Commit-ID: EOoVg6Syntj

--HG--
extra : rebase_source : 1f5424b10728e96bef1c244400c39de2301253d6

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.eventDetailsTooltip = new Tooltip(this._inspector.panelDoc);
-    this._makeTooltipPersistent(false);
+    this.imagePreviewTooltip = new Tooltip(this._inspector.panelDoc);
+    this._enableImagePreviewTooltip();
   },
 
-  _makeTooltipPersistent: function (state) {
+  _enableImagePreviewTooltip: function () {
-    if (state) {
+    this.imagePreviewTooltip.startTogglingOnHover(this._elt,
-      this.tooltip.stopTogglingOnHover();
+      this._isImagePreviewTarget);
-    } else {
+  },
-      this.tooltip.startTogglingOnHover(this._elt,
+
-        this._isImagePreviewTarget.bind(this));
+  _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.eventDetailsTooltip.destroy();
-    this.tooltip = null;
+    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);
       });

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");
 });

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, {},

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();
 }

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();
 }

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);