[Devtools] Fixed Scroll issues with network exp timeline

third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.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
  * @param {!WebInspector.NetworkLogView} networkLogView
  * @param {!WebInspector.NetworkTransferTimeCalculator} timeCalculator
  * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator
  * @param {!WebInspector.Setting} networkLogLargeRowsSetting
@@ skipping 25 matching lines @@
 
     this._gridMode = true;
 
     /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
     /** @type {?WebInspector.TimelineGrid} */
     this._timelineGrid = null;
     this._timelineHeaderElement = null;
     this._timelineRequestsAreStale = false;
+    this._timelineScrollerWidthIsStale = true;
 
     /** @type {!WebInspector.Linkifier} */
     this._popupLinkifier = new WebInspector.Linkifier();
 
     /** @type {!Map<string, !WebInspector.NetworkTimeCalculator>} */
     this._calculatorsMap = new Map();
     this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Time, timeCalculator);
     this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator);
 
     this._setupDataGrid();
     if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
         this._setupTimeline();
+};
 
-    this._updateRowsSize();
-};
 WebInspector.NetworkLogViewColumns._initialSortColumn = "timeline";
 
 /**
  * @typedef {{
  *     id: string,
  *     title: string,
  *     titleDOMFragment: (!DocumentFragment|undefined),
  *     subtitle: (string|null),
  *     visible: boolean,
  *     weight: number,
@@ skipping 299 matching lines @@
         id: columnConfig.id,
         title: columnConfig.title,
         sortable: columnConfig.sortable,
         align: columnConfig.align,
         nonSelectable: columnConfig.nonSelectable,
         weight: columnConfig.weight
     });
 };
 
 WebInspector.NetworkLogViewColumns.prototype = {
+    wasShown: function()
+    {
+        this._updateRowsSize();
+    },
+
     willHide: function()
     {
         this._popoverHelper.hidePopover();
     },
 
     reset: function()
     {
         if (this._popoverHelper)
             this._popoverHelper.hidePopover();
         this._timelineGrid.removeEventDividers();
@@ skipping 17 matching lines @@
 
         this._popoverHelper = new WebInspector.PopoverHelper(this._networkLogView.element);
         this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
 
         this._dataGrid = new WebInspector.SortableDataGrid(this._columns.map(WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor));
         this._dataGrid.element.addEventListener("mousedown", event => {
             if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
                 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);
         this._dataGrid.setHeaderContextMenuCallback(this._innerHeaderContextMenu.bind(this));
 
         this._timelineGrid = new WebInspector.TimelineGrid();
         this._timelineGrid.element.classList.add("network-timeline-grid");
         if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             this._dataGrid.element.appendChild(this._timelineGrid.element);
 
         this._setupDropdownColumns();
 
         this._dataGrid.markColumnAsSortedBy(WebInspector.NetworkLogViewColumns._initialSortColumn, WebInspector.DataGrid.Order.Ascending);
 
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
             this._splitWidget = new WebInspector.SplitWidget(true, false, "networkPanelSplitViewTimeline");
             this._splitWidget.setSidebarWidget(this._dataGrid.asWidget());
         }
     },
 
     _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, false), { passive: true });
+        this._dataGridScroller.addEventListener("mousewheel",this._onMouseWheel.bind(this, true), 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._timelineScrollerWidthIsStale = true;
+            this._syncScrollers();
+        });
         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");
 
         this._splitWidget.setMainWidget(this._timelineColumn);
 
         this.switchViewMode(false);
     },
 
+    /**
+     * @param {boolean} shouldConsume
+     * @param {!Event} event
+     */
+    _onMouseWheel: function(shouldConsume, event)
+    {
+        if (shouldConsume)
+            event.consume(true);
+        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._updateScrollerWidthIfNeeded();
+        this._dataGridScroller.scrollTop = this._timelineScroller.scrollTop;
+    },
+
+    _updateScrollerWidthIfNeeded: function()
+    {
+        if (this._timelineScrollerWidthIsStale) {
+            this._timelineScrollerWidthIsStale = false;
+            this._timelineColumn.setRightPadding(this._timelineScroller.offsetWidth - this._timelineScrollerContent.offsetWidth);
+        }
+    },
+
     _redrawTimelineColumn: function()
     {
         if (!this._timelineRequestsAreStale) {
-            this._timelineColumn.update();
+            this._updateScrollerWidthIfNeeded();
+            this._timelineColumn.update(this._activeScroller.scrollTop);
             return;
         }
         var currentNode = this._dataGrid.rootNode();
         var requestData = {
             requests: [],
             navigationRequest: null
         };
         while (currentNode = currentNode.traverseNextNode(true)) {
             if (currentNode.isNavigationRequest())
                 requestData.navigationRequest = currentNode.request();
             requestData.requests.push(currentNode.request());
         }
-        this._timelineColumn.update(requestData);
+        this._timelineColumn.update(this._activeScroller.scrollTop, requestData);
     },
 
     /**
      * @param {?WebInspector.NetworkRequest} request
      */
     setHoveredRequest: function(request)
     {
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             this._timelineColumn.setHoveredRequest(request);
     },
@@ skipping 35 matching lines @@
     },
 
     _updateRowsSize: function()
     {
         var largeRows = !!this._networkLogLargeRowsSetting.get();
         this._dataGrid.element.classList.toggle("small", !largeRows);
         this._dataGrid.scheduleUpdate();
 
         if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             return;
+        this._timelineScrollerWidthIsStale = true;
         this._timelineColumn.setRowHeight(this._networkLogView.rowHeight());
-        // TODO(allada) Make these non-magic numbers.
-        this._timelineColumn.setHeaderHeight(largeRows ? 31 : 27);
+        this._timelineScroller.classList.toggle("small", !largeRows);
         this._timelineHeaderElement.classList.toggle("small", !largeRows);
         this._timelineGrid.element.classList.toggle("small", !this._networkLogLargeRowsSetting.get());
+        this._timelineColumn.setHeaderHeight(this._timelineScroller.offsetTop);
     },
 
     /**
      * @param {!Element} element
      */
     show: function(element)
     {
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             this._splitWidget.show(element);
         else
@@ skipping 137 matching lines @@
             this._popoverHelper.hidePopover();
         }
 
         this._networkLogView.element.classList.toggle("brief-mode", !gridMode);
         this._updateColumns();
 
 
         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);
+        }
     },
 
     /**
      * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
      */
     _toggleColumnVisibility: function(columnConfig)
     {
         this._loadColumns();
         columnConfig.visible = !columnConfig.visible;
         this._saveColumns();
@@ skipping 280 matching lines @@
         for (var divider of this._eventDividers)
             divider.element.classList.toggle("network-frame-divider-selected", divider.time === time);
     },
 
     clearFilmStripFrame: function()
     {
         for (var divider of this._eventDividers)
             divider.element.classList.toggle("network-frame-divider-selected", false);
     }
 };