[DevTools] Rework Popover API

third_party/WebKit/Source/devtools/front_end/animation/AnimationTimeline.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @implements {SDK.SDKModelObserver<!Animation.AnimationModel>}
  * @unrestricted
  */
 Animation.AnimationTimeline = class extends UI.VBox {
   constructor() {
     super(true);
@@ skipping 113 matching lines @@
       var button = playbackRateControl.createChild('div', 'animation-playback-rate-button');
       button.textContent = playbackRate ? Common.UIString(playbackRate * 100 + '%') : Common.UIString('Pause');
       button.playbackRate = playbackRate;
       button.addEventListener('click', this._setPlaybackRate.bind(this, playbackRate));
       button.title = Common.UIString('Set speed to ') + button.textContent;
       this._playbackRateButtons.push(button);
     }
     this._updatePlaybackControls();
 
     this._previewContainer = this.contentElement.createChild('div', 'animation-timeline-buffer');
-    this._popoverHelper = new UI.PopoverHelper(this._previewContainer, true);
-    this._popoverHelper.initializeCallbacks(
-        this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
+    this._popoverHelper = new UI.PopoverHelper(this._previewContainer, true, this._getPopoverContent.bind(this));
     this._popoverHelper.setTimeout(0);
     var emptyBufferHint = this.contentElement.createChild('div', 'animation-timeline-buffer-hint');
     emptyBufferHint.textContent = Common.UIString('Listening for animations...');
     var container = this.contentElement.createChild('div', 'animation-timeline-header');
     var controls = container.createChild('div', 'animation-controls');
     this._currentTime = controls.createChild('div', 'animation-timeline-current-time monospace');
 
     var toolbar = new UI.Toolbar('animation-controls-toolbar', controls);
     this._controlButton = new UI.ToolbarToggle(Common.UIString('Replay timeline'), 'largeicon-replay-animation');
     this._controlState = Animation.AnimationTimeline._ControlState.Replay;
     this._controlButton.setToggled(true);
     this._controlButton.addEventListener(UI.ToolbarButton.Events.Click, this._controlButtonToggle.bind(this));
     toolbar.appendToolbarItem(this._controlButton);
 
     var gridHeader = container.createChild('div', 'animation-grid-header');
     UI.installDragHandle(
         gridHeader, this._repositionScrubber.bind(this), this._scrubberDragMove.bind(this),
         this._scrubberDragEnd.bind(this), 'text');
     container.appendChild(this._createScrubber());
     UI.installDragHandle(
         this._timelineScrubberLine, this._scrubberDragStart.bind(this), this._scrubberDragMove.bind(this),
         this._scrubberDragEnd.bind(this), 'col-resize');
     this._currentTime.textContent = '';
 
     return container;
   }
 
   /**
-   * @param {!Element} element
    * @param {!Event} event
-   * @return {!Element|!AnchorBox|undefined}
+   * @return {?UI.PopoverContent}
    */
-  _getPopoverAnchor(element, event) {
-    if (element.isDescendant(this._previewContainer))
-      return element;
-  }
+  _getPopoverContent(event) {
+    var element = event.target;
+    if (!element.isDescendant(this._previewContainer))
+      return null;
 
-  /**
-   * @param {!Element|!AnchorBox} anchor
-   * @param {!UI.GlassPane} popover
-   * @return {!Promise<boolean>}
-   */
-  _showPopover(anchor, popover) {
-    var animGroup;
-    for (var group of this._previewMap.keysArray()) {
-      if (this._previewMap.get(group).element === anchor.parentElement)
-        animGroup = group;
-    }
-    console.assert(animGroup);
-    var screenshots = animGroup.screenshots();
-    if (!screenshots.length)
-      return Promise.resolve(false);
+    return {
+      box: event.target.boxInWindow(),
+      show: popover => {
+        var animGroup;
+        for (var group of this._previewMap.keysArray()) {
+          if (this._previewMap.get(group).element === element.parentElement)
+            animGroup = group;
+        }
+        console.assert(animGroup);
+        var screenshots = animGroup.screenshots();
+        if (!screenshots.length)
+          return Promise.resolve(false);
 
-    var fulfill;
-    var promise = new Promise(x => fulfill = x);
-    if (!screenshots[0].complete)
-      screenshots[0].onload = onFirstScreenshotLoaded.bind(null, screenshots);
-    else
-      onFirstScreenshotLoaded(screenshots);
-    return promise;
+        var fulfill;
+        var promise = new Promise(x => fulfill = x);
+        if (!screenshots[0].complete)
+          screenshots[0].onload = onFirstScreenshotLoaded.bind(null, screenshots);
+        else
+          onFirstScreenshotLoaded(screenshots);
+        return promise;
 
-    /**
-     * @param  {!Array.<!Image>} screenshots
-     */
-    function onFirstScreenshotLoaded(screenshots) {
-      new Animation.AnimationScreenshotPopover(screenshots).show(popover.contentElement);
-      fulfill(true);
-    }
-  }
-
-  _onHidePopover() {
+        /**
+         * @param  {!Array.<!Image>} screenshots
+         */
+        function onFirstScreenshotLoaded(screenshots) {
+          new Animation.AnimationScreenshotPopover(screenshots).show(popover.contentElement);
+          fulfill(true);
+        }
+      }
+    };
   }
 
   _togglePauseAll() {
     this._allPaused = !this._allPaused;
     this._pauseButton.setToggled(this._allPaused);
     this._setPlaybackRate(this._playbackRate);
     this._pauseButton.setTitle(this._allPaused ? Common.UIString('Resume all') : Common.UIString('Pause all'));
   }
 
   /**
@@ skipping 515 matching lines @@
   static parse(text) {
     var match = text.match(/^steps\((\d+), (start|middle)\)$/);
     if (match)
       return new Animation.AnimationTimeline.StepTimingFunction(parseInt(match[1], 10), match[2]);
     match = text.match(/^steps\((\d+)\)$/);
     if (match)
       return new Animation.AnimationTimeline.StepTimingFunction(parseInt(match[1], 10), 'end');
     return null;
   }
 };