[Devtools] Added popover support to network timeline canvas expirement

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
index e69d5c2e9544ea18d2c837f4436653a3574149c3..7d2ec3ad370371c3dd2819ccad26c76ce55fc2a5 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -25,13 +25,17 @@ WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
     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 => {
@@ -60,7 +64,37 @@ 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();
@@ -89,6 +123,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
     {
         this._hoveredRequest = request;
         this.scheduleUpdate();
+        this._positionPopoverAnchor();
     },
 
     /**
@@ -107,6 +142,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
     {
         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);
     },
@@ -117,6 +153,25 @@ WebInspector.NetworkTimelineColumn.prototype = {
     _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";
     },
 
     /**