devtools-tracing 1.2.0 → 1.2.2

package/dist/lib/front_end/models/trace/insights/DOMSize.d.ts

@@ -0,0 +1,71 @@
+import type * as Common from '../../../core/common/common.js';
+import * as Handlers from '../handlers/handlers.js';
+import * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. "DOM" is an acronym and should not be translated.
+     */
+    readonly title: "Optimize DOM size";
+    /**
+     * @description Description of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. "DOM" is an acronym and should not be translated. "layout reflows" are when the browser will recompute the layout of content on the page.
+     */
+    readonly description: "A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/performance/insights/dom-size).";
+    /**
+     * @description Header for a column containing the names of statistics as opposed to the actual statistic values.
+     */
+    readonly statistic: "Statistic";
+    /**
+     * @description Header for a column containing the value of a statistic.
+     */
+    readonly value: "Value";
+    /**
+     * @description Header for a column containing the page element related to a statistic.
+     */
+    readonly element: "Element";
+    /**
+     * @description Label for a value representing the total number of elements on the page.
+     */
+    readonly totalElements: "Total elements";
+    /**
+     * @description Label for a value representing the maximum depth of the Document Object Model (DOM). "DOM" is a acronym and should not be translated.
+     */
+    readonly maxDOMDepth: "DOM depth";
+    /**
+     * @description Label for a value representing the maximum number of child elements of any parent element on the page.
+     */
+    readonly maxChildren: "Most children";
+    /**
+     * @description Text for a section.
+     */
+    readonly topUpdatesDescription: "These are the largest layout and style recalculation events. Their performance impact may be reduced by making the DOM simpler.";
+    /**
+     * @description Label used for a time duration.
+     */
+    readonly duration: "Duration";
+    /**
+     * @description Message displayed in a table detailing how big a layout (rendering) is.
+     * @example {134} PH1
+     */
+    readonly largeLayout: "Layout ({PH1} objects)";
+    /**
+     * @description Message displayed in a table detailing how big a style recalculation (rendering) is.
+     * @example {134} PH1
+     */
+    readonly largeStyleRecalc: "Style recalculation ({PH1} elements)";
+};
+export declare const i18nString: any;
+export type DOMSizeInsightModel = InsightModel<typeof UIStrings, {
+    largeLayoutUpdates: Types.Events.Layout[];
+    largeStyleRecalcs: Types.Events.RecalcStyle[];
+    largeUpdates: Array<{
+        label: Common.UIString.LocalizedString;
+        duration: Types.Timing.Milli;
+        size: number;
+        event: Types.Events.Event;
+    }>;
+    maxDOMStats?: Types.Events.DOMStats;
+}>;
+export declare function isDomSizeInsight(model: InsightModel): model is DOMSizeInsightModel;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): DOMSizeInsightModel;
+export declare function createOverlays(model: DOMSizeInsightModel): Types.Overlays.Overlay[];

package/dist/lib/front_end/models/trace/insights/DocumentLatency.d.ts

@@ -0,0 +1,66 @@
+import type * as Handlers from '../handlers/handlers.js';
+import * as Types from '../types/types.js';
+import { type Checklist, type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that provides a breakdown for how long it took to download the main document.
+     */
+    readonly title: "Document request latency";
+    /**
+     * @description Description of an insight that provides a breakdown for how long it took to download the main document.
+     */
+    readonly description: "Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.";
+    /**
+     * @description Text to tell the user that the document request does not have redirects.
+     */
+    readonly passingRedirects: "Avoids redirects";
+    /**
+     * @description Text to tell the user that the document request had redirects.
+     * @example {3} PH1
+     * @example {1000 ms} PH2
+     */
+    readonly failedRedirects: "Had redirects ({PH1} redirects, +{PH2})";
+    /**
+     * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.
+     * @example {600 ms} PH1
+     */
+    readonly passingServerResponseTime: "Server responds quickly (observed {PH1})";
+    /**
+     * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.
+     * @example {601 ms} PH1
+     */
+    readonly failedServerResponseTime: "Server responded slowly (observed {PH1})";
+    /**
+     * @description Text to tell the user that text compression (like gzip) was applied.
+     */
+    readonly passingTextCompression: "Applies text compression";
+    /**
+     * @description Text to tell the user that text compression (like gzip) was not applied.
+     */
+    readonly failedTextCompression: "No compression applied";
+    /**
+     * @description Text for a label describing a network request event as having redirects.
+     */
+    readonly redirectsLabel: "Redirects";
+    /**
+     * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+     */
+    readonly serverResponseTimeLabel: "Server response time";
+    /**
+     * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
+     */
+    readonly uncompressedDownload: "Uncompressed download";
+};
+export declare const i18nString: any;
+export declare function isDocumentLatencyInsight(x: InsightModel): x is DocumentLatencyInsightModel;
+export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
+    data?: {
+        serverResponseTime: Types.Timing.Milli;
+        redirectDuration: Types.Timing.Milli;
+        uncompressedResponseBytes: number;
+        checklist: Checklist<'noRedirects' | 'serverResponseIsFast' | 'usesCompression'>;
+        documentRequest?: Types.Events.SyntheticNetworkRequest;
+    };
+}>;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): DocumentLatencyInsightModel;
+export declare function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[];

