[ Do not submit ] Prototype for invalidation analysis

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.TracingModel} tracingModel
  * @param {!WebInspector.TimelineModel.Filter} recordFilter
  * @extends {WebInspector.TimelineModel}
  */
@@ skipping 13 matching lines @@
     EventDispatch: "EventDispatch",
 
     GPUTask: "GPUTask",
 
     RequestMainThreadFrame: "RequestMainThreadFrame",
     BeginFrame: "BeginFrame",
     BeginMainThreadFrame: "BeginMainThreadFrame",
     ActivateLayerTree: "ActivateLayerTree",
     DrawFrame: "DrawFrame",
     ScheduleStyleRecalculation: "ScheduleStyleRecalculation",
+    Invalidation: "Invalidation",
     RecalculateStyles: "RecalculateStyles",
     InvalidateLayout: "InvalidateLayout",
     Layout: "Layout",
     UpdateLayer: "UpdateLayer",
     UpdateLayerTree: "UpdateLayerTree",
     PaintSetup: "PaintSetup",
     Paint: "Paint",
     PaintImage: "PaintImage",
     Rasterize: "Rasterize",
     RasterTask: "RasterTask",
@@ skipping 87 matching lines @@
                 this._configureCpuProfilerSamplingInterval();
                 this._currentTarget.profilerAgent().start();
             }
         }
         if (capturePictures) {
             categoriesArray = categoriesArray.concat([
                 disabledByDefault("devtools.timeline.layers"),
                 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);
     },
 
     stopRecording: function()
     {
         this._stopCallbackBarrier = new CallbackBarrier();
         if (this._jsProfilerStarted) {
             this._currentTarget.profilerAgent().stop(this._stopCallbackBarrier.createCallback(this._didStopRecordingJSSamples.bind(this)));
             this._jsProfilerStarted = false;
@@ skipping 208 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._invalidations = {};
         this._layoutInvalidate = {};
         this._lastScheduleStyleRecalculation = {};
         this._webSocketCreateEvents = {};
         this._paintImageEventByPixelRefId = {};
         this._lastPaintForLayer = {};
         this._lastRecalculateStylesEvent = null;
         this._currentScriptEvent = null;
         this._eventStack = [];
     },
 
@@ skipping 90 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.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.
             var layoutInitator = event;
             var frameId = event.args.frame;
             if (!this._layoutInvalidate[frameId] && this._lastRecalculateStylesEvent && this._lastRecalculateStylesEvent.endTime >  event.startTime)
                 layoutInitator = this._lastRecalculateStylesEvent.initiator;

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

This line is interesting. Looks like they are already doing something similar?

             this._layoutInvalidate[frameId] = layoutInitator;
             break;
 
         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;
 
         case recordTypes.WebSocketCreate:
             this._webSocketCreateEvents[event.args.data["identifier"]] = event;
             break;
 
         case recordTypes.WebSocketSendHandshakeRequest:
         case recordTypes.WebSocketReceiveHandshakeResponse:
@@ skipping 490 matching lines @@
     },
 
     _didWriteNextChunk: function(stream)
     {
         if (this._recordIndex === this._payloads.length)
             stream.close();
         else
             this._writeNextChunk(stream);
     }
 }