FlameChart: vertical scroll implementation

Source/devtools/front_end/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 25 matching lines @@
 WebInspector.FlameChartDelegate.prototype = {
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     requestWindowTimes: function(startTime, endTime) { },
 }
 
 /**
  * @constructor
- * @extends {WebInspector.VBox}
+ * @extends {WebInspector.HBox}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  * @param {!WebInspector.FlameChartDelegate} flameChartDelegate
  * @param {boolean} isTopDown
  * @param {boolean} timeBasedWindow
  */
 WebInspector.FlameChart = function(dataProvider, flameChartDelegate, isTopDown, timeBasedWindow)
 {
-    WebInspector.VBox.call(this);
+    WebInspector.HBox.call(this);
     this.element.classList.add("flame-chart-main-pane");
     this._flameChartDelegate = flameChartDelegate;
     this._isTopDown = isTopDown;
     this._timeBasedWindow = timeBasedWindow;
 
     this._calculator = new WebInspector.FlameChart.Calculator();
-
     this._canvas = this.element.createChild("canvas");
     this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this));
     this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
     this._canvas.addEventListener("click", this._onClick.bind(this), false);
     WebInspector.installDragHandle(this._canvas, this._startCanvasDragging.bind(this), this._canvasDragging.bind(this), this._endCanvasDragging.bind(this), "move", null);
