TimelineFlameChart: selectRecord implementation

Source/devtools/front_end/FlameChart.js

Index: Source/devtools/front_end/FlameChart.js
diff --git a/Source/devtools/front_end/FlameChart.js b/Source/devtools/front_end/FlameChart.js
index b7aa0936ef1da7865b191851a9df3eed71a60824..4a0c5c19e8dd49425c666263161ba8d7ecfef4f6 100644
--- a/Source/devtools/front_end/FlameChart.js
+++ b/Source/devtools/front_end/FlameChart.js
@@ -31,14 +31,23 @@
 /**
  * @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) { }
 }
 
 /**
@@ -181,6 +190,12 @@ WebInspector.FlameChartDataProvider.prototype = {
      * @return {!string}
      */
     entryColor: function(entryIndex) { },
+
+    /**
+     * @param {number} entryIndex
+     * @return {!{startTimeOffset: number, endTimeOffset: number}}
+     */
+    highlightTimeRange: function(entryIndex) { },
 }
 
 /**
@@ -407,7 +422,7 @@ WebInspector.FlameChart.ColorGenerator.prototype = {
 /**
  * @constructor
  * @extends {WebInspector.View}
- * @implements {WebInspector.TimeRangeController}
+ * @implements {WebInspector.FlameChartDelegate}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  */
 WebInspector.FlameChart.OverviewPane = function(dataProvider)
@@ -434,6 +449,17 @@ WebInspector.FlameChart.OverviewPane.prototype = {
     },
 
     /**
+     * @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
      */
@@ -559,15 +585,15 @@ WebInspector.FlameChart.OverviewPane.drawOverviewCanvas = function(dataProvider,
  * @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;
 
@@ -596,6 +622,7 @@ WebInspector.FlameChart.MainPane = function(dataProvider, timeRangeController, i
     this._minWidth = 1;
     this._paddingLeft = 15;
     this._highlightedEntryIndex = -1;
+    this._selectedEntryIndex = -1;
 }
 
 WebInspector.FlameChart.MainPane.prototype = {
@@ -666,7 +693,7 @@ WebInspector.FlameChart.MainPane.prototype = {
         );
         var windowLeft = this._dragStartWindowLeft + timeShift;
         var windowRight = this._dragStartWindowRight + timeShift;
-        this._timeRangeController.requestWindowTimes(windowLeft, windowRight);
+        this._flameChartDelegate.requestWindowTimes(windowLeft, windowRight);
         this._wasDragged = true;
     },
 
@@ -744,7 +771,7 @@ WebInspector.FlameChart.MainPane.prototype = {
         }
         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);
     },
 
     /**
@@ -765,16 +792,16 @@ WebInspector.FlameChart.MainPane.prototype = {
         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;
         }
@@ -901,6 +928,7 @@ WebInspector.FlameChart.MainPane.prototype = {
             }
             context.fill();
         }
+
         context.textBaseline = "alphabetic";
         context.fillStyle = "#333";
         this._dotsWidth = context.measureText("\u2026").width;
@@ -925,6 +953,7 @@ WebInspector.FlameChart.MainPane.prototype = {
                 context.fillText(title, xText + textPaddingLeft, textBaseHeight - entryLevels[entryIndex] * this._barHeightDelta);
         }
         this._updateHighlightElement();
+        this._updateSelectedElement();
     },
 
     _updateHighlightElement: function()
@@ -935,9 +964,9 @@ WebInspector.FlameChart.MainPane.prototype = {
         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;
@@ -948,6 +977,26 @@ WebInspector.FlameChart.MainPane.prototype = {
         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;