[Devtools] Fixed Scroll issues with network exp timeline

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
index dc793b46acf2b3c6716e9c9ccbe9b622b9252c27..0a9d05a7296f64db0d6a3e84ff6021a2eee97bc7 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
@@ -414,6 +414,8 @@ WebInspector.NetworkLogViewColumns.prototype = {
                 event.consume();
         }, true);
 
+        this._dataGridScroller = this._dataGrid.scrollContainer;
+
         this._updateColumns();
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortHandler, this);
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this.updateDividersIfNeeded, this);
@@ -436,13 +438,24 @@ WebInspector.NetworkLogViewColumns.prototype = {
 
     _setupTimeline: function()
     {
-        var dataGridScroller = this._dataGrid.scrollContainer;
-        this._timelineColumn = new WebInspector.NetworkTimelineColumn(this._networkLogView.rowHeight(), this._networkLogView.calculator(), dataGridScroller);
-        this._dataGrid.setScrollContainer(this._timelineColumn.getScrollContainer());
-        this._dataGrid.addEventListener(WebInspector.DataGrid.Events.PaddingChanged, () => this._timelineColumn.setScrollHeight(dataGridScroller.scrollHeight));
+        this._timelineColumn = new WebInspector.NetworkTimelineColumn(this._networkLogView.rowHeight(), this._networkLogView.calculator());
+
+        this._timelineColumn.element.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
+        this._dataGridScroller.addEventListener("mousewheel", event => {

[dgozman, 2016/10/27 20:11:42]

Just this._onMouseWheel.bind(this), and consume inside.

[allada, 2016/10/27 21:21:56]

Done.

+            event.consume(true);
+            this._onMouseWheel(event);
+        }, true);
+
+        this._timelineColumn.element.addEventListener("mousemove", event => this._networkLogView.setHoveredRequest(this._timelineColumn.getRequestFromPoint(event.offsetX, event.offsetY + event.target.offsetTop)), true);
+        this._timelineColumn.element.addEventListener("mouseleave", this._networkLogView.setHoveredRequest.bind(this._networkLogView, null), true);
+
+        this._timelineScroller = this._timelineColumn.contentElement.createChild("div", "network-timeline-v-scroll");
+        this._timelineScroller.addEventListener("scroll", this._syncScrollers.bind(this), { passive: true });
+        this._timelineScrollerContent = this._timelineScroller.createChild("div", "network-timeline-v-scroll-content");
+
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Events.PaddingChanged, this._syncScrollers.bind(this));
         this._dataGrid.addEventListener(WebInspector.ViewportDataGrid.Events.ViewportCalculated, this._redrawTimelineColumn.bind(this));
 
-        this._timelineColumn.addEventListener(WebInspector.NetworkTimelineColumn.Events.RequestHovered, event => this._networkLogView.setHoveredRequest(/** @type {?WebInspector.NetworkRequest} */ (event.data)));
 
         this._createTimelineHeader();
         this._timelineColumn.contentElement.classList.add("network-timeline-view");
@@ -452,10 +465,29 @@ WebInspector.NetworkLogViewColumns.prototype = {
         this.switchViewMode(false);
     },
 
+    /**
+     * @param {!Event} event
+     */
+    _onMouseWheel: function(event)
+    {
+        this._activeScroller.scrollTop -= event.wheelDeltaY;
+        this._syncScrollers();
+        this._networkLogView.setHoveredRequest(this._timelineColumn.getRequestFromPoint(event.offsetX, event.offsetY));
+    },
+
+    _syncScrollers: function()
+    {
+        if (!this._timelineColumn.isShowing())
+            return;
+        this._timelineScrollerContent.style.height = this._dataGridScroller.scrollHeight + "px";
+        this._timelineColumn.setRightPadding(this._timelineScroller.offsetWidth - this._timelineScrollerContent.offsetWidth);

[dgozman, 2016/10/27 20:11:42]

This forces sync layout. We should cached the widths instead, or just avoid
this.

[allada, 2016/10/27 21:21:56]

Done.

+        this._dataGridScroller.scrollTop = this._timelineScroller.scrollTop;
+    },
+
     _redrawTimelineColumn: function()
     {
         if (!this._timelineRequestsAreStale) {
-            this._timelineColumn.update();
+            this._timelineColumn.update(this._activeScroller.scrollTop);
             return;
         }
         var currentNode = this._dataGrid.rootNode();
@@ -468,7 +500,7 @@ WebInspector.NetworkLogViewColumns.prototype = {
                 requestData.navigationRequest = currentNode.request();
             requestData.requests.push(currentNode.request());
         }
-        this._timelineColumn.update(requestData);
+        this._timelineColumn.update(this._activeScroller.scrollTop, requestData);
     },
 
     /**
@@ -525,8 +557,9 @@ WebInspector.NetworkLogViewColumns.prototype = {
         if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             return;
         this._timelineColumn.setRowHeight(this._networkLogView.rowHeight());
-        // TODO(allada) Make these non-magic numbers.
-        this._timelineColumn.setHeaderHeight(largeRows ? 31 : 27);
+        var rowHeight = largeRows ? 31 : 27;
+        this._timelineColumn.setHeaderHeight(rowHeight);
+        this._timelineScroller.style.marginTop = rowHeight + "px";

[dgozman, 2016/10/27 20:11:42]

Let's do this with css.

[allada, 2016/10/27 21:21:56]

Done.

         this._timelineHeaderElement.classList.toggle("small", !largeRows);
         this._timelineGrid.element.classList.toggle("small", !this._networkLogLargeRowsSetting.get());
     },
@@ -686,10 +719,18 @@ WebInspector.NetworkLogViewColumns.prototype = {
         if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             return;
         // TODO(allada) Move this code into the code above.
-        if (gridMode)
+        if (gridMode) {
             this._splitWidget.showBoth();
-        else
+            this._activeScroller = this._timelineScroller;
+            this._timelineScroller.scrollTop = this._dataGridScroller.scrollTop;
+            this._dataGridScroller.style.overflow = "hidden";
+            this._dataGrid.setScrollContainer(this._timelineScroller);
+        } else {
             this._splitWidget.hideMain();
+            this._activeScroller = this._dataGridScroller;
+            this._dataGridScroller.style.overflow = "overlay";
+            this._dataGrid.setScrollContainer(this._dataGridScroller);
+        }
     },
 
     /**