TimelineFlameChart: selectRecord implementation

Source/devtools/front_end/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 13 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @interface
  */
-WebInspector.TimeRangeController = function() { }
+WebInspector.FlameChartDelegate = function() { }
 
-WebInspector.TimeRangeController.prototype = {
+WebInspector.FlameChartDelegate.prototype = {
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
-    requestWindowTimes: function(startTime, endTime) { }
+    requestWindowTimes: function(startTime, endTime) { },
+
+    /**
+     * @param {number} entryIndex
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+    drawSelectedElement: function(entryIndex, x, y, width, height) { }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  */
 WebInspector.FlameChart = function(dataProvider)
 {
     WebInspector.View.call(this);
@@ skipping 122 matching lines @@
      * @param {number} entryIndex
      * @return {?string}
      */
     entryFont: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {!string}
      */
     entryColor: function(entryIndex) { },
+
+    /**
+     * @param {number} entryIndex
+     * @return {!{startTimeOffset: number, endTimeOffset: number}}
+     */
+    highlightTimeRange: function(entryIndex) { },
 }
 
 /**
  * @constructor
  * @implements {WebInspector.TimelineGrid.Calculator}
  */
 WebInspector.FlameChart.Calculator = function()
 {
     this._paddingLeft = 0;
 }
@@ skipping 206 matching lines @@
     _createColor: function(index, sat)
     {
         var hue = (index * 7 + 12 * (index % 2)) % 360;
         return "hsla(" + hue + ", " + sat + "%, 66%, 0.7)";
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
- * @implements {WebInspector.TimeRangeController}
+ * @implements {WebInspector.FlameChartDelegate}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  */
 WebInspector.FlameChart.OverviewPane = function(dataProvider)
 {
     WebInspector.View.call(this);
     this.element.classList.add("flame-chart-overview-pane");
     this._overviewContainer = this.element.createChild("div", "overview-container");
     this._overviewGrid = new WebInspector.OverviewGrid("flame-chart");
     this._overviewGrid.element.classList.add("fill");
     this._overviewCanvas = this._overviewContainer.createChild("canvas", "flame-chart-overview-canvas");
     this._overviewContainer.appendChild(this._overviewGrid.element);
     this._overviewCalculator = new WebInspector.FlameChart.OverviewCalculator();
     this._dataProvider = dataProvider;
 }
 
 WebInspector.FlameChart.OverviewPane.prototype = {
     /**
      * @param {number} windowStartTime
      * @param {number} windowEndTime
      */
     requestWindowTimes: function(windowStartTime, windowEndTime)
     {
         this._overviewGrid.setWindow(windowStartTime / this._dataProvider.totalTime(), windowEndTime / this._dataProvider.totalTime());
     },
 
     /**
+     * @param {number} entryIndex
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+    drawSelectedElement: function(entryIndex, x, y, width, height)
+    {
+    },
+
+    /**
      * @param {!number} timeLeft
      * @param {!number} timeRight
      */
     _selectRange: function(timeLeft, timeRight)
     {
         this._overviewGrid.setWindow(timeLeft / this._dataProvider.totalTime(), timeRight / this._dataProvider.totalTime());
     },
 
     /**
      * @return {?WebInspector.FlameChart.TimelineData}
@@ skipping 105 matching lines @@
     context.lineTo(canvasWidth + 1, canvasHeight - 1);
     context.fill();
     context.stroke();
     context.closePath();
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
- * @param {!WebInspector.TimeRangeController} timeRangeController
+ * @param {!WebInspector.FlameChartDelegate} flameChartDelegate
  * @param {boolean} isTopDown
  * @param {boolean} timeBasedWindow
  */
-WebInspector.FlameChart.MainPane = function(dataProvider, timeRangeController, isTopDown, timeBasedWindow)
+WebInspector.FlameChart.MainPane = function(dataProvider, flameChartDelegate, isTopDown, timeBasedWindow)
 {
     WebInspector.View.call(this);
     this.element.classList.add("flame-chart-main-pane");
-    this._timeRangeController = timeRangeController;
+    this._flameChartDelegate = flameChartDelegate;
     this._isTopDown = isTopDown;
     this._timeBasedWindow = timeBasedWindow;
 
     this._timelineGrid = new WebInspector.TimelineGrid();
     this.element.appendChild(this._timelineGrid.element);
     this._calculator = new WebInspector.FlameChart.Calculator();
 
     this._canvas = this.element.createChild("canvas");
     this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this));
     this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
     this._canvas.addEventListener("click", this._onClick.bind(this), false);
     WebInspector.installDragHandle(this._canvas, this._startCanvasDragging.bind(this), this._canvasDragging.bind(this), this._endCanvasDragging.bind(this), "move", null);
 
     this._entryInfo = this.element.createChild("div", "profile-entry-info");
     this._highlightElement = this.element.createChild("div", "flame-chart-highlight-element");
 
     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;
     this._minWidth = 1;
     this._paddingLeft = 15;
     this._highlightedEntryIndex = -1;
+    this._selectedEntryIndex = -1;
 }
 
 WebInspector.FlameChart.MainPane.prototype = {
     /**
      * @return {?WebInspector.FlameChart.TimelineData}
      */
     _timelineData: function()
     {
         return this._dataProvider.timelineData();
     },
@@ skipping 50 matching lines @@
         var windowShift = pixelShift / this._totalPixels;
         var windowTime = this._windowWidth * this._totalTime;
         var timeShift = windowTime * pixelShift / this._pixelWindowWidth;
         timeShift = Number.constrain(
             timeShift,
             this._zeroTime - this._dragStartWindowLeft,
             this._zeroTime + this._totalTime - this._dragStartWindowRight
         );
         var windowLeft = this._dragStartWindowLeft + timeShift;
         var windowRight = this._dragStartWindowRight + timeShift;
-        this._timeRangeController.requestWindowTimes(windowLeft, windowRight);
+        this._flameChartDelegate.requestWindowTimes(windowLeft, windowRight);
         this._wasDragged = true;
     },
 
     _endCanvasDragging: function()
     {
         this._isDragging = false;
     },
 
     /**
      * @param {?MouseEvent} event
@@ skipping 57 matching lines @@
             windowLeft += (windowLeft - cursorTime) * zoom;
             windowRight += (windowRight - cursorTime) * zoom;
         } else {
             var shift = e.wheelDeltaX * this._pixelToTime;
             shift = Number.constrain(shift, this._zeroTime - windowLeft, this._totalTime + this._zeroTime - windowRight);
             windowLeft += shift;
             windowRight += shift;
         }
         windowLeft = Number.constrain(windowLeft, this._zeroTime, this._totalTime + this._zeroTime);
         windowRight = Number.constrain(windowRight, this._zeroTime, this._totalTime + this._zeroTime);
-        this._timeRangeController.requestWindowTimes(windowLeft, windowRight);
+        this._flameChartDelegate.requestWindowTimes(windowLeft, windowRight);
     },
 
     /**
      * @param {number} x
      * @return {number}
      */
     _cursorTime: function(x)
     {
         return (x + this._pixelWindowLeft - this._paddingLeft) * this._pixelToTime + this._zeroTime;
     },
 
     /**
      * @param {!number} x
      * @param {!number} y
      */
     _coordinatesToEntryIndex: function(x, y)
     {
         var timelineData = this._timelineData();
         if (!timelineData)
             return -1;
-        var cursorTime = this._cursorTime(x);
+        var cursorTimeOffset = this._cursorTime(x) - this._zeroTime;
         var cursorLevel = this._isTopDown ? Math.floor(y / this._barHeight - 1) : Math.floor((this._canvas.height / window.devicePixelRatio - y) / this._barHeight);
         var entryOffsets = timelineData.entryOffsets;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryLevels = timelineData.entryLevels;
         var length = entryOffsets.length;
         for (var i = 0; i < length; ++i) {
-            if (cursorTime < entryOffsets[i])
+            if (cursorTimeOffset < entryOffsets[i])
                 return -1;
-            if (cursorTime < (entryOffsets[i] + entryTotalTimes[i])
+            if (cursorTimeOffset < (entryOffsets[i] + entryTotalTimes[i])
                 && cursorLevel === entryLevels[i])
                 return i;
         }
         return -1;
     },
 
     /**
      * @param {!number} height
      * @param {!number} width
      */
@@ skipping 106 matching lines @@
                 barRight = this._offsetToPosition(entryOffset + entryTotalTimes[entryIndex]);
                 barWidth = Math.max(barRight - barX, minWidth);
                 barLevel = entryLevels[entryIndex];
                 barY = this._levelToHeight(barLevel);
                 context.rect(barX, barY, barWidth, this._barHeight);
                 if (barWidth > minTextWidth)
                     titleIndexes[lastTitleIndex++] = entryIndex;
             }
             context.fill();
         }
+
         context.textBaseline = "alphabetic";
         context.fillStyle = "#333";
         this._dotsWidth = context.measureText("\u2026").width;
 
         for (i = 0; i < lastTitleIndex; ++i) {
             entryIndex = titleIndexes[i];
             text = this._dataProvider.entryTitle(entryIndex);
             if (!text || !text.length)
                 continue;
             font = this._dataProvider.entryFont(entryIndex);
             if (font !== lastUsedFont)
                 context.font = font;
 
             entryOffset = entryOffsets[entryIndex];
             barX = this._offsetToPosition(entryOffset);
             barRight = this._offsetToPosition(entryOffset + entryTotalTimes[entryIndex]);
             barWidth = Math.max(barRight - barX, minWidth);
             xText = Math.max(0, barX);
             textWidth = barWidth - textPaddingLeft + barX - xText;
             title = this._prepareText(context, text, textWidth);
             if (title)
                 context.fillText(title, xText + textPaddingLeft, textBaseHeight - entryLevels[entryIndex] * this._barHeightDelta);
         }
         this._updateHighlightElement();
+        this._updateSelectedElement();
     },
 
     _updateHighlightElement: function()
     {
         if (this._highlightElement.parentElement)
             this._highlightElement.remove();
         var entryIndex = this._highlightedEntryIndex;
         if (entryIndex === -1)
             return;
         var timelineData = this._timelineData();
-        var entryOffset = timelineData.entryOffsets[entryIndex];
-        var barX = this._offsetToPosition(entryOffset);
-        var barRight = this._offsetToPosition(entryOffset + timelineData.entryTotalTimes[entryIndex]);
+        var timeRange = this._dataProvider.highlightTimeRange(entryIndex);
+        var barX = this._offsetToPosition(timeRange.startTimeOffset);
+        var barRight = this._offsetToPosition(timeRange.endTimeOffset);
         var barWidth = Math.max(barRight - barX, this._minWidth);
 
         var style = this._highlightElement.style;
         style.left = barX + "px";
         style.width = barWidth + "px";
         style.top = this._levelToHeight(timelineData.entryLevels[entryIndex]) + "px";
         style.height = this._barHeight + "px";
         this.element.appendChild(this._highlightElement);
     },
 