package/dist/lib/front_end/models/trace/insights/DuplicatedJavaScript.d.ts

@@ -0,0 +1,29 @@
+import * as Extras from '../extras/extras.js';
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    readonly title: "Duplicated JavaScript";
+    /**
+     * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    readonly description: "Remove large, [duplicate JavaScript modules](https://developer.chrome.com/docs/performance/insights/duplicated-javascript) from bundles to reduce unnecessary bytes consumed by network activity.";
+    /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
+    readonly columnSource: "Source";
+    /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
+    readonly columnDuplicatedBytes: "Duplicated bytes";
+};
+export declare const i18nString: any;
+export type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {
+    duplication: Extras.ScriptDuplication.ScriptDuplication;
+    duplicationGroupedByNodeModules: Extras.ScriptDuplication.ScriptDuplication;
+    scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[];
+    scripts: Handlers.ModelHandlers.Scripts.Script[];
+    mainDocumentUrl: string;
+}>;
+export declare function isDuplicatedJavaScriptInsight(model: InsightModel): model is DuplicatedJavaScriptInsightModel;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): DuplicatedJavaScriptInsightModel;
+export declare function createOverlays(model: DuplicatedJavaScriptInsightModel): Types.Overlays.Overlay[];

package/dist/lib/front_end/models/trace/insights/FontDisplay.d.ts

@@ -0,0 +1,28 @@
+import type * as Handlers from '../handlers/handlers.js';
+import * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
+    readonly title: "Font display";
+    /**
+     * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
+     */
+    readonly description: "Consider setting [`font-display`](https://developer.chrome.com/docs/performance/insights/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).";
+    /** Column for a font loaded by the page to render text. */
+    readonly fontColumn: "Font";
+    /** Column for the amount of time wasted. */
+    readonly wastedTimeColumn: "Wasted time";
+};
+export declare const i18nString: any;
+export interface RemoteFont {
+    name?: string;
+    request: Types.Events.SyntheticNetworkRequest;
+    display: string;
+    wastedTime: Types.Timing.Milli;
+}
+export type FontDisplayInsightModel = InsightModel<typeof UIStrings, {
+    fonts: RemoteFont[];
+}>;
+export declare function isFontDisplayInsight(model: InsightModel): model is FontDisplayInsightModel;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): FontDisplayInsightModel;
+export declare function createOverlays(model: FontDisplayInsightModel): Types.Overlays.Overlay[];

package/dist/lib/front_end/models/trace/insights/ForcedReflow.d.ts

