Timeline: make frames in TimelineView selectable

Source/devtools/front_end/timeline/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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.
@@ skipping 206 matching lines @@
     /**
      * @param {!WebInspector.Event} event
      */
     _onWindowChanged: function(event)
     {
         this._windowStartTime = event.data.startTime;
         this._windowEndTime = event.data.endTime;
 
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].setWindowTimes(this._windowStartTime, this._windowEndTime);
-        this._updateSelectionDetails();
+        this._updateSelectedRangeStats();
     },
 
     /**
      * @param {number} windowStartTime
      * @param {number} windowEndTime
      */
     requestWindowTimes: function(windowStartTime, windowEndTime)
     {
         this._overviewPane.requestWindowTimes(windowStartTime, windowEndTime);
     },
@@ skipping 306 matching lines @@
             return;
         this._model.loadFromURL(url, progressIndicator);
     },
 
     _refreshViews: function()
     {
         for (var i = 0; i < this._currentViews.length; ++i) {
             var view = this._currentViews[i];
             view.refreshRecords(this._textFilter._regex);
         }
-        this._updateSelectionDetails();
+        this._updateSelectedRangeStats();
     },
 
     /**
      * @param {!WebInspector.StatusBarButton} button
      */
     _overviewModeChanged: function(button)
     {
         var oldMode = this._overviewModeSetting.get();
         if (oldMode === WebInspector.TimelinePanel.OverviewMode.Events) {
             this._overviewModeSetting.set(WebInspector.TimelinePanel.OverviewMode.Frames);
@@ skipping 46 matching lines @@
                 this._overviewControls.push(new WebInspector.TimelinePowerOverview(this._model));
             this._addModeView(new WebInspector.TimelinePowerGraph(this, this._model));
         }
 
         if (this._captureTracingSetting && this._captureTracingSetting.get())
             this._addModeView(new WebInspector.TimelineTracingView(this, this._tracingModel()));
 
         this._timelineView().setFrameModel(isFrameMode ? this._frameModel() : null);
         this._overviewPane.setOverviewControls(this._overviewControls);
         this.doResize();
-        this._updateSelectionDetails();
+        this._updateSelectedRangeStats();
 
         this._stackView.show(this._searchableView.element);
     },
 
     /**
      * @param {boolean} userInitiated
      */
     _startRecording: function(userInitiated)
     {
         this._userInitiatedRecording = userInitiated;
@@ skipping 71 matching lines @@
     },
 
     _onClearButtonClick: function()
     {
         this._model.reset();
     },
 
     _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()
     {
         this._updateToggleTimelineButton(true);
         if (WebInspector.experimentsSettings.timelineNoLiveUpdate.isEnabled())
             this._updateProgress(WebInspector.UIString("%d events collected", 0));
     },
 
     _recordingInProgress: function()
@@ skipping 195 matching lines @@
      */
     performSearch: function(query, shouldJump, jumpBackwards)
     {
         this._searchRegex = createPlainTextSearchRegex(query, "i");
         delete this._searchResults;
         this._updateSearchHighlight(true, shouldJump, jumpBackwards);
     },
 
     _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;
         var endTime = this._windowEndTime;
 
         // Return early in case 0 selection window.
         if (startTime < 0)
             return;
 
         var aggregatedStats = {};
@@ skipping 54 matching lines @@
             if (this._overviewControls[i] instanceof WebInspector.TimelinePowerOverview) {
                 var energy = this._overviewControls[i].calculateEnergy(startTime, endTime);
                 title += WebInspector.UIString("  Energy: %.2f Joules", energy);
                 break;
             }
         }
         this._detailsView.setContent(title, fragment);
     },
 
     /**
-     * @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);
+            view.setSelection(selection);
         }
-        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);
-        }
+        this._updateSelectionDetails();
     },
 
     /**
      * @param {string} title
      * @param {!Node} node
      */
     showInDetails: function(title, node)
     {
         this._detailsView.setContent(title, node);
     },
@@ skipping 40 matching lines @@
     setVertical: function(vertical)
     {
         this._contentElement.classList.toggle("hbox", !vertical);
         this._contentElement.classList.toggle("vbox", vertical);
     },
 
     __proto__: WebInspector.VBox.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()
 {
 }
 
 WebInspector.TimelineModeView.prototype = {
     /**
      * @return {!WebInspector.View}
      */
@@ skipping 25 matching lines @@
      * @param {number} endTime
      */
     setWindowTimes: function(startTime, endTime) {},
 
     /**
      * @param {number} width
      */
     setSidebarSize: function(width) {},
 
     /**
-     * @param {?WebInspector.TimelineModel.Record} record
+     * @param {?WebInspector.TimelineSelection} selection
      */
-    setSelectedRecord: function(record) {},
+    setSelection: function(selection) {},
 }
 
 /**
  * @interface
  */
 WebInspector.TimelineModeViewDelegate = function() {}
 
 WebInspector.TimelineModeViewDelegate.prototype = {
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     requestWindowTimes: function(startTime, endTime) {},
 
     /**
-     * @param {?WebInspector.TimelineModel.Record} record
+     * @param {?WebInspector.TimelineSelection} selection
      */
-    selectRecord: function(record) {},
+    select: function(selection) {},
 
     /**
      * @param {string} title
      * @param {!Node} node
      */
     showInDetails: function(title, node) {},
 }
 
 /**
  * @constructor
@@ skipping 115 matching lines @@
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return !this._hiddenRecords[record.type()];
     },
 
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }