[Devtools] Added hover support for network timeline experiment

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 89b09c5e3c8de2062c4b9f9dec4e6a89c06a6c37..b098b152fcce3b5e468f15f4a07e445d345bcf4c 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -30,6 +30,8 @@ WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
     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._onMouseHover.bind(this), true);
+    this._canvas.addEventListener("mouseleave", this.setHoveredRequest.bind(this, null), true);
 
     this._dataGridScrollContainer = this._dataGrid.scrollContainer;
     this._dataGridScrollContainer.addEventListener("mousewheel", event => {
@@ -46,6 +48,9 @@ WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
 
     /** @type {!Array<!WebInspector.NetworkRequest>} */
     this._requestData = [];
+
+    /** @type {?WebInspector.NetworkRequest} */
+    this._hoveredRequest = null;
 }
 
 WebInspector.NetworkTimelineColumn.prototype = {
@@ -70,10 +75,27 @@ WebInspector.NetworkTimelineColumn.prototype = {
             this._requestData.push(currentNode.request());
     },
 
+    /**
+     * @param {?WebInspector.NetworkRequest} request
+     */
+    setHoveredRequest: function(request)
+    {
+        this._hoveredRequest = request;
+        this.scheduleUpdate();
+    },
+
+    _onMouseHover: function(event)

[dgozman, 2016/10/12 17:31:32]

JSDoc....

[allada, 2016/10/12 19:15:29]

Done.

+    {
+        var request = this._requestFromPoint(event.offsetX, event.offsetY);
+        this._networkLogView.setHoveredRequest(request);
+    },
+
     _onMouseWheel: function(event)
     {
         this._vScrollElement.scrollTop -= event.wheelDeltaY;
         this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
+        var request = this._requestFromPoint(event.offsetX, event.offsetY);
+        this._networkLogView.setHoveredRequest(request);
     },
 
     _onScroll: function(event)
@@ -81,6 +103,18 @@ WebInspector.NetworkTimelineColumn.prototype = {
         this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
     },
 
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @return {?WebInspector.NetworkRequest}
+     */
+    _requestFromPoint: function(x, y)
+    {
+        var rowHeight = this._networkLogView.rowHeight();
+        var scrollTop = this._vScrollElement.scrollTop;
+        return this._requestData[Math.floor((scrollTop + y - this._networkLogView.headerHeight()) / rowHeight)] || null;
+    },
+
     scheduleUpdate: function()
     {
         if (this._updateRequestID)
@@ -187,8 +221,8 @@ WebInspector.NetworkTimelineColumn.prototype = {
         var lastRequestIndex = Math.min(requests.length, firstRequestIndex + Math.ceil(this._offsetHeight / rowHeight));
         for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
             var rowOffset = rowHeight * i;
-            this._decorateRow(context, i, rowOffset - scrollTop, rowHeight);
             var request = requests[i];
+            this._decorateRow(context, request, i, rowOffset - scrollTop, rowHeight);
             var ranges = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, 0);
             for (var range of ranges) {
                 if (range.name === WebInspector.RequestTimeRangeNames.Total ||
@@ -265,18 +299,22 @@ WebInspector.NetworkTimelineColumn.prototype = {
 
     /**
      * @param {!CanvasRenderingContext2D} context
+     * @param {!WebInspector.NetworkRequest} request
      * @param {number} rowNumber
      * @param {number} y
      * @param {number} rowHeight
      */
-    _decorateRow: function(context, rowNumber, y, rowHeight)
+    _decorateRow: function(context, request, rowNumber, y, rowHeight)
     {
-        context.save();
-        if (rowNumber % 2 === 1)
+        if (rowNumber % 2 === 1 && this._hoveredRequest !== request)
             return;
-
+        context.save();
         context.beginPath();
-        context.fillStyle = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
+        var color = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);

[dgozman, 2016/10/12 17:31:32]

We should save these colors to variables to only patch once.

[allada, 2016/10/12 19:15:29]

Done.

+        if (this._hoveredRequest === request)
+            color = WebInspector.themeSupport.patchColor("#ebf2fc", WebInspector.ThemeSupport.ColorUsage.Background);
+
+        context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, rowHeight);
         context.fill();
         context.restore();