Devtools UI: Fix tooltip issues

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");
     doc.addEventListener("mousemove", this._mouseMove.bind(this), true);
     doc.addEventListener("mousedown", this._hide.bind(this, true), true);
+    doc.addEventListener("mouseout", this._hide.bind(this, true), true);
+    doc.addEventListener("keydown", this._hide.bind(this, true), true);
 }
 
 WebInspector.Tooltip.Timing = {
     // Max time between tooltips showing that no opening delay is required.
     "InstantThreshold": 300,
     // Wait time before opening a tooltip.
     "OpeningDelay": 600
 }
 
 WebInspector.Tooltip.AlignmentOverride = {
@@ skipping 10 matching lines @@
         if (!path || event.buttons !== 0)
             return;
 
         if (this._anchorElement && path.indexOf(this._anchorElement) === -1)
             this._hide();
 
         for (var element of path) {
             if (element === this._anchorElement) {
                 return;
             } else if (element[WebInspector.Tooltip._symbol]) {
-                this._show(element);
+                this._show(element, event);
                 return;
             }
         }
     },
 
     /**
      * @param {!Element} anchorElement
+     * @param {!Event} event
      */
-    _show: function(anchorElement)
+    _show: function(anchorElement, event)
     {
         var tooltip = anchorElement[WebInspector.Tooltip._symbol];
         this._anchorElement = anchorElement;
         this._tooltipElement.removeChildren();
         if (typeof tooltip.content === "string")
             this._tooltipElement.textContent = tooltip.content;
         else
             this._tooltipElement.appendChild(tooltip.content);
 
         if (tooltip.actionId) {
@@ skipping 22 matching lines @@
         // Posititon tooltip based on the anchor element.
         var containerOffset = container.offsetRelativeToWindow(this.element.window());
         var containerOffsetWidth = container.offsetWidth;
         var containerOffsetHeight = container.offsetHeight;
         var anchorBox = this._anchorElement.boxInWindow(this.element.window());
         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;
+        var tooltipX = tooltip.options[WebInspector.Tooltip.Options.HorizontalAlignUnderCursor]

[dgozman, 2015/08/28 00:16:32]

Should we make this a default? It does no harm.

[samli, 2015/08/28 01:32:14]

I don't think this looks nice and it is confusing in the toolbar. When you
switch between icons, the tooltip changes but barely moves (sometimes as little
as 1px), so the association between icon/tooltip isn't as strong.

+            ? event.x : anchorBox.x;
         tooltipX = Number.constrain(tooltipX,
             containerOffset.x + pageMargin,
             containerOffset.x + containerOffsetWidth - tooltipWidth - pageMargin);
-        var onBottom = anchorBox.y + anchorOffset + anchorBox.height + tooltipHeight < containerOffset.y + containerOffsetHeight;
+        var onBottom = tooltip.options[WebInspector.Tooltip.Options.VerticalAlignmentTop] ? false
+            : anchorBox.y + anchorOffset + anchorBox.height + tooltipHeight < containerOffset.y + containerOffsetHeight;
         var tooltipY = onBottom ? anchorBox.y + anchorBox.height + anchorOffset : anchorBox.y - tooltipHeight - anchorOffset;
         this._tooltipElement.positionAt(tooltipX, tooltipY);
     },
 
     /**
      * @param {boolean=} removeInstant
      */
     _hide: function(removeInstant)
     {
         delete this._anchorElement;
         this._tooltipElement.classList.remove("shown");
         if (Date.now() > this._tooltipLastOpened)
             this._tooltipLastClosed = Date.now();
         if (removeInstant)
             delete this._tooltipLastClosed;
     }
 }
 
 WebInspector.Tooltip._symbol = Symbol("Tooltip");
 
 /**
  * @param {!Document} doc
  */
 WebInspector.Tooltip.installHandler = function(doc)
 {
     new WebInspector.Tooltip(doc);
 }
 
+WebInspector.Tooltip.Options = {
+    VerticalAlignmentTop: "VerticalAlignmentTop",
+    HorizontalAlignUnderCursor: "HorizontalAlignUnderCursor"
+}
+
 /**
  * @param {!Element} element
  * @param {!Element|string} tooltipContent
  * @param {string=} actionId
+ * @param {!Object=} options
  */
-WebInspector.Tooltip.install = function(element, tooltipContent, actionId)
+WebInspector.Tooltip.install = function(element, tooltipContent, actionId, options)
 {
     if (typeof tooltipContent === "string" && tooltipContent === "") {
         delete element[WebInspector.Tooltip._symbol];
         return;
     }
-    element[WebInspector.Tooltip._symbol] =  { content: tooltipContent, actionId: actionId };
+    element[WebInspector.Tooltip._symbol] = { content: tooltipContent, actionId: actionId, options: options || {} };
 }
 
 Object.defineProperty(HTMLElement.prototype, "title", {
     /**
      * @return {!Element|string}
      * @this {!Element}
      */
     get: function()
     {
         var tooltip = this[WebInspector.Tooltip._symbol];
         return tooltip ? tooltip.content : "";
     },
 
     /**
      * @param {!Element|string} x
      * @this {!Element}
      */
     set: function(x)
     {
         WebInspector.Tooltip.install(this, x);
     }
 });