[DevTools] Rework Popover API

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.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 550 matching lines @@
       this._treeOutlines[i].setWordWrap(/** @type {boolean} */ (event.data));
   }
 
   switchToAndFocus(node) {
     // Reset search restore.
     this._searchableView.cancelSearch();
     UI.viewManager.showView('elements').then(() => this.selectDOMNode(node, true));
   }
 
   /**
-   * @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;
 
-  /**
-   * @param {!Element|!AnchorBox} link
-   * @param {!UI.GlassPane} popover
-   * @return {!Promise<boolean>}
-   */
-  _showPopover(link, popover) {
-    var node = this.selectedDOMNode();
-    if (!node)
-      return Promise.resolve(false);
-
-    var fulfill;
-    var promise = new Promise(x => fulfill = x);
-    Components.DOMPresentationUtils.buildImagePreviewContents(
-        node.target(), link[Elements.ElementsTreeElement.HrefSymbol], true, showPopover);
-    return promise;
-
-    /**
-     * @param {!Element=} contents
-     */
-    function showPopover(contents) {
-      if (contents)
-        popover.contentElement.appendChild(contents);
-      fulfill(!!contents);
-    }
+    return {
+      box: link.boxInWindow(),
+      show: async popover => {
+        var node = this.selectedDOMNode();
+        if (!node)
+          return false;
+        var preview = await Components.DOMPresentationUtils.buildImagePreviewContents(
+            node.target(), link[Elements.ElementsTreeElement.HrefSymbol], true);
+        if (preview)
+          popover.contentElement.appendChild(preview);
+        return !!preview;
+      }
+    };
   }
 
   _jumpToSearchResult(index) {
     this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
     this._highlightCurrentSearchResult();
   }
 
   /**
    * @override
    */
@@ skipping 284 matching lines @@
       if (tabId === Common.UIString('Computed'))
         showMetrics.call(this, true);
       else if (tabId === Common.UIString('Styles'))
         showMetrics.call(this, false);
     }
 
     this.sidebarPaneView = UI.viewManager.createTabbedLocation(() => UI.viewManager.showView('elements'));
     var tabbedPane = this.sidebarPaneView.tabbedPane();
     if (this._popoverHelper)
       this._popoverHelper.hidePopover();
-    this._popoverHelper = new UI.PopoverHelper(tabbedPane.element);
+    this._popoverHelper = new UI.PopoverHelper(tabbedPane.element, this._getPopoverRequest.bind(this));
     this._popoverHelper.setHasPadding(true);
-    this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(0);
 
     if (horizontally) {
       // Styles and computed are merged into a single tab.
       this._splitWidget.installResizer(tabbedPane.headerElement());
 
       var stylesView = new UI.SimpleView(Common.UIString('Styles'));
       stylesView.element.classList.add('flex-auto');
 
       var splitWidget = new UI.SplitWidget(true, true, 'stylesPaneSplitViewState', 215);
@@ skipping 189 matching lines @@
    * @param {!SDK.DOMNode} node
    * @return {?{title: string, color: string}}
    */
   decorate(node) {
     return {
       color: 'orange',
       title: Common.UIString('Element state: %s', ':' + SDK.CSSModel.fromNode(node).pseudoState(node).join(', :'))
     };
   }
 };