DevTools: Extract ChartViewport out of FlameChart.

third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js

 /**
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 31 matching lines @@
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     updateRangeSelection: function(startTime, endTime) { },
 }
 
 /**
  * @constructor
- * @extends {WebInspector.HBox}
+ * @extends {WebInspector.ChartViewport}

[caseq, 2016/10/17 23:26:05]

I don't think inheriting FlameChart form ChartViewport is justified -- can we
rather make it a member perhaps?

[alph, 2016/10/17 23:41:04]

I'd keep it the current way and update it later if needed. 

  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  * @param {!WebInspector.FlameChartDelegate} flameChartDelegate
  * @param {!WebInspector.Setting=} groupExpansionSetting
  */
 WebInspector.FlameChart = function(dataProvider, flameChartDelegate, groupExpansionSetting)
 {
-    WebInspector.HBox.call(this, true);
+    WebInspector.ChartViewport.call(this);
     this.registerRequiredCSS("ui_lazy/flameChart.css");
     this.contentElement.classList.add("flame-chart-main-pane");
     this._flameChartDelegate = flameChartDelegate;
     this._groupExpansionSetting = groupExpansionSetting;
     this._groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};
 
     this._dataProvider = dataProvider;
     this._calculator = new WebInspector.FlameChart.Calculator(dataProvider);
 
     this._canvas = this.contentElement.createChild("canvas");
     this._canvas.tabIndex = 1;
     this.setDefaultFocusedElement(this._canvas);
     this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvas.addEventListener("mouseout", this._onMouseOut.bind(this), false);
-    this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
     this._canvas.addEventListener("click", this._onClick.bind(this), false);
     this._canvas.addEventListener("keydown", this._onKeyDown.bind(this), false);
-    WebInspector.installInertialDragHandle(this._canvas, this._startCanvasDragging.bind(this), this._canvasDragging.bind(this), this._endCanvasDragging.bind(this), "-webkit-grabbing", null);
-    WebInspector.installDragHandle(this._canvas, this._startRangeSelection.bind(this), this._rangeSelectionDragging.bind(this), this._endRangeSelection.bind(this), "text", null);
-
-    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);
-    this._scrollTop = 0;
 
     this._entryInfo = this.contentElement.createChild("div", "flame-chart-entry-info");
     this._markerHighlighElement = this.contentElement.createChild("div", "flame-chart-marker-highlight-element");
     this._highlightElement = this.contentElement.createChild("div", "flame-chart-highlight-element");
     this._selectedElement = this.contentElement.createChild("div", "flame-chart-selected-element");
-    this._selectionOverlay = this.contentElement.createChild("div", "flame-chart-selection-overlay hidden");
-    this._selectedTimeSpanLabel = this._selectionOverlay.createChild("div", "time-span");
 
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._rangeSelectionStart = 0;
     this._rangeSelectionEnd = 0;
     this._barHeight = dataProvider.barHeight();
     this._paddingLeft = this._dataProvider.paddingLeft();
     var markerPadding = 2;
@@ skipping 394 matching lines @@
 WebInspector.FlameChart.prototype = {
     /**
      * @override
      */
     willHide: function()
     {
         this.hideHighlight();
     },
 
     /**
-     * @override
-     * @return {!Array.<!Element>}
-     */
-    elementsToRestoreScrollPositionsFor: function()
-    {
-        return [this._vScrollElement];
-    },
-
-    /**
      * @param {number} entryIndex
      */
     highlightEntry: function(entryIndex)
     {
         if (this._highlightedEntryIndex === entryIndex)
             return;
         this._highlightedEntryIndex = entryIndex;
         this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
     },
 
@@ skipping 12 matching lines @@
         this._canvas.height = this._offsetHeight * ratio;
         this._canvas.style.width = this._offsetWidth + "px";
         this._canvas.style.height = this._offsetHeight + "px";
     },
 
     /**
      * @return {?WebInspector.FlameChart.TimelineData}
      */
     _timelineData: function()
     {
+        if (!this._dataProvider)
+            return null;
         var timelineData = this._dataProvider.timelineData();
         if (timelineData !== this._rawTimelineData || timelineData.entryStartTimes.length !== this._rawTimelineDataLength)
             this._processTimelineData(timelineData);
         return this._rawTimelineData;
     },
 
