DevTools: Fix scrolling of timeline flamechart

third_party/WebKit/Source/devtools/front_end/ui_lazy/ChartViewport.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}
  */
 WebInspector.ChartViewport = function()
 {
     WebInspector.VBox.call(this, true);
 
     this.contentElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
     this.contentElement.addEventListener("keydown", this._handleZoomPanKeys.bind(this), false);
 
-    WebInspector.installInertialDragHandle(this.contentElement, this._startDragging.bind(this), this._dragging.bind(this), this._endDragging.bind(this), "-webkit-grabbing", null);
-    WebInspector.installDragHandle(this.contentElement, this._startRangeSelection.bind(this), this._rangeSelectionDragging.bind(this), this._endRangeSelection.bind(this), "text", null);
+    this.viewportElement = this.contentElement.createChild("div", "fill");
+    WebInspector.installInertialDragHandle(this.viewportElement, this._startDragging.bind(this), this._dragging.bind(this), this._endDragging.bind(this), "-webkit-grabbing", null);
+    WebInspector.installDragHandle(this.viewportElement, this._startRangeSelection.bind(this), this._rangeSelectionDragging.bind(this), this._endRangeSelection.bind(this), "text", null);
 
-    /** @private */
     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);
 
-    /** @private */
     this._selectionOverlay = this.contentElement.createChild("div", "flame-chart-selection-overlay hidden");
-    /** @private */
     this._selectedTimeSpanLabel = this._selectionOverlay.createChild("div", "time-span");
 
     this.reset();
 }
 
 WebInspector.ChartViewport.prototype = {
     /**
      * @return {boolean}
      */
     isDragging: function()
     {
         return this._isDragging;
     },
 
     /**
      * @override
      * @return {!Array<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         return [this._vScrollElement];
     },
 
     /**
      * @private
      */
     _updateScrollBar: function()
     {
         var showScroll = this._totalHeight > this._offsetHeight;
-        if (this._vScrollElement.classList.contains("hidden") === showScroll) {
-            this._vScrollElement.classList.toggle("hidden", !showScroll);
-            this._updateContentElementSize();
-        }
+        if (this._vScrollElement.classList.contains("hidden") !== showScroll)
+            return;
+        this._vScrollElement.classList.toggle("hidden", !showScroll);
+        this._updateContentElementSize();
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         this._updateScrollBar();
         this._updateContentElementSize();
         this.scheduleUpdate();
     },
 
     reset: function()
     {
         this._vScrollElement.scrollTop = 0;
-        /** @private */
         this._scrollTop = 0;
-        /** @private */
         this._rangeSelectionStart = 0;
-        /** @private */
         this._rangeSelectionEnd = 0;
-        /** @private */
-        this._scrollTop = 0;
-        /** @private */
         this._isDragging = false;
-        /** @private */
         this._dragStartPointX = 0;
-        /** @private */
         this._dragStartPointY = 0;
-        /** @private */
         this._dragStartScrollTop = 0;
-        /** @private */
         this._timeWindowLeft = 0;
-        /** @private */
         this._timeWindowRight = 0;
-        /** @private */
         this._offsetWidth = 0;
-        /** @private */
         this._offsetHeight = 0;
-        /** @private */
         this._totalHeight = 0;
-        /** @private */
         this._pendingAnimationTimeLeft = 0;
-        /** @private */
         this._pendingAnimationTimeRight = 0;
     },
 
     /**
      * @private
      */
     _updateContentElementSize: function()
     {
         var offsetWidth = this._vScrollElement.offsetLeft;
         if (!offsetWidth)
             offsetWidth = this.contentElement.offsetWidth;
         this._offsetWidth = offsetWidth;
         this._offsetHeight = this.contentElement.offsetHeight;
     },
 
     setContentHeight: function(totalHeight)
     {
         this._totalHeight = totalHeight;
         this._vScrollContent.style.height = totalHeight + "px";
+        this._updateScrollBar();
         if (this._scrollTop + this._offsetHeight <= totalHeight)
             return;
         this._scrollTop = Math.max(0, totalHeight - this._offsetHeight);
         this._vScrollElement.scrollTop = this._scrollTop;
     },
 
     /**
      * @param {number} offset
      * @param {number=} height
      */
@@ skipping 52 matching lines @@
     {
         if (event.shiftKey)
             return false;
         if (this._windowRight === Infinity)
             return false;
         this._isDragging = true;
         this._initMaxDragOffset(event);
         this._dragStartPointX = x;
         this._dragStartPointY = y;
         this._dragStartScrollTop = this._vScrollElement.scrollTop;
-        this.contentElement.style.cursor = "";
+        this.viewportElement.style.cursor = "";
         this.hideHighlight();
         return true;
     },
 
     /**
      * @param {number} x
      * @param {number} y
      * @private
      */
     _dragging: function(x, y)
@@ skipping 224 matching lines @@
     {
         delete this._cancelWindowTimesAnimation;
         this._updateHighlight();
     },
 
     /**
      * @private
      */
     _cancelAnimation: function()
     {
-        if (this._cancelWindowTimesAnimation) {
-            this._timeWindowLeft = this._pendingAnimationTimeLeft;
-            this._timeWindowRight = this._pendingAnimationTimeRight;
-            this._cancelWindowTimesAnimation();
-            delete this._cancelWindowTimesAnimation;
-        }
+        if (!this._cancelWindowTimesAnimation)
+            return;
+        this._timeWindowLeft = this._pendingAnimationTimeLeft;
+        this._timeWindowRight = this._pendingAnimationTimeRight;
+        this._cancelWindowTimesAnimation();
+        delete this._cancelWindowTimesAnimation;
     },
 
     scheduleUpdate: function()
     {
         if (this._updateTimerId || this._cancelWindowTimesAnimation)
             return;
         this._updateTimerId = this.element.window().requestAnimationFrame(() => {
             this._updateTimerId = 0;
             this.update();
         });
     },
 
     update: function() {},
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     setWindowTimes: function(startTime, endTime)
     {
+        this.hideRangeSelection();
         if (this._muteAnimation || this._timeWindowLeft === 0 || this._timeWindowRight === Infinity || (startTime === 0 && endTime === Infinity) || (startTime === Infinity && endTime === Infinity)) {
             // Initial setup.
             this._timeWindowLeft = startTime;
             this._timeWindowRight = endTime;
             this.scheduleUpdate();
             return;
         }
         this._cancelAnimation();
         this._cancelWindowTimesAnimation = WebInspector.animateFunction(this.element.window(), this._animateWindowTimes.bind(this),
             [{from: this._timeWindowLeft, to: startTime}, {from: this._timeWindowRight, to: endTime}], 5,
             this._animationCompleted.bind(this));
         this._pendingAnimationTimeLeft = startTime;
         this._pendingAnimationTimeRight = endTime;
     },
 
     __proto__: WebInspector.VBox.prototype
 }