Devtools UI: Fix tooltip issues

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 e5010af887cecc77e42d3264a83b08a2ed2627dc..7d23281cf3d7d3234d49ac48f2ad8d3abdf30c87 100644
--- a/Source/devtools/front_end/ui/Tooltip.js
+++ b/Source/devtools/front_end/ui/Tooltip.js
@@ -15,6 +15,8 @@ WebInspector.Tooltip = function(doc)
     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 = {
@@ -45,7 +47,7 @@ WebInspector.Tooltip.prototype = {
             if (element === this._anchorElement) {
                 return;
             } else if (element[WebInspector.Tooltip._symbol]) {
-                this._show(element);
+                this._show(element, event);
                 return;
             }
         }
@@ -53,8 +55,9 @@ WebInspector.Tooltip.prototype = {
 
     /**
      * @param {!Element} anchorElement
+     * @param {!Event} event
      */
-    _show: function(anchorElement)
+    _show: function(anchorElement, event)
     {
         var tooltip = anchorElement[WebInspector.Tooltip._symbol];
         this._anchorElement = anchorElement;
@@ -97,11 +100,13 @@ WebInspector.Tooltip.prototype = {
         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);
     },
@@ -130,18 +135,24 @@ 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", {