@@ -0,0 +1,56 @@
+import type * as Protocol from '../../../generated/protocol.js';
+import type * as Handlers from '../handlers/handlers.js';
+import * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that provides details about Forced reflow.
+     */
+    readonly title: "Forced reflow";
+    /**
+     * @description Text to describe the forced reflow.
+     */
+    readonly description: "A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developer.chrome.com/docs/performance/insights/forced-reflow) and possible mitigations.";
+    /**
+     * @description Title of a list to provide related stack trace data
+     */
+    readonly reflowCallFrames: "Call frames that trigger reflow";
+    /**
+     * @description Text to describe the top time-consuming function call
+     */
+    readonly topTimeConsumingFunctionCall: "Top function call";
+    /**
+     * @description Text to describe the total reflow time
+     */
+    readonly totalReflowTime: "Total reflow time";
+    /**
+     * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.
+     */
+    readonly unattributed: "[unattributed]";
+    /**
+     * @description Text for the name of anonymous functions
+     */
+    readonly anonymous: "(anonymous)";
+};
+export declare const i18nString: any;
+export type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {
+    topLevelFunctionCallData: ForcedReflowAggregatedData | undefined;
+    aggregatedBottomUpData: BottomUpCallStack[];
+}>;
+export interface BottomUpCallStack {
+    /**
+     * `null` indicates that this data is for unattributed force reflows.
+     */
+    bottomUpData: Types.Events.CallFrame | Protocol.Runtime.CallFrame | null;
+    totalTime: number;
+    relatedEvents: Types.Events.Event[];
+}
+export interface ForcedReflowAggregatedData {
+    topLevelFunctionCall: Types.Events.CallFrame | Protocol.Runtime.CallFrame;
+    totalReflowTime: number;
+    topLevelFunctionCallEvents: Types.Events.Event[];
+}
+export declare function isForcedReflowInsight(model: InsightModel): model is ForcedReflowInsightModel;
+export declare function generateInsight(traceParsedData: Handlers.Types.HandlerData, context: InsightSetContext): ForcedReflowInsightModel;
+export declare function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[];
+export declare function createOverlayForEvents(events: Types.Events.Event[], outlineReason?: 'ERROR' | 'INFO'): Types.Overlays.Overlay[];

package/dist/lib/front_end/models/trace/insights/INPBreakdown.d.ts

@@ -0,0 +1,50 @@
+import * as Handlers from '../handlers/handlers.js';
+import type { SyntheticInteractionPair } from '../types/TraceEvents.js';
+import type * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Text to tell the user about the longest user interaction.
+     */
+    readonly description: "Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.";
+    /**
+     * @description Title for the performance insight "INP breakdown", which shows a breakdown of INP by subparts / sections.
+     */
+    readonly title: "INP breakdown";
+    /**
+     * @description Label used for the subpart/component/stage/section of a larger duration.
+     */
+    readonly subpart: "Subpart";
+    /**
+     * @description Label used for a time duration.
+     */
+    readonly duration: "Duration";
+    /**
+     * @description Text shown next to the interaction event's input delay time in the detail view.
+     */
+    readonly inputDelay: "Input delay";
+    /**
+     * @description Text shown next to the interaction event's thread processing duration in the detail view.
+     */
+    readonly processingDuration: "Processing duration";
+    /**
+     * @description Text shown next to the interaction event's presentation delay time in the detail view.
+     */
+    readonly presentationDelay: "Presentation delay";
+    /**
+     * @description Text status indicating that no user interactions were detected.
+     */
+    readonly noInteractions: "No interactions detected";
+};
+export declare const i18nString: any;
+export type INPBreakdownInsightModel = InsightModel<typeof UIStrings, {
+    longestInteractionEvent?: SyntheticInteractionPair;
+    highPercentileInteractionEvent?: SyntheticInteractionPair;
+}>;
+export declare function isINPBreakdownInsight(insight: InsightModel): insight is INPBreakdownInsightModel;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): INPBreakdownInsightModel;
+/**
+ * If `subpart` is -1, then all subparts are included. Otherwise it's just that index.
+ **/
+export declare function createOverlaysForSubpart(event: Types.Events.SyntheticInteractionPair, subpartIndex?: number): Types.Overlays.Overlay[];
+export declare function createOverlays(model: INPBreakdownInsightModel): Types.Overlays.Overlay[];

package/dist/lib/front_end/models/trace/insights/ImageDelivery.d.ts

