chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/models/trace/handlers/FramesHandler.test.ts

@@ -19,9 +19,6 @@ async function processTrace(events: readonly Trace.Types.Events.Event[]): Promis
   for (const handlerName of handlersInOrder) {
     const handler = Trace.Handlers.ModelHandlers[handlerName];
     handler.reset();
-    if ('initialize' in handler) {
-      handler.initialize();
-    }
   }
   for (const event of events) {
     for (const handlerName of handlersInOrder) {
@@ -30,9 +27,7 @@ async function processTrace(events: readonly Trace.Types.Events.Event[]): Promis
   }
   for (const handlerName of handlersInOrder) {
     const handler = Trace.Handlers.ModelHandlers[handlerName];
-    if ('finalize' in handler) {
-      await handler.finalize();
-    }
+    await handler.finalize();
   }
 }
 

package/front_end/models/trace/handlers/FramesHandler.ts

@@ -11,7 +11,7 @@ import {data as layerTreeHandlerData, type LayerTreeData} from './LayerTreeHandl
 import {data as metaHandlerData, type MetaHandlerData} from './MetaHandler.js';
 import {data as rendererHandlerData, type RendererHandlerData} from './RendererHandler.js';
 import * as Threads from './Threads.js';
-import {type HandlerName, HandlerState} from './types.js';
+import type {HandlerName} from './types.js';
 
 /**
  * IMPORTANT: this handler is slightly different to the rest. This is because
@@ -23,32 +23,19 @@ import {type HandlerName, HandlerState} from './types.js';
  *
  * In time we expect to migrate this code to a more "typical" handler.
  */
-let handlerState = HandlerState.UNINITIALIZED;
 
 const allEvents: Types.Events.Event[] = [];
 let model: TimelineFrameModel|null = null;
 
 export function reset(): void {
-  handlerState = HandlerState.UNINITIALIZED;
   allEvents.length = 0;
 }
