lighthouse 12.0.0-dev.20240611 → 12.0.0-dev.20240612

package/core/lib/lantern/TBTUtils.test.js

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Lantern from './lantern.js';
+
+const {calculateSumOfBlockingTime} = Lantern.TBTUtils;
+
+describe('TotalBlockingTime utils', () => {
+  it('reports 0 when no task is longer than 50ms', () => {
+    const events = [
+      {start: 1000, end: 1050, duration: 50},
+      {start: 2000, end: 2010, duration: 10},
+    ];
+
+    const fcpTimeMs = 500;
+    const interactiveTimeMs = 4000;
+
+    expect(
+      calculateSumOfBlockingTime(events, fcpTimeMs, interactiveTimeMs)
+    ).toBe(0);
+  });
+
+  it('only looks at tasks within FCP and TTI', () => {
+    const events = [
+      {start: 1000, end: 1060, duration: 60},
+      {start: 2000, end: 2100, duration: 100},
+      {start: 2300, end: 2450, duration: 150},
+      {start: 2600, end: 2800, duration: 200},
+    ];
+
+    const fcpTimeMs = 1500;
+    const interactiveTimeMs = 2500;
+
+    expect(
+      calculateSumOfBlockingTime(events, fcpTimeMs, interactiveTimeMs)
+    ).toBe(150);
+  });
+
+  it('clips before finding blocking regions', () => {
+    const fcpTimeMs = 150;
+    const interactiveTimeMs = 300;
+
+    const events = [
+      // The clipping is done first, so the task becomes [150, 200] after clipping and contributes
+      // 0ms of blocking time. This is in contrast to first calculating the blocking region ([100,
+      // 200]) and then clipping at FCP (150ms), which yields 50ms blocking time.
+      {start: 50, end: 200, duration: 150},
+      // Similarly, the task is first clipped above to be [240, 300], and then contributes 10ms
+      // blocking time.
+      {start: 240, end: 460, duration: 120},
+    ];
+
+    expect(
+      calculateSumOfBlockingTime(events, fcpTimeMs, interactiveTimeMs)
+    ).toBe(10); // 0ms + 10ms.
+  });
+
+  // TTI can happen in the middle of a task, for example, if TTI is at FMP which occurs as part
+  // of a larger task, or in the lantern case where we use estimate TTI using a different graph
+  // from the one used to estimate TBT.
+  it('clips properly if TTI falls in the middle of a task', () => {
+    const fcpTimeMs = 1000;
+    const interactiveTimeMs = 2000;
+
+    expect(
+      calculateSumOfBlockingTime(
+        [{start: 1951, end: 2100, duration: 149}],
+        fcpTimeMs,
+        interactiveTimeMs
+      )
+    ).toBe(0); // Duration after clipping is 49, which is < 50.
+    expect(
+      calculateSumOfBlockingTime(
+        [{start: 1950, end: 2100, duration: 150}],
+        fcpTimeMs,
+        interactiveTimeMs
+      )
+    ).toBe(0); // Duration after clipping is 50, so time after 50ms is 0ms.
+    expect(
+      calculateSumOfBlockingTime(
+        [{start: 1949, end: 2100, duration: 151}],
+        fcpTimeMs,
+        interactiveTimeMs
+      )
+    ).toBe(1); // Duration after clipping is 51, so time after 50ms is 1ms.
+  });
+
+  it('clips properly if FCP falls in the middle of a task', () => {
+    const fcpTimeMs = 1000;
+    const interactiveTimeMs = 2000;
+
+    expect(
+      calculateSumOfBlockingTime(
+        [{start: 900, end: 1049, duration: 149}],
+        fcpTimeMs,
+        interactiveTimeMs
+      )
+    ).toBe(0); // Duration after clipping is 49, which is < 50.
+    expect(
+      calculateSumOfBlockingTime(
+        [{start: 900, end: 1050, duration: 150}],
+        fcpTimeMs,
+        interactiveTimeMs
+      )
+    ).toBe(0); // Duration after clipping is 50, so time after 50ms is 0ms.
+    expect(
+      calculateSumOfBlockingTime(
+        [{start: 900, end: 1051, duration: 151}],
+        fcpTimeMs,
+        interactiveTimeMs
+      )
+    ).toBe(1); // Duration after clipping is 51, so time after 50ms is 1ms.
+  });
+
+  // This can happen in the lantern metric case, where we use the optimistic
+  // TTI and pessimistic FCP.
+  it('returns 0 if interactiveTime is earlier than FCP', () => {
+    const fcpTimeMs = 2050;
+    const interactiveTimeMs = 1050;
+
+    const events = [{start: 500, end: 3000, duration: 2500}];
+
+    expect(
+      calculateSumOfBlockingTime(events, fcpTimeMs, interactiveTimeMs)
+    ).toBe(0);
+  });
+});

