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]
+            ? 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",

[pfeldman, 2015/08/28 22:46:18]

Not a fan of this, what are you trying to configure here?

[samli, 2015/08/28 22:48:43]

This fixes issue https://code.google.com/p/chromium/issues/detail?id=525721
We need to override the tooltip placement.

+    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);
     }
 });