chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/models/trace/Processor.ts

@@ -216,6 +216,10 @@ export class TraceProcessor extends EventTarget {
     options.logger?.end('parse:handleEvent');
 
     // Finalize.
+    const finalizeOptions: Handlers.Types.FinalizeOptions = {
+      ...options,
+      allTraceEvents: traceEvents,
+    };
     for (let i = 0; i < sortedHandlers.length; i++) {
       const [name, handler] = sortedHandlers[i];
       if (handler.finalize) {
@@ -223,7 +227,7 @@ export class TraceProcessor extends EventTarget {
         // Yield to the UI because finalize() calls can be expensive
         // TODO(jacktfranklin): consider using `scheduler.yield()` or `scheduler.postTask(() => {}, {priority: 'user-blocking'})`
         await new Promise(resolve => setTimeout(resolve, 0));
-        await handler.finalize(options);
+        await handler.finalize(finalizeOptions);
         options.logger?.end(`parse:${name}:finalize`);
       }
       const percent = calculateProgress(i / sortedHandlers.length, ProgressPhase.FINALIZE);
@@ -354,8 +358,8 @@ export class TraceProcessor extends EventTarget {
     // The initial order of the insights is alphabetical, based on `front_end/models/trace/insights/Models.ts`.
     // The order here provides a baseline that groups insights in a more logical way.
     const baselineOrder: Record<keyof Insights.Types.InsightModels, null> = {
-      InteractionToNextPaint: null,
-      LCPPhases: null,
+      INPBreakdown: null,
+      LCPBreakdown: null,
       LCPDiscovery: null,
       CLSCulprits: null,
       RenderBlocking: null,
@@ -379,14 +383,14 @@ export class TraceProcessor extends EventTarget {
 
     // Normalize the estimated savings to a single number, weighted by its relative impact
     // to the page experience based on the same scoring curve that Lighthouse uses.
-    const observedLcpMicro = Insights.Common.getLCP(this.#insights, insightSet.id)?.value;
+    const observedLcpMicro = Insights.Common.getLCP(insightSet)?.value;
     const observedLcp = observedLcpMicro ? Helpers.Timing.microToMilli(observedLcpMicro) : Types.Timing.Milli(0);
-    const observedCls = Insights.Common.getCLS(this.#insights, insightSet.id).value;
+    const observedCls = Insights.Common.getCLS(insightSet).value;
 
     // INP is special - if users did not interact with the page, we'll have no INP, but we should still
     // be able to prioritize insights based on this metric. When we observe no interaction, instead use
     // a default value for the baseline INP.
-    const observedInpMicro = Insights.Common.getINP(this.#insights, insightSet.id)?.value;
+    const observedInpMicro = Insights.Common.getINP(insightSet)?.value;
     const observedInp = observedInpMicro ? Helpers.Timing.microToMilli(observedInpMicro) : Types.Timing.Milli(200);
 
     const observedLcpScore =
@@ -461,24 +465,49 @@ export class TraceProcessor extends EventTarget {
       urlString = parsedTrace.Meta.finalDisplayUrlByNavigationId.get('') ?? parsedTrace.Meta.mainFrameURL;
     }
 
-    const model = {} as Insights.Types.InsightSet['model'];
+    const insightSetModel = {} as Insights.Types.InsightSet['model'];
 
     for (const [name, insight] of Object.entries(TraceProcessor.getInsightRunners())) {
-      let insightResult;
+      let model: Insights.Types.InsightModel|Error;
       try {
         options.logger?.start(`insights:${name}`);
-        insightResult = insight.generateInsight(parsedTrace, context);
-        insightResult.frameId = context.frameId;
+        model = insight.generateInsight(parsedTrace, context);
+        model.frameId = context.frameId;
         const navId = context.navigation?.args.data?.navigationId;
         if (navId) {
-          insightResult.navigationId = navId;
+          model.navigationId = navId;
         }
+        model.createOverlays = () => {
+          // @ts-expect-error: model is a union of all possible insight model types.
+          return insight.createOverlays(model);
+        };
       } catch (err) {
-        insightResult = err;
+        model = err;
       } finally {
         options.logger?.end(`insights:${name}`);
       }
-      Object.assign(model, {[name]: insightResult});
+      Object.assign(insightSetModel, {[name]: model});
+    }
+
+    // We may choose to exclude the insightSet if it's trivial. Trivial means:
+    //   1. There's no navigation (it's an initial trace period)
+    //   2. The duration is short.
+    //   3. All the insights are passing (aka no insights to show the user)
+    //   4. It has no metrics to report (apart from a CLS of 0, which is default)
+    // Generally, these cases are the short time ranges before a page reload starts.
+    const isNavigation = id === Types.Events.NO_NAVIGATION;
+    const trivialThreshold = Helpers.Timing.milliToMicro(Types.Timing.Milli(5000));
+    const everyInsightPasses = Object.values(insightSetModel)
+                                   .filter(model => !(model instanceof Error))
+                                   .every(model => model.state === 'pass');
+
+    const noLcp = !insightSetModel.LCPBreakdown.lcpEvent;
+    const noInp = !insightSetModel.INPBreakdown.longestInteractionEvent;
+    const noLayoutShifts = insightSetModel.CLSCulprits.shifts?.size === 0;
+    const shouldExclude = isNavigation && context.bounds.range < trivialThreshold && everyInsightPasses && noLcp &&
+        noInp && noLayoutShifts;
+    if (shouldExclude) {
+      return;
     }
 
     let url;
@@ -496,7 +525,7 @@ export class TraceProcessor extends EventTarget {
       navigation,
       frameId: context.frameId,
       bounds: context.bounds,
-      model,
+      model: insightSetModel,
     };
     if (!this.#insights) {
       this.#insights = new Map();
@@ -541,24 +570,12 @@ export class TraceProcessor extends EventTarget {
         Helpers.Timing.traceWindowFromMicroSeconds(parsedTrace.Meta.traceBounds.min, navigations[0].ts) :
         parsedTrace.Meta.traceBounds;
 
-    // Define threshold for considering the pre-navigation period significant enough to analyze.
-    // When using "Record and reload" option, it typically takes ~5ms. So use 50ms to be safe.
-    const threshold = Helpers.Timing.milliToMicro(50 as Types.Timing.Milli);
-
-    // Compute insights if either:
-    // 1. There are no navigations (we analyze the whole trace).
-    // 2. There are navigations, AND the initial period before the first navigation is longer than the threshold.
-    const shouldComputeInsights = navigations.length === 0 || bounds.range > threshold;
-
-    // If navigations exist but the initial period is below the threshold, we intentionally do nothing for this portion of the trace.
-    if (shouldComputeInsights) {
-      const context: Insights.Types.InsightSetContext = {
-        bounds,
-        frameId: parsedTrace.Meta.mainFrameId,
-        // No navigation or lantern context applies to this initial/no-navigation period.
-      };
-      this.#computeInsightSet(parsedTrace, context, options);
-    }
+    const context: Insights.Types.InsightSetContext = {
+      bounds,
+      frameId: parsedTrace.Meta.mainFrameId,
+      // No navigation or lantern context applies to this initial/no-navigation period.
+    };
+    this.#computeInsightSet(parsedTrace, context, options);
   }
 
   /**

package/front_end/models/trace/extras/ScriptDuplication.test.ts

@@ -5,16 +5,16 @@
 import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import {fetchFixture} from '../../../testing/TraceLoader.js';
+import {describeWithEnvironment, expectConsoleLogs} from '../../../testing/EnvironmentHelpers.js';
+import {fetchFileAsText} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
 async function loadScriptFixture(
     name: string, modify?: (fixture: {content: string, sourceMapJson: SDK.SourceMap.SourceMapV3Object}) => void):
     Promise<Trace.Handlers.ModelHandlers.Scripts.Script> {
   const content =
-      await fetchFixture(new URL(`../../../panels/timeline/fixtures/traces/scripts/${name}.js.gz`, import.meta.url));
-  const mapText = await fetchFixture(
+      await fetchFileAsText(new URL(`../../../panels/timeline/fixtures/traces/scripts/${name}.js.gz`, import.meta.url));
+  const mapText = await fetchFileAsText(
       new URL(`../../../panels/timeline/fixtures/traces/scripts/${name}.js.map.gz`, import.meta.url));
   const sourceMapJson = JSON.parse(mapText) as SDK.SourceMap.SourceMapV3Object;
   const fixture = {content, sourceMapJson};
@@ -153,6 +153,10 @@ describeWithEnvironment('ScriptDuplication', function() {
       });
     });
 
+    expectConsoleLogs({
+      error: ['Failed to parse source map Error: Unexpected char \' \' encountered while decoding'],
+    });
+
     it('fault tolerance (bogus mappings)', async function() {
       const script = await loadScriptFixture('foo.min', fixture => {
         fixture.sourceMapJson.mappings = 'blahblah blah';
@@ -253,12 +257,11 @@ describeWithEnvironment('ScriptDuplication', function() {
         scripts: [await loadScriptFixture('coursehero-bundle-1'), await loadScriptFixture('coursehero-bundle-2')],
       };
 
-      const results =
-          Object.fromEntries([...getDuplication(scriptsData).entries()].map(([key, data]) => {
-            return [
-              key, data.duplicates.map(v => ({scriptId: v.script.scriptId as string, resourceSize: v.attributedSize}))
-            ];
-          }));
+      const results = Object.fromEntries([...getDuplication(scriptsData).entries()].map(([key, data]) => {
+        return [
+          key, data.duplicates.map(v => ({scriptId: v.script.scriptId as string, resourceSize: v.attributedSize}))
+        ];
+      }));
       assert.deepEqual(results, {
         'coursehero:///Control/assets/js/vendor/ng/select/select.js': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 48513},

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

@@ -5,6 +5,7 @@
 import type * as Protocol from '../../../generated/protocol.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {
+  allThreadEntriesInTrace,
   getBaseTraceParseModelData,
   makeCompleteEvent,
   makeInstantEvent,
@@ -44,8 +45,9 @@ describeWithEnvironment('StackTraceForTraceEvent', function() {
 
   it('correctly builds the stack trace of a profile call when it only has a synchronous stack trace.',
      async function() {
-       const jsCall = parsedTrace.Renderer.allTraceEntries.find(
-           e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'startExample');
+       const jsCall =
+           allThreadEntriesInTrace(parsedTrace)
+               .find(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'startExample');
        assert.exists(jsCall);
        const stackTrace = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace);
        assert.exists(stackTrace);
@@ -66,8 +68,8 @@ describeWithEnvironment('StackTraceForTraceEvent', function() {
 
   it('correctly builds the stack trace of a profile call when it only has an asynchronous stack trace.',
      async function() {
-       const jsCall = parsedTrace.Renderer.allTraceEntries.find(
-           e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+       const jsCall = allThreadEntriesInTrace(parsedTrace)
+                          .find(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
        assert.exists(jsCall);
        const stackTrace = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace);
        assert.exists(stackTrace);
@@ -121,8 +123,8 @@ describeWithEnvironment('StackTraceForTraceEvent', function() {
        ]);
      });
   it('uses cached data correctly.', async function() {
-    const fooCall = parsedTrace.Renderer.allTraceEntries.find(
-        e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'foo');
+    const fooCall = allThreadEntriesInTrace(parsedTrace)
+                        .find(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'foo');
     assert.exists(fooCall);
     const result =
         parsedTrace.AsyncJSCalls.asyncCallToScheduler.get(fooCall as Trace.Types.Events.SyntheticProfileCall);
@@ -177,8 +179,8 @@ describeWithEnvironment('StackTraceForTraceEvent', function() {
   });
   it('uses the stack trace of the profile call that contains the raw trace event of the extension entry call',
      async function() {
-       const jsCall = parsedTrace.Renderer.allTraceEntries.find(
-                          e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz') as
+       const jsCall = allThreadEntriesInTrace(parsedTrace)
+                          .find(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz') as
                Trace.Types.Events.SyntheticProfileCall |
            undefined;
        assert.exists(jsCall);

package/front_end/models/trace/extras/ThirdParties.ts

@@ -152,7 +152,7 @@ function getBottomUpTree(
   // The bottom up root node handles all the "in Tracebounds" checks we need for the insight.
   const startTime = Helpers.Timing.microToMilli(tracebounds.min);
   const endTime = Helpers.Timing.microToMilli(tracebounds.max);
-  const node = new TraceTree.BottomUpRootNode(mainThreadEvents, {
+  return new TraceTree.BottomUpRootNode(mainThreadEvents, {
     textFilter: new TraceFilter.ExclusiveNameFilter([]),
     filters: [filter],
     startTime,
@@ -161,6 +161,5 @@ function getBottomUpTree(
     calculateTransferSize: true,
     // Ensure we group by 3P alongside eventID for correct 3P grouping.
     forceGroupIdCallback: true,
-  }) as TraceTree.BottomUpRootNode;
-  return node;
+  });
 }

package/front_end/models/trace/extras/TraceTree.ts

@@ -10,13 +10,16 @@ import * as Types from '../types/types.js';
 import type {TraceFilter} from './TraceFilter.js';
 
 export class Node {
+  /** ms */
   totalTime: number;
+  /** ms */
   selfTime: number;
   transferSize: number;
   id: string|symbol;
   /** The first trace event encountered that necessitated the creation of this tree node. */
   event: Types.Events.Event;
-  /** All of the trace events associated with this aggregate node.
+  /**
+   * All of the trace events associated with this aggregate node.
    * Minor: In the case of Event Log (EventsTimelineTreeView), the node is not aggregate and this will only hold 1 event, the same that's in this.event
    */
   events: Types.Events.Event[];
@@ -243,10 +246,6 @@ export class TopDownNode extends Node {
     this.childrenInternal = children;
     return children;
   }
-
-  getRoot(): TopDownRootNode|null {
-    return this.root;
-  }
 }
 
 export class TopDownRootNode extends TopDownNode {
@@ -513,7 +512,9 @@ export class BottomUpRootNode extends Node {
         groupNode = new GroupNode(groupId, this, node.events);
         groupNodes.set(groupId, groupNode);
       } else {
-        groupNode.events.push(...node.events);
+        for (const e of node.events) {
+          groupNode.events.push(e);
+        }
       }
       groupNode.addChild(node as BottomUpNode, node.selfTime, node.selfTime, node.transferSize);
     }

package/front_end/models/trace/extras/extras.ts

@@ -2,10 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export * as FetchNodes from './FetchNodes.js';
 export * as FilmStrip from './FilmStrip.js';
 export * as MainThreadActivity from './MainThreadActivity.js';
-export * as Metadata from './Metadata.js';
 export * as ScriptDuplication from './ScriptDuplication.js';
 export * as StackTraceForEvent from './StackTraceForEvent.js';
 export * as ThirdParties from './ThirdParties.js';

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

@@ -5,19 +5,20 @@ import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
 async function parseEvents(events: readonly Trace.Types.Events.Event[]) {
-  Trace.Handlers.ModelHandlers.Flows.reset();
   Trace.Handlers.ModelHandlers.AnimationFrames.reset();
+  Trace.Handlers.ModelHandlers.AnimationFrames.handleUserConfig({
+    ...Trace.Types.Configuration.defaults(),
+    enableAnimationsFrameHandler: true,
+  });
+
   for (const event of events) {
-    Trace.Handlers.ModelHandlers.Flows.handleEvent(event);
     Trace.Handlers.ModelHandlers.AnimationFrames.handleEvent(event);
   }
-  await Trace.Handlers.ModelHandlers.Flows.finalize();
   await Trace.Handlers.ModelHandlers.AnimationFrames.finalize();
 }
 
 describe('AnimationFramesHandler', () => {
   it('can group all related animation frame events', async function() {
-    Trace.Handlers.ModelHandlers.AnimationFrames.reset();
     const events = await TraceLoader.rawEvents(this, 'web-dev-animation-frames.json.gz');
     await parseEvents(events);
     const data = Trace.Handlers.ModelHandlers.AnimationFrames.data();
@@ -28,7 +29,6 @@ describe('AnimationFramesHandler', () => {
   });
 
   it('links an animation frame to its presentation event', async function() {
-    Trace.Handlers.ModelHandlers.AnimationFrames.reset();
     const events = await TraceLoader.rawEvents(this, 'web-dev-animation-frames.json.gz');
     await parseEvents(events);
     const data = Trace.Handlers.ModelHandlers.AnimationFrames.data();

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

@@ -34,9 +34,19 @@ export function reset(): void {
   animationFrames.length = 0;
   presentationForFrame.clear();
   animationFramePresentations.clear();
+  isEnabled = false;
+}
+
+let isEnabled = false;
+export function handleUserConfig(config: Types.Configuration.Configuration): void {
+  isEnabled = config.enableAnimationsFrameHandler;
 }
 
 export function handleEvent(event: Types.Events.Event): void {
+  if (!isEnabled) {
+    return;
+  }
+
   if (Types.Events.isAnimationFrameAsyncStart(event)) {
     const key = threadKey(event);
     const existing = animationFrameStarts.get(key) ?? [];