lighthouse 12.0.0-dev.20240610 → 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}

@@ -8,18 +8,18 @@ export type MetricScore = import('@paulirish/trace_engine/models/trace/handlers/
  */
 export function createProcessedNavigation(traceEngineData: TraceEngine.Handlers.Types.TraceParseData): Lantern.Simulation.ProcessedNavigation;
 /**
- * @param {LH.Trace} trace
+ * @param {Lantern.Trace} trace
  * @param {TraceEngine.Handlers.Types.TraceParseData} traceEngineData
  * @return {Lantern.NetworkRequest[]}
  */
-export function createNetworkRequests(trace: LH.Trace, traceEngineData: TraceEngine.Handlers.Types.TraceParseData): Lantern.NetworkRequest[];
+export function createNetworkRequests(trace: Lantern.Trace, traceEngineData: TraceEngine.Handlers.Types.TraceParseData): Lantern.NetworkRequest[];
 /**
  * @param {Lantern.NetworkRequest[]} requests
- * @param {LH.Trace} trace
+ * @param {Lantern.Trace} trace
  * @param {TraceEngine.Handlers.Types.TraceParseData} traceEngineData
- * @param {LH.Artifacts.URL=} URL
+ * @param {Lantern.Simulation.URL=} URL
  */
-export function createGraph(requests: Lantern.NetworkRequest[], trace: LH.Trace, traceEngineData: TraceEngine.Handlers.Types.TraceParseData, URL?: LH.Artifacts.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}

@@ -5,10 +5,9 @@
  */
 
 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 */
@@ -71,7 +70,7 @@ function createParsedUrl(url) {
 
 /**
  * Returns a map of `pid` -> `tid[]`.
- * @param {LH.Trace} trace
+ * @param {Lantern.Trace} trace
  * @return {Map<number, number[]>}
  */
 function findWorkerThreads(trace) {
@@ -140,6 +139,9 @@ function createLanternRequest(traceEngineData, workerThreads, request) {
     fromWorker = true;
   }
 
+  // typescript const enums.... gotta stop using those ...
+  const Other = /** @type {Protocol.Network.InitiatorType.Other} */ ('other');
+
   // `initiator` in the trace does not contain the stack trace for JS-initiated
   // requests. Instead, that is stored in the `stackTrace` property of the SyntheticNetworkRequest.
   // There are some minor differences in the fields, accounted for here.
@@ -148,11 +150,11 @@ function createLanternRequest(traceEngineData, workerThreads, request) {
   // which means less edges in the graph, which mean worse results.
   // TODO: Should fix in Chromium.
   /** @type {Lantern.NetworkRequest['initiator']} */
-  const initiator = request.args.data.initiator ?? {type: 'other'};
+  const initiator = request.args.data.initiator ?? {type: Other};
   if (request.args.data.stackTrace) {
     const callFrames = request.args.data.stackTrace.map(f => {
       return {
-        scriptId: String(f.scriptId),
+        scriptId: /** @type {Protocol.Runtime.ScriptId} */(String(f.scriptId)),
         url: f.url,
         lineNumber: f.lineNumber - 1,
         columnNumber: f.columnNumber - 1,
@@ -160,6 +162,7 @@ function createLanternRequest(traceEngineData, workerThreads, request) {
       };
     });
     initiator.stack = {callFrames};
+    // Note: there is no `parent` to set ...
   }
 
   let resourceType = request.args.data.resourceType;
@@ -227,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 => {
@@ -238,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;
     }
@@ -253,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;
     }
@@ -296,7 +299,7 @@ function linkInitiators(lanternRequests) {
 }
 
 /**
- * @param {LH.Trace} trace
+ * @param {Lantern.Trace} trace
  * @param {TraceEngine.Handlers.Types.TraceParseData} traceEngineData
  * @return {Lantern.NetworkRequest[]}
  */
@@ -390,9 +393,9 @@ function createNetworkRequests(trace, traceEngineData) {
 }
 
 /**
- * @param {LH.Trace} trace
+ * @param {Lantern.Trace} trace
  * @param {TraceEngine.Handlers.Types.TraceParseData} traceEngineData
- * @return {LH.TraceEvent[]}
+ * @return {Lantern.TraceEvent[]}
  */
 function collectMainThreadEvents(trace, traceEngineData) {
   const Meta = traceEngineData.Meta;
@@ -431,9 +434,9 @@ function collectMainThreadEvents(trace, traceEngineData) {
 
 /**
  * @param {Lantern.NetworkRequest[]} requests
- * @param {LH.Trace} trace
+ * @param {Lantern.Trace} trace
  * @param {TraceEngine.Handlers.Types.TraceParseData} traceEngineData
- * @param {LH.Artifacts.URL=} URL
+ * @param {Lantern.Simulation.URL=} URL
  */
 function createGraph(requests, trace, traceEngineData, URL) {
   const mainThreadEvents = collectMainThreadEvents(trace, traceEngineData);
@@ -444,7 +447,6 @@ function createGraph(requests, trace, traceEngineData, URL) {
     URL = {
       requestedUrl: requests[0].url,
       mainDocumentUrl: '',
-      finalDisplayedUrl: '',
     };
 
     let request = requests[0];
@@ -454,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,8 +1,20 @@
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/** @type {LH.Util.SelfMap<LH.Crdp.Network.ResourceType>} */
-export const NetworkRequestTypes: LH.Util.SelfMap<LH.Crdp.Network.ResourceType>;
+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>;
+import * as Lantern from './types/lantern.js';
 //# sourceMappingURL=lantern.d.ts.map

package/core/lib/lantern/lantern.js

@@ -4,7 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/** @type {LH.Util.SelfMap<LH.Crdp.Network.ResourceType>} */
+import * as Lantern from './types/lantern.js';
+
+/** @type {Lantern.Util.SelfMap<Lantern.ResourceType>} */
 const NetworkRequestTypes = {
   XHR: 'XHR',
   Fetch: 'Fetch',
@@ -26,6 +28,24 @@ const NetworkRequestTypes = {
   Prefetch: 'Prefetch',
 };
 
+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';
+
+/** @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,
 };

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

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

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

@@ -4,19 +4,16 @@
  * 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 {LH.Gatherer.Simulation.MetricCoefficients}
+   * @return {Lantern.Simulation.MetricCoefficients}
    */
   static get COEFFICIENTS() {
     return {
@@ -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 ||
@@ -61,9 +58,9 @@ class Interactive extends Metric {
   }
 
   /**
-   * @param {LH.Gatherer.Simulation.Result} simulationResult
-   * @param {import('../metric.js').Extras} extras
-   * @return {LH.Gatherer.Simulation.Result}
+   * @param {Lantern.Simulation.Result} simulationResult
+   * @param {import('../Metric.js').Extras} extras
+   * @return {Lantern.Simulation.Result}
    */
   static getEstimateFromSimulation(simulationResult, extras) {
     if (!extras.lcpResult) throw new Error('missing lcpResult');
@@ -80,8 +77,8 @@ class Interactive extends Metric {
 
   /**
    * @param {Lantern.Simulation.MetricComputationDataInput} data
-   * @param {Omit<import('../metric.js').Extras, 'optimistic'>=} extras
-   * @return {Promise<LH.Artifacts.LanternMetric>}
+   * @param {Omit<import('../Metric.js').Extras, 'optimistic'>=} extras
+   * @return {Promise<Lantern.Metrics.Result>}
    */
   static async compute(data, extras) {
     const lcpResult = extras?.lcpResult;
@@ -95,13 +92,13 @@ class Interactive extends Metric {
   }
 
   /**
-   * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
+   * @param {Lantern.Simulation.Result['nodeTimings']} nodeTimings
    * @return {number}
    */
   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');
+  });
+});