DevTools: Make sure network and main flamechart scales are in sync.

BUG=676524

Review-Url: https://codereview.chromium.org/2598873002
Cr-Commit-Position: refs/heads/master@{#440512}
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
index 9f70886..66c7252 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
@@ -298,11 +298,13 @@
     this._dataProvider = new Timeline.TimelineFlameChartDataProvider(this._model, frameModel, irModel, filters);
     var mainViewGroupExpansionSetting = Common.settings.createSetting('timelineFlamechartMainViewGroupExpansion', {});
     this._mainView = new UI.FlameChart(this._dataProvider, this, mainViewGroupExpansionSetting);
+    this._mainView.alwaysShowVerticalScroll();
 
     var networkViewGroupExpansionSetting =
         Common.settings.createSetting('timelineFlamechartNetworkViewGroupExpansion', {});
     this._networkDataProvider = new Timeline.TimelineFlameChartNetworkDataProvider(this._model);
     this._networkView = new UI.FlameChart(this._networkDataProvider, this, networkViewGroupExpansionSetting);
+    this._networkView.alwaysShowVerticalScroll();
     networkViewGroupExpansionSetting.addChangeListener(this.resizeToPreferredHeights.bind(this));
 
     this._splitWidget.setMainWidget(this._mainView);
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/ChartViewport.js b/third_party/WebKit/Source/devtools/front_end/ui_lazy/ChartViewport.js
index 10413d1..32ee51c 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/ChartViewport.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/ChartViewport.js
@@ -19,6 +19,7 @@
         this.viewportElement, this._startRangeSelection.bind(this), this._rangeSelectionDragging.bind(this),
         this._endRangeSelection.bind(this), 'text', null);
 
+    this._alwaysShowVerticalScroll = false;
     this._vScrollElement = this.contentElement.createChild('div', 'flame-chart-v-scroll');
     this._vScrollContent = this._vScrollElement.createChild('div');
     this._vScrollElement.addEventListener('scroll', this._onScroll.bind(this), false);
@@ -29,6 +30,11 @@
     this.reset();
   }
 
+  alwaysShowVerticalScroll() {
+    this._alwaysShowVerticalScroll = true;
+    this._vScrollElement.classList.add('always-show-scrollbar');
+  }
+
   /**
    * @return {boolean}
    */
@@ -48,7 +54,7 @@
    * @private
    */
   _updateScrollBar() {
-    var showScroll = this._totalHeight > this._offsetHeight;
+    const showScroll = this._alwaysShowVerticalScroll || this._totalHeight > this._offsetHeight;
     if (this._vScrollElement.classList.contains('hidden') !== showScroll)
       return;
     this._vScrollElement.classList.toggle('hidden', !showScroll);
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/flameChart.css b/third_party/WebKit/Source/devtools/front_end/ui_lazy/flameChart.css
index 0cd1ac1..4cebc9b 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/flameChart.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/flameChart.css
@@ -38,6 +38,10 @@
     padding-left: 1px;
 }
 
+.flame-chart-v-scroll.always-show-scrollbar {
+    overflow-y: scroll;
+}
+
 :host-context(.platform-mac) .flame-chart-v-scroll {
     right: 2px;
     top: 3px;