@@ -0,0 +1,95 @@
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that recommends ways to reduce the size of images downloaded and used on the page.
+     */
+    readonly title: "Improve image delivery";
+    /**
+     * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
+     */
+    readonly description: "Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)";
+    /**
+     * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
+     */
+    readonly useCompression: "Increasing the image compression factor could improve this image's download size.";
+    /**
+     * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
+     */
+    readonly useModernFormat: "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size.";
+    /**
+     * @description Message displayed in a chip advising the user to use video formats instead of GIFs because videos generally have smaller file sizes.
+     */
+    readonly useVideoFormat: "Using video formats instead of GIFs can improve the download size of animated content.";
+    /**
+     * @description Message displayed in a chip explaining that an image was displayed on the page with dimensions much smaller than the image file dimensions.
+     * @example {1000x500} PH1
+     * @example {100x50} PH2
+     */
+    readonly useResponsiveSize: "This image file is larger than it needs to be ({PH1}) for its displayed dimensions ({PH2}). Use responsive images to reduce the image download size.";
+    /**
+     * @description Column header for a table column containing network requests for images which can improve their file size (e.g. use a different format, increase compression, etc).
+     */
+    readonly optimizeFile: "Optimize file size";
+    /**
+     * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.
+     * @example {5} PH1
+     */
+    readonly others: "{PH1} others";
+    /**
+     * @description Text status indicating that no potential optimizations were found for any image file
+     */
+    readonly noOptimizableImages: "No optimizable images";
+    /**
+     * @description Text describing the estimated number of bytes that an image file optimization can save. This text is appended to another block of text describing the image optimization in more detail. "Est" means "Estimated".
+     * @example {Use the correct image dimensions to reduce the image file size.} PH1
+     * @example {50 MB} PH2
+     */
+    readonly estimatedSavings: "{PH1} (Est {PH2})";
+};
+export declare const i18nString: any;
+export declare enum ImageOptimizationType {
+    ADJUST_COMPRESSION = "ADJUST_COMPRESSION",
+    MODERN_FORMAT_OR_COMPRESSION = "MODERN_FORMAT_OR_COMPRESSION",
+    VIDEO_FORMAT = "VIDEO_FORMAT",
+    RESPONSIVE_SIZE = "RESPONSIVE_SIZE"
+}
+export type ImageOptimization = {
+    type: Exclude<ImageOptimizationType, ImageOptimizationType.RESPONSIVE_SIZE>;
+    byteSavings: number;
+} | {
+    type: ImageOptimizationType.RESPONSIVE_SIZE;
+    byteSavings: number;
+    fileDimensions: {
+        width: number;
+        height: number;
+    };
+    displayDimensions: {
+        width: number;
+        height: number;
+    };
+};
+export interface OptimizableImage {
+    request: Types.Events.SyntheticNetworkRequest;
+    optimizations: ImageOptimization[];
+    byteSavings: number;
+    /**
+     * If the an image resource has multiple `PaintImage`s, we compare its intrinsic size to the largest of the displayed sizes.
+     *
+     * It is theoretically possible for `PaintImage` events with the same URL to have different intrinsic sizes.
+     * However, this should be rare because it requires serving different images from the same URL.
+     */
+    largestImagePaint: Types.Events.PaintImage;
+}
+export type ImageDeliveryInsightModel = InsightModel<typeof UIStrings, {
+    /** Sorted by potential byte savings, then by size of image. */
+    optimizableImages: OptimizableImage[];
+    wastedBytes: number;
+}>;
+export declare function isImageDeliveryInsight(model: InsightModel): model is ImageDeliveryInsightModel;
+export declare function getOptimizationMessage(optimization: ImageOptimization): string;
+export declare function getOptimizationMessageWithBytes(optimization: ImageOptimization): string;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): ImageDeliveryInsightModel;
+export declare function createOverlayForRequest(request: Types.Events.SyntheticNetworkRequest): Types.Overlays.EntryOutline;
+export declare function createOverlays(model: ImageDeliveryInsightModel): Types.Overlays.Overlay[];

package/dist/lib/front_end/models/trace/insights/LCPBreakdown.d.ts

