chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/models/trace/insights/RenderBlocking.test.ts

@@ -106,6 +106,9 @@ describeWithEnvironment('RenderBlockingRequests', function() {
     ]);
   });
 
+  // TODO(crbug.com/372674229): when swapping to 'provided' instead of 'simulated', all these test traces give
+  // uninteresting results. must get new traces.
+
   it('estimates savings with Lantern (image LCP)', async () => {
     const {data, insights} = await processTrace(this, 'lantern/render-blocking/trace.json.gz');
     assert.strictEqual(insights.size, 1);
@@ -113,19 +116,16 @@ describeWithEnvironment('RenderBlockingRequests', function() {
         getInsightOrError('RenderBlocking', insights, data.Meta.navigationsByNavigationId.values().next().value);
 
     assert.deepStrictEqual(insight.metricSavings, {
-      FCP: 2250,
+      FCP: 0,
       LCP: 0,
-    });
+    } as Trace.Insights.Types.MetricSavings);
 
     assert.exists(insight.requestIdToWastedMs);
     const urlToWastedMs = [...insight.requestIdToWastedMs].map(([requestId, wastedMs]) => {
       const url = insight.renderBlockingRequests.find(r => r.args.data.requestId === requestId)?.args.data.url;
       return [url, wastedMs];
     });
-    assert.deepStrictEqual(urlToWastedMs, [
-      ['http://localhost:50049/style.css', 2254],
-      ['http://localhost:50049/script.js', 304],
-    ]);
+    assert.deepStrictEqual(urlToWastedMs, []);
   });
 
   it('estimates savings with Lantern (text LCP)', async () => {
@@ -135,20 +135,14 @@ describeWithEnvironment('RenderBlockingRequests', function() {
         getInsightOrError('RenderBlocking', insights, data.Meta.navigationsByNavigationId.values().next().value);
 
     assert.deepStrictEqual(insight.metricSavings, {
-      FCP: 13,
-      LCP: 13,
-    });
+      FCP: 0,
+      LCP: 0,
+    } as Trace.Insights.Types.MetricSavings);
     assert.exists(insight.requestIdToWastedMs);
     const urlToWastedMs = [...insight.requestIdToWastedMs].map(([requestId, wastedMs]) => {
       const url = insight.renderBlockingRequests.find(r => r.args.data.requestId === requestId)?.args.data.url;
       return [url, wastedMs];
     });
-    assert.deepStrictEqual(urlToWastedMs, [
-      ['http://[::]:8000/typescript-angular/node_modules/todomvc-common/base.css', 153],
-      ['http://[::]:8000/typescript-angular/node_modules/todomvc-app-css/index.css', 303],
-      ['http://[::]:8000/typescript-angular/node_modules/todomvc-common/base.js', 303],
-      ['http://[::]:8000/typescript-angular/node_modules/angular/angular.js', 303],
-      ['http://[::]:8000/typescript-angular/js/Application.js', 303],
-    ]);
+    assert.deepStrictEqual(urlToWastedMs, []);
   });
 });

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -52,7 +52,8 @@ function getNodesAndTimingByRequestId(nodeTimings: Lantern.Simulation.Result['no
   return requestIdToNode;
 }
 
-function estimateSavingsWithGraphs(deferredIds: Set<string>, lanternContext: LanternContext): number {
+function estimateSavingsWithGraphs(
+    deferredIds: Set<string>, lanternContext: LanternContext): Types.Timing.MilliSeconds {
   const simulator = lanternContext.simulator;
   const fcpGraph = lanternContext.metrics.firstContentfulPaint.optimisticGraph;
   const {nodeTimings} = lanternContext.simulator.simulate(fcpGraph);
@@ -80,7 +81,7 @@ function estimateSavingsWithGraphs(deferredIds: Set<string>, lanternContext: Lan
   minimalFCPGraph.request.transferSize = safeTransferSize + totalChildNetworkBytes;
   const estimateAfterInline = simulator.simulate(minimalFCPGraph).timeInMs;
   minimalFCPGraph.request.transferSize = originalTransferSize;
-  return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0));
+  return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0)) as Types.Timing.MilliSeconds;
 }
 
 function hasImageLCP(parsedTrace: RequiredData<typeof deps>, context: InsightSetContextWithNavigation): boolean {
@@ -113,7 +114,7 @@ function computeSavings(
   const nodesAndTimingsByRequestId =
       getNodesAndTimingByRequestId(context.lantern.metrics.firstContentfulPaint.optimisticEstimate.nodeTimings);
 
-  const metricSavings = {FCP: 0, LCP: 0};
+  const metricSavings = {FCP: 0 as Types.Timing.MilliSeconds, LCP: 0 as Types.Timing.MilliSeconds};
   const requestIdToWastedMs = new Map<string, number>();
   const deferredNodeIds = new Set<string>();
   for (const request of renderBlockingRequests) {
@@ -173,7 +174,7 @@ export function generateInsight(
       continue;
     }
 
-    if (req.args.data.renderBlocking !== 'blocking' && req.args.data.renderBlocking !== 'in_body_parser_blocking') {
+    if (!Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(req)) {
       continue;
     }
 
@@ -211,6 +212,7 @@ export function generateInsight(
   });
 
   return {
+    relatedEvents: renderBlockingRequests,
     renderBlockingRequests,
     ...savings,
   };

package/front_end/models/trace/insights/SlowCSSSelector.ts

@@ -6,7 +6,7 @@ import * as Helpers from '../helpers/helpers.js';
 import {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';
 import * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['SelectorStats'] {
   return ['SelectorStats'];
@@ -82,6 +82,8 @@ export function generateInsight(
   });
 
   return {
+    // TODO: should we identify UpdateLayout events as linked to this insight?
+    relatedEvents: [],
     totalElapsedMs: Types.Timing.MilliSeconds(totalElapsedUs / 1000.0),
     totalMatchAttempts,
     totalMatchCount,

package/front_end/models/trace/insights/ThirdPartyWeb.ts

@@ -6,182 +6,35 @@ import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party
 import * as Extras from '../extras/extras.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
-import * as Types from '../types/types.js';
+import type * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'] {
   return ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];
 }
 
-export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number];
-
-export interface Summary {
-  transferSize: number;
-  mainThreadTime: Types.Timing.MicroSeconds;
-}
-
 export type ThirdPartyWebInsightResult = InsightResult<{
-  entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>,
-  requestsByEntity: Map<Entity, Types.Events.SyntheticNetworkRequest[]>,
-  summaryByRequest: Map<Types.Events.SyntheticNetworkRequest, Summary>,
-  summaryByEntity: Map<Entity, Summary>,
+  entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Entity>,
+  requestsByEntity: Map<Extras.ThirdParties.Entity, Types.Events.SyntheticNetworkRequest[]>,
+  summaryByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Summary>,
+  summaryByEntity: Map<Extras.ThirdParties.Entity, Extras.ThirdParties.Summary>,
   /** The entity for this navigation's URL. Any other entity is from a third party. */
-  firstPartyEntity?: Entity,
+  firstPartyEntity?: Extras.ThirdParties.Entity,
 }>;
 
-/**
- * Returns the origin portion of a Chrome extension URL.
- */
-function getChromeExtensionOrigin(url: URL): string {
-  return url.protocol + '//' + url.host;
-}
-
-function makeUpChromeExtensionEntity(entityCache: Map<string, Entity>, url: string, extensionName?: string): Entity {
-  const parsedUrl = new URL(url);
-  const origin = getChromeExtensionOrigin(parsedUrl);
-  const host = new URL(origin).host;
-  const name = extensionName || host;
-
-  const cachedEntity = entityCache.get(origin);
-  if (cachedEntity) {
-    return cachedEntity;
-  }
-
-  const chromeExtensionEntity = {
-    name,
-    company: name,
-    category: 'Chrome Extension',
-    homepage: 'https://chromewebstore.google.com/detail/' + host,
-    categories: [],
-    domains: [],
-    averageExecutionTime: 0,
-    totalExecutionTime: 0,
-    totalOccurrences: 0,
-  };
-
-  entityCache.set(origin, chromeExtensionEntity);
-  return chromeExtensionEntity;
-}
-
-function makeUpEntity(entityCache: Map<string, Entity>, url: string): Entity|undefined {
-  if (url.startsWith('chrome-extension:')) {
-    return makeUpChromeExtensionEntity(entityCache, url);
-  }
-
-  // Make up an entity only for valid http/https URLs.
-  if (!url.startsWith('http')) {
-    return;
-  }
-
-  // NOTE: Lighthouse uses a tld database to determine the root domain, but here
-  // we are using third party web's database. Doesn't really work for the case of classifying
-  // domains 3pweb doesn't know about, so it will just give us a guess.
-  const rootDomain = ThirdPartyWeb.ThirdPartyWeb.getRootDomain(url);
-  if (!rootDomain) {
-    return;
-  }
-
-  if (entityCache.has(rootDomain)) {
-    return entityCache.get(rootDomain);
-  }
-
-  const unrecognizedEntity = {
-    name: rootDomain,
-    company: rootDomain,
-    category: '',
-    categories: [],
-    domains: [rootDomain],
-    averageExecutionTime: 0,
-    totalExecutionTime: 0,
-    totalOccurrences: 0,
-    isUnrecognized: true,
-  };
-  entityCache.set(rootDomain, unrecognizedEntity);
-  return unrecognizedEntity;
-}
-
-interface SummaryMaps {
-  byEntity: Map<Entity, Summary>;
-  byRequest: Map<Types.Events.SyntheticNetworkRequest, Summary>;
-  requestsByEntity: Map<Entity, Types.Events.SyntheticNetworkRequest[]>;
-}
-
-function getSelfTimeByUrl(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): Map<string, number> {
-  const selfTimeByUrl = new Map<string, number>();
-
-  for (const process of parsedTrace.Renderer.processes.values()) {
-    if (!process.isOnMainFrame) {
-      continue;
-    }
-
-    for (const thread of process.threads.values()) {
-      if (thread.name === 'CrRendererMain') {
-        if (!thread.tree) {
-          break;
-        }
-
-        for (const event of thread.entries) {
-          if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {
-            continue;
-          }
-
-          const node = parsedTrace.Renderer.entryToNode.get(event);
-          if (!node || !node.selfTime) {
-            continue;
-          }
-
-          const url = Extras.URLForEntry.getNonResolved(parsedTrace as Handlers.Types.ParsedTrace, event);
-          if (!url) {
-            continue;
-          }
-
-          selfTimeByUrl.set(url, node.selfTime + (selfTimeByUrl.get(url) ?? 0));
-        }
-      }
-    }
-  }
-
-  return selfTimeByUrl;
-}
-
-function getSummaries(
-    requests: Types.Events.SyntheticNetworkRequest[],
-    entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>,
-    selfTimeByUrl: Map<string, number>): SummaryMaps {
-  const byRequest = new Map<Types.Events.SyntheticNetworkRequest, Summary>();
-  const byEntity = new Map<Entity, Summary>();
-  const defaultSummary: Summary = {transferSize: 0, mainThreadTime: Types.Timing.MicroSeconds(0)};
-
-  for (const request of requests) {
-    const urlSummary = byRequest.get(request) || {...defaultSummary};
-    urlSummary.transferSize += request.args.data.encodedDataLength;
-    urlSummary.mainThreadTime =
-        Types.Timing.MicroSeconds(urlSummary.mainThreadTime + (selfTimeByUrl.get(request.args.data.url) ?? 0));
-    byRequest.set(request, urlSummary);
-  }
+function getRelatedEvents(
+    summaries: Extras.ThirdParties.SummaryMaps,
+    firstPartyEntity: Extras.ThirdParties.Entity|undefined): Types.Events.Event[] {
+  const events = [];
 
-  // Map each request's stat to a particular entity.
-  const requestsByEntity = new Map<Entity, Types.Events.SyntheticNetworkRequest[]>();
-  for (const [request, requestSummary] of byRequest.entries()) {
-    const entity = entityByRequest.get(request);
-    if (!entity) {
-      byRequest.delete(request);
-      continue;
+  for (const [entity, requests] of summaries.requestsByEntity.entries()) {
+    if (entity !== firstPartyEntity) {
+      events.push(...requests);
     }
-
-    const entitySummary = byEntity.get(entity) || {...defaultSummary};
-    entitySummary.transferSize += requestSummary.transferSize;
-    entitySummary.mainThreadTime =
-        Types.Timing.MicroSeconds(entitySummary.mainThreadTime + requestSummary.mainThreadTime);
-    byEntity.set(entity, entitySummary);
-
-    const entityRequests = requestsByEntity.get(entity) || [];
-    entityRequests.push(request);
-    requestsByEntity.set(entity, entityRequests);
   }
 
-  return {byEntity, byRequest, requestsByEntity};
+  return events;
 }
 
 export function generateInsight(
@@ -198,25 +51,15 @@ export function generateInsight(
     return Helpers.Timing.eventIsInBounds(event, context.bounds);
   });
 
-  const entityByRequest = new Map<Types.Events.SyntheticNetworkRequest, Entity>();
-  const madeUpEntityCache = new Map<string, Entity>();
-  for (const request of networkRequests) {
-    const url = request.args.data.url;
-    const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(madeUpEntityCache, url);
-    if (entity) {
-      entityByRequest.set(request, entity);
-    }
-  }
-
-  const selfTimeByUrl = getSelfTimeByUrl(parsedTrace, context);
-  // TODO(crbug.com/352244718): re-work to still collect main thread activity if no request is present
-  const summaries = getSummaries(networkRequests, entityByRequest, selfTimeByUrl);
+  const {entityByRequest, madeUpEntityCache, summaries} = Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(
+      parsedTrace as Handlers.Types.ParsedTrace, context.bounds, networkRequests);
 
-  const firstPartyUrl = context.navigation?.args.data?.url ?? parsedTrace.Meta.mainFrameURL;
-  const firstPartyEntity =
-      ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) || makeUpEntity(madeUpEntityCache, firstPartyUrl);
+  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
+  const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
+      Extras.ThirdParties.makeUpEntity(madeUpEntityCache, firstPartyUrl);
 
   return {
+    relatedEvents: getRelatedEvents(summaries, firstPartyEntity),
     entityByRequest,
     requestsByEntity: summaries.requestsByEntity,
     summaryByRequest: summaries.byRequest,

package/front_end/models/trace/insights/Viewport.ts

@@ -48,6 +48,7 @@ export function generateInsight(
       return {
         mobileOptimized: false,
         viewportEvent,
+        metricSavings: {INP: 300 as Types.Timing.MilliSeconds},
       };
     }
   }

package/front_end/models/trace/insights/types.ts

@@ -43,17 +43,20 @@ export enum InsightWarning {
   NO_LAYOUT = 'NO_LAYOUT',
 }
 
+export interface MetricSavings {
+  /* eslint-disable @typescript-eslint/naming-convention */
+  FCP?: Types.Timing.MilliSeconds;
+  LCP?: Types.Timing.MilliSeconds;
+  TBT?: Types.Timing.MilliSeconds;
+  CLS?: number;
+  INP?: Types.Timing.MilliSeconds;
+  /* eslint-enable @typescript-eslint/naming-convention */
+}
+
 export type InsightResult<R extends Record<string, unknown>> = R&{
+  relatedEvents?: Types.Events.Event[],
   warnings?: InsightWarning[],
-  metricSavings?: {
-    /* eslint-disable @typescript-eslint/naming-convention */
-    FCP?: number,
-    LCP?: number,
-    TBT?: number,
-    CLS?: number,
-    INP?: number,
-    /* eslint-enable @typescript-eslint/naming-convention */
-  },
+  metricSavings?: MetricSavings,
 };
 
 /**
@@ -64,8 +67,8 @@ export type InsightResult<R extends Record<string, unknown>> = R&{
 export type InsightSets = {
   /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
   id: Types.Events.NavigationId,
-  /** The URL. Shown in the accordion list. */
-  label: string,
+  /** The URL to show in the accordion list. */
+  url: URL,
   frameId: string,
   bounds: Types.Timing.TraceWindowMicroSeconds,
   data: InsightResults,

package/front_end/models/trace/lantern/core/NetworkAnalyzer.test.ts

@@ -42,7 +42,7 @@ describe('NetworkAnalyzer', () => {
           connectionReused: false,
           networkRequestTime: 10,
           networkEndTime: 10,
-          transferSize: 0,
+          transferSize: 10000,
           protocol: opts.protocol || 'http/1.1',
           parsedURL: {scheme: url.match(/https?/)[0], securityOrigin: url.match(/.*\.com/)[0]},
           timing: opts.timing || null,
@@ -339,9 +339,9 @@ describe('NetworkAnalyzer', () => {
       );
     }
 
-    it('should return Infinity for no/missing records', () => {
-      assert.strictEqual(estimateThroughput([]), Infinity);
-      assert.strictEqual(estimateThroughput([createThroughputRecord(0, 0, {finished: false})]), Infinity);
+    it('should return null for no/missing records', () => {
+      assert.strictEqual(estimateThroughput([]), null);
+      assert.strictEqual(estimateThroughput([createThroughputRecord(0, 0, {finished: false})]), null);
     });
 
     it('should compute correctly for a basic waterfall', () => {

package/front_end/models/trace/lantern/core/NetworkAnalyzer.ts

@@ -412,7 +412,7 @@ class NetworkAnalyzer {
       function collectEstimates(estimator: (e: RequestInfo) => number[] | number | undefined, multiplier = 1): void {
         for (const request of originRequests) {
           const timing = request.timing;
-          if (!timing) {
+          if (!timing || !request.transferSize) {
             continue;
           }
 
@@ -489,9 +489,9 @@ class NetworkAnalyzer {
   /**
    * Computes the average throughput for the given requests in bits/second.
    * Excludes data URI, failed or otherwise incomplete, and cached requests.
-   * Returns Infinity if there were no analyzable network requests.
+   * Returns null if there were no analyzable network requests.
    */
-  static estimateThroughput(records: Lantern.NetworkRequest[]): number {
+  static estimateThroughput(records: Lantern.NetworkRequest[]): number|null {
     let totalBytes = 0;
 
     // We will measure throughput by summing the total bytes downloaded by the total time spent
@@ -518,7 +518,7 @@ class NetworkAnalyzer {
                                .sort((a, b) => a.time - b.time);
 
     if (!timeBoundaries.length) {
-      return Infinity;
+      return null;
     }
 
     let inflight = 0;
@@ -576,8 +576,12 @@ class NetworkAnalyzer {
     };
   }
 
-  static analyze(records: Lantern.NetworkRequest[]): Lantern.Simulation.Settings['networkAnalysis'] {
+  static analyze(records: Lantern.NetworkRequest[]): Lantern.Simulation.Settings['networkAnalysis']|null {
     const throughput = NetworkAnalyzer.estimateThroughput(records);
+    if (throughput === null) {
+      return null;
+    }
+
     return {
       throughput,
       ...NetworkAnalyzer.computeRTTAndServerResponseTime(records),

package/front_end/models/trace/lantern/graph/BaseNode.ts

@@ -5,8 +5,8 @@
 import * as Core from '../core/core.js';
 import type * as Lantern from '../types/types.js';
 
-import {type CPUNode} from './CPUNode.js';
-import {type NetworkNode} from './NetworkNode.js';
+import type {CPUNode} from './CPUNode.js';
+import type {NetworkNode} from './NetworkNode.js';
 
 /**
  * A union of all types derived from BaseNode, allowing type check discrimination

package/front_end/models/trace/lantern/graph/PageDependencyGraph.ts

@@ -2,12 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Node} from './BaseNode.js';
-import {CPUNode} from './CPUNode.js';
-import {NetworkNode} from './NetworkNode.js';
 import * as Core from '../core/core.js';
 import type * as Lantern from '../types/types.js';
 
+import type {Node} from './BaseNode.js';
+import {CPUNode} from './CPUNode.js';
+import {NetworkNode} from './NetworkNode.js';
+
 // COMPAT: m71+ We added RunTask to `disabled-by-default-lighthouse`
 const SCHEDULABLE_TASK_TITLE_LH = 'RunTask';
 // m69-70 DoWork is different and we now need RunTask, see https://bugs.chromium.org/p/chromium/issues/detail?id=871204#c11

package/front_end/models/trace/lantern/simulation/Simulator.ts

@@ -143,7 +143,7 @@ class Simulator<T = Lantern.AnyNetworkObject> {
       throw new Core.LanternError(`Invalid rtt ${this._rtt}`);
     }
     if (!Number.isFinite(this.throughput)) {
-      throw new Core.LanternError(`Invalid rtt ${this.throughput}`);
+      throw new Core.LanternError(`Invalid throughput ${this.throughput}`);
     }
   }
 

package/front_end/models/trace/lantern/simulation/TCPConnection.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type ConnectionTiming} from './SimulationTimingMap.js';
+import type {ConnectionTiming} from './SimulationTimingMap.js';
 
 interface DownloadOptions {
   dnsResolutionTime?: number;

package/front_end/models/trace/lantern/testing/MetricTestUtils.ts

@@ -13,7 +13,7 @@ function toLanternTrace(traceEvents: readonly Trace.Types.Events.Event[]): Lante
 
 async function runTrace(trace: Lantern.Types.Trace) {
   const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
-  await processor.parse(trace.traceEvents as Trace.Types.Events.Event[]);
+  await processor.parse(trace.traceEvents as Trace.Types.Events.Event[], {isCPUProfile: false, isFreshRecording: true});
   if (!processor.parsedTrace) {
     throw new Error('No data');
   }
@@ -32,6 +32,10 @@ async function getComputationDataFromFixture({trace, settings, url}: {
   const parsedTrace = await runTrace(trace);
   const requests = Trace.LanternComputationData.createNetworkRequests(trace, parsedTrace);
   const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
+  if (!networkAnalysis) {
+    throw new Error('no networkAnalysis');
+  }
+
   const frameId = parsedTrace.Meta.mainFrameId;
   const navigationId = parsedTrace.Meta.mainFrameNavigations[0].args.data?.navigationId;
   if (!navigationId) {

package/front_end/models/trace/root-causes/LayoutShift.ts

@@ -4,11 +4,11 @@
 
 import * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import {type ParsedTrace} from '../handlers/types.js';
+import type {ParsedTrace} from '../handlers/types.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type RootCauseProtocolInterface} from './RootCauses.js';
+import type {RootCauseProtocolInterface} from './RootCauses.js';
 
 export type CSSDimensions = {
   width?: string,
@@ -61,25 +61,8 @@ function setDefaultValue(
   });
 }
 
-// Important: we purposefully treat `potentially_blocking` as
-// non-render-blocking here because:
-// 1. An async script can run on the main thread at any point, including before
-//    the page is loaded
-// 2. An async script will never block the parsing and rendering process of the
-//    browser.
-// 3. Therefore, from a developer's point of view, there is nothing more they
-//    can do if they've put `async` on, and within the context of Insights, we
-//    shouldn't report an async script as render blocking.
-// In the future we may want to consider suggesting the use of `defer` over
-// `async`, as it doesn't have this concern, but for now we'll allow `async`
-// and not report it as an issue.
-const NON_RENDER_BLOCKING_VALUES = new Set<Types.Events.RenderBlocking>([
-  'non_blocking',
-  'potentially_blocking',
-]);
 function networkRequestIsRenderBlockingInFrame(event: Types.Events.SyntheticNetworkRequest, frameId: string): boolean {
-  const isRenderBlocking = !NON_RENDER_BLOCKING_VALUES.has(event.args.data.renderBlocking);
-  return isRenderBlocking && event.args.data.frame === frameId;
+  return event.args.data.frame === frameId && Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(event);
 }
 
 interface Options {

package/front_end/models/trace/types/Extensions.ts

@@ -2,16 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {
-  type Args,
-  type Event,
-  type Phase,
-  type SyntheticBased,
-} from './TraceEvents.js';
+import type {Args, Event, Phase, SyntheticBased} from './TraceEvents.js';
 
 export type ExtensionEntryType = 'track-entry'|'marker';
 
-const extensionPalette = [
+export const extensionPalette = [
   'primary',
   'primary-light',
   'primary-dark',
@@ -22,6 +17,7 @@ const extensionPalette = [
   'tertiary-light',
   'tertiary-dark',
   'error',
+  'warning',
 ] as const;
 
 export type ExtensionColorFromPalette = typeof extensionPalette[number];

package/front_end/models/trace/types/File.ts

@@ -3,14 +3,8 @@
 // found in the LICENSE file.
 import type * as Protocol from '../../../generated/protocol.js';
 
-import {type TraceWindowMicroSeconds} from './Timing.js';
-import {
-  type Event,
-  type LegacyTimelineFrame,
-  type ProcessID,
-  type SampleIndex,
-  type ThreadID,
-} from './TraceEvents.js';
+import type {TraceWindowMicroSeconds} from './Timing.js';
+import type {Event, LegacyTimelineFrame, ProcessID, SampleIndex, ThreadID} from './TraceEvents.js';
 
 export type TraceFile = {
   traceEvents: readonly Event[],