[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._popoverAnchor = this.contentElement.createChild("div", "network-timeline-popover");

[lushnikov, 2016/10/19 22:02:26]

let's use AnchorBox - it's a more lightweight way to position popover

[allada, 2016/10/19 23:31:17]

Done.

+    this._popoverHelper = new WebInspector.PopoverHelper(this._popoverAnchor, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+
     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._popoverShowDelay = 300;

[lushnikov, 2016/10/19 22:02:25]

not used

[allada, 2016/10/19 23:31:17]

Done.

+
 WebInspector.NetworkTimelineColumn.prototype = {
+    willHide: function()

[lushnikov, 2016/10/19 22:02:25]

nit: @override

[allada, 2016/10/19 23:31:17]

Done.

+    {
+        this._popoverHelper.hidePopover();
+    },

[lushnikov, 2016/10/19 22:02:25]

nit: new line

[allada, 2016/10/19 23:31:17]

Done.

+    /**
+     * @param {!Element} element
+     * @param {!Event} event
+     * @return {!Element|!AnchorBox|undefined}
+     */
+    _getPopoverAnchor: function(element, event)
+    {
+        if (!this._hoveredRequest)
+            return;
+        return this._popoverAnchor;

[lushnikov, 2016/10/19 22:02:26]

shell we inline the _positionPopoverAnchor method here?

[allada, 2016/10/19 23:31:17]

Acknowledged.

+    },
+
+    /**
+     * @param {!Element} 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;
     },
 
     _refreshDataIfNeeded: function()
     {
         if (!this._needsRefreshData)
             return;
         this._needsRefreshData = false;
         var currentNode = this._dataGrid.rootNode();
         this._requestData = [];
         while (currentNode = currentNode.traverseNextNode(true))
             this._requestData.push(currentNode.request());
     },
 
     /**
      * @param {?WebInspector.NetworkRequest} request
      */
     setHoveredRequest: function(request)
     {
         this._hoveredRequest = request;
         this.scheduleUpdate();
+        this._positionPopoverAnchor();
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         var request = this._getRequestFromPoint(event.offsetX, event.offsetY);
         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();
+    },
+
+    _positionPopoverAnchor: function()
+    {
+        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);
+
+        var rowIndex = this._requestData.findIndex(request => this._hoveredRequest === request);
+        var barHeight = this._getBarHeight(range.name);
+
+        this._popoverAnchor.style.left = start + "px";
+        this._popoverAnchor.style.width = (end - start) + "px"
+        this._popoverAnchor.style.height = barHeight + "px";
+        this._popoverAnchor.style.top = this._networkLogView.headerHeight() + (rowHeight * rowIndex - this._vScrollElement.scrollTop) + ((rowHeight - barHeight) / 2) + "px";
     },
 
     /**
      * @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
 }