Implement invalidation tracking in devtools

Source/devtools/front_end/timeline/TracingTimelineModel.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @param {!WebInspector.TracingManager} tracingManager
  * @param {!WebInspector.TracingModel} tracingModel
  * @param {!WebInspector.TimelineModel.Filter} recordFilter
  * @extends {WebInspector.TimelineModel}
@@ skipping 29 matching lines @@
     UpdateLayer: "UpdateLayer",
     UpdateLayerTree: "UpdateLayerTree",
     PaintSetup: "PaintSetup",
     Paint: "Paint",
     PaintImage: "PaintImage",
     Rasterize: "Rasterize",
     RasterTask: "RasterTask",
     ScrollLayer: "ScrollLayer",
     CompositeLayers: "CompositeLayers",
 
+    StyleRecalcInvalidationTracking: "StyleRecalcInvalidationTracking",
+    LayoutInvalidationTracking: "LayoutInvalidationTracking",
+    LayerInvalidationTracking: "LayerInvalidationTracking",
+    PaintInvalidationTracking: "PaintInvalidationTracking",
+
     ParseHTML: "ParseHTML",
 
     TimerInstall: "TimerInstall",
     TimerRemove: "TimerRemove",
     TimerFire: "TimerFire",
 
     XHRReadyStateChange: "XHRReadyStateChange",
     XHRLoad: "XHRLoad",
     EvaluateScript: "EvaluateScript",
 
