[Devtools] Added hover support for network timeline experiment

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
  */
@@ skipping 12 matching lines @@
     this._rightPadding = 5;
 
     this._dataGrid = dataGrid;
     this._networkLogView = networkLogView;
 
     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);

[dgozman, 2016/10/12 21:05:38]

Don't you have to fire an event here?

[allada, 2016/10/12 21:12:43]

If the mouse moved from 0px to another element, we'd never get the mouse move
event to say it moved out of the element so no more events come... This is the
safest way to do it.

 
     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 = {
     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();
+    },
+
+    /**
+     * @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;
+        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;
     },
 
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @return {?WebInspector.NetworkRequest}
+     */
+    _getRequestFromPoint: 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)
             return;
         this._updateRequestID = this.element.window().requestAnimationFrame(this._update.bind(this));
     },
 
     _update: function()
     {
         this.element.window().cancelAnimationFrame(this._updateRequestID);
@@ skipping 86 matching lines @@
         context.scale(window.devicePixelRatio, window.devicePixelRatio);
         context.translate(0, this._networkLogView.headerHeight());
         context.rect(0, 0, this._offsetWidth, this._offsetHeight);
         context.clip();
         var rowHeight = this._networkLogView.rowHeight();
         var scrollTop = this._vScrollElement.scrollTop;
         var firstRequestIndex = Math.floor(scrollTop / rowHeight);
         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 ||
                     range.name === WebInspector.RequestTimeRangeNames.Sending ||
                     range.end - range.start === 0)
                     continue;
                 this._drawBar(context, range, rowOffset - scrollTop);
             }
         }
         context.restore();
@@ skipping 56 matching lines @@
             context.lineWidth = lineWidth;
             context.strokeStyle = borderColor;
             context.stroke();
         }
         context.fill();
         context.restore();
     },
 
     /**
      * @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)
     {
+        if (rowNumber % 2 === 1 && this._hoveredRequest !== request)
+            return;
         context.save();
-        if (rowNumber % 2 === 1)
-            return;
+        context.beginPath();
+        var color = this._rowStripeColor;
+        if (this._hoveredRequest === request)
+            color = this._rowHoverColor;
 
-        context.beginPath();
-        context.fillStyle = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
+        context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 }