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 f3a574ccc7ab6b58e46ac31eb53cd95310060268..c9919f031483f061bb5fe1738c09d922acbd7dd8 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 = {
@@ -24,10 +26,6 @@ WebInspector.Tooltip.Timing = {
     "OpeningDelay": 600
 }
 
-WebInspector.Tooltip.AlignmentOverride = {
-    Right: "Right"
-}
-
 WebInspector.Tooltip.prototype = {
     /**
      * @param {!Event} event
@@ -45,7 +43,7 @@ WebInspector.Tooltip.prototype = {
             if (element === this._anchorElement) {
                 return;
             } else if (element[WebInspector.Tooltip._symbol]) {
-                this._show(element);
+                this._show(element, event);
                 return;
             }
         }
@@ -53,12 +51,23 @@ 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;
         this._tooltipElement.removeChildren();
+
+        // Check if native tooltips should be used.
+        for (var element of WebInspector.Tooltip._nativeOverrideContainer) {
+            if (this._anchorElement.isSelfOrDescendant(element)) {
+                Object.defineProperty(this._anchorElement, "title", WebInspector.Tooltip._nativeTitle);
+                this._anchorElement.title = tooltip.content;
+                return;
+            }
+        }
+
         if (typeof tooltip.content === "string")
             this._tooltipElement.textContent = tooltip.content;
         else
@@ -94,15 +103,22 @@ WebInspector.Tooltip.prototype = {
         var anchorBox = this._anchorElement.boxInWindow(this.element.window());
         const anchorOffset = 2;
         const pageMargin = 2;
+        var cursorOffset = 10;
         this._tooltipElement.style.maxWidth = (containerOffsetWidth - pageMargin * 2) + "px";
         var tooltipWidth = this._tooltipElement.offsetWidth;
         var tooltipHeight = this._tooltipElement.offsetHeight;
-        var tooltipX = anchorBox.x;
+        var anchorTooltipAtElement = this._anchorElement.nodeName === "BUTTON" || this._anchorElement.nodeName === "LABEL";
+        var tooltipX = anchorTooltipAtElement ? anchorBox.x : event.x + cursorOffset;
         tooltipX = Number.constrain(tooltipX,
             containerOffset.x + pageMargin,
             containerOffset.x + containerOffsetWidth - tooltipWidth - pageMargin);
-        var onBottom = anchorBox.y + anchorOffset + anchorBox.height + tooltipHeight < containerOffset.y + containerOffsetHeight;
-        var tooltipY = onBottom ? anchorBox.y + anchorBox.height + anchorOffset : anchorBox.y - tooltipHeight - anchorOffset;
+        var tooltipY;
+        if (!anchorTooltipAtElement) {
+            tooltipY = event.y + cursorOffset;
+        } else {
+            var onBottom = anchorBox.y + anchorOffset + anchorBox.height + tooltipHeight < containerOffset.y + containerOffsetHeight;
+            tooltipY = onBottom ? anchorBox.y + anchorBox.height + anchorOffset : anchorBox.y - tooltipHeight - anchorOffset;
+        }
         this._tooltipElement.positionAt(tooltipX, tooltipY);
     },
 
@@ -134,16 +150,29 @@ WebInspector.Tooltip.installHandler = function(doc)
  * @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 || {} };
+}
+
+/**
+ * @param {!Element} element
+ */
+WebInspector.Tooltip.addNativeOverrideContainer = function(element)
+{
+    WebInspector.Tooltip._nativeOverrideContainer.push(element);
 }
 
+/** @type {!Array.<!Element>} */
+WebInspector.Tooltip._nativeOverrideContainer = [];
+WebInspector.Tooltip._nativeTitle = /** @type {!ObjectPropertyDescriptor} */(Object.getOwnPropertyDescriptor(HTMLElement.prototype, "title"));
+
 Object.defineProperty(HTMLElement.prototype, "title", {
     /**
      * @return {!Element|string}