@@ skipping 71 matching lines @@
         {
             return "disabled-by-default-" + category;
         }
         var categoriesArray = [
             "-*",
             disabledByDefault("devtools.timeline"),
             disabledByDefault("devtools.timeline.frame"),
             WebInspector.TracingModel.ConsoleEventCategory
         ];
         if (captureCauses) {
-            categoriesArray.push(disabledByDefault("devtools.timeline.stack"));
+            categoriesArray = categoriesArray.concat([
+                disabledByDefault("devtools.timeline.stack"),
+                disabledByDefault("devtools.timeline.invalidationTracking")]);

[caseq, 2014/10/15 16:24:52]

make the latter conditional on
Runtime.experiments.isEnabled("timelineInvalidationTracking")?

[pdr., 2014/10/16 07:46:47]

Great catch. This was a bad merge on my part :(

             if (Runtime.experiments.isEnabled("timelineJSCPUProfile")) {
                 this._jsProfilerStarted = true;
                 this._currentTarget = WebInspector.context.flavor(WebInspector.Target);
                 this._configureCpuProfilerSamplingInterval();
                 this._currentTarget.profilerAgent().start();
             }
         }
         if (capturePictures) {
             categoriesArray = categoriesArray.concat([
                 disabledByDefault("devtools.timeline.layers"),
@@ skipping 316 matching lines @@
         if (record.type() === WebInspector.TracingTimelineModel.RecordType.GPUTask)
             this._gpuThreadTasks.push(record);
         this.dispatchEventToListeners(WebInspector.TimelineModel.Events.RecordAdded, record);
     },
 
     _resetProcessingState: function()
     {
         this._sendRequestEvents = {};
         this._timerEvents = {};
         this._requestAnimationFrameEvents = {};
+        this._invalidationTracker = new WebInspector.InvalidationTracker();
         this._layoutInvalidate = {};
         this._lastScheduleStyleRecalculation = {};
         this._webSocketCreateEvents = {};
         this._paintImageEventByPixelRefId = {};
         this._lastPaintForLayer = {};
         this._lastRecalculateStylesEvent = null;
         this._currentScriptEvent = null;
         this._eventStack = [];
     },
 
@@ skipping 96 matching lines @@
 
         case recordTypes.ScheduleStyleRecalculation:
             this._lastScheduleStyleRecalculation[event.args["frame"]] = event;
             break;
 
         case recordTypes.RecalculateStyles:
             event.initiator = this._lastScheduleStyleRecalculation[event.args["frame"]];
             this._lastRecalculateStylesEvent = event;
             break;
 
+        case recordTypes.StyleRecalcInvalidationTracking:
+            this._invalidationTracker.addInvalidation({
+                type: recordTypes.StyleRecalcInvalidationTracking,
+                frameId: event.args.data.frame,

[caseq, 2014/10/15 16:24:53]

here and below: we use object["field"] syntax unless object's type is declared /
known to the closure compiler, so these all should be something like
event.args["data"]["frame"].

+                nodeId: event.args.data.nodeId,
+                nodeName: event.args.data.nodeName,
+                reason: event.args.data.reason,
+                callstack: event.args.data.callstack
+            });
+            break;
+
+        case recordTypes.LayoutInvalidationTracking:
+            this._invalidationTracker.addInvalidation({
+                type: recordTypes.LayoutInvalidationTracking,
+                frameId: event.args.data.frame,
+                nodeId: event.args.data.nodeId,
+                nodeName: event.args.data.nodeName,
+                callstack: event.args.data.callstack
+            });
+            break;
+
+        case recordTypes.LayerInvalidationTracking:
+            this._invalidationTracker.addInvalidation({
+                type: recordTypes.LayerInvalidationTracking,
+                frameId: event.args.data.frame,
+                paintId: event.args.data.paintId,
+                reason: event.args.data.reason
+            });
+            break;
+
+        case recordTypes.PaintInvalidationTracking:
+            this._invalidationTracker.addInvalidation({
+                type: recordTypes.PaintInvalidationTracking,
+                frameId: event.args.data.frame,
+                nodeId: event.args.data.nodeId,
+                nodeName: event.args.data.nodeName,
+                paintId: event.args.data.paintId
+            });
+            break;
+
         case recordTypes.InvalidateLayout:
             // Consider style recalculation as a reason for layout invalidation,
             // but only if we had no earlier layout invalidation records.
             var layoutInitator = event;
             var frameId = event.args["frame"];
             if (!this._layoutInvalidate[frameId] && this._lastRecalculateStylesEvent && this._lastRecalculateStylesEvent.endTime >  event.startTime)
                 layoutInitator = this._lastRecalculateStylesEvent.initiator;
             this._layoutInvalidate[frameId] = layoutInitator;
             break;
 
@@ skipping 24 matching lines @@
         case recordTypes.FunctionCall:
             if (!this._currentScriptEvent)
                 this._currentScriptEvent = event;
             break;
 
         case recordTypes.SetLayerTreeId:
             this._inspectedTargetLayerTreeId = event.args["layerTreeId"];
             break;
 
         case recordTypes.Paint:
+            this._invalidationTracker.didPaint(event);
             event.highlightQuad = event.args["data"]["clip"];
             event.backendNodeId = event.args["data"]["nodeId"];
             var layerUpdateEvent = this._findAncestorEvent(recordTypes.UpdateLayer);
             if (!layerUpdateEvent || layerUpdateEvent.args["layerTreeId"] !== this._inspectedTargetLayerTreeId)
                 break;
             // Only keep layer paint events, skip paints for subframes that get painted to the same layer as parent.
             if (!event.args["data"]["layerId"])
                 break;
             this._lastPaintForLayer[layerUpdateEvent.args["layerId"]] = event;
             break;
@@ skipping 448 matching lines @@
      * @param {!WebInspector.ChunkedReader} reader
      */
     onChunkTransferred: function(reader) { },
 
     /**
      * @param {!WebInspector.ChunkedReader} reader
      * @param {!Event} event
      */
     onError: function(reader, event) { },
 }
+
+/**

[caseq, 2014/10/15 16:24:53]

@constructor

+ * Track invalidation events across frames.
+ */
+WebInspector.InvalidationTracker = function()

[caseq, 2014/10/15 16:24:53]

I wonder if we should make it a part of _processEvent logic -- we already have a
ton of similar tracking logic there and you may eventually even benefit from
sharing the state with other record types.

[pdr., 2014/10/16 07:46:48]

Would you mind if we punt on this for now? I'm not quite sure how adding
invalidations to layout/stylerecalc/updatelayers will work and having this off
to the side may make that easier (or harder, and I'll roll it all up into
_processEvent).

+{
+    this._invalidationEvents = [];
+    this._lastPaintWithLayer = undefined;
+    this._didPaint = false;
+}
+
+WebInspector.InvalidationTracker.prototype = {
+
+    addInvalidation: function(invalidation)

[caseq, 2014/10/15 16:24:53]

please annotate!

+    {
+        this._startNewFrameIfNeeded();
+        if (!invalidation.nodeId && !invalidation.paintId) {
+            console.error('Invalidation lacks node information.');

[caseq, 2014/10/15 16:24:53]

double quotes, please!

+            console.error(invalidation);
+        }
+
+        // Record the paintIds for style recalc or layout invalidations.
+        // FIXME: This O(n^2) loop could be optimized with a map.
+        if (invalidation.type == WebInspector.TracingTimelineModel.RecordType.PaintInvalidationTracking) {
+            this._invalidationEvents.forEach(function(invalidationToUpdate) {
+                if (invalidationToUpdate.nodeId != invalidation.nodeId)

[caseq, 2014/10/15 16:24:52]

!==

+                    return;
+                switch (invalidationToUpdate.type) {

[caseq, 2014/10/15 16:24:52]

Can we defer making it a "switch" till we have to and keep it as "if" yet (BTW,
switch turns out to be much slower than if last time we checked jsperf).

[pdr., 2014/10/16 07:46:48]

Looks like 'switch' and 'if/else' are the same these days:
http://jsperf.com/switch-vs-if-conditions

You're right that this would be cleaner with an 'if' though. Fixed, and cleaned
up the long lines with a 'recordTypes' variable.

+                case WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking:
+                    invalidationToUpdate.paintId = invalidation.paintId;
+                    break;
+                case WebInspector.TracingTimelineModel.RecordType.LayoutInvalidationTracking:
+                    invalidationToUpdate.paintId = invalidation.paintId;
+                    break;
+                }
+            });
+        } else {
+            this._invalidationEvents.push(invalidation);
+        }
+    },
+
+    didPaint: function(paintEvent)

[caseq, 2014/10/15 16:24:53]

please annotate.

+    {
+        this._didPaint = true;
+
+        // If a paint doesn't have a corresponding graphics layer id, it paints into it's parent so

[caseq, 2014/10/15 16:24:53]

s/it's/its/

[pdr., 2014/10/16 07:46:47]

Stupid English!

Fixed.

+        // add an effectivePaintId to these events.
+        // FIXME: The parent layer is assumed to be the last paint event that had a layerId set. Is that right?

[caseq, 2014/10/15 16:24:53]

Apparently yes, as we never have nested layer paints (so far :))

+        var layerId = paintEvent.args.data.layerId;

[caseq, 2014/10/15 16:24:53]

paintEvent.args["data"][layerId"]

+        if (layerId)
+            this._lastPaintWithLayer = paintEvent;
+
+        if (!this._lastPaintWithLayer) {
+            console.error("Failed to find the paint container for a paint event.");
+            return;
+        }
+
+        var effectivePaintId = this._lastPaintWithLayer.args.data.nodeId;
+        this._processPaint(paintEvent, effectivePaintId);
+    },
+
+    _processPaint: function(paintEvent, effectivePaintId)

[caseq, 2014/10/15 16:24:53]

inline into didPaint?

+    {
+        var frameId = paintEvent.args.data.frame;
+
+        this._invalidationEvents.forEach(function(invalidation) {
+            if (invalidation.paintId == effectivePaintId && invalidation.frameId == frameId) {

[caseq, 2014/10/15 16:24:52]

s/==/===/g

+                if (!paintEvent.invalidationTrackingEvents)
+                    paintEvent.invalidationTrackingEvents = [];
+                paintEvent.invalidationTrackingEvents.push(invalidation);
+            }
+        });
+    },
+
+    _startNewFrameIfNeeded: function()
+    {
+        if (!this._didPaint)
+            return;
+
+        // Prepare for the next frame.
+        this._invalidationEvents = [];

[caseq, 2014/10/15 16:24:52]

Looks like if we add new state variable, we'll be adding it both here and in the
constructor, so I would extract this into a method.

[pdr., 2014/10/16 07:46:48]

Great point. Factored out into _initializePerFrameState.

+        this._lastPaintWithLayer = undefined;
+        this._didPaint = false;
+    }
+}