[Devtools] Added popover support to network timeline canvas expirement

third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.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.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.NetworkLogView} networkLogView
  * @param {!WebInspector.SortableDataGrid} dataGrid
  */
 WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
 {
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("network/networkTimelineColumn.css");
 
     this._canvas = this.contentElement.createChild("canvas");
     this._canvas.tabIndex = 1;
     this.setDefaultFocusedElement(this._canvas);
 
     /** @const */
     this._leftPadding = 5;
     /** @const */
     this._rightPadding = 5;
 
     this._dataGrid = dataGrid;
     this._networkLogView = networkLogView;
 
+    this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+    this._popoverHelper.setTimeout(300, 300);
+
     this._vScrollElement = this.contentElement.createChild("div", "network-timeline-v-scroll");
-    this._vScrollContent = this._vScrollElement.createChild("div");
     this._vScrollElement.addEventListener("scroll", this._onScroll.bind(this), { passive: true });
     this._vScrollElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
-    this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
-    this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), true);
-    this._canvas.addEventListener("mouseleave", this.setHoveredRequest.bind(this, null), true);
+    this._vScrollContent = this._vScrollElement.createChild("div");
+
+    this.element.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
+    this.element.addEventListener("mousemove", this._onMouseMove.bind(this), true);
+    this.element.addEventListener("mouseleave", this.setHoveredRequest.bind(this, null), true);
 
     this._dataGridScrollContainer = this._dataGrid.scrollContainer;
     this._dataGridScrollContainer.addEventListener("mousewheel", event => {
         event.consume(true);
         this._onMouseWheel(event);
     }, true);
 
     // TODO(allada) When timeline canvas moves out of experiment move this to stylesheet.
     this._dataGridScrollContainer.style.overflow = "hidden";
     this._dataGrid.setScrollContainer(this._vScrollElement);
 
     this._dataGrid.addEventListener(WebInspector.ViewportDataGrid.Events.ViewportCalculated, this._update.bind(this));
     this._dataGrid.addEventListener(WebInspector.DataGrid.Events.PaddingChanged, this._updateHeight.bind(this));
 
     /** @type {!Array<!WebInspector.NetworkRequest>} */
     this._requestData = [];
 
     /** @type {?WebInspector.NetworkRequest} */
     this._hoveredRequest = null;
 
     this._rowStripeColor = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
     this._rowHoverColor = WebInspector.themeSupport.patchColor("#ebf2fc", WebInspector.ThemeSupport.ColorUsage.Background);
 }
 
 WebInspector.NetworkTimelineColumn.Events = {
     RequestHovered: Symbol("RequestHovered")
 }
 
 WebInspector.NetworkTimelineColumn.prototype = {
+    /**
+     * @override
+     */
+    willHide: function()
+    {
+        this._popoverHelper.hidePopover();
+    },
+
+    /**
+     * @param {!Element} element
+     * @param {!Event} event
+     * @return {!AnchorBox|undefined}
+     */
+    _getPopoverAnchor: function(element, event)
+    {
+        if (!this._hoveredRequest)
+            return;
+
+        var rowHeight = this._networkLogView.rowHeight();
+        var range = WebInspector.RequestTimingView.calculateRequestTimeRanges(this._hoveredRequest, 0).find(data => data.name === "total");
+        var start = this._timeToPosition(range.start);
+        var end = this._timeToPosition(range.end);
+
+        if (event.offsetX < start || event.offsetX > end)
+            return;
+
+        var rowIndex = this._requestData.findIndex(request => this._hoveredRequest === request);
+        var barHeight = this._getBarHeight(range.name);
+        var y = this._networkLogView.headerHeight() + (rowHeight * rowIndex - this._vScrollElement.scrollTop) + ((rowHeight - barHeight) / 2);
+
+        if (event.offsetY < y || event.offsetY > y + barHeight)
+            return;
+
+        var anchorBox = this.element.boxInWindow();
+        anchorBox.x += start;
+        anchorBox.y += y;
+        anchorBox.width = end - start;
+        anchorBox.height = barHeight;
+        return anchorBox;
+    },
+
+    /**
+     * @param {!Element|!AnchorBox} anchor
+     * @param {!WebInspector.Popover} popover
+     */
+    _showPopover: function(anchor, popover)
+    {
+        if (!this._hoveredRequest)
+            return;
+        var content = WebInspector.RequestTimingView.createTimingTable(this._hoveredRequest, this._networkLogView.timeCalculator().minimumBoundary());
+        popover.showForAnchor(content, anchor);
+    },
+
     wasShown: function()
     {
         this.scheduleUpdate();
     },
 
     scheduleRefreshData: function()
     {
         this._needsRefreshData = true;
     },
 
@@ skipping 26 matching lines @@
         this.dispatchEventToListeners(WebInspector.NetworkTimelineColumn.Events.RequestHovered, request);
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseWheel: function(event)
     {
         this._vScrollElement.scrollTop -= event.wheelDeltaY;
         this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
+        this._popoverHelper.hidePopover();
+
         var request = this._getRequestFromPoint(event.offsetX, event.offsetY);
         this.dispatchEventToListeners(WebInspector.NetworkTimelineColumn.Events.RequestHovered, request);
     },
 
     /**
      * @param {!Event} event
      */
     _onScroll: function(event)
     {
         this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
+        this._popoverHelper.hidePopover();
     },
 
     /**
      * @param {number} x
      * @param {number} y
      * @return {?WebInspector.NetworkRequest}
      */
     _getRequestFromPoint: function(x, y)
     {
         var rowHeight = this._networkLogView.rowHeight();
@@ skipping 248 matching lines @@
             color = this._rowHoverColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 }