DevTools: Add inertia to flamechart dragging.

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 56 matching lines @@
     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.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");
     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");
@@ skipping 537 matching lines @@
      * @param {!MouseEvent} event
      */
     _initMaxDragOffset: function(event)
     {
         this._maxDragOffsetSquared = 0;
         this._dragStartX = event.pageX;
         this._dragStartY = event.pageY;
     },
 
     /**
-     * @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);
     },
 
     /**
      * @return {number}
      */
     _maxDragOffset: function()
     {
         return Math.sqrt(this._maxDragOffsetSquared);
     },
 
     /**
+     * @param {number} x
+     * @param {number} y
      * @param {!MouseEvent} event
      * @return {boolean}
      */
-    _startCanvasDragging: function(event)
+    _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 = 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()
     {
         this._isDragging = false;
         this._updateHighlight();
     },
 
     /**
      * @param {!MouseEvent} event
@@ skipping 26 matching lines @@
     _hideRangeSelection: function()
     {
         this._selectionOverlay.classList.add("hidden");
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _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);
         this._rangeSelectionStart = Math.min(start, end);
         this._rangeSelectionEnd = Math.max(start, end);
         this._updateRangeSelectionOverlay();
         this._flameChartDelegate.updateRangeSelection(this._rangeSelectionStart, this._rangeSelectionEnd);
     },
 
     _updateRangeSelectionOverlay: function()
@@ skipping 1257 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }