DevTools: initial support of box selection on FlameChart

Source/devtools/front_end/components/FlameChart.js

Index: Source/devtools/front_end/components/FlameChart.js
diff --git a/Source/devtools/front_end/components/FlameChart.js b/Source/devtools/front_end/components/FlameChart.js
index 16d1673ea502ca9e8ea98e0b184d70ef1897ad7e..e1e5902877bb25e557fb87872ac388d1eaf17f6b 100644
--- a/Source/devtools/front_end/components/FlameChart.js
+++ b/Source/devtools/front_end/components/FlameChart.js
@@ -75,6 +75,8 @@ WebInspector.FlameChart = function(dataProvider, flameChartDelegate, isTopDown)
     this._markerHighlighElement = this.element.createChild("div", "flame-chart-marker-highlight-element");
     this._highlightElement = this.element.createChild("div", "flame-chart-highlight-element");
     this._selectedElement = this.element.createChild("div", "flame-chart-selected-element");
+    this._selectionOverlay = this.element.createChild("div", "flame-chart-selection-overlay hidden");
+    this._selectedTimeSpanLabel = this._selectionOverlay.createChild("div", "time-span");
 
     this._dataProvider = dataProvider;
 
@@ -472,6 +474,11 @@ WebInspector.FlameChart.prototype = {
      */
     _startCanvasDragging: function(event)
     {
+        if (event.shiftKey) {
+            this._startBoxSelection(event);
+            this._isDragging = true;
+            return true;
+        }
         if (!this._timelineData() || this._timeWindowRight === Infinity)
             return false;
         this._isDragging = true;
@@ -491,6 +498,10 @@ WebInspector.FlameChart.prototype = {
      */
     _canvasDragging: function(event)
     {
+        if (this._isSelecting) {
+            this._updateBoxSelection(event);
+            return;
+        }
         var pixelShift = this._dragStartPointX - event.pageX;
         this._dragStartPointX = event.pageX;
         this._muteAnimation = true;
@@ -504,10 +515,60 @@ WebInspector.FlameChart.prototype = {
 
     _endCanvasDragging: function()
     {
+        this._hideBoxSelection();
         this._isDragging = false;
     },
 
     /**
+     * @param {!MouseEvent} event
+     */
+    _startBoxSelection: function(event)
+    {
+        this._selectionOffsetShiftX = event.offsetX - event.pageX;
+        this._selectionOffsetShiftY = event.offsetY - event.pageY;
+        this._selectionStartX = event.offsetX;
+        this._selectionStartY = event.offsetY;
+        this._isSelecting = true;
+        var style = this._selectionOverlay.style;
+        style.left = this._selectionStartX + "px";
+        style.top = this._selectionStartY + "px";
+        style.width = "1px";
+        style.height = "1px";
+        this._selectedTimeSpanLabel.textContent = "";
+        this._selectionOverlay.classList.remove("hidden");
+    },
+
+    _hideBoxSelection: function()
+    {
+        this._selectionOffsetShiftX = null;
+        this._selectionOffsetShiftY = null;
+        this._selectionStartX = null;
+        this._selectionStartY = null;
+        this._isSelecting = false;
+        this._selectionOverlay.classList.add("hidden");
+    },
+
+    /**
+     * @param {!MouseEvent} event
+     */
+    _updateBoxSelection: function(event)
+    {
+        var x = event.pageX + this._selectionOffsetShiftX;
+        var y = event.pageY + this._selectionOffsetShiftY;
+        x = Number.constrain(x, 0, this._offsetWidth);
+        y = Number.constrain(y, 0, this._offsetHeight);
+        var style = this._selectionOverlay.style;
+        style.left = Math.min(x, this._selectionStartX) + "px";
+        style.top = Math.min(y, this._selectionStartY) + "px";
+        var selectionWidth = Math.abs(x - this._selectionStartX)
+        style.width =  selectionWidth + "px";
+        style.height = Math.abs(y - this._selectionStartY) + "px";
+
+        var timeSpan = selectionWidth * this._pixelToTime;
+        this._selectedTimeSpanLabel.textContent =  Number.preciseMillisToString(timeSpan, 2);
+    },
+
+    /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)