package/core/lib/lantern/{trace-engine-computation-data.d.ts → TraceEngineComputationData.d.ts}

@@ -19,7 +19,7 @@ export function createNetworkRequests(trace: Lantern.Trace, traceEngineData: Tra
  * @param {TraceEngine.Handlers.Types.TraceParseData} traceEngineData
  * @param {Lantern.Simulation.URL=} URL
  */
-export function createGraph(requests: Lantern.NetworkRequest[], trace: Lantern.Trace, traceEngineData: TraceEngine.Handlers.Types.TraceParseData, URL?: Lantern.Simulation.URL | undefined): import("./page-dependency-graph.js").Node;
+export function createGraph(requests: Lantern.NetworkRequest[], trace: Lantern.Trace, traceEngineData: TraceEngine.Handlers.Types.TraceParseData, URL?: Lantern.Simulation.URL | undefined): import("./PageDependencyGraph.js").Node;
 import * as TraceEngine from '@paulirish/trace_engine';
-import * as Lantern from './types/lantern.js';
-//# sourceMappingURL=trace-engine-computation-data.d.ts.map
+import * as Lantern from './lantern.js';
+//# sourceMappingURL=TraceEngineComputationData.d.ts.map

package/core/lib/lantern/{trace-engine-computation-data.js → TraceEngineComputationData.js}

@@ -7,9 +7,7 @@
 import * as TraceEngine from '@paulirish/trace_engine';
 import * as Protocol from '@paulirish/trace_engine/generated/protocol.js';
 
-import * as Lantern from './types/lantern.js';
-import {PageDependencyGraph} from './page-dependency-graph.js';
-import {RESOURCE_TYPES} from '../network-request.js';
+import * as Lantern from './lantern.js';
 
 /** @typedef {import('@paulirish/trace_engine/models/trace/handlers/PageLoadMetricsHandler.js').MetricName} MetricName */
 /** @typedef {import('@paulirish/trace_engine/models/trace/handlers/PageLoadMetricsHandler.js').MetricScore} MetricScore */
@@ -232,7 +230,7 @@ function chooseInitiatorRequest(request, requestsByURL) {
     return request.redirectSource;
   }
 
-  const initiatorURL = PageDependencyGraph.getNetworkInitiators(request)[0];
+  const initiatorURL = Lantern.PageDependencyGraph.getNetworkInitiators(request)[0];
   let candidates = requestsByURL.get(initiatorURL) || [];
   // The (valid) initiator must come before the initiated request.
   candidates = candidates.filter(c => {
@@ -243,7 +241,7 @@ function chooseInitiatorRequest(request, requestsByURL) {
     // Disambiguate based on prefetch. Prefetch requests have type 'Other' and cannot
     // initiate requests, so we drop them here.
     const nonPrefetchCandidates = candidates.filter(
-      cand => cand.resourceType !== RESOURCE_TYPES.Other);
+      cand => cand.resourceType !== Lantern.NetworkRequestTypes.Other);
     if (nonPrefetchCandidates.length) {
       candidates = nonPrefetchCandidates;
     }
@@ -258,7 +256,7 @@ function chooseInitiatorRequest(request, requestsByURL) {
   if (candidates.length > 1 && request.initiator.type === 'parser') {
     // Filter to just Documents when initiator type is parser.
     const documentCandidates = candidates.filter(cand =>
-      cand.resourceType === RESOURCE_TYPES.Document);
+      cand.resourceType === Lantern.NetworkRequestTypes.Document);
     if (documentCandidates.length) {
       candidates = documentCandidates;
     }
@@ -458,7 +456,7 @@ function createGraph(requests, trace, traceEngineData, URL) {
     URL.mainDocumentUrl = request.url;
   }
 
-  return PageDependencyGraph.createGraph(mainThreadEvents, requests, URL);
+  return Lantern.PageDependencyGraph.createGraph(mainThreadEvents, requests, URL);
 }
 
 export {

package/core/lib/lantern/lantern.d.ts

@@ -1,50 +1,20 @@
+export { BaseNode } from "./BaseNode.js";
+export { CPUNode } from "./CpuNode.js";
+export { LanternError as Error } from "./LanternError.js";
+export { Metric } from "./Metric.js";
+export { NetworkNode } from "./NetworkNode.js";
+export { PageDependencyGraph } from "./PageDependencyGraph.js";
+export * as Metrics from "./metrics/metrics.js";
+export * as Simulation from "./simulation/simulation.js";
+export * as TBTUtils from "./TBTUtils.js";
+export * as TraceEngineComputationData from "./TraceEngineComputationData.js";
+export type NetworkRequest<T = any> = Lantern.NetworkRequest<T>;
+export type ResourcePriority = Lantern.ResourcePriority;
+export type ResourceTiming = Lantern.ResourceTiming;
+export type ResourceType = Lantern.ResourceType;
+export type Trace = Lantern.Trace;
+export type TraceEvent = Lantern.TraceEvent;
 /** @type {Lantern.Util.SelfMap<Lantern.ResourceType>} */
 export const NetworkRequestTypes: Lantern.Util.SelfMap<Lantern.ResourceType>;
-export namespace constants {
-    export { throttling };
-}
 import * as Lantern from './types/lantern.js';
-declare namespace throttling {
-    export { DEVTOOLS_RTT_ADJUSTMENT_FACTOR };
-    export { DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR };
-    export namespace mobileSlow4G {
-        const rttMs: number;
-        const throughputKbps: number;
-        const requestLatencyMs: number;
-        const downloadThroughputKbps: number;
-        const uploadThroughputKbps: number;
-        const cpuSlowdownMultiplier: number;
-    }
-    export namespace mobileRegular3G {
-        const rttMs_1: number;
-        export { rttMs_1 as rttMs };
-        const throughputKbps_1: number;
-        export { throughputKbps_1 as throughputKbps };
-        const requestLatencyMs_1: number;
-        export { requestLatencyMs_1 as requestLatencyMs };
-        const downloadThroughputKbps_1: number;
-        export { downloadThroughputKbps_1 as downloadThroughputKbps };
-        const uploadThroughputKbps_1: number;
-        export { uploadThroughputKbps_1 as uploadThroughputKbps };
-        const cpuSlowdownMultiplier_1: number;
-        export { cpuSlowdownMultiplier_1 as cpuSlowdownMultiplier };
-    }
-    export namespace desktopDense4G {
-        const rttMs_2: number;
-        export { rttMs_2 as rttMs };
-        const throughputKbps_2: number;
-        export { throughputKbps_2 as throughputKbps };
-        const cpuSlowdownMultiplier_2: number;
-        export { cpuSlowdownMultiplier_2 as cpuSlowdownMultiplier };
-        const requestLatencyMs_2: number;
-        export { requestLatencyMs_2 as requestLatencyMs };
-        const downloadThroughputKbps_2: number;
-        export { downloadThroughputKbps_2 as downloadThroughputKbps };
-        const uploadThroughputKbps_2: number;
-        export { uploadThroughputKbps_2 as uploadThroughputKbps };
-    }
-}
-declare const DEVTOOLS_RTT_ADJUSTMENT_FACTOR: 3.75;
-declare const DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR: 0.9;
-export {};
 //# sourceMappingURL=lantern.d.ts.map

package/core/lib/lantern/lantern.js

@@ -28,48 +28,24 @@ const NetworkRequestTypes = {
   Prefetch: 'Prefetch',
 };
 
-const DEVTOOLS_RTT_ADJUSTMENT_FACTOR = 3.75;
-const DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR = 0.9;
+export {BaseNode} from './BaseNode.js';
+export {CPUNode} from './CpuNode.js';
+export {LanternError as Error} from './LanternError.js';
+export {Metric} from './Metric.js';
+export {NetworkNode} from './NetworkNode.js';
+export {PageDependencyGraph} from './PageDependencyGraph.js';
+export * as Metrics from './metrics/metrics.js';
+export * as Simulation from './simulation/simulation.js';
+export * as TBTUtils from './TBTUtils.js';
+export * as TraceEngineComputationData from './TraceEngineComputationData.js';
 
-const throttling = {
-  DEVTOOLS_RTT_ADJUSTMENT_FACTOR,
-  DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
-  // These values align with WebPageTest's definition of "Fast 3G"
-  // But offer similar characteristics to roughly the 75th percentile of 4G connections.
-  mobileSlow4G: {
-    rttMs: 150,
-    throughputKbps: 1.6 * 1024,
-    requestLatencyMs: 150 * DEVTOOLS_RTT_ADJUSTMENT_FACTOR,
-    downloadThroughputKbps: 1.6 * 1024 * DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
-    uploadThroughputKbps: 750 * DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
-    cpuSlowdownMultiplier: 4,
-  },
-  // These values partially align with WebPageTest's definition of "Regular 3G".
-  // These values are meant to roughly align with Chrome UX report's 3G definition which are based
-  // on HTTP RTT of 300-1400ms and downlink throughput of <700kbps.
-  mobileRegular3G: {
-    rttMs: 300,
-    throughputKbps: 700,
-    requestLatencyMs: 300 * DEVTOOLS_RTT_ADJUSTMENT_FACTOR,
-    downloadThroughputKbps: 700 * DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
-    uploadThroughputKbps: 700 * DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
-    cpuSlowdownMultiplier: 4,
-  },
-  // Using a "broadband" connection type
-  // Corresponds to "Dense 4G 25th percentile" in https://docs.google.com/document/d/1Ft1Bnq9-t4jK5egLSOc28IL4TvR-Tt0se_1faTA4KTY/edit#heading=h.bb7nfy2x9e5v
-  desktopDense4G: {
-    rttMs: 40,
-    throughputKbps: 10 * 1024,
-    cpuSlowdownMultiplier: 1,
-    requestLatencyMs: 0, // 0 means unset
-    downloadThroughputKbps: 0,
-    uploadThroughputKbps: 0,
-  },
-};
-
-const constants = {throttling};
+/** @template [T=any] @typedef {Lantern.NetworkRequest<T>} NetworkRequest */
+/** @typedef {Lantern.ResourcePriority} ResourcePriority */
+/** @typedef {Lantern.ResourceTiming} ResourceTiming */
+/** @typedef {Lantern.ResourceType} ResourceType */
+/** @typedef {Lantern.Trace} Trace */
+/** @typedef {Lantern.TraceEvent} TraceEvent */
 
 export {
   NetworkRequestTypes,
-  constants,
 };

package/core/lib/lantern/metrics/{first-contentful-paint.d.ts → FirstContentfulPaint.d.ts}

@@ -1,10 +1,10 @@
-export type Node = import('../base-node.js').Node;
-export type NetworkNode<T> = import('../network-node.js').NetworkNode<T>;
-export type CpuNode = import('../cpu-node.js').CPUNode;
-/** @typedef {import('../base-node.js').Node} Node */
-/** @template T @typedef {import('../network-node.js').NetworkNode<T>} NetworkNode */
-/** @typedef {import('../cpu-node.js').CPUNode} CpuNode */
-export class FirstContentfulPaint extends Metric {
+export type Node = import('../BaseNode.js').Node;
+export type NetworkNode<T> = import('../NetworkNode.js').NetworkNode<T>;
+export type CpuNode = import('../CpuNode.js').CPUNode;
+/** @typedef {import('../BaseNode.js').Node} Node */
+/** @template T @typedef {import('../NetworkNode.js').NetworkNode<T>} NetworkNode */
+/** @typedef {import('../CpuNode.js').CPUNode} CpuNode */
+export class FirstContentfulPaint extends Lantern.Metric {
     /**
      * @template T
      * @typedef FirstPaintBasedGraphOpts
@@ -37,7 +37,7 @@ export class FirstContentfulPaint extends Metric {
          * The function that determines
          * which resources should be considered *possibly* render-blocking.
          */
-        treatNodeAsRenderBlocking: (arg0: import("../network-node.js").NetworkNode<T>) => boolean;
+        treatNodeAsRenderBlocking: (arg0: Lantern.NetworkNode<T>) => boolean;
         /**
          * The function that
          * determines which CPU nodes should also be included in our blocking node IDs set,
@@ -66,7 +66,7 @@ export class FirstContentfulPaint extends Metric {
          * The function that determines
          * which resources should be considered *possibly* render-blocking.
          */
-        treatNodeAsRenderBlocking: (arg0: import("../network-node.js").NetworkNode<T_1>) => boolean;
+        treatNodeAsRenderBlocking: (arg0: Lantern.NetworkNode<T_1>) => boolean;
         /**
          * The function that
          * determines which CPU nodes should also be included in our blocking node IDs set,
@@ -75,5 +75,5 @@ export class FirstContentfulPaint extends Metric {
         additionalCpuNodesToTreatAsRenderBlocking?: ((arg0: CpuNode) => boolean) | undefined;
     }): Node;
 }
-import { Metric } from '../metric.js';
-//# sourceMappingURL=first-contentful-paint.d.ts.map
+import * as Lantern from '../lantern.js';
+//# sourceMappingURL=FirstContentfulPaint.d.ts.map

package/core/lib/lantern/metrics/{first-contentful-paint.js → FirstContentfulPaint.js}

@@ -4,15 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as Lantern from '../types/lantern.js';
-import {Metric} from '../metric.js';
-import {BaseNode} from '../base-node.js';
+import * as Lantern from '../lantern.js';
 
-/** @typedef {import('../base-node.js').Node} Node */
-/** @template T @typedef {import('../network-node.js').NetworkNode<T>} NetworkNode */
-/** @typedef {import('../cpu-node.js').CPUNode} CpuNode */
+/** @typedef {import('../BaseNode.js').Node} Node */
+/** @template T @typedef {import('../NetworkNode.js').NetworkNode<T>} NetworkNode */
+/** @typedef {import('../CpuNode.js').CPUNode} CpuNode */
 
-class FirstContentfulPaint extends Metric {
+class FirstContentfulPaint extends Lantern.Metric {
   /**
    * @return {Lantern.Simulation.MetricCoefficients}
    */
@@ -57,7 +55,7 @@ class FirstContentfulPaint extends Metric {
     /** @type {Array<CpuNode>} */
     const cpuNodes = [];
     graph.traverse(node => {
-      if (node.type === BaseNode.TYPES.CPU) {
+      if (node.type === Lantern.BaseNode.TYPES.CPU) {
         // A task is *possibly* render blocking if it *started* before cutoffTimestamp.
         // We use startTime here because the paint event can be *inside* the task that was render blocking.
         if (node.startTime <= cutoffTimestamp) cpuNodes.push(node);
@@ -75,7 +73,7 @@ class FirstContentfulPaint extends Metric {
     cpuNodes.sort((a, b) => a.startTime - b.startTime);
 
     // A script is *possibly* render blocking if it finished loading before cutoffTimestamp.
-    const possiblyRenderBlockingScriptUrls = Metric.getScriptUrls(graph, node => {
+    const possiblyRenderBlockingScriptUrls = Lantern.Metric.getScriptUrls(graph, node => {
       // The optimistic LCP treatNodeAsRenderBlocking fn wants to exclude some images in the graph,
       // but here it only receives scripts to evaluate. It's a no-op in this case, but it will
       // matter below in the getFirstPaintBasedGraph clone operation.
@@ -147,7 +145,7 @@ class FirstContentfulPaint extends Metric {
     const {definitelyNotRenderBlockingScriptUrls, renderBlockingCpuNodeIds} = rbData;
 
     return dependencyGraph.cloneWithRelationships(node => {
-      if (node.type === BaseNode.TYPES.NETWORK) {
+      if (node.type === Lantern.BaseNode.TYPES.NETWORK) {
         // Exclude all nodes that ended after cutoffTimestamp (except for the main document which we always consider necessary)
         // endTime is negative if request does not finish, make sure startTime isn't after cutoffTimestamp in this case.
         const endedAfterPaint = node.endTime > cutoffTimestamp || node.startTime > cutoffTimestamp;

package/core/lib/lantern/metrics/FirstContentfulPaint.test.js

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import assert from 'assert/strict';
+
+import * as Lantern from '../lantern.js';
+import {readJson} from '../../../test/test-utils.js';
+import {getComputationDataFromFixture} from './MetricTestUtils.js';
+
+const {FirstContentfulPaint} = Lantern.Metrics;
+
+const trace = readJson('../../../fixtures/artifacts/progressive-app/trace.json', import.meta);
+
+describe('Metrics: Lantern FCP', () => {
+  it('should compute predicted value', async () => {
+    const data = await getComputationDataFromFixture({trace});
+    const result = await FirstContentfulPaint.compute(data);
+
+    expect({
+      timing: Math.round(result.timing),
+      optimistic: Math.round(result.optimisticEstimate.timeInMs),
+      pessimistic: Math.round(result.pessimisticEstimate.timeInMs),
+      optimisticNodeTimings: result.optimisticEstimate.nodeTimings.size,
+      pessimisticNodeTimings: result.pessimisticEstimate.nodeTimings.size,
+    }).toMatchSnapshot();
+    assert.ok(result.optimisticGraph, 'should have created optimistic graph');
+    assert.ok(result.pessimisticGraph, 'should have created pessimistic graph');
+  });
+
+  it('should handle negative request networkEndTime', async () => {
+    const data = await getComputationDataFromFixture({trace});
+    data.graph.request.networkEndTime = -1;
+    const result = await FirstContentfulPaint.compute(data);
+
+    const optimisticNodes = [];
+    result.optimisticGraph.traverse(node => {
+      if (node.type === 'network') {
+        optimisticNodes.push(node);
+      }
+    });
+    expect(optimisticNodes.map(node => node.request.url)).toEqual(['https://squoosh.app/']);
+
+    const pessimisticNodes = [];
+    result.pessimisticGraph.traverse(node => {
+      if (node.type === 'network') {
+        pessimisticNodes.push(node);
+      }
+    });
+    expect(pessimisticNodes.map(node => node.request.url)).toEqual(['https://squoosh.app/']);
+  });
+});

package/core/lib/lantern/metrics/{interactive.d.ts → Interactive.d.ts}

@@ -1,5 +1,5 @@
-export type Node = import('../base-node.js').Node;
-export class Interactive extends Metric {
+export type Node = import('../BaseNode.js').Node;
+export class Interactive extends Lantern.Metric {
     /**
      * @param {Node} dependencyGraph
      * @return {Node}
@@ -16,6 +16,5 @@ export class Interactive extends Metric {
      */
     static getLastLongTaskEndTime(nodeTimings: Lantern.Simulation.Result['nodeTimings'], duration?: number): number;
 }
-import { Metric } from '../metric.js';
-import * as Lantern from '../types/lantern.js';
-//# sourceMappingURL=interactive.d.ts.map
+import * as Lantern from '../lantern.js';
+//# sourceMappingURL=Interactive.d.ts.map

package/core/lib/lantern/metrics/{interactive.js → Interactive.js}

@@ -4,17 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as Lantern from '../types/lantern.js';
-import {Metric} from '../metric.js';
-import {BaseNode} from '../base-node.js';
-import {NetworkRequestTypes} from '../lantern.js';
+import * as Lantern from '../lantern.js';
 
-/** @typedef {import('../base-node.js').Node} Node */
+/** @typedef {import('../BaseNode.js').Node} Node */
 
 // Any CPU task of 20 ms or more will end up being a critical long task on mobile
 const CRITICAL_LONG_TASK_THRESHOLD = 20;
 
-class Interactive extends Metric {
+class Interactive extends Lantern.Metric {
   /**
    * @return {Lantern.Simulation.MetricCoefficients}
    */
@@ -36,13 +33,13 @@ class Interactive extends Metric {
 
     return dependencyGraph.cloneWithRelationships(node => {
       // Include everything that might be a long task
-      if (node.type === BaseNode.TYPES.CPU) {
+      if (node.type === Lantern.BaseNode.TYPES.CPU) {
         return node.duration > minimumCpuTaskDuration;
       }
 
       // Include all scripts and high priority requests, exclude all images
-      const isImage = node.request.resourceType === NetworkRequestTypes.Image;
-      const isScript = node.request.resourceType === NetworkRequestTypes.Script;
+      const isImage = node.request.resourceType === Lantern.NetworkRequestTypes.Image;
+      const isScript = node.request.resourceType === Lantern.NetworkRequestTypes.Script;
       return (
         !isImage &&
         (isScript ||
@@ -62,7 +59,7 @@ class Interactive extends Metric {
 
   /**
    * @param {Lantern.Simulation.Result} simulationResult
-   * @param {import('../metric.js').Extras} extras
+   * @param {import('../Metric.js').Extras} extras
    * @return {Lantern.Simulation.Result}
    */
   static getEstimateFromSimulation(simulationResult, extras) {
@@ -80,8 +77,8 @@ class Interactive extends Metric {
 
   /**
    * @param {Lantern.Simulation.MetricComputationDataInput} data
-   * @param {Omit<import('../metric.js').Extras, 'optimistic'>=} extras
-   * @return {Promise<Lantern.Metric>}
+   * @param {Omit<import('../Metric.js').Extras, 'optimistic'>=} extras
+   * @return {Promise<Lantern.Metrics.Result>}
    */
   static async compute(data, extras) {
     const lcpResult = extras?.lcpResult;
@@ -101,7 +98,7 @@ class Interactive extends Metric {
   static getLastLongTaskEndTime(nodeTimings, duration = 50) {
     return Array.from(nodeTimings.entries())
       .filter(([node, timing]) => {
-        if (node.type !== BaseNode.TYPES.CPU) return false;
+        if (node.type !== Lantern.BaseNode.TYPES.CPU) return false;
         return timing.duration > duration;
       })
       .map(([_, timing]) => timing.endTime)

package/core/lib/lantern/metrics/Interactive.test.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import assert from 'assert/strict';
+
+import * as Lantern from '../lantern.js';
+import {getComputationDataFromFixture} from './MetricTestUtils.js';
+import {readJson} from '../../../test/test-utils.js';
+
+const {Interactive, FirstContentfulPaint, LargestContentfulPaint} = Lantern.Metrics;
+
+const trace = readJson('../../../fixtures/artifacts/progressive-app/trace.json', import.meta);
+const iframeTrace = readJson('../../../fixtures/artifacts/iframe/trace.json', import.meta);
+
+describe('Metrics: Lantern TTI', () => {
+  it('should compute predicted value', async () => {
+    const data = await getComputationDataFromFixture({trace});
+    const result = await Interactive.compute(data, {
+      lcpResult: await LargestContentfulPaint.compute(data, {
+        fcpResult: await FirstContentfulPaint.compute(data),
+      }),
+    });
+
+    expect({
+      timing: Math.round(result.timing),
+      optimistic: Math.round(result.optimisticEstimate.timeInMs),
+      pessimistic: Math.round(result.pessimisticEstimate.timeInMs),
+    }).toMatchSnapshot();
+    assert.equal(result.optimisticEstimate.nodeTimings.size, 14);
+    assert.equal(result.pessimisticEstimate.nodeTimings.size, 31);
+    assert.ok(result.optimisticGraph, 'should have created optimistic graph');
+    assert.ok(result.pessimisticGraph, 'should have created pessimistic graph');
+  });
+
+  it('should compute predicted value on iframes with substantial layout', async () => {
+    const data = await getComputationDataFromFixture({
+      trace: iframeTrace,
+    });
+    const result = await Interactive.compute(data, {
+      lcpResult: await LargestContentfulPaint.compute(data, {
+        fcpResult: await FirstContentfulPaint.compute(data),
+      }),
+    });
+
+    expect({
+      timing: Math.round(result.timing),
+      optimistic: Math.round(result.optimisticEstimate.timeInMs),
+      pessimistic: Math.round(result.pessimisticEstimate.timeInMs),
+    }).toMatchSnapshot();
+    assert.ok(result.optimisticGraph, 'should have created optimistic graph');
+    assert.ok(result.pessimisticGraph, 'should have created pessimistic graph');
+  });
+});

package/core/lib/lantern/metrics/{largest-contentful-paint.d.ts → LargestContentfulPaint.d.ts}

@@ -1,6 +1,6 @@
-export type Node = import('../base-node.js').Node;
-/** @typedef {import('../base-node.js').Node} Node */
-export class LargestContentfulPaint extends Metric {
+export type Node = import('../BaseNode.js').Node;
+/** @typedef {import('../BaseNode.js').Node} Node */
+export class LargestContentfulPaint extends Lantern.Metric {
     /**
      * Low priority image nodes are usually offscreen and very unlikely to be the
      * resource that is required for LCP. Our LCP graphs include everything except for these images.
@@ -15,6 +15,5 @@ export class LargestContentfulPaint extends Metric {
      */
     static getEstimateFromSimulation(simulationResult: Lantern.Simulation.Result): Lantern.Simulation.Result;
 }
-import { Metric } from '../metric.js';
-import * as Lantern from '../types/lantern.js';
-//# sourceMappingURL=largest-contentful-paint.d.ts.map
+import * as Lantern from '../lantern.js';
+//# sourceMappingURL=LargestContentfulPaint.d.ts.map