[DevTools] Rework Popover API

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 57 matching lines @@
 
     this._includeRootDOMNode = !omitRootDOMNode;
     this._selectEnabled = selectEnabled;
     /** @type {?SDK.DOMNode} */
     this._rootDOMNode = null;
     /** @type {?SDK.DOMNode} */
     this._selectedDOMNode = null;
 
     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, this._getPopoverRequest.bind(this));
     this._popoverHelper.setHasPadding(true);
     this._popoverHelper.setTimeout(0, 100);
 
     /** @type {!Map<!SDK.DOMNode, !Elements.ElementsTreeOutline.UpdateRecord>} */
     this._updateRecords = new Map();
     /** @type {!Set<!Elements.ElementsTreeElement>} */
     this._treeElementsBeingUpdated = new Set();
 
     this._domModel.addEventListener(SDK.DOMModel.Events.MarkersChanged, this._markersChanged, this);
     this._showHTMLCommentsSetting = Common.moduleSetting('showHTMLComments');
@@ skipping 425 matching lines @@
     var element;
     if (elementUnderMouse === elementAboveMouse)
       element = elementUnderMouse;
     else
       element = this.treeElementFromPoint(x, y + 2);
 
     return element;
   }
 
   /**
-   * @param {!Element} element
    * @param {!Event} event
-   * @return {!Element|!AnchorBox|undefined}
+   * @return {?UI.PopoverRequest}
    */
-  _getPopoverAnchor(element, event) {
-    var link = element;
+  _getPopoverRequest(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: async popover => {
+        var listItem = link.enclosingNodeOrSelfWithNodeName('li');
+        var node = /** @type {!Elements.ElementsTreeElement} */ (listItem.treeElement).node();
+        var precomputedFeatures = await this._loadDimensionsForNode(node);
+        var preview = await Components.DOMPresentationUtils.buildImagePreviewContents(
+            node.target(), link[Elements.ElementsTreeElement.HrefSymbol], true, precomputedFeatures);
+        if (preview)
+          popover.contentElement.appendChild(preview);
+        return !!preview;
+      }
+    };
   }
 
   /**
    * @param {!SDK.DOMNode} node
-   * @param {function()} callback
+   * @return {!Promise<!Object|undefined>}
    */
-  _loadDimensionsForNode(node, callback) {
-    if (!node.nodeName() || node.nodeName().toLowerCase() !== 'img') {
-      callback();
-      return;
-    }
+  _loadDimensionsForNode(node) {
+    if (!node.nodeName() || node.nodeName().toLowerCase() !== 'img')
+      return Promise.resolve();
 
+    var fulfill;
+    var promise = new Promise(x => fulfill = x);
     node.resolveToObject('', resolvedNode);
+    return promise;
 
     function resolvedNode(object) {
       if (!object) {
-        callback();
+        fulfill();
         return;
       }
 
-      object.callFunctionJSON(features, undefined, callback);
+      object.callFunctionJSON(features, undefined, fulfill);
       object.release();
 
       /**
        * @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number, currentSrc: (string|undefined)}}
        * @suppressReceiverCheck
        * @this {!Element}
        */
       function features() {
         return {
           offsetWidth: this.offsetWidth,
           offsetHeight: this.offsetHeight,
           naturalWidth: this.naturalWidth,
           naturalHeight: this.naturalHeight,
           currentSrc: this.currentSrc
         };
       }
     }
   }
 
-  /**
-   * @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);
 
     if (!element || element.isEventWithinDisclosureTriangle(event))
       return;
 
     element.select();
   }
 
   /**
@@ skipping 1083 matching lines @@
      */
     function resolved(node) {
       if (node) {
         this.treeOutline._selectedDOMNode = node;
         this.treeOutline._selectedNodeChanged();
       }
     }
     return true;
   }
 };