Implement layout 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 600 matching lines @@
             // 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;
 
         case recordTypes.Layout:
+            this._invalidationTracker.didLayout(event);
             var frameId = event.args["beginData"]["frame"];
             event.initiator = this._layoutInvalidate[frameId];
             // In case we have no closing Layout event, endData is not available.
             if (event.args["endData"]) {
                 event.backendNodeId = event.args["endData"]["rootNode"];
                 event.highlightQuad =  event.args["endData"]["root"];
             }
             this._layoutInvalidate[frameId] = null;
             if (this._currentScriptEvent)
                 event.warning = WebInspector.UIString("Forced synchronous layout is a possible performance bottleneck.");
@@ skipping 559 matching lines @@
             if (invalidation.type !== WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking)
                 continue;
             if (invalidation.frameId === recalcFrameId)
                 this._addInvalidationTrackingEvent(styleRecalcEvent, invalidation);
         }
 
         this._lastStyleRecalcEventIndex = invalidationCount;
     },
 
     /**
+     * @param {!WebInspector.TracingModel.Event} layoutEvent
+     */
+    didLayout: function(layoutEvent)

[kouhei (in TOK), 2014/10/23 04:48:38]

I think we should share the logic here with didRecalcStyle. :)

[pdr., 2014/10/23 05:09:44]

I thought the same but it feels a little overengineered to extract out the
common functionality for just these two cases. For example, the frameIds are
accessed differently and we don't have a map from {RecalculateStyles,Layout}
events to {StyleRecalc,Layout}InvalidationTracking. Would you mind if we wait on
this a bit to see how the (very similar) didUpdateLayer function works?

+    {
+        var layoutFrameId = layoutEvent.args["beginData"]["frame"];
+        var index = this._lastLayoutEventIndex;
+        var invalidationCount = this._invalidationEvents.length;
+        for (; index < invalidationCount; index++) {
+            var invalidation = this._invalidationEvents[index];
+            if (invalidation.type !== WebInspector.TracingTimelineModel.RecordType.LayoutInvalidationTracking)
+                continue;
+            if (invalidation.frameId === layoutFrameId)
+                this._addInvalidationTrackingEvent(layoutEvent, invalidation);
+        }
+
+        this._lastLayoutEventIndex = invalidationCount;
+    },
+
+    /**
      * @param {!WebInspector.TracingModel.Event} paintEvent
      */
     didPaint: function(paintEvent)
     {
         this._didPaint = true;
 
         // If a paint doesn't have a corresponding graphics layer id, it paints
         // into its parent so add an effectivePaintId to these events.
         var layerId = paintEvent.args["data"]["layerId"];
         if (layerId)
@@ skipping 31 matching lines @@
         if (!this._didPaint)
             return;
 
         this._initializePerFrameState();
     },
 
     _initializePerFrameState: function()
     {
         this._invalidationEvents = [];
         this._lastStyleRecalcEventIndex = 0;
+        this._lastLayoutEventIndex = 0;

[kouhei (in TOK), 2014/10/23 04:48:38]

Perhaps make this a map? this._lastEventIndex[StyleRecalc/Layout]

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