DevTools: Add inertia to flamechart dragging.

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

Index: third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js b/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
index 6656be84acd6cd20febc72ad7abf04d83693200b..c6b7f179d090bd0d2807720123dd4c3b123e9472 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
@@ -74,7 +74,7 @@ WebInspector.FlameChart = function(dataProvider, flameChartDelegate, groupExpans
     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.installDragHandle(this._canvas, this._startCanvasDragging.bind(this), this._canvasDragging.bind(this), this._endCanvasDragging.bind(this), "-webkit-grabbing", null);
+    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");
@@ -632,12 +632,13 @@ WebInspector.FlameChart.prototype = {
     },
 
     /**
-     * @param {!MouseEvent} event
+     * @param {number} x
+     * @param {number} y
      */
-    _updateMaxDragOffset: function(event)
+    _updateMaxDragOffset: function(x, y)
     {
-        var dx = event.pageX - this._dragStartX;
-        var dy = event.pageY - this._dragStartY;
+        var dx = x - this._dragStartX;
+        var dy = y - this._dragStartY;
         var dragOffsetSquared = dx * dx + dy * dy;
         this._maxDragOffsetSquared = Math.max(this._maxDragOffsetSquared, dragOffsetSquared);
     },
@@ -651,10 +652,12 @@ WebInspector.FlameChart.prototype = {
     },
 
     /**
+     * @param {number} x
+     * @param {number} y
      * @param {!MouseEvent} event
      * @return {boolean}
      */
-    _startCanvasDragging: function(event)
+    _startCanvasDragging: function(x, y, event)
     {
         if (event.shiftKey)
             return false;
@@ -662,30 +665,29 @@ WebInspector.FlameChart.prototype = {
             return false;
         this._isDragging = true;
         this._initMaxDragOffset(event);
-        this._dragStartPointX = event.pageX;
-        this._dragStartPointY = event.pageY;
+        this._dragStartPointX = x;
+        this._dragStartPointY = y;
         this._dragStartScrollTop = this._vScrollElement.scrollTop;
-        this._dragStartWindowLeft = this._timeWindowLeft;
-        this._dragStartWindowRight = this._timeWindowRight;
         this._canvas.style.cursor = "";
         this.hideHighlight();
         return true;
     },
 
     /**
-     * @param {!MouseEvent} event
+     * @param {number} x
+     * @param {number} y
      */
-    _canvasDragging: function(event)
+    _canvasDragging: function(x, y)
     {
-        var pixelShift = this._dragStartPointX - event.pageX;
-        this._dragStartPointX = event.pageX;
+        var pixelShift = this._dragStartPointX - x;
+        this._dragStartPointX = x;
         this._muteAnimation = true;
         this._handlePanGesture(pixelShift * this._pixelToTime);
         this._muteAnimation = false;
 
-        var pixelScroll = this._dragStartPointY - event.pageY;
+        var pixelScroll = this._dragStartPointY - y;
         this._vScrollElement.scrollTop = this._dragStartScrollTop + pixelScroll;
-        this._updateMaxDragOffset(event);
+        this._updateMaxDragOffset(x, y);
     },
 
     _endCanvasDragging: function()
@@ -732,7 +734,7 @@ WebInspector.FlameChart.prototype = {
      */
     _rangeSelectionDragging: function(event)
     {
-        this._updateMaxDragOffset(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);