TimelineFlameChart: selectRecord implementation

Source/devtools/front_end/TimelineFlameChart.js

Index: Source/devtools/front_end/TimelineFlameChart.js
diff --git a/Source/devtools/front_end/TimelineFlameChart.js b/Source/devtools/front_end/TimelineFlameChart.js
index 2287221c39bdd2d3433c5018877aefc9b61f50af..0f2c30a91b3c7b3b3b73380c53b6e80d474161f9 100644
--- a/Source/devtools/front_end/TimelineFlameChart.js
+++ b/Source/devtools/front_end/TimelineFlameChart.js
@@ -176,6 +176,9 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
 
         /** @type {!Array.<string>} */
         this._entryColors = [];
+
+        /** @type {!Array.<!WebInspector.TimelineModel.Record>} */
+        this._entryRecords = [];
     },
 
     /**
@@ -235,6 +238,7 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
         this._timelineData.entryLevels[index] = level;
         this._timelineData.entryTotalTimes[index] = endTime - startTime;
         this._entryColors[index] = color;
+        this._entryRecords[index] = record;
     },
 
     /**
@@ -261,7 +265,7 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
      */
     entryData: function(entryIndex)
     {
-        return null;
+        return this._entryRecords[entryIndex];

[pfeldman, 2014/03/05 12:13:02]

You should express selection in terms of entryIndex and remove entryData
altogether.

     },
 
     /**
@@ -271,6 +275,19 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
     entryColor: function(entryIndex)
     {
         return this._entryColors[entryIndex];
+    },
+
+    /**
+     * @param {number} entryIndex
+     * @return {!{startTimeOffset: number, endTimeOffset: number}}
+     */
+    highlightTimeRange: function(entryIndex)

[pfeldman, 2014/03/05 12:13:02]

What is the semantics of this method?

[loislo, 2014/03/05 12:57:55]

As I've told you we generates a few entries per single record.
As a result FlameChart highlights not all the record but only part of it. It is
against the our design-screenshot. So we need to highlight all the entries that
have the same record. 

+    {
+        var record = this._entryRecords[entryIndex];
+        return {
+            startTimeOffset: record.startTime - this._zeroTime,
+            endTimeOffset: (record.endTime || record.startTime) - this._zeroTime
+        };
     }
 }
 
@@ -278,7 +295,7 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
  * @constructor
  * @extends {WebInspector.View}
  * @implements {WebInspector.TimelineModeView}
- * @implements {WebInspector.TimeRangeController}
+ * @implements {WebInspector.FlameChartDelegate}
  * @param {!WebInspector.TimelineModeViewDelegate} delegate
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.TimelineFrameModel} frameModel
@@ -287,12 +304,15 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
 WebInspector.TimelineFlameChart = function(delegate, model, frameModel, mainThread)
 {
     WebInspector.View.call(this);
+    this.element.classList.add("timeline-flamechart");
+    this.registerRequiredCSS("flameChart.css");
     this._delegate = delegate;
     this._model = model;
     this._dataProvider = new WebInspector.TimelineFlameChartDataProvider(model, frameModel, mainThread);
     this._mainView = new WebInspector.FlameChart.MainPane(this._dataProvider, this, true, true);
     this._mainView.show(this.element);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStarted, this._onRecordingStarted, this);
+    this._mainView.addEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onEntrySelected, this);
 }
 
 WebInspector.TimelineFlameChart.prototype = {
@@ -384,6 +404,45 @@ WebInspector.TimelineFlameChart.prototype = {
      */
     setSelectedRecord: function(record)
     {
+        var entryRecords = this._dataProvider._entryRecords;
+        for (var entryIndex = 0; entryIndex < entryRecords.length; ++entryIndex) {
+            if (entryRecords[entryIndex] === record) {
+                this._mainView.setSelectedEntry(entryIndex);
+                return;
+            }
+        }
+        this._mainView.setSelectedEntry(-1);
+        if (this._selectedElement) {
+            this._selectedElement.remove();
+            delete this._selectedElement;
+        }
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onEntrySelected: function(event)
+    {
+        var record = /** @type {!WebInspector.TimelineModel.Record} */(event.data);
+        this._delegate.selectRecord(record);
+    },
+
+    /**
+     * @param {number} entryIndex
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+    drawSelectedElement: function(entryIndex, x, y, width, height)
+    {
+        if (!this._selectedElement)
+            this._selectedElement = this.element.createChild("div", "timeline-flamechart-selected-element");

[pfeldman, 2014/03/05 12:13:02]

This element must belong to the FlameChard and be passed into
drawSelectedElement as parameter.

[loislo, 2014/03/05 12:57:55]

Done.

+        var style = this._selectedElement.style;
+        style.left = x + "px";
+        style.top = y + "px";
+        style.width = width + "px";
+        style.height = height + "px";
     },
 
     __proto__: WebInspector.View.prototype