Implement layout invalidation tracking in devtools

Source/devtools/front_end/timeline/TracingTimelineModel.js

Index: Source/devtools/front_end/timeline/TracingTimelineModel.js
diff --git a/Source/devtools/front_end/timeline/TracingTimelineModel.js b/Source/devtools/front_end/timeline/TracingTimelineModel.js
index 461ab7d5c5ba332ecfc2f0bff67c2b01baa068a1..854393eac57172c5abe889e2156ef64126c3b012 100644
--- a/Source/devtools/front_end/timeline/TracingTimelineModel.js
+++ b/Source/devtools/front_end/timeline/TracingTimelineModel.js
@@ -618,6 +618,7 @@ WebInspector.TracingTimelineModel.prototype = {
             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.
@@ -1197,6 +1198,25 @@ WebInspector.InvalidationTracker.prototype = {
     },
 
     /**
+     * @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)
@@ -1248,6 +1268,7 @@ WebInspector.InvalidationTracker.prototype = {
     {
         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;
     }