Devtools UI: Behavior and UI update to tooltips

Source/devtools/front_end/ui/Tooltip.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @param {!Document} doc
  */
 WebInspector.Tooltip = function(doc)
 {
     this.element = doc.body.createChild("div");
     this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element);
     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 = {
     Right: "Right"
 }
 
 WebInspector.Tooltip.prototype = {
     /**
      * @param {!Event} event
      */
     _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);
                 return;
             }
         }
     },
 
+    _mouseDown: function()
+    {
+        this._mouseIsDown = true;
+        this._lastAnchor = this._anchorElement;
+        this._hide();
+    },
+
+    _mouseUp: function()
+    {
+        delete this._mouseIsDown;
+    },
+
     /**
      * @param {!Element} anchorElement
      */
     _show: function(anchorElement)
     {
         var tooltip = anchorElement[WebInspector.Tooltip._symbol];
         this._anchorElement = anchorElement;
         this._tooltipElement.removeChildren();
         if (typeof tooltip.content === "string")
             this._tooltipElement.textContent = tooltip.content;
@@ skipping 20 matching lines @@
 
         // Get container element.
         var container = WebInspector.Dialog.modalHostView().element;
         if (!anchorElement.isDescendant(container))
             container = this.element.parentElement;
 
         // Posititon tooltip based on the anchor element.
         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()
     {
         delete this._anchorElement;
         this._tooltipElement.classList.remove("shown");
         if (Date.now() > this._tooltipLastOpened)
             this._tooltipLastClosed = Date.now();
     }
 }
 
 WebInspector.Tooltip._symbol = Symbol("Tooltip");
 
 /**
  * @param {!Document} doc
  */
 WebInspector.Tooltip.installHandler = function(doc)
 {
     new WebInspector.Tooltip(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
         console.assert("Cannot set an element without custom tooltips enabled");
 }