Timeline: fill frames according to CPU time spent per event category

Source/devtools/front_end/timeline/TimelineFrameModel.js

 /*
  * 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
  * 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 33 matching lines @@
     FrameAdded: "FrameAdded"
 }
 
 WebInspector.TimelineFrameModel._mainFrameMarkers = [
     WebInspector.TimelineModel.RecordType.ScheduleStyleRecalculation,
     WebInspector.TimelineModel.RecordType.InvalidateLayout,
     WebInspector.TimelineModel.RecordType.BeginFrame,
     WebInspector.TimelineModel.RecordType.ScrollLayer
 ];
 
+WebInspector.TimelineFrameModel._tracingMainFrameMarkers = [
+    WebInspector.TracingTimelineModel.RecordType.ScheduleStyleRecalculation,
+    WebInspector.TracingTimelineModel.RecordType.InvalidateLayout,
+    WebInspector.TracingTimelineModel.RecordType.BeginMainThreadFrame,
+    WebInspector.TracingTimelineModel.RecordType.ScrollLayer
+];
+
 WebInspector.TimelineFrameModel.prototype = {
     /**
      * @return {!Array.<!WebInspector.TimelineFrame>}
      */
     frames: function()
     {
         return this._frames;
     },
 
     /**
@@ skipping 105 matching lines @@
      */
     _addTraceEvent: function(event)
     {
         var eventNames = WebInspector.TracingTimelineModel.RecordType;
 
         if (event.name === eventNames.SetLayerTreeId) {
             if (this._sessionId === event.args["sessionId"])
                 this._layerTreeId = event.args["layerTreeId"];
             return;
         }
+        if (event.name === eventNames.TracingStartedInPage) {
+            this._mainThread = event.thread;
+            return;
+        }
+        if (event.thread === this._mainThread)
+            this._addMainThreadTraceEvent(event);
+        else
+            this._addBackgroundTraceEvent(event);
+    },
+
+    /**
+     * @param {!WebInspector.TracingModel.Event} event
+     */
+    _addBackgroundTraceEvent: function(event)
+    {
+        var eventNames = WebInspector.TracingTimelineModel.RecordType;
+
         if (event.phase === WebInspector.TracingModel.Phase.SnapshotObject && event.name === eventNames.LayerTreeHostImplSnapshot && parseInt(event.id, 0) === this._layerTreeId) {
             this.handleLayerTreeSnapshot(new WebInspector.DeferredTracingLayerTree(this.target(), event.args["snapshot"]["active_tree"]["root_layer"]));
             return;
         }
+        if (this._lastFrame && event.selfTime)
+            this._lastFrame._addTimeForCategory(WebInspector.TracingTimelineUIUtils.eventStyle(event).category.name, event.selfTime);
 
         if (event.args["layerTreeId"] !== this._layerTreeId)
             return;
 
         var timestamp = event.startTime;
         if (event.name === eventNames.BeginFrame)
             this.handleBeginFrame(timestamp);
         else if (event.name === eventNames.DrawFrame)
             this.handleDrawFrame(timestamp);
         else if (event.name === eventNames.ActivateLayerTree)
             this.handleActivateLayerTree();
         else if (event.name === eventNames.RequestMainThreadFrame)
             this.handleRequestMainThreadFrame();
-        else if (event.name === eventNames.CompositeLayers)
-            this.handleCompositeLayers();
-
-        // FIXME: we also need to process main thread events, so we can assign time spent by categories
-        // to frames. However, this requires that we can map trace event names to Timeline categories.
     },
 
     /**
+     * @param {!WebInspector.TracingModel.Event} event
+     */
+    _addMainThreadTraceEvent: function(event)
+    {
+        var eventNames = WebInspector.TracingTimelineModel.RecordType;
+        var timestamp = event.startTime;
+        var selfTime = event.selfTime || 0;
+
+        if (!this._hasThreadedCompositing) {
+            if (event.name === eventNames.BeginMainThreadFrame)
+                this._startMainThreadFrame(timestamp);
+            if (!this._lastFrame)
+                return;
+            if (!selfTime)
+                return;
+
+            var categoryName = WebInspector.TracingTimelineUIUtils.eventStyle(event).category.name;
+            this._lastFrame._addTimeForCategory(categoryName, selfTime);
+            return;
+        }
+
+        if (!this._aggregatedMainThreadWork && WebInspector.TimelineFrameModel._tracingMainFrameMarkers.indexOf(event.name) >= 0)
+            this._aggregatedMainThreadWork = {};
+        if (!this._aggregatedMainThreadWork)
+            return;
+
+        if (selfTime) {
+            var categoryName = WebInspector.TracingTimelineUIUtils.eventStyle(event).category.name;
+            this._aggregatedMainThreadWork[categoryName] = (this._aggregatedMainThreadWork[categoryName] || 0) + selfTime;
+        }
+        if (event.name === eventNames.CompositeLayers && event.args["layerTreeId"] === this._layerTreeId)
+            this.handleCompositeLayers();
+    },
+
+    /**
      * @param {number} startTime
      */
     handleBeginFrame: function(startTime)
     {
         if (!this._lastFrame)
             this._startBackgroundFrame(startTime);
     },
 
     /**
      * @param {number} startTime
@@ skipping 76 matching lines @@
         if (!this._hasThreadedCompositing) {
             if (record.type() === recordTypes.BeginFrame)
                 this._startMainThreadFrame(record.startTime());
 
             if (!this._lastFrame)
                 return;
 
             this._lastFrame._addTimeFromRecord(record);
 
             // Account for "other" time at the same time as the first child.
-            if (programRecord.children()[0] === record) {
-                this._deriveOtherTime(programRecord, this._lastFrame.timeByCategory);
-                this._lastFrame._updateCpuTime();
-            }
+            if (programRecord.children()[0] === record)
+                this._lastFrame._addTimeForCategory("other", this._deriveOtherTime(programRecord));
             return;
         }
 
         if (!this._aggregatedMainThreadWork)
             return;
 
         WebInspector.TimelineUIUtils.aggregateTimeForRecord(this._aggregatedMainThreadWork, record);
         if (programRecord.children()[0] === record)
-            this._deriveOtherTime(programRecord, this._aggregatedMainThreadWork);
+            this._aggregatedMainThreadWork["other"] = (this._aggregatedMainThreadWork["other"] || 0) + this._deriveOtherTime(programRecord);
 
         if (record.type() === recordTypes.CompositeLayers)
             this.handleCompositeLayers();
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} programRecord
-     * @param {!Object} timeByCategory
+     * @return {number}
      */
