DevTools: animate changes to flame chart window.

Source/devtools/front_end/components/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 403 matching lines @@
             this._processTimelineData(timelineData);
         return this._rawTimelineData;
     },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     setWindowTimes: function(startTime, endTime)
     {
-        this._timeWindowLeft = startTime;
-        this._timeWindowRight = endTime;
-        this.scheduleUpdate();
+        if (this._muteAnimation || this._timeWindowLeft === 0 || this._timeWindowRight === Infinity) {
+            // Initial setup.
+            this._timeWindowLeft = startTime;
+            this._timeWindowRight = endTime;
+            this.scheduleUpdate();
+            return;
+        }
+
+        if (this._cancelWindowTimesAnimation)
+            this._cancelWindowTimesAnimation();
+        this._cancelWindowTimesAnimation = WebInspector.animateFunction(this._animateWindowTimes.bind(this),
+            [{from: this._timeWindowLeft, to: startTime}, {from: this._timeWindowRight, to: endTime}], 5,
+            this._animationCompleted.bind(this));
     },
 
     /**
+     * @param {number} startTime
+     * @param {number} endTime
+     */
+    _animateWindowTimes: function(startTime, endTime)
+    {
+        this._timeWindowLeft = startTime;
+        this._timeWindowRight = endTime;
+        this.update();
+    },
+
+    _animationCompleted: function()
+    {
+        delete this._cancelWindowTimesAnimation;

[yurys, 2014/08/08 12:40:43]

this._cancelWindowTimesAnimation = null;

[pfeldman, 2014/08/08 12:43:11]

I think we delete all the flags in other places.

+    },
+
+    /**
      * @param {!MouseEvent} event
      */
     _startCanvasDragging: function(event)
     {
         if (!this._timelineData() || this._timeWindowRight === Infinity)
             return false;
         this._isDragging = true;
         this._maxDragOffset = 0;
         this._dragStartPointX = event.pageX;
         this._dragStartPointY = event.pageY;
         this._dragStartScrollTop = this._vScrollElement.scrollTop;
         this._dragStartWindowLeft = this._timeWindowLeft;
         this._dragStartWindowRight = this._timeWindowRight;
         this._canvas.style.cursor = "";
 
         return true;
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _canvasDragging: function(event)
     {
         var pixelShift = this._dragStartPointX - event.pageX;
+        this._dragStartPointX = event.pageX;
+        this._muteAnimation = true;
+        this._handlePanGesture(pixelShift * this._pixelToTime);
+        this._muteAnimation = false;
+
         var pixelScroll = this._dragStartPointY - event.pageY;
         this._vScrollElement.scrollTop = this._dragStartScrollTop + pixelScroll;
-        var windowShift = pixelShift / this._totalPixels;
-        var windowTime = this._windowWidth * this._totalTime;
-        var timeShift = windowTime * pixelShift / this._pixelWindowWidth;
-        timeShift = Number.constrain(
-            timeShift,
-            this._minimumBoundary - this._dragStartWindowLeft,
-            this._minimumBoundary + this._totalTime - this._dragStartWindowRight
-        );
-        var windowLeft = this._dragStartWindowLeft + timeShift;
-        var windowRight = this._dragStartWindowRight + timeShift;
-        this._flameChartDelegate.requestWindowTimes(windowLeft, windowRight);
         this._maxDragOffset = Math.max(this._maxDragOffset, Math.abs(pixelShift));
     },
 
     _endCanvasDragging: function()
     {
         this._isDragging = false;
     },
 
     /**
      * @param {!Event} event
@@ skipping 56 matching lines @@
     _onMouseWheel: function(e)
     {
         var scrollIsThere = this._totalHeight > this._offsetHeight;
 
         var panHorizontally = Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY) && !e.shiftKey;
         var panVertically = scrollIsThere && ((e.wheelDeltaY && !e.shiftKey) || (Math.abs(e.wheelDeltaX) === 120 && !e.shiftKey));
         if (panVertically) {
             this._vScrollElement.scrollTop -= e.wheelDeltaY / 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)
     {
-        var multiplier = e.shiftKey ? 4 : 1;
+        var zoomMultiplier = e.shiftKey ? 0.8 : 0.3;
+        var panMultiplier = e.shiftKey ? 320 : 80;
         if (e.keyCode === "A".charCodeAt(0)) {
-            this._handlePanGesture(-20 * this._pixelToTime * multiplier);
+            this._handlePanGesture(-panMultiplier * this._pixelToTime);
             e.consume(true);
         } else if (e.keyCode === "D".charCodeAt(0)) {
-            this._handlePanGesture(20 * this._pixelToTime * multiplier);
+            this._handlePanGesture(panMultiplier * this._pixelToTime);
             e.consume(true);
         } else if (e.keyCode === "W".charCodeAt(0)) {
-            this._handleZoomGesture(-0.2 * multiplier);
+            this._handleZoomGesture(-zoomMultiplier);
             e.consume(true);
         } else if (e.keyCode === "S".charCodeAt(0)) {
-            this._handleZoomGesture(0.2 * multiplier);
+            this._handleZoomGesture(zoomMultiplier);
             e.consume(true);
         }
     },
 
     /**
      * @param {number} zoom
      */
     _handleZoomGesture: function(zoom)
     {
         var bounds = this._windowForGesture();
@@ skipping 531 matching lines @@
     _updateScrollBar: function()
     {
         var showScroll = this._totalHeight > this._offsetHeight;
         this._vScrollElement.classList.toggle("hidden", !showScroll);
         this._offsetWidth = this.element.offsetWidth - (WebInspector.isMac() ? 0 : this._vScrollElement.offsetWidth);
         this._offsetHeight = this.element.offsetHeight;
     },
 
     scheduleUpdate: function()
     {
-        if (this._updateTimerId)
+        if (this._updateTimerId || this._cancelWindowTimesAnimation)
             return;
         this._updateTimerId = requestAnimationFrame(this.update.bind(this));
     },
 
     update: function()
     {
         this._updateTimerId = 0;
         if (!this._timelineData())
             return;
         this._resetCanvas();
         this._updateBoundaries();
         this._calculator._updateBoundaries(this);
         this._draw(this._offsetWidth, this._offsetHeight);
     },
 
     reset: function()
     {
         this._highlightedMarkerIndex = -1;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};
         this.update();
     },
 
     __proto__: WebInspector.HBox.prototype
 }