RPP: Track invalidations by frame ID.

And rename UpdateLayoutTree to RecalcStyle for usability.

This shouldn't have user-facing changes; it lays groundwork for
logic fixes.

Bug: 444481354
Change-Id: I2fcecaa318585f09d7bc0f4ef600dbd84295090d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6917594
Commit-Queue: Connor Clark <cjamcl@chromium.org>
Reviewed-by: Connor Clark <cjamcl@chromium.org>
Auto-Submit: Paul Irish <paulirish@chromium.org>

Author: paulirish

front_end/models/trace/extras/StackTraceForEvent.test.ts

@@ -268,8 +268,8 @@ describeWithEnvironment('StackTraceForTraceEvent', function() {
     profileCall1.callFrame.lineNumber = 0;
     profileCall2.callFrame.columnNumber = 0;
     profileCall2.callFrame.lineNumber = 0;
-    const traceEvent = makeCompleteEvent(Trace.Types.Events.Name.UPDATE_LAYOUT_TREE, 100, 10, '', pid, tid) as
-        Trace.Types.Events.UpdateLayoutTree;
+    const traceEvent = makeCompleteEvent(Trace.Types.Events.Name.RECALC_STYLE, 100, 10, '', pid, tid) as
+        Trace.Types.Events.RecalcStyle;
     const payloadCallStack = [
       {columnNumber: payloadColumnNumber, functionName: 'bar', lineNumber: payloadLineNumber, scriptId: '115', url: ''},
       {columnNumber: payloadColumnNumber, functionName: 'foo', lineNumber: payloadLineNumber, scriptId: '115', url: ''},

front_end/models/trace/handlers/InitiatorsHandler.test.ts

@@ -12,27 +12,27 @@ describeWithEnvironment('InitiatorsHandler', () => {
     Trace.Handlers.ModelHandlers.Initiators.reset();
   });
 
-  it('for an UpdateLayoutTree event it sets the initiator to the previous ScheduledStyleRecalculation event',
+  it('for an RecalcStyle event it sets the initiator to the previous ScheduledStyleRecalculation event',
      async function() {
        const traceEvents = await TraceLoader.rawEvents(this, 'web-dev-with-commit.json.gz');
        for (const event of traceEvents) {
          Trace.Handlers.ModelHandlers.Initiators.handleEvent(event);
        }
        await Trace.Handlers.ModelHandlers.Initiators.finalize();
        const {eventToInitiator} = Trace.Handlers.ModelHandlers.Initiators.data();
-       const updateLayoutTreeEvent = traceEvents.find(event => {
-         return Trace.Types.Events.isUpdateLayoutTree(event) && event.ts === 122411039965;
+       const recalcStyleEvent = traceEvents.find(event => {
+         return Trace.Types.Events.isRecalcStyle(event) && event.ts === 122411039965;
        });
-       if (!updateLayoutTreeEvent || !Trace.Types.Events.isUpdateLayoutTree(updateLayoutTreeEvent)) {
+       if (!recalcStyleEvent || !Trace.Types.Events.isRecalcStyle(recalcStyleEvent)) {
          throw new Error('Could not find layout tree event.');
        }
-       const initiator = eventToInitiator.get(updateLayoutTreeEvent);
+       const initiator = eventToInitiator.get(recalcStyleEvent);
        if (!initiator) {
-         throw new Error('Did not find expected initiator for updateLayoutTreeEvent');
+         throw new Error('Did not find expected initiator for recalcStyleEvent');
        }
        assert.isTrue(Trace.Types.Events.isScheduleStyleRecalculation(initiator));
-       assert.strictEqual(updateLayoutTreeEvent.args.beginData?.frame, '25D2F12F1818C70B5BD4325CC9ACD8FF');
-       assert.strictEqual(updateLayoutTreeEvent.args.beginData?.frame, initiator.args?.data?.frame);
+       assert.strictEqual(recalcStyleEvent.args.beginData?.frame, '25D2F12F1818C70B5BD4325CC9ACD8FF');
+       assert.strictEqual(recalcStyleEvent.args.beginData?.frame, initiator.args?.data?.frame);
      });
 
   it('for a Layout event it sets the initiator to the last InvalidateLayout event on that frame', async function() {

front_end/models/trace/handlers/InitiatorsHandler.ts

@@ -17,11 +17,7 @@ let lastScheduleStyleRecalcByFrame = new Map<string, Types.Events.ScheduleStyleR
 // invalidated.
 let lastInvalidationEventForFrame = new Map<string, Types.Events.Event>();
 
-// Important: although the event is called UpdateLayoutTree, in the UI we
-// present these to the user as "Recalculate Style". So don't get confused!
-// These are the same - just UpdateLayoutTree is what the event from Chromium
-// is called.
-let lastUpdateLayoutTreeByFrame = new Map<string, Types.Events.UpdateLayoutTree>();
+let lastRecalcByFrame = new Map<string, Types.Events.RecalcStyle>();
 
 // These two maps store the same data but in different directions.
 // For a given event, tell me what its initiator was. An event can only have one initiator.
@@ -39,7 +35,7 @@ let schedulePostTaskCallbackEventsById = new Map<number, Types.Events.SchedulePo
 export function reset(): void {
   lastScheduleStyleRecalcByFrame = new Map();
   lastInvalidationEventForFrame = new Map();
-  lastUpdateLayoutTreeByFrame = new Map();
+  lastRecalcByFrame = new Map();
   timerInstallEventsById = new Map();
   eventToInitiatorMap = new Map();
   initiatorToEventsMap = new Map();
@@ -68,14 +64,11 @@ function storeInitiator(data: {initiator: Types.Events.Event, event: Types.Event
 export function handleEvent(event: Types.Events.Event): void {
   if (Types.Events.isScheduleStyleRecalculation(event)) {
     lastScheduleStyleRecalcByFrame.set(event.args.data.frame, event);
-  } else if (Types.Events.isUpdateLayoutTree(event)) {
-    // IMPORTANT: although the trace event is called UpdateLayoutTree, this
-    // represents a Styles Recalculation. This event in the timeline is shown to
-    // the user as "Recalculate Styles."
+  } else if (Types.Events.isRecalcStyle(event)) {
     if (event.args.beginData) {
-      // Store the last UpdateLayout event: we use this when we see an
+      // Store the last RecalcStyle event: we use this when we see an
       // InvalidateLayout and try to figure out its initiator.
-      lastUpdateLayoutTreeByFrame.set(event.args.beginData.frame, event);
+      lastRecalcByFrame.set(event.args.beginData.frame, event);
 
       // If this frame has seen a ScheduleStyleRecalc event, then that event is
       // considered to be the initiator of this StylesRecalc.
@@ -96,17 +89,17 @@ export function handleEvent(event: Types.Events.Event): void {
     // cause of this layout invalidation.
     if (!lastInvalidationEventForFrame.has(event.args.data.frame)) {
       // 1. If we have not had an invalidation event for this frame
-      // 2. AND we have had an UpdateLayoutTree for this frame
-      // 3. AND the UpdateLayoutTree event ended AFTER the InvalidateLayout startTime
-      // 4. AND we have an initiator for the UpdateLayoutTree event
-      // 5. Then we set the last invalidation event for this frame to be the UpdateLayoutTree's initiator.
-      const lastUpdateLayoutTreeForFrame = lastUpdateLayoutTreeByFrame.get(event.args.data.frame);
-      if (lastUpdateLayoutTreeForFrame) {
-        const {endTime} = Helpers.Timing.eventTimingsMicroSeconds(lastUpdateLayoutTreeForFrame);
-        const initiatorOfUpdateLayout = eventToInitiatorMap.get(lastUpdateLayoutTreeForFrame);
-
-        if (initiatorOfUpdateLayout && endTime && endTime > event.ts) {
-          invalidationInitiator = initiatorOfUpdateLayout;
+      // 2. AND we have had an RecalcStyle for this frame
+      // 3. AND the RecalcStyle event ended AFTER the InvalidateLayout startTime
+      // 4. AND we have an initiator for the RecalcStyle event
+      // 5. Then we set the last invalidation event for this frame to be the RecalcStyle's initiator.
+      const lastRecalcStyleForFrame = lastRecalcByFrame.get(event.args.data.frame);
+      if (lastRecalcStyleForFrame) {
+        const {endTime} = Helpers.Timing.eventTimingsMicroSeconds(lastRecalcStyleForFrame);
+        const initiatorOfRecalcStyle = eventToInitiatorMap.get(lastRecalcStyleForFrame);
+
+        if (initiatorOfRecalcStyle && endTime && endTime > event.ts) {
+          invalidationInitiator = initiatorOfRecalcStyle;
         }
       }
     }

front_end/models/trace/handlers/InvalidationsHandler.test.ts

@@ -33,19 +33,17 @@ describe('InvalidationsHandler', () => {
     }
     await Trace.Handlers.ModelHandlers.Invalidations.finalize();
     const data = Trace.Handlers.ModelHandlers.Invalidations.data();
-    // Find the Layout event that we want to test - we are testing
-    // the layout that happens after button click that happened in
-    // the trace.
-    const updateLayoutTreeEvent = events.find(event => {
-      return Trace.Types.Events.isUpdateLayoutTree(event) &&
+    // Find the recalc event that we want to test - we are testing the recalc that happens after button click that
+    // happened in the trace.
+    const recalcStyleEvent = events.find(event => {
+      return Trace.Types.Events.isRecalcStyle(event) &&
           event.args.beginData?.stackTrace?.[0].functionName === 'testFuncs.changeAttributeAndDisplay';
     });
-    if (!updateLayoutTreeEvent) {
-      throw new Error('Could not find UpdateLayoutTree event.');
+    if (!recalcStyleEvent) {
+      throw new Error('Could not find RecalcStyle event.');
     }
 
-    const invalidations =
-        data.invalidationsForEvent.get(updateLayoutTreeEvent)?.map(invalidationDataForTestAssertion) ?? [];
+    const invalidations = data.invalidationsForEvent.get(recalcStyleEvent)?.map(invalidationDataForTestAssertion) ?? [];
 
     assert.deepEqual(invalidations, [
       {
@@ -168,7 +166,7 @@ describe('InvalidationsHandler', () => {
     await Trace.Handlers.ModelHandlers.Invalidations.finalize();
     const data = Trace.Handlers.ModelHandlers.Invalidations.data();
 
-    // Find the UpdateLayoutEvent that had 26 invalidations
+    // Find the RecalcStyleEvent that had 26 invalidations
     const layoutEvent = Array.from(data.invalidationCountForEvent.entries())
                             .filter(entry => {
                               const [, count] = entry;

front_end/models/trace/handlers/InvalidationsHandler.ts

@@ -4,41 +4,68 @@
 
 import * as Types from '../types/types.js';
 
-let invalidationsForEvent = new Map<Types.Events.Event, Types.Events.InvalidationTrackingEvent[]>();
-let invalidationCountForEvent = new Map<Types.Events.Event, number>();
-
-let lastRecalcStyleEvent: Types.Events.UpdateLayoutTree|null = null;
-
-// Used to track paints so we track invalidations correctly per paint.
-let hasPainted = false;
+/**
+ * @file Associates invalidation to recalc/layout events; mostly used in "invalidation tracking" experiment.
+ * "Invalidations" == "mutations" == "damage".
+ * A DOM change that means we need to recompute style or layout is an invalidation that's tracked here.
+ * If the experiment `timeline-invalidation-tracking` is enabled, the `disabledByDefault('devtools.timeline.invalidationTracking')` trace category is enabled, which contains most of these events.
+ */
+
+interface InvalidationsStatePerFrame {
+  invalidationsForEvent: Map<Types.Events.Event, Types.Events.InvalidationTrackingEvent[]>;
+  invalidationCountForEvent: Map<Types.Events.Event, number>;
+  lastRecalcStyleEvent: Types.Events.RecalcStyle|null;
+  hasPainted: boolean;
+  pendingInvalidations: Types.Events.InvalidationTrackingEvent[];
+}
 
-let allInvalidationTrackingEvents: Types.Events.InvalidationTrackingEvent[] = [];
+const frameStateByFrame = new Map<string, InvalidationsStatePerFrame>();
+let maxInvalidationsPerEvent: number|null = null;
 
 export function reset(): void {
-  invalidationsForEvent = new Map();
-  invalidationCountForEvent = new Map();
-  lastRecalcStyleEvent = null;
-  allInvalidationTrackingEvents = [];
-  hasPainted = false;
+  frameStateByFrame.clear();
   maxInvalidationsPerEvent = null;
 }
 
-let maxInvalidationsPerEvent: number|null = null;
 export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
   maxInvalidationsPerEvent = userConfig.maxInvalidationEventsPerEvent;
 }
 
-function addInvalidationToEvent(event: Types.Events.Event, invalidation: Types.Events.InvalidationTrackingEvent): void {
-  const existingInvalidations = invalidationsForEvent.get(event) || [];
+function getState(frameId: string): InvalidationsStatePerFrame {
+  let frameState = frameStateByFrame.get(frameId);
+  if (!frameState) {
+    frameState = {
+      invalidationsForEvent: new Map(),
+      invalidationCountForEvent: new Map(),
+      lastRecalcStyleEvent: null,
+      pendingInvalidations: [],
+      hasPainted: false,
+    };
+    frameStateByFrame.set(frameId, frameState);
+  }
+  return frameState;
+}
+
+function getFrameId(event: Types.Events.Event): string|null {
+  if (Types.Events.isRecalcStyle(event) || Types.Events.isLayout(event)) {
+    return event.args.beginData?.frame ?? null;
+  }
+  return event.args?.data?.frame ?? null;
+}
+
+function addInvalidationToEvent(
+    frameState: InvalidationsStatePerFrame, event: Types.Events.Event,
+    invalidation: Types.Events.InvalidationTrackingEvent): void {
+  const existingInvalidations = frameState.invalidationsForEvent.get(event) || [];
   existingInvalidations.push(invalidation);
 
   if (maxInvalidationsPerEvent !== null && existingInvalidations.length > maxInvalidationsPerEvent) {
     existingInvalidations.shift();
   }
-  invalidationsForEvent.set(event, existingInvalidations);
+  frameState.invalidationsForEvent.set(event, existingInvalidations);
 
-  const count = invalidationCountForEvent.get(event) ?? 0;
-  invalidationCountForEvent.set(event, count + 1);
+  const count = frameState.invalidationCountForEvent.get(event) ?? 0;
+  frameState.invalidationCountForEvent.set(event, count + 1);
 }
 
 export function handleEvent(event: Types.Events.Event): void {
@@ -49,72 +76,68 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
 
-  if (Types.Events.isUpdateLayoutTree(event)) {
-    lastRecalcStyleEvent = event;
+  const frameId = getFrameId(event);
+  if (!frameId) {
+    return;
+  }
+  const thisFrame = getState(frameId);
+
+  if (Types.Events.isRecalcStyle(event)) {
+    thisFrame.lastRecalcStyleEvent = event;
 
     // Associate any prior invalidations with this recalc event.
-    for (const invalidation of allInvalidationTrackingEvents) {
+    for (const invalidation of thisFrame.pendingInvalidations) {
       if (Types.Events.isLayoutInvalidationTracking(invalidation)) {
         // LayoutInvalidation events cannot be associated with a LayoutTree
         // event.
         continue;
       }
-
-      const recalcFrameId = lastRecalcStyleEvent.args.beginData?.frame;
-
-      if (recalcFrameId && invalidation.args.data.frame === recalcFrameId) {
-        addInvalidationToEvent(event, invalidation);
-      }
+      addInvalidationToEvent(thisFrame, event, invalidation);
     }
     return;
   }
 
   if (Types.Events.isInvalidationTracking(event)) {
-    if (hasPainted) {
+    if (thisFrame.hasPainted) {
       // If we have painted, then we can clear out the list of all existing
       // invalidations, as we cannot associate them across frames.
-      allInvalidationTrackingEvents.length = 0;
-      lastRecalcStyleEvent = null;
-      hasPainted = false;
+      thisFrame.pendingInvalidations.length = 0;
+      thisFrame.lastRecalcStyleEvent = null;
+      thisFrame.hasPainted = false;
     }
 
-    // Style invalidation events can occur before and during recalc styles. When we get a recalc style event (aka UpdateLayoutTree), we check and associate any prior invalidations with it.
-    // But any invalidations that occur during a UpdateLayoutTree
+    // Style invalidation events can occur before and during recalc styles. When we get a recalc style event, we check and associate any prior invalidations with it.
+    // But any invalidations that occur during a RecalcStyle
     // event would be reported in trace events after. So each time we get an
     // invalidation that might be due to a style recalc, we check if the
     // timings overlap and if so associate them.
-    if (lastRecalcStyleEvent &&
+    if (thisFrame.lastRecalcStyleEvent &&
         (Types.Events.isScheduleStyleInvalidationTracking(event) ||
          Types.Events.isStyleRecalcInvalidationTracking(event) ||
          Types.Events.isStyleInvalidatorInvalidationTracking(event))) {
-      const recalcEndTime = lastRecalcStyleEvent.ts + (lastRecalcStyleEvent.dur || 0);
-      if (event.ts >= lastRecalcStyleEvent.ts && event.ts <= recalcEndTime &&
-          lastRecalcStyleEvent.args.beginData?.frame === event.args.data.frame) {
-        addInvalidationToEvent(lastRecalcStyleEvent, event);
+      const recalcLastRecalc = thisFrame.lastRecalcStyleEvent;
+      const recalcEndTime = recalcLastRecalc.ts + (recalcLastRecalc.dur || 0);
+      if (event.ts >= recalcLastRecalc.ts && event.ts <= recalcEndTime) {
+        addInvalidationToEvent(thisFrame, recalcLastRecalc, event);
       }
     }
 
-    allInvalidationTrackingEvents.push(event);
+    thisFrame.pendingInvalidations.push(event);
     return;
   }
 
   if (Types.Events.isPaint(event)) {
-    // Used to ensure that we do not create relationships across frames.
-    hasPainted = true;
+    thisFrame.hasPainted = true;
     return;
   }
 
   if (Types.Events.isLayout(event)) {
-    const layoutFrame = event.args.beginData.frame;
-    for (const invalidation of allInvalidationTrackingEvents) {
+    for (const invalidation of thisFrame.pendingInvalidations) {
       // The only invalidations that cause a Layout are LayoutInvalidations :)
       if (!Types.Events.isLayoutInvalidationTracking(invalidation)) {
         continue;
       }
-
-      if (invalidation.args.data.frame === layoutFrame) {
-        addInvalidationToEvent(event, invalidation);
-      }
+      addInvalidationToEvent(thisFrame, event, invalidation);
     }
   }
 }
@@ -128,6 +151,16 @@ interface InvalidationsData {
 }
 
 export function data(): InvalidationsData {
+  const invalidationsForEvent = new Map<Types.Events.Event, Types.Events.InvalidationTrackingEvent[]>();
+  const invalidationCountForEvent = new Map<Types.Events.Event, number>();
+  for (const frame of frameStateByFrame.values()) {
+    for (const [event, invalidations] of frame.invalidationsForEvent.entries()) {
+      invalidationsForEvent.set(event, invalidations);
+    }
+    for (const [event, count] of frame.invalidationCountForEvent.entries()) {
+      invalidationCountForEvent.set(event, count);
+    }
+  }
   return {
     invalidationsForEvent,
     invalidationCountForEvent,

front_end/models/trace/handlers/RendererHandler.ts

@@ -58,7 +58,7 @@ const makeRendererThread = (): RendererThread => ({
   entries: [],
   profileCalls: [],
   layoutEvents: [],
-  updateLayoutTreeEvents: [],
+  recalcStyleEvents: [],
 });
 
 const getOrCreateRendererProcess =
@@ -118,10 +118,10 @@ export function handleEvent(event: Types.Events.Event): void {
     thread.layoutEvents.push(event);
   }
 
-  if (Types.Events.isUpdateLayoutTree(event)) {
+  if (Types.Events.isRecalcStyle(event)) {
     const process = getOrCreateRendererProcess(processes, event.pid);
     const thread = getOrCreateRendererThread(process, event.tid);
-    thread.updateLayoutTreeEvents.push(event);
+    thread.recalcStyleEvents.push(event);
   }
 }
 
@@ -423,6 +423,6 @@ export interface RendererThread {
   entries: Types.Events.Event[];
   profileCalls: Types.Events.SyntheticProfileCall[];
   layoutEvents: Types.Events.Layout[];
-  updateLayoutTreeEvents: Types.Events.UpdateLayoutTree[];
+  recalcStyleEvents: Types.Events.RecalcStyle[];
   tree?: Helpers.TreeHelpers.TraceEntryTree;
 }