-    _deriveOtherTime: function(programRecord, timeByCategory)
+    _deriveOtherTime: function(programRecord)
     {
         var accounted = 0;
         for (var i = 0; i < programRecord.children().length; ++i)
             accounted += programRecord.children()[i].endTime() - programRecord.children()[i].startTime();
-        var otherTime = programRecord.endTime() - programRecord.startTime() - accounted;
-        timeByCategory["other"] = (timeByCategory["other"] || 0) + otherTime;
+        return programRecord.endTime() - programRecord.startTime() - accounted;
     },
 
     /**
      * @param {number} startTime
      */
     _startBackgroundFrame: function(startTime)
     {
         if (!this._hasThreadedCompositing) {
             this._lastFrame = null;
             this._hasThreadedCompositing = true;
@@ skipping 112 matching lines @@
         this.layerTree = layerTree;
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */
     _addTimeFromRecord: function(record)
     {
         if (!record.endTime())
             return;
-        WebInspector.TimelineUIUtils.aggregateTimeForRecord(this.timeByCategory, record);
-        this._updateCpuTime();
+        var timeByCategory = {};
+        WebInspector.TimelineUIUtils.aggregateTimeForRecord(timeByCategory, record);
+        this._addTimeForCategories(timeByCategory);
     },
 
     /**
      * @param {!Object} timeByCategory
      */
     _addTimeForCategories: function(timeByCategory)
     {
-        WebInspector.TimelineUIUtils.aggregateTimeByCategory(this.timeByCategory, timeByCategory);
-        this._updateCpuTime();
+        for (var category in timeByCategory)
+            this._addTimeForCategory(category, timeByCategory[category]);
     },
 
-    _updateCpuTime: function()
+    /**
+     * @param {string} category
+     * @param {number} time
+     */
+    _addTimeForCategory: function(category, time)
     {
-        this.cpuTime = 0;
-        for (var key in this.timeByCategory)
-            this.cpuTime += this.timeByCategory[key];
-    }
+        this.timeByCategory[category] = (this.timeByCategory[category] || 0) + time;
+        this.cpuTime += time;
+    },
 }