-    _cancelAnimation: function()
-    {
-        if (this._cancelWindowTimesAnimation) {
-            this._timeWindowLeft = this._pendingAnimationTimeLeft;
-            this._timeWindowRight = this._pendingAnimationTimeRight;
-            this._cancelWindowTimesAnimation();
-            delete this._cancelWindowTimesAnimation;
-        }
-    },
-
     /**
      * @param {number} entryIndex
      */
     _revealEntry: function(entryIndex)
     {
         var timelineData = this._timelineData();
         if (!timelineData)
             return;
         // Think in terms of not where we are, but where we'll be after animation (if present)
         var timeLeft = this._cancelWindowTimesAnimation ? this._pendingAnimationTimeLeft : this._timeWindowLeft;
         var timeRight = this._cancelWindowTimesAnimation ? this._pendingAnimationTimeRight : this._timeWindowRight;
         var entryStartTime = timelineData.entryStartTimes[entryIndex];
         var entryTotalTime = timelineData.entryTotalTimes[entryIndex];
         var entryEndTime = entryStartTime + entryTotalTime;
         var minEntryTimeWindow = Math.min(entryTotalTime, timeRight - timeLeft);
 
         var y = this._levelToHeight(timelineData.entryLevels[entryIndex]);
-        if (this._vScrollElement.scrollTop > y)
-            this._vScrollElement.scrollTop = y;
-        else if (this._vScrollElement.scrollTop < y - this._offsetHeight + this._barHeight)
-            this._vScrollElement.scrollTop = y - this._offsetHeight + this._barHeight;
+        this.setScrollOffset(y, this._barHeight);
 
         if (timeLeft > entryEndTime) {
             var delta = timeLeft - entryEndTime + minEntryTimeWindow;
             this._flameChartDelegate.requestWindowTimes(timeLeft - delta, timeRight - delta);
         } else if (timeRight < entryStartTime) {
             var delta = entryStartTime - timeRight + minEntryTimeWindow;
             this._flameChartDelegate.requestWindowTimes(timeLeft + delta, timeRight + delta);
         }
     },
 
     /**
+     * @override
      * @param {number} startTime
      * @param {number} endTime
      */
     setWindowTimes: function(startTime, endTime)
     {
-        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();
+        WebInspector.FlameChart.prototype.__proto__.setWindowTimes.call(this, startTime, endTime);
         this._updateHighlight();
-        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;
-    },
-
-    /**
-     * @param {number} startTime
-     * @param {number} endTime
-     */
-    _animateWindowTimes: function(startTime, endTime)
-    {
-        this._timeWindowLeft = startTime;
-        this._timeWindowRight = endTime;
-        this._updateHighlight();
-        this.update();
-    },
-
-    _animationCompleted: function()
-    {
-        delete this._cancelWindowTimesAnimation;
-        this._updateHighlight();
-    },
-
-    /**
-     * @param {!MouseEvent} event
-     */
-    _initMaxDragOffset: function(event)
-    {
-        this._maxDragOffsetSquared = 0;
-        this._dragStartX = event.pageX;
-        this._dragStartY = event.pageY;
-    },
-
-    /**
-     * @param {number} x
-     * @param {number} y
-     */
-    _updateMaxDragOffset: function(x, y)
-    {
-        var dx = x - this._dragStartX;
-        var dy = y - this._dragStartY;
-        var dragOffsetSquared = dx * dx + dy * dy;
-        this._maxDragOffsetSquared = Math.max(this._maxDragOffsetSquared, dragOffsetSquared);
-    },
-
-    /**
-     * @return {number}
-     */
-    _maxDragOffset: function()
-    {
-        return Math.sqrt(this._maxDragOffsetSquared);
-    },
-
-    /**
-     * @param {number} x
-     * @param {number} y
-     * @param {!MouseEvent} event
-     * @return {boolean}
-     */
-    _startCanvasDragging: function(x, y, event)
-    {
-        if (event.shiftKey)
-            return false;
-        if (!this._timelineData() || this._timeWindowRight === Infinity)
-            return false;
-        this._isDragging = true;
-        this._initMaxDragOffset(event);
-        this._dragStartPointX = x;
-        this._dragStartPointY = y;
-        this._dragStartScrollTop = this._vScrollElement.scrollTop;
-        this._canvas.style.cursor = "";
-        this.hideHighlight();
-        return true;
-    },
-
-    /**
-     * @param {number} x
-     * @param {number} y
-     */
-    _canvasDragging: function(x, y)
-    {
-        var pixelShift = this._dragStartPointX - x;
-        this._dragStartPointX = x;
-        this._muteAnimation = true;
-        this._handlePanGesture(pixelShift * this._pixelToTime);
-        this._muteAnimation = false;
-
-        var pixelScroll = this._dragStartPointY - y;
-        this._vScrollElement.scrollTop = this._dragStartScrollTop + pixelScroll;
-        this._updateMaxDragOffset(x, y);
-    },
-
-    _endCanvasDragging: function()
-    {
-        this._isDragging = false;
-        this._updateHighlight();
-    },
-
-    /**
-     * @param {!MouseEvent} event
-     * @return {boolean}
-     */
-    _startRangeSelection: function(event)
-    {
-        if (!event.shiftKey)
-            return false;
-        this._isDragging = true;
-        this._initMaxDragOffset(event);
-        this._selectionOffsetShiftX = event.offsetX - event.pageX;
-        this._selectionOffsetShiftY = event.offsetY - event.pageY;
-        this._selectionStartX = event.offsetX;
-        var style = this._selectionOverlay.style;
-        style.left = this._selectionStartX + "px";
-        style.width = "1px";
-        this._selectedTimeSpanLabel.textContent = "";
-        this._selectionOverlay.classList.remove("hidden");
-        this.hideHighlight();
-        return true;
-    },
-
-    _endRangeSelection: function()
-    {
-        this._isDragging = false;
-        this._updateHighlight();
-    },
-
-    _hideRangeSelection: function()
-    {
-        this._selectionOverlay.classList.add("hidden");
-    },
-
-    /**
-     * @param {!MouseEvent} event
-     */
-    _rangeSelectionDragging: function(event)
-    {
-        this._updateMaxDragOffset(event.pageX, event.pageY);
-        var x = Number.constrain(event.pageX + this._selectionOffsetShiftX, 0, this._offsetWidth);
-        var start = this._cursorTime(this._selectionStartX);
-        var end = this._cursorTime(x);
-        this._rangeSelectionStart = Math.min(start, end);
-        this._rangeSelectionEnd = Math.max(start, end);
-        this._updateRangeSelectionOverlay();
-        this._flameChartDelegate.updateRangeSelection(this._rangeSelectionStart, this._rangeSelectionEnd);
-    },
-
-    _updateRangeSelectionOverlay: function()
-    {
-        var /** @const */ margin = 100;
-        var left = Number.constrain(this._timeToPosition(this._rangeSelectionStart), -margin, this._offsetWidth + margin);
-        var right = Number.constrain(this._timeToPosition(this._rangeSelectionEnd), -margin, this._offsetWidth + margin);
-        var style = this._selectionOverlay.style;
-        style.left = left + "px";
-        style.width = (right - left) + "px";
-        var timeSpan = this._rangeSelectionEnd - this._rangeSelectionStart;
-        this._selectedTimeSpanLabel.textContent = Number.preciseMillisToString(timeSpan, 2);
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         this._lastMouseOffsetX = event.offsetX;
         this._lastMouseOffsetY = event.offsetY;
         if (!this._enabled())
             return;
-        if (this._isDragging)
+        if (this.isDragging())
             return;
         if (this._coordinatesToGroupIndex(event.offsetX, event.offsetY) >= 0) {
             this.hideHighlight();
             this._canvas.style.cursor = "pointer";
             return;
         }
         this._updateHighlight();
     },
 
     _updateHighlight: function()