+    setSelectedEntry: function(entryIndex)
+    {
+        this._selectedEntryIndex = entryIndex;
+        this._updateSelectedElement();
+    },
+
+    _updateSelectedElement: function()
+    {
+        var entryIndex = this._selectedEntryIndex;
+        if (entryIndex === -1)
+            return;
+        var timelineData = this._timelineData();
+        var timeRange = this._dataProvider.highlightTimeRange(entryIndex);
+        var barX = this._offsetToPosition(timeRange.startTimeOffset);
+        var barRight = this._offsetToPosition(timeRange.endTimeOffset);
+        var barWidth = Math.max(barRight - barX, this._minWidth);
+        var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]);
+        this._flameChartDelegate.drawSelectedElement(entryIndex, barX, barY, barWidth, this._barHeight);
+    },
+
     _offsetToPosition: function(offset)
     {
         return Math.floor(offset * this._timeToPixel) - this._pixelWindowLeft + this._paddingLeft;
     },
 
     _levelToHeight: function(level)
     {
          return this._baseHeight - level * this._barHeightDelta;
     },
 
@@ skipping 104 matching lines @@
             this._timelineGrid.hideDividers();
         this.draw(this.element.clientWidth, this.element.clientHeight);
         this._calculator._updateBoundaries(this);
         this._timelineGrid.element.style.width = this.element.clientWidth;
         var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
         this._timelineGrid.updateDividers(this._calculator, offsets, true);
     },
 
     __proto__: WebInspector.View.prototype
 }