# HG changeset patch
# User Jarda Snajdr <jsnajdr@gmail.com>

Bug 1134073 - Part 3: Improve the Tooltip behavior to allow interactivity

diff --git a/devtools/client/shared/widgets/tooltip/TooltipToggle.js b/devtools/client/shared/widgets/tooltip/TooltipToggle.js
index b9bc5a3..af98b79 100644
--- a/devtools/client/shared/widgets/tooltip/TooltipToggle.js
+++ b/devtools/client/shared/widgets/tooltip/TooltipToggle.js
@@ -20,16 +20,19 @@ const DEFAULT_SHOW_DELAY = 50;
  * hovered over should indeed receive the tooltip.
  */
 function TooltipToggle(tooltip) {
   this.tooltip = tooltip;
   this.win = tooltip.doc.defaultView;
 
   this._onMouseMove = this._onMouseMove.bind(this);
   this._onMouseLeave = this._onMouseLeave.bind(this);
+
+  this._onPanelMouseOver = this._onPanelMouseOver.bind(this);
+  this._onPanelMouseOut = this._onPanelMouseOut.bind(this);
 }
 
 module.exports.TooltipToggle = TooltipToggle;
 
 TooltipToggle.prototype = {
   /**
    * Start tracking mouse movements on the provided baseNode to show the
    * tooltip.
@@ -69,16 +72,19 @@ TooltipToggle.prototype = {
     }
 
     this._baseNode = baseNode;
     this._showDelay = showDelay;
     this._targetNodeCb = targetNodeCb || (() => true);
 
     baseNode.addEventListener("mousemove", this._onMouseMove, false);
     baseNode.addEventListener("mouseleave", this._onMouseLeave, false);
+
+    this.tooltip.panel.addEventListener("mouseover", this._onPanelMouseOver);
+    this.tooltip.panel.addEventListener("mouseout", this._onPanelMouseOut);
   },
 
   /**
    * If the start() function has been used previously, and you want to get rid
    * of this behavior, then call this function to remove the mouse movement
    * tracking
    */
   stop: function () {
@@ -86,28 +92,31 @@ TooltipToggle.prototype = {
 
     if (!this._baseNode) {
       return;
     }
 
     this._baseNode.removeEventListener("mousemove", this._onMouseMove, false);
     this._baseNode.removeEventListener("mouseleave", this._onMouseLeave, false);
 
+    this.tooltip.panel.removeEventListener("mouseover", this._onPanelMouseOver);
+    this.tooltip.panel.removeEventListener("mouseout", this._onPanelMouseOut);
+
     this._baseNode = null;
     this._targetNodeCb = null;
     this._lastHovered = null;
   },
 
   _onMouseMove: function (event) {
     if (event.target !== this._lastHovered) {
-      this.tooltip.hide();
       this._lastHovered = event.target;
 
       this.win.clearTimeout(this.toggleTimer);
       this.toggleTimer = this.win.setTimeout(() => {
+        this.tooltip.hide();
         this.isValidHoverTarget(event.target).then(target => {
           if (target === null) {
             return;
           }
           this.tooltip.show(target);
         }, reason => {
           console.error("isValidHoverTarget rejected with unexpected reason:");
           console.error(reason);
@@ -127,17 +136,30 @@ TooltipToggle.prototype = {
     if (res) {
       return res.nodeName ? res : target;
     }
 
     return null;
   }),
 
   _onMouseLeave: function () {
-    this.win.clearTimeout(this.toggleTimer);
     this._lastHovered = null;
-    this.tooltip.hide();
+    this.win.clearTimeout(this.toggleTimer);
+    this.toggleTimer = this.win.setTimeout(() => {
+      this.tooltip.hide();
+    }, this._showDelay);
+  },
+
+  _onPanelMouseOver() {
+    this.win.clearTimeout(this.toggleTimer);
+  },
+
+  _onPanelMouseOut() {
+    this.win.clearTimeout(this.toggleTimer);
+    this.toggleTimer = this.win.setTimeout(() => {
+      this.tooltip.hide();
+    }, this._showDelay);
   },
 
   destroy: function () {
     this.stop();
   }
 };