DevTools: allow selecting and showing details for coalesced record.

R=caseq@chromium.org

Review URL: https://codereview.chromium.org/185403008

git-svn-id: svn://svn.chromium.org/blink/trunk@168314 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/TimelinePanel.js

@@ -749,6 +749,7 @@ WebInspector.TimelinePanel.prototype = {
     {
         var startTime = this._windowStartTime;
         var endTime = this._windowEndTime;
+
         // Return early in case 0 selection window.
         if (startTime < 0)
             return;
@@ -841,6 +842,15 @@ WebInspector.TimelinePanel.prototype = {
         }
     },
 
+    /**
+     * @param {string} title
+     * @param {!Object} aggregatedStats
+     */
+    showAggregatedStatsInDetails: function(title, aggregatedStats)
+    {
+        this._detailsView.setContent(title, WebInspector.TimelineUIUtils.generatePieChart(aggregatedStats));
+    },
+
     __proto__: WebInspector.Panel.prototype
 }
 
@@ -945,7 +955,13 @@ WebInspector.TimelineModeViewDelegate.prototype = {
     /**
      * @param {?WebInspector.TimelineModel.Record} record
      */
-    selectRecord: function(record) {}
+    selectRecord: function(record) {},
+
+    /**
+     * @param {string} title
+     * @param {!Object} aggregatedStats
+     */
+    showAggregatedStatsInDetails: function(title, aggregatedStats) {}
 }
 
 /**

third_party/WebKit/Source/devtools/front_end/TimelineView.js

@@ -320,11 +320,25 @@ WebInspector.TimelineView.prototype = {
     },
 
     /**
-     * @param {?WebInspector.TimelinePresentationModel.Record} record
+     * @param {?WebInspector.TimelinePresentationModel.Record} presentationRecord
      */
-    _selectRecord: function(record)
-    {
-        this._delegate.selectRecord(record ? record.record() : null);
+    _selectRecord: function(presentationRecord)
+    {
+        if (presentationRecord && presentationRecord.coalesced()) {
+            // Presentation record does not have model record to highlight.
+            this._innerSetSelectedRecord(presentationRecord);
+            var aggregatedStats = {};
+            var presentationChildren = presentationRecord.presentationChildren();
+            for (var i = 0; i < presentationChildren.length; ++i)
+                WebInspector.TimelineUIUtils.aggregateTimeByCategory(aggregatedStats, presentationChildren[i].record().aggregatedStats);
+            var idle = presentationRecord.record().endTime - presentationRecord.record().startTime;
+            for (var category in aggregatedStats)
+                idle -= aggregatedStats[category];
+            aggregatedStats["idle"] = idle;
+            this._delegate.showAggregatedStatsInDetails(WebInspector.TimelineUIUtils.recordStyle(presentationRecord.record()).title, aggregatedStats);
+            return;
+        }
+        this._delegate.selectRecord(presentationRecord ? presentationRecord.record() : null);
     },
 
     /**
@@ -332,7 +346,14 @@ WebInspector.TimelineView.prototype = {
      */
     setSelectedRecord: function(record)
     {
-        var presentationRecord = this._presentationModel.toPresentationRecord(record);
+        this._innerSetSelectedRecord(this._presentationModel.toPresentationRecord(record));
+    },
+
+    /**
+     * @param {?WebInspector.TimelinePresentationModel.Record} presentationRecord
+     */
+    _innerSetSelectedRecord: function(presentationRecord)
+    {
         if (presentationRecord === this._lastSelectedRecord)
             return;