[Devtools] Canvas network timeline experiment establishes scrolling

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._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._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.Updated, this._update.bind(this));
+    this._dataGrid.addEventListener(WebInspector.DataGrid.Events.PaddingChanged, this._updateHeight.bind(this));
+
     /** @type {!Array<!WebInspector.NetworkRequest>} */
     this._requestData = [];
 }
 
 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());
-        this._update();
+    },
+
+    _onMouseWheel: function(event)

[dgozman, 2016/10/11 21:53:39]

Annotate please.

[allada, 2016/10/12 00:33:09]

Done.

+    {
+        this._vScrollElement.scrollTop -= event.wheelDeltaY;

[dgozman, 2016/10/11 21:53:39]

Won't this cause _onScroll itself?

[allada, 2016/10/12 00:33:09]

Yes, I can remove this part:
"this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;"

However, if I do, I risk the chance of scrolling lagging. I am trying to keep
scrolling in sync as much as possible.

+        this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
+    },
+
+    _onScroll: function(event)

[dgozman, 2016/10/11 21:53:39]

Annotate please.

[allada, 2016/10/12 00:33:08]

Done.

+    {
+        this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
     },
 
     scheduleUpdate: function()
     {
         if (this._updateRequestID)
             return;
         this._updateRequestID = this.element.window().requestAnimationFrame(this._update.bind(this));
     },
 
     _update: function()
     {
         this.element.window().cancelAnimationFrame(this._updateRequestID);
         this._updateRequestID = null;
 
         this._refreshDataIfNeeded();
 
         this._startTime = this._networkLogView.calculator().minimumBoundary();
         this._endTime = this._networkLogView.calculator().maximumBoundary();
         this._resetCanvas();
         this._draw();
     },
 
+    _updateHeight: function()
+    {
+        var totalHeight = this._dataGridScrollContainer.scrollHeight;
+        this._vScrollContent.style.height = totalHeight + "px";
+    },
+
     _resetCanvas: function()
     {
         var ratio = window.devicePixelRatio;
         this._canvas.width = this._offsetWidth * ratio;
         this._canvas.height = this._offsetHeight * ratio;
         this._canvas.style.width = this._offsetWidth + "px";
         this._canvas.style.height = this._offsetHeight + "px";
     },
 
     /**
@@ skipping 35 matching lines @@
         case types.Queueing:
             return "white";
         case types.ServiceWorker:
         case types.ServiceWorkerPreparation:
         default:
             return "orange";
         }
     },
 
     /**
-     * @return {number}
-     */
-    _scrollTop: function()
-    {
-        return this._dataGrid.scrollContainer.scrollTop;
-    },
-
-    /**
      * @param {number} time
      * @return {number}
      */
     _timeToPosition: function(time)
     {
         var availableWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
         var timeToPixel = availableWidth / (this._endTime - this._startTime);
         return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel);
     },
 
     _draw: function()
     {
         var requests = this._requestData;
         var context = this._canvas.getContext("2d");
         context.save();
         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._scrollTop();
+        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;
-            var rowNumber = i - firstRequestIndex;
-            this._decorateRow(context, rowNumber, rowOffset - scrollTop, rowHeight);
+            this._decorateRow(context, i, rowOffset - scrollTop, rowHeight);
             var request = requests[i];
             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);
             }
         }
@@ skipping 76 matching lines @@
 
         context.beginPath();
         context.fillStyle = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
         context.rect(0, y, this._offsetWidth, rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 }