@@ -0,0 +1,85 @@
+import type * as Common from '../../../core/common/common.js';
+import * as Handlers from '../handlers/handlers.js';
+import * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that provides details about the LCP metric, broken down by parts.
+     */
+    readonly title: "LCP breakdown";
+    /**
+     * @description Description of a DevTools insight that presents a breakdown for the LCP metric by subparts.
+     * This is displayed after a user expands the section to see more. No character length limits.
+     */
+    readonly description: "Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.";
+    /**
+     * @description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.
+     */
+    readonly timeToFirstByte: "Time to first byte";
+    /**
+     * @description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.
+     */
+    readonly resourceLoadDelay: "Resource load delay";
+    /**
+     * @description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.
+     */
+    readonly resourceLoadDuration: "Resource load duration";
+    /**
+     * @description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.
+     */
+    readonly elementRenderDelay: "Element render delay";
+    /**
+     * @description Label used for the subpart (section) of a larger duration.
+     */
+    readonly subpart: "Subpart";
+    /**
+     * @description Label used for the duration a single subpart (section) takes up of a larger duration.
+     */
+    readonly duration: "Duration";
+    /**
+     * @description Label used for the duration a single subpart (section) takes up of a larger duration. The value will be the 75th percentile of aggregate data. "Field" means that the data was collected from real users in the field as opposed to the developers local environment. "Field" is synonymous with "Real user data".
+     */
+    readonly fieldDuration: "Field p75";
+    /**
+     * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+     */
+    readonly noLcp: "No LCP detected";
+};
+export declare const i18nString: any;
+/** A TraceWindow plus its UIString. **/
+export type Subpart = Types.Timing.TraceWindowMicro & {
+    label: Common.UIString.LocalizedString;
+};
+interface LCPSubparts {
+    /**
+     * The time between when the user initiates loading the page until when
+     * the browser receives the first byte of the html response.
+     */
+    ttfb: Subpart;
+    /**
+     * The time between ttfb and the LCP request request being started.
+     * For a text LCP, this is undefined given no request is loaded.
+     */
+    loadDelay?: Subpart;
+    /**
+     * The time it takes to load the LCP request.
+     */
+    loadDuration?: Subpart;
+    /**
+     * The time between when the LCP request finishes loading and when
+     * the LCP element is rendered.
+     */
+    renderDelay: Subpart;
+}
+export declare function isLCPBreakdownInsight(model: InsightModel): model is LCPBreakdownInsightModel;
+export type LCPBreakdownInsightModel = InsightModel<typeof UIStrings, {
+    lcpMs?: Types.Timing.Milli;
+    lcpTs?: Types.Timing.Milli;
+    lcpEvent?: Types.Events.AnyLargestContentfulPaintCandidate;
+    /** The network request for the LCP image, if there was one. */
+    lcpRequest?: Types.Events.SyntheticNetworkRequest;
+    subparts?: LCPSubparts;
+}>;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): LCPBreakdownInsightModel;
+export declare function createOverlays(model: LCPBreakdownInsightModel): Types.Overlays.Overlay[];
+export {};

package/dist/lib/front_end/models/trace/insights/LCPDiscovery.d.ts

