[ Do not submit ] Prototype for invalidation analysis

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 dc5c411333ae6b44c981c055bc47641709e5e004..353fea734dc4d3b1cc2dc557b5938e543b006fd4 100644
--- a/Source/devtools/front_end/timeline/TracingTimelineModel.js
+++ b/Source/devtools/front_end/timeline/TracingTimelineModel.js
@@ -31,6 +31,7 @@ WebInspector.TracingTimelineModel.RecordType = {
     ActivateLayerTree: "ActivateLayerTree",
     DrawFrame: "DrawFrame",
     ScheduleStyleRecalculation: "ScheduleStyleRecalculation",
+    Invalidation: "Invalidation",
     RecalculateStyles: "RecalculateStyles",
     InvalidateLayout: "InvalidateLayout",
     Layout: "Layout",
@@ -138,6 +139,8 @@ WebInspector.TracingTimelineModel.prototype = {
                 disabledByDefault("devtools.timeline.picture"),
                 disabledByDefault("blink.graphics_context_annotations")]);
         }
+        // FIXME: Do not always enable this expensive category for invalidations.
+        categoriesArray.push(disabledByDefault("devtools.timeline.invalidations"));
         var categories = categoriesArray.join(",");
         this._startRecordingWithCategories(categories);
     },
@@ -366,6 +369,7 @@ WebInspector.TracingTimelineModel.prototype = {
         this._sendRequestEvents = {};
         this._timerEvents = {};
         this._requestAnimationFrameEvents = {};
+        this._invalidations = {};
         this._layoutInvalidate = {};
         this._lastScheduleStyleRecalculation = {};
         this._webSocketCreateEvents = {};
@@ -476,6 +480,19 @@ WebInspector.TracingTimelineModel.prototype = {
             this._lastRecalculateStylesEvent = event;
             break;
 
+        case recordTypes.Invalidation:
+            var layoutInitator = event;
+            var frameId = event.args.data.frame;
+            var rootNode = event.args.data.root_node;
+            var styleChange = event.args.data.styleChange;
+
+            var invalidationString = rootNode + " was invalidated with " + styleChange;
+            if (this._invalidations[frameId] === undefined)
+                this._invalidations[frameId] = [invalidationString];
+            else
+                this._invalidations[frameId].push(invalidationString);
+            break;
+
         case recordTypes.InvalidateLayout:
             // Consider style recalculation as a reason for layout invalidation,
             // but only if we had no earlier layout invalidation records.
@@ -489,9 +506,11 @@ WebInspector.TracingTimelineModel.prototype = {
         case recordTypes.Layout:
             var frameId = event.args["beginData"]["frame"];
             event.initiator = this._layoutInvalidate[frameId];
+            event.invalidations = this._invalidations[frameId] ? this._invalidations[frameId].join('<br>') : 'No invalidations';

[kouhei (in TOK), 2014/08/13 16:32:14]

I'm wondering how well we should track the flow of invalidation events. I'm not
yet sure.

Is this timeline approach enough for most purposes? This approach is very
simple, but if tons of style recalc happen at the same frame (frame as in fps),
it would be impossible to query "what javascript line triggered this specific
invalidationRect". Supporting this kinds of query may significantly save time
minimizing repaint storm bugs, but it may be obvious from the node it touched.

If we track NodeId, RenderObjectId, {Render,Graphics,cc::} layer Id in the
invalidation trace events, we should be able to reconstruct the whole
invalidation flow accurately.

I guess we can do this incrementally and delay decision. These events are only
used by us and devtools UI lives in the same repo, it would not be so hard to
change the event data structure.

I'll use this patch locally and try it on minimizing bugs so we can find real
features we need.

             event.backendNodeId = event.args["endData"]["rootNode"];
             event.highlightQuad =  event.args["endData"]["root"];
             this._layoutInvalidate[frameId] = null;
+            this._invalidations[frameId] = undefined;
             if (this._currentScriptEvent)
                 event.warning = WebInspector.UIString("Forced synchronous layout is a possible performance bottleneck.");
             break;