@@ skipping 53 matching lines @@
             var dy = quadrant & 1 ? -offsetY - infoHeight : offsetY;
             x = Number.constrain(mouseX + dx, 0, parentWidth - infoWidth);
             y = Number.constrain(mouseY + dy, 0, parentHeight - infoHeight);
             if (x >= mouseX || mouseX >= x + infoWidth || y >= mouseY || mouseY >= y + infoHeight)
                 break;
         }
         this._entryInfo.style.left = x + "px";
         this._entryInfo.style.top = y + "px";
     },
 
+    /**
+     * @param {!Event} event
+     */
     _onClick: function(event)
     {
         this.focus();
         // onClick comes after dragStart and dragEnd events.
         // So if there was drag (mouse move) in the middle of that events
         // we skip the click. Otherwise we jump to the sources.
         const clickThreshold = 5;
-        if (this._maxDragOffset() > clickThreshold)
+        if (this.maxDragOffset() > clickThreshold)
             return;
         var groupIndex = this._coordinatesToGroupIndex(event.offsetX, event.offsetY);
         if (groupIndex >= 0) {
             this._toggleGroupVisibility(groupIndex);
             return;
         }
-        this._hideRangeSelection();
+        this.hideRangeSelection();
         this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
     },
 
     /**
      * @param {number} groupIndex
      */
     _toggleGroupVisibility: function(groupIndex)
     {
         if (!this._isGroupCollapsible(groupIndex))
             return;
@@ skipping 14 matching lines @@
         }
 
         this._updateHeight();
         this._resetCanvas();
         this._draw(this._offsetWidth, this._offsetHeight);
     },
 
     /**
      * @param {!Event} e
      */