@@ -0,0 +1,64 @@
+import * as Handlers from '../handlers/handlers.js';
+import * as Types from '../types/types.js';
+import { type Checklist, type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
+     */
+    readonly title: "LCP request discovery";
+    /**
+     * @description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
+     */
+    readonly description: "[Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading";
+    /**
+     * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.
+     * @example {401ms} PH1
+     */
+    readonly lcpLoadDelay: "LCP image loaded {PH1} after earliest start point.";
+    /**
+     * @description Text to tell the user that a fetchpriority property value of "high" is applied to the LCP request.
+     */
+    readonly fetchPriorityApplied: "fetchpriority=high applied";
+    /**
+     * @description Text to tell the user that a fetchpriority property value of "high" should be applied to the LCP request.
+     */
+    readonly fetchPriorityShouldBeApplied: "fetchpriority=high should be applied";
+    /**
+     * @description Text to tell the user that the LCP request is discoverable in the initial document.
+     */
+    readonly requestDiscoverable: "Request is discoverable in initial document";
+    /**
+     * @description Text to tell the user that the LCP request does not have the lazy load property applied.
+     */
+    readonly lazyLoadNotApplied: "lazy load not applied";
+    /**
+     * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+     */
+    readonly noLcp: "No LCP detected";
+    /**
+     * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. "LCP" is an acronym and should not be translated.
+     */
+    readonly noLcpResource: "No LCP resource detected because the LCP is not an image";
+};
+export declare const i18nString: any;
+export declare function isLCPDiscoveryInsight(model: InsightModel): model is LCPDiscoveryInsightModel;
+export type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {
+    lcpEvent?: Types.Events.AnyLargestContentfulPaintCandidate;
+    /** The network request for the LCP image, if there was one. */
+    lcpRequest?: Types.Events.SyntheticNetworkRequest;
+    earliestDiscoveryTimeTs?: Types.Timing.Micro;
+    checklist?: Checklist<'priorityHinted' | 'requestDiscoverable' | 'eagerlyLoaded'>;
+}>;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): LCPDiscoveryInsightModel;
+interface LCPImageDiscoveryData {
+    checklist: Exclude<LCPDiscoveryInsightModel['checklist'], undefined>;
+    request: Types.Events.SyntheticNetworkRequest;
+    discoveryDelay: Types.Timing.Micro | null;
+    estimatedSavings: Types.Timing.Milli | null;
+}
+/**
+ * TODO: this extra transformation (getImageData) should not be necessary.
+ */
+export declare function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData | null;
+export declare function createOverlays(model: LCPDiscoveryInsightModel): Types.Overlays.Overlay[];
+export {};

package/dist/lib/front_end/models/trace/insights/LegacyJavaScript.d.ts

@@ -0,0 +1,35 @@
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+import { type InsightModel, type InsightSetContext } from './types.js';
+export declare const UIStrings: {
+    /**
+     * @description Title of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
+     */
+    readonly title: "Legacy JavaScript";
+    /**
+     * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
+     */
+    readonly description: "Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://developer.chrome.com/docs/performance/insights/legacy-javascript)";
+    /** Label for a column in a data table; entries will be the individual JavaScript scripts. */
+    readonly columnScript: "Script";
+    /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */
+    readonly columnWastedBytes: "Wasted bytes";
+};
+export declare const i18nString: any;
+export interface PatternMatchResult {
+    name: string;
+    line: number;
+    column: number;
+}
+interface LegacyJavaScriptResult {
+    matches: PatternMatchResult[];
+    estimatedByteSavings: number;
+}
+type LegacyJavaScriptResults = Map<Handlers.ModelHandlers.Scripts.Script, LegacyJavaScriptResult>;
+export type LegacyJavaScriptInsightModel = InsightModel<typeof UIStrings, {
+    legacyJavaScriptResults: LegacyJavaScriptResults;
+}>;
+export declare function isLegacyJavaScript(model: InsightModel): model is LegacyJavaScriptInsightModel;
+export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): LegacyJavaScriptInsightModel;
+export declare function createOverlays(model: LegacyJavaScriptInsightModel): Types.Overlays.Overlay[];
+export {};

package/dist/lib/front_end/models/trace/insights/Models.d.ts

@@ -0,0 +1,19 @@
+export * as Cache from './Cache.js';
+export * as CharacterSet from './CharacterSet.js';
+export * as CLSCulprits from './CLSCulprits.js';
+export * as DocumentLatency from './DocumentLatency.js';
+export * as DOMSize from './DOMSize.js';
+export * as DuplicatedJavaScript from './DuplicatedJavaScript.js';
+export * as FontDisplay from './FontDisplay.js';
+export * as ForcedReflow from './ForcedReflow.js';
+export * as ImageDelivery from './ImageDelivery.js';
+export * as INPBreakdown from './INPBreakdown.js';
+export * as LCPBreakdown from './LCPBreakdown.js';
+export * as LCPDiscovery from './LCPDiscovery.js';
+export * as LegacyJavaScript from './LegacyJavaScript.js';
+export * as ModernHTTP from './ModernHTTP.js';
+export * as NetworkDependencyTree from './NetworkDependencyTree.js';
+export * as RenderBlocking from './RenderBlocking.js';
+export * as SlowCSSSelector from './SlowCSSSelector.js';
+export * as ThirdParties from './ThirdParties.js';
+export * as Viewport from './Viewport.js';