Devtools UI: Behavior and UI update to tooltips

Source/devtools/front_end/ui/Tooltip.js

Index: Source/devtools/front_end/ui/Tooltip.js
diff --git a/Source/devtools/front_end/ui/Tooltip.js b/Source/devtools/front_end/ui/Tooltip.js
index 7cb6998eb028b5c0839b30c8b5541d2d72ed1e15..29bf007c564173b191568c4faa2ad6fdb1cf36fd 100644
--- a/Source/devtools/front_end/ui/Tooltip.js
+++ b/Source/devtools/front_end/ui/Tooltip.js
@@ -13,15 +13,16 @@ WebInspector.Tooltip = function(doc)
     this._shadowRoot.appendChild(WebInspector.Widget.createStyleElement("ui/tooltip.css"));
 
     this._tooltipElement = this._shadowRoot.createChild("div", "tooltip");
-    this._arrowElement = this._shadowRoot.createChild("div", "tooltip-arrow");
     doc.addEventListener("mousemove", this._mouseMove.bind(this), false);
+    doc.addEventListener("mousedown", this._mouseDown.bind(this), false);
+    doc.addEventListener("mouseup", this._mouseUp.bind(this), false);
 }
 
 WebInspector.Tooltip.Timing = {
     // Max time between tooltips showing that no opening delay is required.
     "InstantThreshold": 300,
     // Wait time before opening a tooltip.
-    "OpeningDelay": 400
+    "OpeningDelay": 600
 }
 
 WebInspector.Tooltip.AlignmentOverride = {
@@ -35,14 +36,14 @@ WebInspector.Tooltip.prototype = {
     _mouseMove: function(event)
     {
         var path = event.deepPath ? event.deepPath : event.path;
-        if (!path)
+        if (!path || this._mouseIsDown)

[dgozman, 2015/08/11 00:18:00]

Just check |event.buttons !== 0| and remove the flag.

[samli, 2015/08/11 01:50:47]

Done.

             return;
 
         if (this._anchorElement && path.indexOf(this._anchorElement) === -1)
             this._hide();
 
         for (var element of path) {
-            if (element === this._anchorElement) {
+            if (element === this._anchorElement || element === this._lastAnchor) {
                 return;
             } else if (element[WebInspector.Tooltip._symbol]) {
                 this._show(element);
@@ -51,6 +52,18 @@ WebInspector.Tooltip.prototype = {
         }
     },
 
+    _mouseDown: function()
+    {
+        this._mouseIsDown = true;
+        this._lastAnchor = this._anchorElement;
+        this._hide();
+    },
+
+    _mouseUp: function()
+    {
+        delete this._mouseIsDown;
+    },
+
     /**
      * @param {!Element} anchorElement
      */
@@ -91,24 +104,18 @@ WebInspector.Tooltip.prototype = {
         var containerOffset = container.offsetRelativeToWindow(this.element.window());
         var containerOffsetWidth = container.offsetWidth;
         var anchorBox = this._anchorElement.boxInWindow(this.element.window());
-        const arrowSize = 4;
+        const anchorOffset = 2;
         const pageMargin = 2;
         this._tooltipElement.style.maxWidth = (containerOffsetWidth - pageMargin * 2) + "px";
         var tooltipWidth = this._tooltipElement.offsetWidth;
         var tooltipHeight = this._tooltipElement.offsetHeight;
-        var tooltipX = anchorBox.x + anchorBox.width / 2 - tooltipWidth / 2;
-        if (tooltip.alignment === WebInspector.Tooltip.AlignmentOverride.Right)
-            tooltipX = anchorBox.x;
+        var tooltipX = anchorBox.x;
         tooltipX = Number.constrain(tooltipX,
             containerOffset.x + pageMargin,
             containerOffset.x + containerOffsetWidth - tooltipWidth - pageMargin);
-        var onBottom = anchorBox.y - arrowSize - anchorBox.height < containerOffset.y;
-        var tooltipY = onBottom ? anchorBox.y + anchorBox.height + arrowSize : anchorBox.y - tooltipHeight - arrowSize;
+        var onBottom = anchorBox.y - anchorOffset - anchorBox.height < containerOffset.y;
+        var tooltipY = onBottom ? anchorBox.y + anchorBox.height + anchorOffset : anchorBox.y - tooltipHeight - anchorOffset;
         this._tooltipElement.positionAt(tooltipX, tooltipY);
-
-        // Position arrow next to anchor element.
-        this._arrowElement.positionAt(anchorBox.x + anchorBox.width / 2, onBottom ? anchorBox.y + anchorBox.height : anchorBox.y - arrowSize);
-        this._arrowElement.classList.toggle("tooltip-arrow-top", !onBottom);
     },
 
     _hide: function()
@@ -133,13 +140,12 @@ WebInspector.Tooltip.installHandler = function(doc)
 /**
  * @param {!Element} element
  * @param {!Element|string} tooltipContent
- * @param {string=} alignment
  * @param {string=} actionId
  */
-WebInspector.Tooltip.install = function(element, tooltipContent, alignment, actionId)
+WebInspector.Tooltip.install = function(element, tooltipContent, actionId)
 {
     if (Runtime.experiments.isEnabled("tooltips"))
-        element[WebInspector.Tooltip._symbol] =  { content: tooltipContent, alignment: alignment, actionId: actionId };
+        element[WebInspector.Tooltip._symbol] =  { content: tooltipContent, actionId: actionId };
     else if (typeof tooltipContent === "string")
         element.title = tooltipContent;
     else