Timeline: show impl-side frames on the Timeline overview

Source/devtools/front_end/TimelineFrameController.js

Index: Source/devtools/front_end/TimelineFrameController.js
diff --git a/Source/devtools/front_end/TimelineFrameController.js b/Source/devtools/front_end/TimelineFrameController.js
index 057d4a8c7c81d013ca24c216a5e8f3a21ac633e6..274116977a19c1728ba5c31387e0db8deaa740f7 100644
--- a/Source/devtools/front_end/TimelineFrameController.js
+++ b/Source/devtools/front_end/TimelineFrameController.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2012 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
@@ -36,7 +36,8 @@
  */
 WebInspector.TimelineFrameController = function(model, overviewPane, presentationModel)
 {
-    this._lastFrame = null;
+    this._lastMainThreadFrame = null;
+    this._lastBackgroundFrame = null;
     this._model = model;
     this._overviewPane = overviewPane;
     this._presentationModel = presentationModel;
@@ -56,19 +57,18 @@ WebInspector.TimelineFrameController.prototype = {
 
     _onRecordsCleared: function()
     {
-        this._lastFrame = null;
+        this._lastMainThreadFrame = null;
+        this._lastBackgroundFrame = null;
     },
 
     _addRecord: function(record)
     {
-        if (record.isBackground)
-            return;
         var records;
         var programRecord;
         if (record.type === WebInspector.TimelineModel.RecordType.Program) {
             programRecord = record;
-            if (this._lastFrame)
-                this._lastFrame.timeByCategory["other"] += WebInspector.TimelineModel.durationInSeconds(programRecord);
+            if (this._lastMainThreadFrame)
+                this._lastMainThreadFrame.timeByCategory["other"] += WebInspector.TimelineModel.durationInSeconds(programRecord);
             records = record["children"] || [];
         } else
             records = [record];
@@ -83,34 +83,44 @@ WebInspector.TimelineFrameController.prototype = {
     {
         var isFrameRecord = record.type === WebInspector.TimelineModel.RecordType.BeginFrame;
         var programTimeCarryover = isFrameRecord && programRecord ? WebInspector.TimelineModel.endTimeInSeconds(programRecord) - WebInspector.TimelineModel.startTimeInSeconds(record) : 0;
-        if (isFrameRecord && this._lastFrame)
-            this._flushFrame(record, programTimeCarryover);
-        else {
-            if (!this._lastFrame)
-                this._lastFrame = this._createFrame(record, programTimeCarryover);
-            if (!record.thread)
-                WebInspector.TimelineModel.aggregateTimeForRecord(this._lastFrame.timeByCategory, record);
-            var duration = WebInspector.TimelineModel.durationInSeconds(record);
-            this._lastFrame.cpuTime += duration;
-            this._lastFrame.timeByCategory["other"] -= duration;
+        var lastFrame = record.thread ? this._lastBackgroundFrame : this._lastMainThreadFrame;
+        if (isFrameRecord && lastFrame) {
+            this._flushFrame(lastFrame, record, programTimeCarryover);
+            lastFrame = this._createFrame(record, programTimeCarryover);
+        } else if (record.type === WebInspector.TimelineModel.RecordType.ActivateLayerTree) {
+            if (lastFrame)
+                lastFrame.mainThreadFrameId = record.data.id;
+        } else {
+            if (!lastFrame)
+                lastFrame = this._createFrame(record, programTimeCarryover);
+            if (!record.thread) {
+                WebInspector.TimelineModel.aggregateTimeForRecord(lastFrame.timeByCategory, record);
+                var duration = WebInspector.TimelineModel.durationInSeconds(record);
+                lastFrame.cpuTime += duration;
+                lastFrame.timeByCategory["other"] -= duration;
+            }
         }
+        if (record.thread)
+            this._lastBackgroundFrame = lastFrame;
+        else
+            this._lastMainThreadFrame = lastFrame;
     },
 
     /**
+     * @param {WebInspector.TimelineFrame} frame
      * @param {Object} record
      * @param {number} programTimeCarryover
      */
-    _flushFrame: function(record, programTimeCarryover)
+    _flushFrame: function(frame, record, programTimeCarryover)
     {
-        this._lastFrame.endTime = WebInspector.TimelineModel.startTimeInSeconds(record);
-        this._lastFrame.duration = this._lastFrame.endTime - this._lastFrame.startTime;
-        this._lastFrame.timeByCategory["other"] -= programTimeCarryover;
+        frame.endTime = WebInspector.TimelineModel.startTimeInSeconds(record);
+        frame.duration = frame.endTime - frame.startTime;
+        frame.timeByCategory["other"] -= programTimeCarryover;
         // Alternatively, we could compute CPU time as sum of all Program events.
         // This way it's a bit more flexible, as it works in case there's no program events.
-        this._lastFrame.cpuTime += this._lastFrame.timeByCategory["other"];
-        this._overviewPane.addFrame(this._lastFrame);
-        this._presentationModel.addFrame(this._lastFrame);
-        this._lastFrame = this._createFrame(record, programTimeCarryover);
+        frame.cpuTime += frame.timeByCategory["other"];
+        this._overviewPane.addFrame(frame);
+        this._presentationModel.addFrame(frame);
     },
 
     /**
@@ -123,6 +133,8 @@ WebInspector.TimelineFrameController.prototype = {
         frame.startTime = WebInspector.TimelineModel.startTimeInSeconds(record);
         frame.startTimeOffset = this._model.recordOffsetInSeconds(record);
         frame.timeByCategory["other"] = programTimeCarryover;
+        frame.isBackground = !!record.thread;
+        frame.id = record.data && record.data["id"];
         return frame;
     },
 
@@ -169,4 +181,6 @@ WebInspector.TimelineFrame = function()
 {
     this.timeByCategory = {};
     this.cpuTime = 0;
+    /** @type {string} */
+    this.mainThreadFrameId;
 }