Timeline: visually distinguish idle frames

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 191 matching lines @@
     {
         this._minimumRecordTime = Infinity;
         this._frames = [];
         this._frameById = {};
         this._lastFrame = null;
         this._lastLayerTree = null;
         this._hasThreadedCompositing = false;
         this._mainFrameCommitted = false;
         this._mainFrameRequested = false;
         this._framePendingCommit = null;
+        this._lastBeginFrame = null;

[alph, 2015/06/05 16:55:39]

Don't you need to reset _lastNeedsBeginFrame as well?

     },
 
     /**
      * @param {number} startTime
      */
     handleBeginFrame: function(startTime)
     {
         if (!this._lastFrame)
             this._startBackgroundFrame(startTime);
+        this._lastBeginFrame = startTime;
     },
 
     /**
      * @param {number} startTime
      */
     handleDrawFrame: function(startTime)
     {
         if (!this._lastFrame) {
             this._startBackgroundFrame(startTime);
             return;
         }
 
         // - if it wasn't drawn, it didn't happen!
         // - only show frames that either did not wait for the main thread frame or had one committed.
-        if (this._mainFrameCommitted || !this._mainFrameRequested)
+        if (this._mainFrameCommitted || !this._mainFrameRequested) {
+            if (this._lastNeedsBeginFrame) {
+                this._lastFrame.idle = true;
+                var idleTimeEnd = this._framePendingActivation ? this._framePendingActivation.triggerTime : (this._lastBeginFrame || this._lastNeedsBeginFrame);
+                this._startBackgroundFrame(idleTimeEnd);
+                if (this._framePendingActivation)
+                    this._commitPendingFrame();
+                this._lastNeedsBeginFrame = null;
+                this._lastBeginFrame = null;
+            }
             this._startBackgroundFrame(startTime);
+        }
         this._mainFrameCommitted = false;
     },
 
     handleActivateLayerTree: function()
     {
         if (!this._lastFrame)
             return;
-        if (this._framePendingActivation) {
-            this._lastFrame._addTimeForCategories(this._framePendingActivation.timeByCategory);
-            this._lastFrame.paints = this._framePendingActivation.paints;
-            this._lastFrame._mainFrameId = this._framePendingActivation.mainFrameId;
-            this._framePendingActivation = null;
-        }
+        if (this._framePendingActivation && !this._lastNeedsBeginFrame)
+            this._commitPendingFrame();
     },
 
     handleRequestMainThreadFrame: function()
     {
         if (!this._lastFrame)
             return;
         this._mainFrameRequested = true;
     },
 
     handleCompositeLayers: function()
     {
         if (!this._hasThreadedCompositing || !this._framePendingCommit)
             return;
         this._framePendingActivation = this._framePendingCommit;
         this._framePendingCommit = null;
         this._mainFrameRequested = false;
         this._mainFrameCommitted = true;
     },
 
     /**
      * @param {!WebInspector.DeferredLayerTree} layerTree
      */
     handleLayerTreeSnapshot: function(layerTree)
     {
         this._lastLayerTree = layerTree;
     },
 
     /**
      * @param {number} startTime
+     * @param {boolean} needsBeginFrame
+     */
+    handleNeedFrameChanged: function(startTime, needsBeginFrame)
+    {
+        if (needsBeginFrame)
+            this._lastNeedsBeginFrame = startTime;
+    },
+
+    /**
+     * @param {number} startTime
      */
     _startBackgroundFrame: function(startTime)
     {
         if (!this._hasThreadedCompositing) {
             this._lastFrame = null;
             this._hasThreadedCompositing = true;
         }
         if (this._lastFrame)
             this._flushFrame(this._lastFrame, startTime);
 
@@ skipping 18 matching lines @@
      */
     _flushFrame: function(frame, endTime)
     {
         frame._setLayerTree(this._lastLayerTree);
         frame._setEndTime(endTime);
         this._frames.push(frame);
         if (typeof frame._mainFrameId === "number")
             this._frameById[frame._mainFrameId] = frame;
     },
 
+    _commitPendingFrame: function()
+    {
+        this._lastFrame._addTimeForCategories(this._framePendingActivation.timeByCategory);
+        this._lastFrame.paints = this._framePendingActivation.paints;
+        this._lastFrame._mainFrameId = this._framePendingActivation.mainFrameId;
+        this._framePendingActivation = null;
+    },
+
     /**
      * @param {!Array.<string>} types
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {?WebInspector.TimelineModel.Record} record
      */
     _findRecordRecursively: function(types, record)
     {
         if (types.indexOf(record.type()) >= 0)
             return record;
         if (!record.children())
@@ skipping 86 matching lines @@
 
         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.NeedsBeginFrameChanged)
+            this.handleNeedFrameChanged(timestamp, event.args["data"] && event.args["data"]["needsBeginFrame"]);
     },
 
     /**
      * @param {!WebInspector.TracingModel.Event} event
      */
     _addMainThreadTraceEvent: function(event)
     {
         var eventNames = WebInspector.TimelineModel.RecordType;
         var timestamp = event.startTime;
         var selfTime = event.selfTime || 0;
 
         if (!this._hasThreadedCompositing) {
             if (event.name === eventNames.BeginMainThreadFrame)
                 this._startMainThreadFrame(timestamp, event.args["data"] && event.args["data"]["frameId"]);
             if (!this._lastFrame)
                 return;
             if (!selfTime)
                 return;
 
             var categoryName = WebInspector.TimelineUIUtils.eventStyle(event).category.name;
             this._lastFrame._addTimeForCategory(categoryName, selfTime);
             return;
         }
 
-        if (WebInspector.TracingModel.isTopLevelEvent(event))
+        if (WebInspector.TracingModel.isTopLevelEvent(event)) {
             this._currentTaskTimeByCategory = {};
+            this._lastTaskBeginTime = event.startTime;
+        }
         if (!this._framePendingCommit && WebInspector.TracingTimelineFrameModel._mainFrameMarkers.indexOf(event.name) >= 0)
-            this._framePendingCommit = new WebInspector.PendingFrame(this._currentTaskTimeByCategory);
+            this._framePendingCommit = new WebInspector.PendingFrame(this._lastTaskBeginTime, this._currentTaskTimeByCategory);
         if (!this._framePendingCommit) {
             this._addTimeForCategory(this._currentTaskTimeByCategory, event);
             return;
         }
         this._addTimeForCategory(this._framePendingCommit.timeByCategory, event);
 
         if (event.name === eventNames.BeginMainThreadFrame && event.args["data"] && event.args["data"]["frameId"])
             this._framePendingCommit.mainFrameId = event.args["data"]["frameId"];
         if (event.name === eventNames.Paint && event.args["data"]["layerId"] && event.picture && this._target)
             this._framePendingCommit.paints.push(new WebInspector.LayerPaintEvent(event, this._target));
@@ skipping 64 matching lines @@
  * @param {number} startTimeOffset
  */
 WebInspector.TimelineFrame = function(startTime, startTimeOffset)
 {
     this.startTime = startTime;
     this.startTimeOffset = startTimeOffset;
     this.endTime = this.startTime;
     this.duration = 0;
     this.timeByCategory = {};
     this.cpuTime = 0;
+    this.idle = false;
     /** @type {?WebInspector.DeferredLayerTree} */
     this.layerTree = null;
     /** @type {number|undefined} */
     this._mainFrameId = undefined;
 }
 
 WebInspector.TimelineFrame.prototype = {
     /**
      * @param {number} endTime
      */
@@ skipping 96 matching lines @@
                 callback(null, null);
                 return;
             }
             WebInspector.PaintProfilerSnapshot.load(this._target, picture, callback.bind(null, rect));
         }
     }
 };
 
 /**
  * @constructor
+ * @param {number} triggerTime
  * @param {!Object.<string, number>} timeByCategory
  */
-WebInspector.PendingFrame = function(timeByCategory)
+WebInspector.PendingFrame = function(triggerTime, timeByCategory)
 {
     /** @type {!Object.<string, number>} */
     this.timeByCategory = timeByCategory;
     /** @type {!Array.<!WebInspector.LayerPaintEvent>} */
     this.paints = [];
     /** @type {number|undefined} */
     this.mainFrameId = undefined;
+    this.triggerTime = triggerTime;
 }