-    _onMouseWheel: function(e)
-    {
-        if (!this._enabled())
-            return;
-        // Pan vertically when shift down only.
-        var panVertically = e.shiftKey && (e.wheelDeltaY || Math.abs(e.wheelDeltaX) === 120);
-        var panHorizontally = Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY) && !e.shiftKey;
-        if (panVertically) {
-            this._vScrollElement.scrollTop -= (e.wheelDeltaY || e.wheelDeltaX) / 120 * this._offsetHeight / 8;
-        } else if (panHorizontally) {
-            var shift = -e.wheelDeltaX * this._pixelToTime;
-            this._muteAnimation = true;
-            this._handlePanGesture(shift);
-            this._muteAnimation = false;
-        } else {  // Zoom.
-            const mouseWheelZoomSpeed = 1 / 120;
-            this._handleZoomGesture(Math.pow(1.2, -(e.wheelDeltaY || e.wheelDeltaX) * mouseWheelZoomSpeed) - 1);
-        }
-
-        // Block swipe gesture.
-        e.consume(true);
-    },
-
-    /**
-     * @param {!Event} e
-     */
     _onKeyDown: function(e)
     {
-        this._handleZoomPanKeys(e);
         this._handleSelectionNavigation(e);
     },
 
     /**
      * @param {!Event} e
      */
     _handleSelectionNavigation: function(e)
     {
         if (!WebInspector.KeyboardShortcut.hasNoModifiers(e))
             return;
@@ skipping 50 matching lines @@
             if (!entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel])) {
                 ++indexOnLevel;
                 if (indexOnLevel >= levelIndexes.length || !entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel]))
                     return;
             }
             this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
         }
     },
 
     /**
-     * @param {!Event} e
-     */
-    _handleZoomPanKeys: function(e)
-    {
-        if (!WebInspector.KeyboardShortcut.hasNoModifiers(e))
-            return;
-        var zoomMultiplier = e.shiftKey ? 0.8 : 0.3;
-        var panMultiplier = e.shiftKey ? 320 : 80;
-        if (e.keyCode === "A".charCodeAt(0)) {
-            this._handlePanGesture(-panMultiplier * this._pixelToTime);
-            e.consume(true);
-        } else if (e.keyCode === "D".charCodeAt(0)) {
-            this._handlePanGesture(panMultiplier * this._pixelToTime);
-            e.consume(true);
-        } else if (e.keyCode === "W".charCodeAt(0)) {
-            this._handleZoomGesture(-zoomMultiplier);
-            e.consume(true);
-        } else if (e.keyCode === "S".charCodeAt(0)) {
-            this._handleZoomGesture(zoomMultiplier);
-            e.consume(true);
-        }
-    },
-
-    /**
-     * @param {number} zoom
-     */
-    _handleZoomGesture: function(zoom)
-    {
-        this._cancelAnimation();
-        var bounds = this._windowForGesture();
-        var cursorTime = this._cursorTime(this._lastMouseOffsetX);
-        bounds.left += (bounds.left - cursorTime) * zoom;
-        bounds.right += (bounds.right - cursorTime) * zoom;
-        this._requestWindowTimes(bounds);
-    },
-
-    /**
-     * @param {number} shift
-     */
-    _handlePanGesture: function(shift)
-    {
-        this._cancelAnimation();
-        var bounds = this._windowForGesture();
-        shift = Number.constrain(shift, this._minimumBoundary - bounds.left, this._totalTime + this._minimumBoundary - bounds.right);
-        bounds.left += shift;
-        bounds.right += shift;
-        this._requestWindowTimes(bounds);
-    },
-
-    /**
-     * @return {{left: number, right: number}}
-     */
-    _windowForGesture: function()
-    {
-        var windowLeft = this._timeWindowLeft ? this._timeWindowLeft : this._dataProvider.minimumBoundary();
-        var windowRight = this._timeWindowRight !== Infinity ? this._timeWindowRight : this._dataProvider.minimumBoundary() + this._dataProvider.totalTime();
-        return {left: windowLeft, right: windowRight};
-    },
-
-    /**
-     * @param {{left: number, right: number}} bounds
-     */
-    _requestWindowTimes: function(bounds)
-    {
-        bounds.left = Number.constrain(bounds.left, this._minimumBoundary, this._totalTime + this._minimumBoundary);
-        bounds.right = Number.constrain(bounds.right, this._minimumBoundary, this._totalTime + this._minimumBoundary);
-        if (bounds.right - bounds.left < WebInspector.FlameChart.MinimalTimeWindowMs)
-            return;
-        this._flameChartDelegate.requestWindowTimes(bounds.left, bounds.right);
-    },
-
-    /**
      * @param {number} x
      * @return {number}
      */
     _cursorTime: function(x)
     {
         return (x + this._pixelWindowLeft - this._paddingLeft) * this._pixelToTime + this._minimumBoundary;
     },
 
     /**
      * @param {number} x
      * @param {number} y
      * @return {number}
      */
     _coordinatesToEntryIndex: function(x, y)
     {
         if (x < 0 || y < 0)
             return -1;
-        y += this._scrollTop;
+        y += this.scrollOffset();
         var timelineData = this._timelineData();
         if (!timelineData)
             return -1;
         var cursorTime = this._cursorTime(x);
         var cursorLevel = this._visibleLevelOffsets.upperBound(y) - 1;
         if (cursorLevel < 0 || !this._visibleLevels[cursorLevel])
             return -1;
         var offsetFromLevel = y - this._visibleLevelOffsets[cursorLevel];
         if (offsetFromLevel > this._barHeight)
             return -1;
@@ skipping 46 matching lines @@
 
     /**
      * @param {number} x
      * @param {number} y
      * @return {number}
      */
     _coordinatesToGroupIndex: function(x, y)
     {
         if (x < 0 || y < 0)
             return -1;
-        y += this._scrollTop;
+        y += this.scrollOffset();
         var groups = this._rawTimelineData.groups || [];
         var group = this._groupOffsets.upperBound(y) - 1;
 
         if (group < 0 || group >= groups.length || y - this._groupOffsets[group] >= groups[group].style.height)
             return -1;
         var context = this._canvas.getContext("2d");
         context.save();
         context.font = groups[group].style.font;
         var right = this._headerLeftPadding + this._labelWidthForGroup(context, groups[group]);
         context.restore();
@@ skipping 29 matching lines @@
         }
         return markerIndex;
     },
 
     /**
      * @param {number} time
      * @return {number}
      */
     _markerIndexBeforeTime: function(time)
     {
-        /**
-         * @param {number} markerTimestamp
-         * @param {!WebInspector.FlameChartMarker} marker
-         * @return {number}
-         */
-        function comparator(markerTimestamp, marker)
-        {
-            return markerTimestamp - marker.startTime();
-        }
-        return this._timelineData().markers.lowerBound(time, comparator);
+        return this._timelineData().markers.lowerBound(time, (markerTimestamp, marker) => markerTimestamp - marker.startTime());
     },
 
     /**
      * @param {number} height
      * @param {number} width
      */
     _draw: function(width, height)
     {
         var timelineData = this._timelineData();
         if (!timelineData)
             return;
 
         var context = this._canvas.getContext("2d");
         context.save();
         var ratio = window.devicePixelRatio;
+        var top = this.scrollOffset();
         context.scale(ratio, ratio);
-        context.translate(0, -this._scrollTop);
+        context.translate(0, -top);
         context.font = "11px " + WebInspector.fontFamily();
 
         var timeWindowRight = this._timeWindowRight;
         var timeWindowLeft = this._timeWindowLeft - this._paddingLeft / this._timeToPixel;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryStartTimes = timelineData.entryStartTimes;
         var entryLevels = timelineData.entryLevels;
 
         var titleIndices = [];
         var markerIndices = [];
         var textPadding = this._dataProvider.textPadding();
         var minTextWidth = 2 * textPadding + this._measureWidth(context, "\u2026");
         var barHeight = this._barHeight;
-        var top = this._scrollTop;
         var minVisibleBarLevel = Math.max(this._visibleLevelOffsets.upperBound(top) - 1, 0);
 
         /** @type {!Map<string, !Array<number>>} */
         var colorBuckets = new Map();
         for (var level = minVisibleBarLevel; level < this._dataProvider.maxStackDepth(); ++level) {
             if (this._levelToHeight(level) > top + height)
                 break;
             if (!this._visibleLevels[level])
                 continue;
 
@@ skipping 96 matching lines @@
         context.restore();
 
         var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
         WebInspector.TimelineGrid.drawCanvasGrid(this._canvas, this._calculator, offsets);
         this._drawMarkers();
         this._drawGroupHeaders(width, height);
 
         this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
         this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
         this._updateMarkerHighlight();
-        this._updateRangeSelectionOverlay();
     },
 
     /**
      * @param {number} width
      * @param {number} height
      */
     _drawGroupHeaders: function(width, height)
     {
         var context = this._canvas.getContext("2d");
-        var top = this._scrollTop;
+        var top = this.scrollOffset();
         var ratio = window.devicePixelRatio;
         var barHeight = this._barHeight;
         var textBaseHeight = barHeight - this._dataProvider.textBaseline();
         var groups = this._rawTimelineData.groups || [];
         if (!groups.length)
             return;
 
         var groupOffsets = this._groupOffsets;
         var lastGroupOffset = Array.prototype.peekLast.call(groupOffsets);
         var colorUsage = WebInspector.ThemeSupport.ColorUsage;
@@ skipping 381 matching lines @@
         var nextGroupLevel = isLastGroup ? this._dataProvider.maxStackDepth() : groups[index + 1].startLevel;
         // For groups that only have one line and share header line, pretend these are not collapsible.
         return nextGroupLevel !== groups[index].startLevel + 1;
     },
 
     /**
      * @param {number} entryIndex
      */
     setSelectedEntry: function(entryIndex)
     {
-        if (entryIndex === -1 && !this._isDragging)
-            this._hideRangeSelection();
+        if (entryIndex === -1 && !this.isDragging())
+            this.hideRangeSelection();
         if (this._selectedEntryIndex === entryIndex)
             return;
         this._selectedEntryIndex = entryIndex;
         this._revealEntry(entryIndex);
         this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
     },
 
     /**
      * @param {!Element} element
      * @param {number} entryIndex
@@ skipping 10 matching lines @@
             return;
         var timelineData = this._timelineData();
         var barX = this._timeToPositionClipped(timeRange.startTime);
         var barRight = this._timeToPositionClipped(timeRange.endTime);
         if (barRight === 0 || barX === this._offsetWidth)
             return;
         var barWidth = barRight - barX;
         var barCenter = barX + barWidth / 2;
         barWidth = Math.max(barWidth, elementMinWidth);
         barX = barCenter - barWidth / 2;
-        var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]) - this._scrollTop;
+        var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]) - this.scrollOffset();
         var style = element.style;
         style.left = barX + "px";
         style.top = barY + "px";
         style.width = barWidth + "px";
         style.height = this._barHeight - 1 + "px";
         this.contentElement.appendChild(element);
     },
 
     /**
      * @param {number} time
@@ skipping 99 matching lines @@
         } else {
             this._windowLeft = 0;
             this._windowRight = 1;
         }
 
         var totalPixels = Math.floor((this._offsetWidth - this._paddingLeft) / windowWidth);
         this._pixelWindowLeft = Math.floor(totalPixels * this._windowLeft);
 
         this._timeToPixel = totalPixels / this._totalTime;
         this._pixelToTime = this._totalTime / totalPixels;
-
-        this._updateScrollBar();
     },
 
     _updateHeight: function()
     {
-        this._totalHeight = this._levelToHeight(this._dataProvider.maxStackDepth());
-        this._vScrollContent.style.height = this._totalHeight + "px";
-        if (this._scrollTop + this._offsetHeight > this._totalHeight) {
-            this._scrollTop = Math.max(0, this._totalHeight - this._offsetHeight);
-            this._vScrollElement.scrollTop = this._scrollTop;
-        }
+        var height = this._levelToHeight(this._dataProvider.maxStackDepth());
+        this.setContentHeight(height);
     },
 
+    /**
+     * @override
+     */
     onResize: function()
     {
-        this._updateScrollBar();
-        this._updateContentElementSize();
+        WebInspector.FlameChart.prototype.__proto__.onResize.call(this);
         this.scheduleUpdate();
     },
 
-    _updateScrollBar: function()
-    {
-        var showScroll = this._totalHeight > this._offsetHeight;
-        if (this._vScrollElement.classList.contains("hidden") === showScroll) {
-            this._vScrollElement.classList.toggle("hidden", !showScroll);
-            this._updateContentElementSize();
-        }
-    },
-
-    _updateContentElementSize: function()
-    {
-        var offsetWidth = this._vScrollElement.offsetLeft;
-        if (!offsetWidth)
-            offsetWidth = this.contentElement.offsetWidth;
-        this._offsetWidth = offsetWidth;
-        this._offsetHeight = this.contentElement.offsetHeight;
-    },
-
-    _onScroll: function()
-    {
-        this._scrollTop = this._vScrollElement.scrollTop;
-        this.scheduleUpdate();
-    },
-
-    scheduleUpdate: function()
-    {
-        if (this._updateTimerId || this._cancelWindowTimesAnimation)
-            return;
-        this._updateTimerId = this.element.window().requestAnimationFrame(this.update.bind(this));
-    },
-
+    /**
+     * @override
+     */
     update: function()
     {
-        this._updateTimerId = 0;
         if (!this._timelineData())
             return;
         this._resetCanvas();
         this._updateHeight();
         this._updateBoundaries();
         this._calculator._updateBoundaries(this);
         this._draw(this._offsetWidth, this._offsetHeight);
-        if (!this._isDragging)
+        if (!this.isDragging())
             this._updateHighlight();
     },
 
     reset: function()
     {
-        this._vScrollElement.scrollTop = 0;
-        this._scrollTop = 0;
+        WebInspector.FlameChart.prototype.__proto__.reset.call(this);
         this._highlightedMarkerIndex = -1;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
-        this._rangeSelectionStart = 0;
-        this._rangeSelectionEnd = 0;
         /** @type {!Map<string,!Map<string,number>>} */
         this._textWidth = new Map();
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
-    __proto__: WebInspector.HBox.prototype
+    __proto__: WebInspector.ChartViewport.prototype
 }