[DevTools] Rework Popover API

third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js

 // Copyright 2016 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.
 Network.NetworkWaterfallColumn = class extends UI.VBox {
   /**
    * @param {number} rowHeight
    * @param {!Network.NetworkTimeCalculator} calculator
    */
   constructor(rowHeight, calculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
@@ skipping 15 matching lines @@
 
     this._rowHeight = rowHeight;
     this._headerHeight = 0;
     this._calculator = calculator;
 
     this._offsetWidth = 0;
     this._offsetHeight = 0;
     this._startTime = this._calculator.minimumBoundary();
     this._endTime = this._calculator.maximumBoundary();
 
-    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));

[lushnikov, 2017/03/14 01:44:03]

nit: could you please add /* disableOnClick */ comment for the "false" argument

[dgozman, 2017/03/14 21:34:01]

Turned into a method.

     this._popoverHelper.setHasPadding(true);
     this._popoverHelper.setTimeout(300, 300);
 
     /** @type {!Array<!Network.NetworkNode>} */
     this._nodes = [];
 
     /** @type {?Network.NetworkNode} */
     this._hoveredNode = null;
 
     /** @type {!Map<string, !Array<number>>} */
@@ skipping 66 matching lines @@
   }
 
   /**
    * @param {!Event} event
    */
   _onMouseMove(event) {
     this._setHoveredNode(this.getNodeFromPoint(event.offsetX, event.offsetY), event.shiftKey);
   }
 
   /**
-   * @param {!Element} element
    * @param {!Event} event
-   * @return {!AnchorBox|undefined}
+   * @return {?UI.PopoverContent}
    */
-  _getPopoverAnchor(element, event) {
+  _getPopoverContent(event) {
     if (!this._hoveredNode)
-      return;
+      return null;
     var request = this._hoveredNode.request();
     if (!request)
-      return;
+      return null;
     var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').get() && !this._calculator.startAtZero;
     if (useTimingBars) {
       var range = Network.RequestTimingView.calculateRequestTimeRanges(request, 0)
                       .find(data => data.name === Network.RequestTimeRangeNames.Total);
       var start = this._timeToPosition(range.start);
       var end = this._timeToPosition(range.end);
     } else {
       var range = this._getSimplifiedBarRange(request, 0);
       var start = range.start;
       var end = range.end;
     }
 
     if (end - start < 50) {
       var halfWidth = (end - start) / 2;
       start = start + halfWidth - 25;
       end = end - halfWidth + 25;
     }
 
     if (event.clientX < this._canvasPosition.left + start || event.clientX > this._canvasPosition.left + end)
-      return;
+      return null;
 
     var rowIndex = this._nodes.findIndex(node => node.hovered());
     var barHeight = this._getBarHeight(range.name);
     var y = this._headerHeight + (this._rowHeight * rowIndex - this._scrollTop) + ((this._rowHeight - barHeight) / 2);
 
     if (event.clientY < this._canvasPosition.top + y || event.clientY > this._canvasPosition.top + y + barHeight)
-      return;
+      return null;
 
     var anchorBox = this.element.boxInWindow();
     anchorBox.x += start;
     anchorBox.y += y;
     anchorBox.width = end - start;
     anchorBox.height = barHeight;
-    return anchorBox;
+
+    return {
+      box: anchorBox,
+      show: popover => {
+        var content =
+            Network.RequestTimingView.createTimingTable(/** @type {!SDK.NetworkRequest} */ (request), this._calculator);
+        popover.contentElement.appendChild(content);
+        return Promise.resolve(true);
+      }
+    };
   }
 
   /**
-   * @param {!Element|!AnchorBox} anchor
-   * @param {!UI.GlassPane} popover
-   * @return {!Promise<boolean>}
-   */
-  _showPopover(anchor, popover) {
-    if (!this._hoveredNode)
-      return Promise.resolve(false);
-    var request = this._hoveredNode.request();
-    if (!request)
-      return Promise.resolve(false);
-    var content = Network.RequestTimingView.createTimingTable(request, this._calculator);
-    popover.contentElement.appendChild(content);
-    return Promise.resolve(true);
-  }
-
-  /**
    * @param {?Network.NetworkNode} node
    * @param {boolean} highlightInitiatorChain
    */
   _setHoveredNode(node, highlightInitiatorChain) {
     if (this._hoveredNode)
       this._hoveredNode.setHovered(false, false);
     this._hoveredNode = node;
     if (this._hoveredNode)
       this._hoveredNode.setHovered(true, highlightInitiatorChain);
   }
@@ skipping 451 matching lines @@
   websocket: 'hsl(0, 0%, 95%)',
   xhr: 'hsl(53, 100%, 80%)',
   other: 'hsl(0, 0%, 95%)'
 };
 
 /** @typedef {!{fillStyle: (string|undefined), lineWidth: (number|undefined), borderColor: (string|undefined)}} */
 Network.NetworkWaterfallColumn._LayerStyles;
 
 /** @typedef {!{x: number, y: number, text: string}} */
 Network.NetworkWaterfallColumn._TextLayer;