[Devtools] Canvas network timeline experiment establishes scrolling

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 2b516fe9c97d73c247a4cdb8be16e572b5d56c41..89b09c5e3c8de2062c4b9f9dec4e6a89c06a6c37 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -11,6 +11,8 @@
 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);
@@ -22,6 +24,26 @@ WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
 
     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 = [];
 }
@@ -46,7 +68,17 @@ WebInspector.NetworkTimelineColumn.prototype = {
         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()
@@ -69,6 +101,12 @@ WebInspector.NetworkTimelineColumn.prototype = {
         this._draw();
     },
 
+    _updateHeight: function()
+    {
+        var totalHeight = this._dataGridScrollContainer.scrollHeight;
+        this._vScrollContent.style.height = totalHeight + "px";
+    },
+
     _resetCanvas: function()
     {
         var ratio = window.devicePixelRatio;
@@ -124,14 +162,6 @@ WebInspector.NetworkTimelineColumn.prototype = {
     },
 
     /**
-     * @return {number}
-     */
-    _scrollTop: function()
-    {
-        return this._dataGrid.scrollContainer.scrollTop;
-    },
-
-    /**
      * @param {number} time
      * @return {number}
      */
@@ -152,13 +182,12 @@ WebInspector.NetworkTimelineColumn.prototype = {
         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) {