Bug 1053898 - Replace ElementContainer _buildEventTooltipContent() with generic click handler;r=gl draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 07 Mar 2018 11:49:28 +0100
changeset 773676 b5ee2de3c22c0d6511c48ab5e4ceb64c6bd3143d
parent 773675 e7db9cd73a0511c1728efa42899c74c0c6f9e7fe
child 773677 e01c7931e66fcecbeb14f8de9901add062df6b98
push id104269
push userjdescottes@mozilla.com
push dateWed, 28 Mar 2018 08:16:27 +0000
reviewersgl
bugs1053898
milestone61.0a1
Bug 1053898 - Replace ElementContainer _buildEventTooltipContent() with generic click handler;r=gl The markup-view forwards click events to container instance only if the Container is a MarkupElementContainer, and assumes a _buildEventTooltipContent method will be available. Here we switch to a public onContainerClick method that the markup view will call as long as it is defined on the targeted container. MozReview-Commit-ID: Kem0m57ECyE
devtools/client/inspector/markup/markup.js
devtools/client/inspector/markup/views/element-container.js
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -308,32 +308,30 @@ MarkupView.prototype = {
       update();
       this._autoScrollAnimationFrame = this.win.requestAnimationFrame(loop);
     };
     loop();
   },
 
   _onMouseClick: function(event) {
     // From the target passed here, let's find the parent MarkupContainer
-    // and ask it if the tooltip should be shown
+    // and forward the event if needed.
     let parentNode = event.target;
     let container;
     while (parentNode !== this.doc.body) {
       if (parentNode.container) {
         container = parentNode.container;
         break;
       }
       parentNode = parentNode.parentNode;
     }
 
-    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.eventDetailsTooltip);
+    if (typeof container.onContainerClick === "function") {
+      // Forward the event to the container if it implements onContainerClick.
+      container.onContainerClick(event);
     }
   },
 
   _onMouseUp: function(event) {
     if (this._draggedContainer) {
       this._draggedContainer.onMouseUp(event);
     }
 
@@ -536,18 +534,16 @@ MarkupView.prototype = {
       if (parent.container) {
         container = parent.container;
         break;
       }
       parent = parent.parentNode;
     }
 
     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.imagePreviewTooltip);
     }
 
     return false;
   },
 
   /**
    * Given the known reason, should the current selection be briefly highlighted
--- a/devtools/client/inspector/markup/views/element-container.js
+++ b/devtools/client/inspector/markup/views/element-container.js
@@ -39,33 +39,41 @@ function MarkupElementContainer(markupVi
   } else {
     throw new Error("Invalid node for MarkupElementContainer");
   }
 
   this.tagLine.appendChild(this.editor.elt);
 }
 
 MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
-  async _buildEventTooltipContent(target, tooltip) {
-    if (target.hasAttribute("data-event")) {
-      await tooltip.hide();
+  onContainerClick: function(event) {
+    if (!event.target.hasAttribute("data-event")) {
+      return;
+    }
 
-      let listenerInfo = await this.node.getEventListenerInfo();
+    this._buildEventTooltipContent(event.target);
+  },
 
-      let toolbox = this.markup.toolbox;
+  async _buildEventTooltipContent(target) {
+    let tooltip = this.markup.eventDetailsTooltip;
+
+    await tooltip.hide();
 
-      setEventTooltip(tooltip, listenerInfo, toolbox);
-      // Disable the image preview tooltip while we display the event details
-      this.markup._disableImagePreviewTooltip();
-      tooltip.once("hidden", () => {
-        // Enable the image preview tooltip after closing the event details
-        this.markup._enableImagePreviewTooltip();
-      });
-      tooltip.show(target);
-    }
+    let listenerInfo = await this.node.getEventListenerInfo();
+
+    let toolbox = this.markup.toolbox;
+
+    setEventTooltip(tooltip, listenerInfo, toolbox);
+    // Disable the image preview tooltip while we display the event details
+    this.markup._disableImagePreviewTooltip();
+    tooltip.once("hidden", () => {
+      // Enable the image preview tooltip after closing the event details
+      this.markup._enableImagePreviewTooltip();
+    });
+    tooltip.show(target);
   },
 
   /**
    * Generates the an image preview for this Element. The element must be an
    * image or canvas (@see isPreviewable).
    *
    * @return {Promise} that is resolved with an object of form
    *         { data, size: { naturalWidth, naturalHeight, resizeRatio } } where