Timeline: make frames in TimelineView selectable

Source/devtools/front_end/timeline/TimelinePanel.js

Index: Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/Source/devtools/front_end/timeline/TimelinePanel.js b/Source/devtools/front_end/timeline/TimelinePanel.js
index a0ab1331a2031909541099fa9399c597d9f8229a..3c049d1ec725bb2d0e96e8a9cd3af9d6bff47653 100644
--- a/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -224,7 +224,7 @@ WebInspector.TimelinePanel.prototype = {
 
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].setWindowTimes(this._windowStartTime, this._windowEndTime);
-        this._updateSelectionDetails();
+        this._updateSelectedRangeStats();
     },
 
     /**
@@ -551,7 +551,7 @@ WebInspector.TimelinePanel.prototype = {
             var view = this._currentViews[i];
             view.refreshRecords(this._textFilter._regex);
         }
-        this._updateSelectionDetails();
+        this._updateSelectedRangeStats();
     },
 
     /**
@@ -618,7 +618,7 @@ WebInspector.TimelinePanel.prototype = {
         this._timelineView().setFrameModel(isFrameMode ? this._frameModel() : null);
         this._overviewPane.setOverviewControls(this._overviewControls);
         this.doResize();
-        this._updateSelectionDetails();
+        this._updateSelectedRangeStats();
 
         this._stackView.show(this._searchableView.element);
     },
@@ -710,14 +710,14 @@ WebInspector.TimelinePanel.prototype = {
     _onRecordsCleared: function()
     {
         this.requestWindowTimes(0, Infinity);
-        delete this._selectedRecord;
+        delete this._selection;
         if (this._lazyFrameModel)
             this._lazyFrameModel.reset();
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].reset();
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].reset();
-        this._updateSelectionDetails();
+        this._updateSelectedRangeStats();
     },
 
     _onRecordingStarted: function()
@@ -933,7 +933,31 @@ WebInspector.TimelinePanel.prototype = {
 
     _updateSelectionDetails: function()
     {
-        if (this._selectedRecord)
+        if (!this._selection) {
+            this._updateSelectedRangeStats();
+            return;
+        }
+        if (this._selection.type() === WebInspector.TimelineSelection.Type.Record) {
+            var record = /** @type {!WebInspector.TimelineModel.Record} */ (this._selection.object());
+            WebInspector.TimelineUIUtils.generatePopupContent(record, this._model, this._detailsLinkifier, showCallback.bind(this), this._model.loadedFromFile());
+        } else if (this._selection.type() === WebInspector.TimelineSelection.Type.Frame) {
+            var frame = /** @type {!WebInspector.TimelineFrame} */ (this._selection.object());
+            this._detailsView.setContent(WebInspector.UIString("Frame Statistics"), WebInspector.TimelineUIUtils.generatePopupContentForFrame(frame));
+        }
+
+        /**
+         * @param {!DocumentFragment} element
+         * @this {WebInspector.TimelinePanel}
+         */
+        function showCallback(element)
+        {
+            this._detailsView.setContent(record.title(), element);
+        }
+    },
+
+    _updateSelectedRangeStats: function()
+    {
+        if (this._selection)
             return;
 
         var startTime = this._windowStartTime;
@@ -1008,36 +1032,18 @@ WebInspector.TimelinePanel.prototype = {
     },
 
     /**
-     * @param {?WebInspector.TimelineModel.Record} record
+     * @param {?WebInspector.TimelineSelection} selection
      */
-    selectRecord: function(record)
+    select: function(selection)
     {
         this._detailsLinkifier.reset();
-        this._selectedRecord = record;
-
-        if (!record) {
-            this._updateSelectionDetails();
-            return;
-        }
+        this._selection = selection;
 
         for (var i = 0; i < this._currentViews.length; ++i) {
             var view = this._currentViews[i];
-            view.setSelectedRecord(record);
-        }
-        if (!record) {
-            this._updateSelectionDetails();
-            return;
-        }
-        WebInspector.TimelineUIUtils.generatePopupContent(record, this._model, this._detailsLinkifier, showCallback.bind(this), this._model.loadedFromFile());
-
-        /**
-         * @param {!DocumentFragment} element
-         * @this {WebInspector.TimelinePanel}
-         */
-        function showCallback(element)
-        {
-            this._detailsView.setContent(record.title(), element);
+            view.setSelection(selection);
         }
+        this._updateSelectionDetails();
     },
 
     /**
@@ -1098,6 +1104,63 @@ WebInspector.TimelineDetailsView.prototype = {
 }
 
 /**
+ * @constructor
+ */
+WebInspector.TimelineSelection = function()
+{
+}
+
+/**
+ * @enum {string}
+ */
+WebInspector.TimelineSelection.Type = {
+    Record: "Record",
+    Frame: "Frame",
+};
+
+/**
+ * @param {!WebInspector.TimelineModel.Record} record
+ * @return {!WebInspector.TimelineSelection}
+ */
+WebInspector.TimelineSelection.fromRecord = function(record)
+{
+    var selection = new WebInspector.TimelineSelection();
+    selection._type = WebInspector.TimelineSelection.Type.Record;
+    selection._object = record;
+    return selection;
+}
+
+/**
+ * @param {!WebInspector.TimelineFrame} frame
+ * @return {!WebInspector.TimelineSelection}
+ */
+WebInspector.TimelineSelection.fromFrame = function(frame)
+{
+    var selection = new WebInspector.TimelineSelection();
+    selection._type = WebInspector.TimelineSelection.Type.Frame;
+    selection._object = frame;
+    return selection;
+}
+
+WebInspector.TimelineSelection.prototype = {
+    /**
+     * @return {!WebInspector.TimelineSelection.Type}
+     */
+    type: function()
+    {
+        return this._type;
+    },
+
+    /**
+     * @return {!Object}
+     */
+    object: function()
+    {
+        return this._object;
+    }
+};
+
+/**
  * @interface
  */
 WebInspector.TimelineModeView = function()
@@ -1143,9 +1206,9 @@ WebInspector.TimelineModeView.prototype = {
     setSidebarSize: function(width) {},
 
     /**
-     * @param {?WebInspector.TimelineModel.Record} record
+     * @param {?WebInspector.TimelineSelection} selection
      */
-    setSelectedRecord: function(record) {},
+    setSelection: function(selection) {},
 }
 
 /**
@@ -1161,9 +1224,9 @@ WebInspector.TimelineModeViewDelegate.prototype = {
     requestWindowTimes: function(startTime, endTime) {},
 
     /**
-     * @param {?WebInspector.TimelineModel.Record} record
+     * @param {?WebInspector.TimelineSelection} selection
      */
-    selectRecord: function(record) {},
+    select: function(selection) {},
 
     /**
      * @param {string} title