+    this._vScrollElement = this.element.createChild("div", "flame-chart-v-scroll");
+    this._vScrollContent = this._vScrollElement.createChild("div");
+    this._vScrollElement.addEventListener("scroll", this._scheduleUpdate.bind(this), false);
 
     this._entryInfo = this.element.createChild("div", "profile-entry-info");
     this._highlightElement = this.element.createChild("div", "flame-chart-highlight-element");
     this._selectedElement = this.element.createChild("div", "flame-chart-selected-element");
 
     this._dataProvider = dataProvider;
 
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._windowWidth = 1.0;
@@ skipping 353 matching lines @@
 
     /**
      * @param {?MouseEvent} e
      */
     _onMouseWheel: function(e)
     {
         var windowLeft = this._timeWindowLeft ? this._timeWindowLeft : this._dataProvider.zeroTime();
         var windowRight = this._timeWindowRight !== Infinity ? this._timeWindowRight : this._dataProvider.zeroTime() + this._dataProvider.totalTime();
 
         if (e.wheelDeltaY) {
-            const mouseWheelZoomSpeed = 1 / 120;
-            var zoom = Math.pow(1.2, -e.wheelDeltaY * mouseWheelZoomSpeed) - 1;
-            var cursorTime = this._cursorTime(e.offsetX);
-            windowLeft += (windowLeft - cursorTime) * zoom;
-            windowRight += (windowRight - cursorTime) * zoom;
+            if (e.altKey) {
+                const mouseWheelZoomSpeed = 1 / 120;
+                var zoom = Math.pow(1.2, -e.wheelDeltaY * mouseWheelZoomSpeed) - 1;
+                var cursorTime = this._cursorTime(e.offsetX);
+                windowLeft += (windowLeft - cursorTime) * zoom;
+                windowRight += (windowRight - cursorTime) * zoom;
+            } else
+                this._vScrollElement.scrollTop += -e.wheelDeltaY / 120 * this._offsetHeight / 8;

[pfeldman, 2014/03/27 12:48:04]

+= - ?

[alph, 2014/03/27 13:15:36]

nit: perhaps move "e.wheelDeltaY / 120" out of the "if".
style: else part should go with {}

         } else {
             var shift = e.wheelDeltaX * this._pixelToTime;
             shift = Number.constrain(shift, this._zeroTime - windowLeft, this._totalTime + this._zeroTime - windowRight);
             windowLeft += shift;
             windowRight += shift;
         }
         windowLeft = Number.constrain(windowLeft, this._zeroTime, this._totalTime + this._zeroTime);
         windowRight = Number.constrain(windowRight, this._zeroTime, this._totalTime + this._zeroTime);
         this._flameChartDelegate.requestWindowTimes(windowLeft, windowRight);
     },
 
     /**
      * @param {number} x
      * @return {number}
      */
     _cursorTime: function(x)
     {
         return (x + this._pixelWindowLeft - this._paddingLeft) * this._pixelToTime + this._zeroTime;
     },
 
     /**
      * @param {!number} x
      * @param {!number} y
      */
     _coordinatesToEntryIndex: function(x, y)
     {
+        y += this._scrollTop;

[pfeldman, 2014/03/27 12:48:04]

How does this work with the retina?

         var timelineData = this._timelineData();
         if (!timelineData)
             return -1;
         var cursorTimeOffset = this._cursorTime(x) - this._zeroTime;
         var cursorLevel = this._isTopDown ? Math.floor((y - WebInspector.FlameChart.DividersBarHeight) / this._barHeight) : Math.floor((this._canvas.height / window.devicePixelRatio - y) / this._barHeight);
         var entryOffsets = timelineData.entryOffsets;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryLevels = timelineData.entryLevels;
         var length = entryOffsets.length;
         for (var i = 0; i < length; ++i) {
@@ skipping 37 matching lines @@
         var lastTitleIndex = 0;
         var textPadding = this._dataProvider.textPadding();
         this._minTextWidth = 2 * textPadding + this._measureWidth(context, "\u2026");
         var minTextWidth = this._minTextWidth;
 
         var lastDrawOffset = new Int32Array(this._dataProvider.maxStackDepth());
         for (var i = 0; i < lastDrawOffset.length; ++i)
             lastDrawOffset[i] = -1;
 
         var barHeight = this._barHeight;
-        this._baseHeight = this._isTopDown ? WebInspector.FlameChart.DividersBarHeight : height - barHeight;
 
         var offsetToPosition = this._offsetToPosition.bind(this);
         var textBaseHeight = this._baseHeight + barHeight - this._dataProvider.textBaseline();
         var colorBuckets = {};
-        var maxBarLevel = Math.min(this._dataProvider.maxStackDepth(), Math.ceil(height / barHeight));
+        var minVisibleBarLevel = Math.max(0, Math.floor((this._scrollTop - this._baseHeight) / barHeight));
+        var maxVisibleBarLevel = Math.min(this._dataProvider.maxStackDepth(), Math.ceil((height + this._scrollTop) / barHeight));
+        var visibleBarsCount = maxVisibleBarLevel - minVisibleBarLevel + 1;
 
+        context.translate(0, -this._scrollTop * ratio);
         var levelsCompleted = 0;
         var lastEntryOnLevelPainted = [];
-        for (var i = 0; i < maxBarLevel; ++i)
+        for (var i = 0; i < visibleBarsCount; ++i)
             lastEntryOnLevelPainted[i] = false;
 
-        for (var entryIndex = 0; levelsCompleted < maxBarLevel && entryIndex < entryOffsets.length; ++entryIndex) {
+        for (var entryIndex = 0; levelsCompleted < visibleBarsCount && entryIndex < entryOffsets.length; ++entryIndex) {
             // skip if it is not visible (top/bottom side)
             var barLevel = entryLevels[entryIndex];
-            if (barLevel > maxBarLevel || lastEntryOnLevelPainted[barLevel])
+            if (barLevel < minVisibleBarLevel || barLevel > maxVisibleBarLevel || lastEntryOnLevelPainted[barLevel - minVisibleBarLevel])
                 continue;
 
             // stop if we reached right border in time (entries were ordered by start time).
             var entryOffset = entryOffsets[entryIndex];
             if (entryOffset > timeWindowRight) {
-                lastEntryOnLevelPainted[barLevel] = true;
+                lastEntryOnLevelPainted[barLevel - minVisibleBarLevel] = true;
                 levelsCompleted++;
                 continue;
             }
 
             // skip if it is not visible (left side).
             var entryOffsetRight = entryOffset + entryTotalTimes[entryIndex];
             if (entryOffsetRight < timeWindowLeft)
                 continue;
 
             var barRight = this._offsetToPosition(entryOffsetRight);
@@ skipping 85 matching lines @@
             return;
         var timeRange = this._dataProvider.highlightTimeRange(entryIndex);
         if (!timeRange)
             return;
         var timelineData = this._timelineData();
         var barX = this._offsetToPosition(timeRange.startTimeOffset);
         var barRight = this._offsetToPosition(timeRange.endTimeOffset);
         if (barRight === 0 || barX === this._canvas.width)
             return;
         var barWidth = Math.max(barRight - barX, this._minWidth);
-        var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]);
+        var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]) - this._scrollTop;
         var style = element.style;
         style.left = barX + "px";
         style.top = barY + "px";
         style.width = barWidth + "px";
         style.height = this._barHeight + "px";
         this.element.appendChild(element);
     },
 
     _offsetToPosition: function(offset)
     {
@@ skipping 83 matching lines @@
         }
 
         this._pixelWindowWidth = this._offsetWidth - this._paddingLeft;
         this._totalPixels = Math.floor(this._pixelWindowWidth / this._windowWidth);
         this._pixelWindowLeft = Math.floor(this._totalPixels * this._windowLeft);
         this._pixelWindowRight = Math.floor(this._totalPixels * this._windowRight);
 
         this._timeToPixel = this._totalPixels / this._totalTime;
         this._pixelToTime = this._totalTime / this._totalPixels;
         this._paddingLeftTime = this._paddingLeft / this._timeToPixel;
+
+        this._baseHeight = this._isTopDown ? WebInspector.FlameChart.DividersBarHeight : this._offsetHeight - this._barHeight;
+
+        var totalHeight = this._levelToHeight(this._dataProvider.maxStackDepth());
+        this._vScrollContent.style.height = totalHeight + "px";
+        this._scrollTop = this._vScrollElement.scrollTop;
     },
 
     onResize: function()
     {
-        this._offsetWidth = this.element.offsetWidth;
+        this._offsetWidth = this.element.offsetWidth - this._vScrollElement.offsetWidth;
         this._offsetHeight = this.element.offsetHeight;
         this._canvas.style.width = this._offsetWidth + "px";
         this._canvas.style.height = this._offsetHeight + "px";
         this._scheduleUpdate();
     },
 
     _scheduleUpdate: function()
     {
         if (this._updateTimerId)
             return;
@@ skipping 12 matching lines @@
     },
 
     reset: function()
     {
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};
         this.update();
     },
 
-    __proto__: WebInspector.VBox.prototype
+    __proto__: WebInspector.HBox.prototype
 }