-export function initialize(): void {
-  if (handlerState !== HandlerState.UNINITIALIZED) {
-    throw new Error('FramesHandler was not reset before being initialized');
-  }
-
-  handlerState = HandlerState.INITIALIZED;
-}
 
 export function handleEvent(event: Types.Events.Event): void {
   allEvents.push(event);
 }
 
 export async function finalize(): Promise<void> {
-  if (handlerState !== HandlerState.INITIALIZED) {
-    throw new Error('FramesHandler is not initialized');
-  }
-
   // Snapshot events can be emitted out of order, so we need to sort before
   // building the frames model.
   Helpers.Trace.sortTraceEventsInPlace(allEvents);
@@ -64,8 +51,8 @@ export async function finalize(): Promise<void> {
 }
 
 export interface FramesData {
-  frames: readonly TimelineFrame[];
-  framesById: Readonly<Record<number, TimelineFrame|undefined>>;
+  frames: readonly Types.Events.LegacyTimelineFrame[];
+  framesById: Readonly<Record<number, Types.Events.LegacyTimelineFrame|undefined>>;
 }
 
 export function data(): FramesData {
@@ -385,7 +372,14 @@ const MAIN_FRAME_MARKERS = new Set<Types.Events.Name>([
   Types.Events.Name.SCROLL_LAYER,
 ]);
 
-export class TimelineFrame implements Types.Events.LegacyTimelineFrame {
+/**
+ * Legacy class that represents TimelineFrames that was ported from the old SDK.
+ * This class is purposefully not exported as it breaks the abstraction that
+ * every event shown on the timeline is a trace event. Instead, we use the Type
+ * LegacyTimelineFrame to represent frames in the codebase. These do implement
+ * the right interface to be treated just like they were a trace event.
+ */
+class TimelineFrame implements Types.Events.LegacyTimelineFrame {
   // These fields exist to satisfy the base Event type which all
   // "trace events" must implement. They aren't used, but doing this means we
   // can pass `TimelineFrame` instances into places that expect
@@ -562,8 +556,8 @@ export class TimelineFrameBeginFrameQueue {
 }
 
 export function framesWithinWindow(
-    frames: readonly TimelineFrame[], startTime: Types.Timing.MicroSeconds,
-    endTime: Types.Timing.MicroSeconds): TimelineFrame[] {
+    frames: readonly Types.Events.LegacyTimelineFrame[], startTime: Types.Timing.MicroSeconds,
+    endTime: Types.Timing.MicroSeconds): Types.Events.LegacyTimelineFrame[] {
   const firstFrame = Platform.ArrayUtilities.lowerBound(frames, startTime || 0, (time, frame) => time - frame.endTime);
   const lastFrame =
       Platform.ArrayUtilities.lowerBound(frames, endTime || Infinity, (time, frame) => time - frame.startTime);

package/front_end/models/trace/handlers/GPUHandler.test.ts

@@ -8,8 +8,6 @@ import * as Trace from '../trace.js';
 describe('GPUHandler', function() {
   beforeEach(() => {
     Trace.Handlers.ModelHandlers.Meta.reset();
-    Trace.Handlers.ModelHandlers.Meta.initialize();
-    Trace.Handlers.ModelHandlers.GPU.initialize();
   });
 
   it('finds all the GPU Tasks for the main GPU Thread', async function() {

package/front_end/models/trace/handlers/GPUHandler.ts

@@ -6,9 +6,7 @@ import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
 import {data as metaHandlerData} from './MetaHandler.js';
-import {type HandlerName, HandlerState} from './types.js';
-
-let handlerState = HandlerState.UNINITIALIZED;
+import type {HandlerName} from './types.js';
 
 // Each thread contains events. Events indicate the thread and process IDs, which are
 // used to store the event in the correct process thread entry below.
@@ -19,23 +17,9 @@ let mainGPUThreadTasks: Types.Events.GPUTask[] = [];
 export function reset(): void {
   eventsInProcessThread.clear();
   mainGPUThreadTasks = [];
-
-  handlerState = HandlerState.UNINITIALIZED;
-}
-
-export function initialize(): void {
-  if (handlerState !== HandlerState.UNINITIALIZED) {
-    throw new Error('GPU Handler was not reset before being initialized');
-  }
-
-  handlerState = HandlerState.INITIALIZED;
 }
 
 export function handleEvent(event: Types.Events.Event): void {
-  if (handlerState !== HandlerState.INITIALIZED) {
-    throw new Error('GPU Handler is not initialized');
-  }
-
   if (!Types.Events.isGPUTask(event)) {
     return;
   }
@@ -44,16 +28,11 @@ export function handleEvent(event: Types.Events.Event): void {
 }
 
 export async function finalize(): Promise<void> {
-  if (handlerState !== HandlerState.INITIALIZED) {
-    throw new Error('GPU Handler is not initialized');
-  }
-
   const {gpuProcessId, gpuThreadId} = metaHandlerData();
   const gpuThreadsForProcess = eventsInProcessThread.get(gpuProcessId);
   if (gpuThreadsForProcess && gpuThreadId) {
     mainGPUThreadTasks = gpuThreadsForProcess.get(gpuThreadId) || [];
   }
-  handlerState = HandlerState.FINALIZED;
 }
 
 export interface GPUHandlerReturnData {
@@ -61,9 +40,6 @@ export interface GPUHandlerReturnData {
 }
 
 export function data(): GPUHandlerReturnData {
-  if (handlerState !== HandlerState.FINALIZED) {
-    throw new Error('GPU Handler is not finalized');
-  }
   return {
     mainGPUThreadTasks,
   };

package/front_end/models/trace/handlers/ImagePaintingHandler.ts

@@ -112,6 +112,9 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 }
 
+export async function finalize(): Promise<void> {
+}
+
 export interface ImagePaintData {
   paintImageByDrawLazyPixelRef: Map<number, Types.Events.PaintImage>;
   paintImageForEvent: Map<Types.Events.Event, Types.Events.PaintImage>;

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

@@ -8,7 +8,6 @@ import * as Trace from '../trace.js';
 describe('InitiatorsHandler', () => {
   beforeEach(() => {
     Trace.Handlers.ModelHandlers.Initiators.reset();
-    Trace.Handlers.ModelHandlers.Initiators.initialize();
   });
 
   it('for an UpdateLayoutTree event it sets the initiator to the previous ScheduledStyleRecalculation event',
@@ -213,4 +212,44 @@ describe('InitiatorsHandler', () => {
     assert.strictEqual(data.eventToInitiator.get(handlePostMessageEvent), schedulePostMessageEvent);
     assert.deepEqual(data.initiatorToEvents.get(schedulePostMessageEvent), [handlePostMessageEvent]);
   });
+
+  it('pairs the postTask-scheduled tasks with their scheduling initiators', async function() {
+    const traceEvents = await TraceLoader.rawEvents(this, 'scheduler-post-task.json.gz');
+    for (const event of traceEvents) {
+      Trace.Handlers.ModelHandlers.Initiators.handleEvent(event);
+    }
+    await Trace.Handlers.ModelHandlers.Initiators.finalize();
+    const data = Trace.Handlers.ModelHandlers.Initiators.data();
+
+    const scheduleEvents = traceEvents.filter(Trace.Types.Events.isSchedulePostTaskCallback);
+    assert.isNotEmpty(scheduleEvents, 'Could not find SchedulePostTaskCallback events');
+    const runEvents = traceEvents.filter(Trace.Types.Events.isRunPostTaskCallback);
+    assert.isNotEmpty(runEvents, 'Could not find RunPostTaskCallback events');
+    const cancelEvents = traceEvents.filter(Trace.Types.Events.isAbortPostTaskCallback);
+    assert.isNotEmpty(cancelEvents, 'Could not find AbortPostTaskCallback events');
+
+    assert.containsAllKeys(data.initiatorToEvents, scheduleEvents, 'Not all schedule events in initiators');
+
+    // All end events have a SchedulePostTaskCallback initiator.
+    for (const endEvent of [...runEvents, ...cancelEvents]) {
+      const initiator = data.eventToInitiator.get(endEvent);
+      assert.exists(initiator);
+      assert(Trace.Types.Events.isSchedulePostTaskCallback(initiator));
+      assert.strictEqual(endEvent.args.data.taskId, initiator.args.data.taskId);
+
+      assert(data.initiatorToEvents.get(initiator)?.includes(endEvent));
+    }
+
+    // There is one task that cancels itself while running, so it has both run and cancel events.
+    const doubleEvents = scheduleEvents.some(scheduleEvent => {
+      const endEvents = data.initiatorToEvents.get(scheduleEvent);
+      if (!endEvents || endEvents.length < 2) {
+        return false;
+      }
+
+      return endEvents.some(Trace.Types.Events.isRunPostTaskCallback) &&
+          endEvents.some(Trace.Types.Events.isAbortPostTaskCallback);
+    });
+    assert(doubleEvents, 'initiator with both run and cancel initiated events not found');
+  });
 });

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

@@ -5,10 +5,6 @@
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {HandlerState} from './types.js';
-
-let handlerState = HandlerState.UNINITIALIZED;
-
 const lastScheduleStyleRecalcByFrame = new Map<string, Types.Events.ScheduleStyleRecalculation>();
 
 // This tracks the last event that is considered to have invalidated the layout
@@ -39,6 +35,7 @@ const requestAnimationFrameEventsById: Map<number, Types.Events.RequestAnimation
 const timerInstallEventsById: Map<number, Types.Events.TimerInstall> = new Map();
 const requestIdleCallbackEventsById: Map<number, Types.Events.RequestIdleCallback> = new Map();
 const webSocketCreateEventsById: Map<number, Types.Events.WebSocketCreate> = new Map();
+const schedulePostTaskCallbackEventsById: Map<number, Types.Events.SchedulePostTaskCallback> = new Map();
 
 export function reset(): void {
   lastScheduleStyleRecalcByFrame.clear();
@@ -50,18 +47,9 @@ export function reset(): void {
   requestAnimationFrameEventsById.clear();
   requestIdleCallbackEventsById.clear();
   webSocketCreateEventsById.clear();
+  schedulePostTaskCallbackEventsById.clear();
   schedulePostMessageEventByTraceId.clear();
   postMessageHandlerEvents.length = 0;
-
-  handlerState = HandlerState.UNINITIALIZED;
-}
-
-export function initialize(): void {
-  if (handlerState !== HandlerState.UNINITIALIZED) {
-    throw new Error('InitiatorsHandler was not reset before being initialized');
-  }
-
-  handlerState = HandlerState.INITIALIZED;
 }
 
 function storeInitiator(data: {initiator: Types.Events.Event, event: Types.Events.Event}): void {
@@ -168,6 +156,13 @@ export function handleEvent(event: Types.Events.Event): void {
         initiator: matchingCreateEvent,
       });
     }
+  } else if (Types.Events.isSchedulePostTaskCallback(event)) {
+    schedulePostTaskCallbackEventsById.set(event.args.data.taskId, event);
+  } else if (Types.Events.isRunPostTaskCallback(event) || Types.Events.isAbortPostTaskCallback(event)) {
+    const matchingSchedule = schedulePostTaskCallbackEventsById.get(event.args.data.taskId);
+    if (matchingSchedule) {
+      storeInitiator({event, initiator: matchingSchedule});
+    }
   }
   // Store schedulePostMessage Events by their traceIds.
   // so they can be reconciled later with matching handlePostMessage events with same traceIds.
@@ -193,16 +188,10 @@ function finalizeInitiatorRelationship(): void {
 }
 
 export async function finalize(): Promise<void> {
-  if (handlerState !== HandlerState.INITIALIZED) {
-    throw new Error('InitiatorsHandler is not initialized');
-  }
-
   // During event processing, we may encounter initiators before the handler events themselves
   // (e.g dispatch events on worker and handler events on the main thread)
   // we don't want to miss out on events whose initiators haven't been processed yet
   finalizeInitiatorRelationship();
-
-  handlerState = HandlerState.FINALIZED;
 }
 
 export interface InitiatorsData {

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

@@ -23,7 +23,6 @@ function invalidationDataForTestAssertion(invalidation: Trace.Types.Events.Inval
 describe('InvalidationsHandler', () => {
   beforeEach(() => {
     Trace.Handlers.ModelHandlers.Invalidations.reset();
-    Trace.Handlers.ModelHandlers.Invalidations.initialize();
   });
 
   it('finds the right invalidators for a layout where attributes have been changed', async function() {

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

@@ -4,10 +4,6 @@
 
 import * as Types from '../types/types.js';
 
-import {HandlerState} from './types.js';
-
-let handlerState = HandlerState.UNINITIALIZED;
-
 const invalidationsForEvent = new Map<Types.Events.Event, Types.Events.InvalidationTrackingEvent[]>();
 const invalidationCountForEvent = new Map<Types.Events.Event, number>();
 
@@ -19,7 +15,6 @@ let hasPainted = false;
 const allInvalidationTrackingEvents: Array<Types.Events.InvalidationTrackingEvent> = [];
 
 export function reset(): void {
-  handlerState = HandlerState.UNINITIALIZED;
   invalidationsForEvent.clear();
   lastRecalcStyleEvent = null;
   allInvalidationTrackingEvents.length = 0;
@@ -32,14 +27,6 @@ export function handleUserConfig(userConfig: Types.Configuration.Configuration):
   maxInvalidationsPerEvent = userConfig.maxInvalidationEventsPerEvent;
 }
 
-export function initialize(): void {
-  if (handlerState !== HandlerState.UNINITIALIZED) {
-    throw new Error('InvalidationsHandler was not reset before being initialized');
-  }
-
-  handlerState = HandlerState.INITIALIZED;
-}
-
 function addInvalidationToEvent(event: Types.Events.Event, invalidation: Types.Events.InvalidationTrackingEvent): void {
   const existingInvalidations = invalidationsForEvent.get(event) || [];
   existingInvalidations.push(invalidation);
@@ -132,11 +119,6 @@ export function handleEvent(event: Types.Events.Event): void {
 }
 
 export async function finalize(): Promise<void> {
-  if (handlerState !== HandlerState.INITIALIZED) {
-    throw new Error('InvalidationsHandler is not initialized');
-  }
-
-  handlerState = HandlerState.FINALIZED;
 }
 
 interface InvalidationsData {

package/front_end/models/trace/handlers/LargestImagePaintHandler.test.ts

@@ -18,8 +18,8 @@ describe('LargestImagePaintHandler', function() {
     }
 
     const data = Trace.Handlers.ModelHandlers.LargestImagePaint.data();
-    assert.strictEqual(data.size, 1);
-    const imageForLCP = data.get(10 as Protocol.DOM.BackendNodeId);
+    assert.strictEqual(data.imageByDOMNodeId.size, 1);
+    const imageForLCP = data.imageByDOMNodeId.get(10 as Protocol.DOM.BackendNodeId);
     assert.exists(imageForLCP);
     assert.strictEqual(imageForLCP?.args.data?.DOMNodeId, 10 as Protocol.DOM.BackendNodeId);
     assert.strictEqual(imageForLCP?.args.data?.imageUrl, 'https://via.placeholder.com/2000.jpg');

package/front_end/models/trace/handlers/LargestImagePaintHandler.ts

@@ -2,8 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Types from '../types/types.js';
 import type * as Protocol from '../../../generated/protocol.js';
+import * as Types from '../types/types.js';
+
+import {data as metaData} from './MetaHandler.js';
+import {data as networkRequestsData} from './NetworkRequestsHandler.js';
+import type {HandlerName} from './types.js';
+
 /**
  * If the LCP resource was an image, and that image was fetched over the
  * network, we want to be able to find the network request in order to construct
@@ -22,12 +27,23 @@ import type * as Protocol from '../../../generated/protocol.js';
  * to the image.
  **/
 const imageByDOMNodeId = new Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>();
+const lcpRequestByNavigation = new Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>();
+const lcpPaintEventByNavigation = new Map<Types.Events.NavigationStart|null, Types.Events.LargestImagePaintCandidate>();
+let currentNavigation: Types.Events.NavigationStart|null;
 
 export function reset(): void {
   imageByDOMNodeId.clear();
+  lcpRequestByNavigation.clear();
+  lcpPaintEventByNavigation.clear();
+  currentNavigation = null;
 }
 
 export function handleEvent(event: Types.Events.Event): void {
+  if (Types.Events.isNavigationStart(event)) {
+    currentNavigation = event;
+    return;
+  }
+
   if (!Types.Events.isLargestImagePaintCandidate(event)) {
     return;
   }
@@ -37,8 +53,52 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 
   imageByDOMNodeId.set(event.args.data.DOMNodeId, event);
+  lcpPaintEventByNavigation.set(currentNavigation, event);
+}
+
+export async function finalize(): Promise<void> {
+  const requests = networkRequestsData().byTime;
+  const traceBounds = metaData().traceBounds;
+
+  for (const [navigation, event] of lcpPaintEventByNavigation) {
+    const lcpUrl = event.args.data?.imageUrl;
+    if (!lcpUrl) {
+      continue;
+    }
+
+    const startTime = navigation?.ts ?? traceBounds.min;
+    const endTime = event.ts;
+
+    let lcpRequest;
+    for (const request of requests) {
+      if (request.ts < startTime) {
+        continue;
+      }
+      if (request.ts >= endTime) {
+        break;
+      }
+
+      if (request.args.data.url === lcpUrl || request.args.data.redirects.some(r => r.url === lcpUrl)) {
+        lcpRequest = request;
+        break;
+      }
+    }
+
+    if (lcpRequest) {
+      lcpRequestByNavigation.set(navigation, lcpRequest);
+    }
+  }
+}
+
+export interface LargestImagePaintData {
+  imageByDOMNodeId: Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>;
+  lcpRequestByNavigation: Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>;
+}
+
+export function data(): LargestImagePaintData {
+  return {imageByDOMNodeId, lcpRequestByNavigation};
 }
 
-export function data(): Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate> {
-  return imageByDOMNodeId;
+export function deps(): HandlerName[] {
+  return ['Meta', 'NetworkRequests'];
 }

package/front_end/models/trace/handlers/LargestTextPaintHandler.ts

@@ -27,6 +27,9 @@ export function handleEvent(event: Types.Events.Event): void {
   textPaintByDOMNodeId.set(event.args.data.DOMNodeId, event);
 }
 
+export async function finalize(): Promise<void> {
+}
+
 export function data(): Map<Protocol.DOM.BackendNodeId, Types.Events.LargestTextPaintCandidate> {
   return textPaintByDOMNodeId;
 }

package/front_end/models/trace/handlers/LayerTreeHandler.test.ts

@@ -15,8 +15,6 @@ describe('LayerTreeHandler', function() {
   beforeEach(() => {
     Trace.Handlers.ModelHandlers.Meta.reset();
     Trace.Handlers.ModelHandlers.LayerTree.reset();
-    Trace.Handlers.ModelHandlers.Meta.initialize();
-    Trace.Handlers.ModelHandlers.LayerTree.initialize();
   });
 
   it('creates a relationship between paint events and the snapshot event', async function() {

package/front_end/models/trace/handlers/LayerTreeHandler.ts

@@ -6,9 +6,7 @@ import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
 import {data as metaHandlerData} from './MetaHandler.js';
-import {type HandlerName, HandlerState} from './types.js';
-
-let handlerState = HandlerState.UNINITIALIZED;
+import type {HandlerName} from './types.js';
 
 const paintEvents: Types.Events.Paint[] = [];
 const snapshotEvents: Types.Events.DisplayItemListSnapshot[] = [];
@@ -24,7 +22,6 @@ type RelevantLayerTreeEvent =
 
 const relevantEvents: RelevantLayerTreeEvent[] = [];
 export function reset(): void {
-  handlerState = HandlerState.UNINITIALIZED;
   paintEvents.length = 0;
   snapshotEvents.length = 0;
   paintToSnapshotMap.clear();
@@ -35,14 +32,6 @@ export function reset(): void {
   relevantEvents.length = 0;
 }
 
-export function initialize(): void {
-  if (handlerState !== HandlerState.UNINITIALIZED) {
-    throw new Error('LayerTree Handler was not reset before being initialized');
-  }
-
-  handlerState = HandlerState.INITIALIZED;
-}
-
 export function handleEvent(event: Types.Events.Event): void {
   // We gather up the events here but do all the processing in finalize(). This
   // is because we need to have all the events before we process them, and we
@@ -55,10 +44,6 @@ export function handleEvent(event: Types.Events.Event): void {
 }
 
 export async function finalize(): Promise<void> {
-  if (handlerState !== HandlerState.INITIALIZED) {
-    throw new Error('LayerTree Handler is not initialized');
-  }
-
   const metaData = metaHandlerData();
   Helpers.Trace.sortTraceEventsInPlace(relevantEvents);
 
@@ -117,8 +102,6 @@ export async function finalize(): Promise<void> {
       paintToSnapshotMap.set(paintEvent, event);
     }
   }
-
-  handlerState = HandlerState.FINALIZED;
 }
 
 export interface LayerTreeData {

package/front_end/models/trace/handlers/LayoutShiftsHandler.test.ts

@@ -7,10 +7,8 @@ import * as Trace from '../trace.js';
 
 async function processTrace(context: Mocha.Suite|Mocha.Context|null, url: string): Promise<void> {
   Trace.Handlers.ModelHandlers.Meta.reset();
-  Trace.Handlers.ModelHandlers.Meta.initialize();
 
   Trace.Handlers.ModelHandlers.LayoutShifts.reset();
-  Trace.Handlers.ModelHandlers.LayoutShifts.initialize();
 
   try {
     const events = await TraceLoader.rawEvents(context, url);
@@ -33,7 +31,6 @@ describe('LayoutShiftsHandler', function() {
     // run the meta handler here, too, so that later on we can get the IDs of
     // the main renderer process and thread.
     Trace.Handlers.ModelHandlers.Meta.reset();
-    Trace.Handlers.ModelHandlers.Meta.initialize();
 
     Trace.Handlers.ModelHandlers.LayoutShifts.reset();
   });