Timeline: show impl-side frames on the Timeline overview

Source/devtools/front_end/TimelineFrameController.js

 /*
  * Copyright (C) 2012 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
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 18 matching lines @@
  */
 
 /**
  * @constructor
  * @param {WebInspector.TimelineModel} model
  * @param {WebInspector.TimelineOverviewPane} overviewPane
  * @param {WebInspector.TimelinePresentationModel} presentationModel
  */
 WebInspector.TimelineFrameController = function(model, overviewPane, presentationModel)
 {
-    this._lastFrame = null;
+    this._lastMainThreadFrame = null;
+    this._lastBackgroundFrame = null;
     this._model = model;
     this._overviewPane = overviewPane;
     this._presentationModel = presentationModel;
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordAdded, this._onRecordAdded, this);
     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._onRecordsCleared, this);
 
     var records = model.records;
     for (var i = 0; i < records.length; ++i)
         this._addRecord(records[i]);
 }
 
 WebInspector.TimelineFrameController.prototype = {
     _onRecordAdded: function(event)
     {
         this._addRecord(event.data);
     },
 
     _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];
         records.forEach(this._innerAddRecord.bind(this, programRecord));
     },
 
     /**
      * @param {Object} programRecord
      * @param {Object} record
      */
     _innerAddRecord: function(programRecord, record)
     {
         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 = this._lastFrameForRecord(record);
+        if (isFrameRecord && lastFrame) {
+            this._flushFrame(lastFrame, record, programTimeCarryover);
+            lastFrame = this._createFrame(record, programTimeCarryover);
+        } else if (record.type === WebInspector.TimelineModel.RecordType.CommitFrame) {
+            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 {Object} record
-     * @param {number} programTimeCarryover
      */
-    _flushFrame: function(record, programTimeCarryover)
+    _lastFrameForRecord: function(record)
     {
-        this._lastFrame.endTime = WebInspector.TimelineModel.startTimeInSeconds(record);
-        this._lastFrame.duration = this._lastFrame.endTime - this._lastFrame.startTime;
-        this._lastFrame.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);
+        return record.thread ? this._lastBackgroundFrame : this._lastMainThreadFrame;

[pfeldman, 2013/11/06 17:21:05]

inline

     },
 
     /**
+     * @param {WebInspector.TimelineFrame} frame
+     * @param {Object} record
+     * @param {number} programTimeCarryover
+     */
+    _flushFrame: function(frame, record, 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.
+        frame.cpuTime += frame.timeByCategory["other"];
+        this._overviewPane.addFrame(frame);
+        this._presentationModel.addFrame(frame);
+    },
+
+    /**
      * @param {Object} record
      * @param {number} programTimeCarryover
      */
     _createFrame: function(record, programTimeCarryover)
     {
         var frame = new WebInspector.TimelineFrame();
         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;
     },
 
     dispose: function()
     {
         this._model.removeEventListener(WebInspector.TimelineModel.Events.RecordAdded, this._onRecordAdded, this);
         this._model.removeEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._onRecordsCleared, this);
     }
 }
 
@@ skipping 27 matching lines @@
 }
 
 /**
  * @constructor
  */
 WebInspector.TimelineFrame = function()
 {
     this.timeByCategory = {};
     this.cpuTime = 0;
 }