[DevTools] Rework Popover API

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js

Index: third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
index 37647d81252587f6b73cf85c72604a4c63931c20..108734de29cc0f86082252645876de012c45848b 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
@@ -75,8 +75,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
 
     this._visible = false;
 
-    this._popoverHelper = new UI.PopoverHelper(this._element);
-    this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+    this._popoverHelper = new UI.PopoverHelper(this._element, false, this._getPopoverContent.bind(this));
     this._popoverHelper.setHasPadding(true);
     this._popoverHelper.setTimeout(0, 100);
 
@@ -522,15 +521,40 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
   }
 
   /**
-   * @param {!Element} element
    * @param {!Event} event
-   * @return {!Element|!AnchorBox|undefined}
+   * @return {?UI.PopoverContent}
    */
-  _getPopoverAnchor(element, event) {
-    var link = element;
+  _getPopoverContent(event) {
+    var link = event.target;
     while (link && !link[Elements.ElementsTreeElement.HrefSymbol])
       link = link.parentElementOrShadowHost();
-    return link ? link : undefined;
+    if (!link)
+      return null;
+
+    return {
+      box: link.boxInWindow(),
+      show: popover => {
+        var fulfill;
+        var promise = new Promise(x => fulfill = x);
+        var listItem = link.enclosingNodeOrSelfWithNodeName('li');
+        var node = /** @type {!Elements.ElementsTreeElement} */ (listItem.treeElement).node();
+        this._loadDimensionsForNode(
+            node,
+            Components.DOMPresentationUtils.buildImagePreviewContents.bind(
+                Components.DOMPresentationUtils, node.target(), link[Elements.ElementsTreeElement.HrefSymbol], true,
+                showPopover));
+        return promise;
+
+        /**
+         * @param {!Element=} contents
+         */
+        function showPopover(contents) {
+          if (contents)
+            popover.contentElement.appendChild(contents);
+          fulfill(!!contents);
+        }
+      }
+    };
   }
 
   /**
@@ -571,32 +595,6 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
     }
   }
 
-  /**
-   * @param {!Element|!AnchorBox} link
-   * @param {!UI.GlassPane} popover
-   * @return {!Promise<boolean>}
-   */
-  _showPopover(link, popover) {
-    var fulfill;
-    var promise = new Promise(x => fulfill = x);
-    var listItem = link.enclosingNodeOrSelfWithNodeName('li');
-    var node = /** @type {!Elements.ElementsTreeElement} */ (listItem.treeElement).node();
-    this._loadDimensionsForNode(
-        node, Components.DOMPresentationUtils.buildImagePreviewContents.bind(
-                  Components.DOMPresentationUtils, node.target(), link[Elements.ElementsTreeElement.HrefSymbol], true,
-                  showPopover));
-    return promise;
-
-    /**
-     * @param {!Element=} contents
-     */
-    function showPopover(contents) {
-      if (contents)
-        popover.contentElement.appendChild(contents);
-      fulfill(!!contents);
-    }
-  }
-
   _onmousedown(event) {
     var element = this._treeElementFromEvent(event);