DevTools: initial support of box selection on FlameChart

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 57 matching lines @@
     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._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;
 
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._windowWidth = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._barHeight = dataProvider.barHeight();
     this._barHeightDelta = this._isTopDown ? -this._barHeight : this._barHeight;
@@ skipping 377 matching lines @@
     _animationCompleted: function()
     {
         delete this._cancelWindowTimesAnimation;
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _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;
         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)
     {
+        if (this._isSelecting) {
+            this._updateBoxSelection(event);
+            return;
+        }
         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;
         this._maxDragOffset = Math.max(this._maxDragOffset, Math.abs(pixelShift));
     },
 
     _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)
     {
         this._lastMouseOffsetX = event.offsetX;
 
         if (this._isDragging)
             return;
 
         var inDividersBar = event.offsetY < WebInspector.FlameChart.DividersBarHeight;
@@ skipping 658 matching lines @@
     {
         this._highlightedMarkerIndex = -1;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};
         this.update();
     },
 
     __proto__: WebInspector.HBox.prototype
 }