@mcp-b/chrome-devtools-mcp 1.1.0 → 1.1.1

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/insights/DOMSize.js

@@ -0,0 +1,181 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { InsightCategory, } from './types.js';
+export 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.
+     */
+    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.
+     */
+    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.
+     */
+    statistic: 'Statistic',
+    /**
+     * @description Header for a column containing the value of a statistic.
+     */
+    value: 'Value',
+    /**
+     * @description Header for a column containing the page element related to a statistic.
+     */
+    element: 'Element',
+    /**
+     * @description Label for a value representing the total number of elements on the page.
+     */
+    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.
+     */
+    maxDOMDepth: 'DOM depth',
+    /**
+     * @description Label for a value representing the maximum number of child elements of any parent element on the page.
+     */
+    maxChildren: 'Most children',
+    /**
+     * @description Text for a section.
+     */
+    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.
+     */
+    duration: 'Duration',
+    /**
+     * @description Message displayed in a table detailing how big a layout (rendering) is.
+     * @example {134} PH1
+     */
+    largeLayout: 'Layout ({PH1} objects)',
+    /**
+     * @description Message displayed in a table detailing how big a style recalculation (rendering) is.
+     * @example {134} PH1
+     */
+    largeStyleRecalc: 'Style recalculation ({PH1} elements)',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DOMSize.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(40));
+// These thresholds were selected to maximize the number of long (>40ms) events above
+// the threshold while maximizing the number of short (<40ms) events below the threshold.
+// See go/rpp-dom-size-thresholds for the analysis that produced these thresholds.
+const LAYOUT_OBJECTS_THRESHOLD = 100;
+const STYLE_RECALC_ELEMENTS_THRESHOLD = 300;
+function finalize(partialModel) {
+    const relatedEvents = [...partialModel.largeLayoutUpdates, ...partialModel.largeStyleRecalcs];
+    return {
+        insightKey: "DOMSize" /* InsightKeys.DOM_SIZE */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/dom-size',
+        category: InsightCategory.INP,
+        state: relatedEvents.length > 0 ? 'informative' : 'pass',
+        ...partialModel,
+        relatedEvents,
+    };
+}
+export function isDomSizeInsight(model) {
+    return model.insightKey === "DOMSize" /* InsightKeys.DOM_SIZE */;
+}
+export function generateInsight(data, context) {
+    const isWithinContext = (event) => Helpers.Timing.eventIsInBounds(event, context.bounds);
+    const mainTid = context.navigation?.tid;
+    const largeLayoutUpdates = [];
+    const largeStyleRecalcs = [];
+    const threads = Handlers.Threads.threadsInRenderer(data.Renderer, data.AuctionWorklets);
+    for (const thread of threads) {
+        if (thread.type !== "MAIN_THREAD" /* Handlers.Threads.ThreadType.MAIN_THREAD */) {
+            continue;
+        }
+        if (mainTid === undefined) {
+            // We won't have a specific thread ID to reference if the context does not have a navigation.
+            // In this case, we'll just filter out any OOPIFs threads.
+            if (!thread.processIsOnMainFrame) {
+                continue;
+            }
+        }
+        else if (thread.tid !== mainTid) {
+            continue;
+        }
+        const rendererThread = data.Renderer.processes.get(thread.pid)?.threads.get(thread.tid);
+        if (!rendererThread) {
+            continue;
+        }
+        const { entries, layoutEvents, recalcStyleEvents } = rendererThread;
+        if (!entries.length) {
+            continue;
+        }
+        const first = entries[0];
+        const last = entries[entries.length - 1];
+        const timeRange = Helpers.Timing.traceWindowFromMicroSeconds(first.ts, Types.Timing.Micro(last.ts + (last.dur ?? 0)));
+        if (!Helpers.Timing.boundsIncludeTimeRange({ timeRange, bounds: context.bounds })) {
+            continue;
+        }
+        for (const event of layoutEvents) {
+            if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {
+                continue;
+            }
+            const { dirtyObjects } = event.args.beginData;
+            if (dirtyObjects > LAYOUT_OBJECTS_THRESHOLD) {
+                largeLayoutUpdates.push(event);
+            }
+        }
+        for (const event of recalcStyleEvents) {
+            if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {
+                continue;
+            }
+            const { elementCount } = event.args;
+            if (elementCount > STYLE_RECALC_ELEMENTS_THRESHOLD) {
+                largeStyleRecalcs.push(event);
+            }
+        }
+    }
+    const largeUpdates = [
+        ...largeLayoutUpdates.map(event => {
+            const duration = (event.dur / 1000);
+            const size = event.args.beginData.dirtyObjects;
+            const label = i18nString(UIStrings.largeLayout, { PH1: size });
+            return { label, duration, size, event };
+        }),
+        ...largeStyleRecalcs.map(event => {
+            const duration = (event.dur / 1000);
+            const size = event.args.elementCount;
+            const label = i18nString(UIStrings.largeStyleRecalc, { PH1: size });
+            return { label, duration, size, event };
+        }),
+    ].sort((a, b) => b.duration - a.duration).slice(0, 5);
+    const domStatsEvents = data.DOMStats.domStatsByFrameId.get(context.frameId)?.filter(isWithinContext) ?? [];
+    let maxDOMStats;
+    for (const domStats of domStatsEvents) {
+        // While recording a cross-origin navigation, there can be overlapping dom stats from before & after
+        // the navigation which share a frameId. In this case we should also ensure the pid matches up with
+        // the navigation we care about (i.e. from after the navigation event).
+        const navigationPid = context.navigation?.pid;
+        if (navigationPid && domStats.pid !== navigationPid) {
+            continue;
+        }
+        if (!maxDOMStats || domStats.args.data.totalElements > maxDOMStats.args.data.totalElements) {
+            maxDOMStats = domStats;
+        }
+    }
+    return finalize({
+        largeLayoutUpdates,
+        largeStyleRecalcs,
+        largeUpdates,
+        maxDOMStats,
+    });
+}
+export function createOverlays(model) {
+    const entries = [...model.largeStyleRecalcs, ...model.largeLayoutUpdates];
+    return entries.map(entry => ({
+        type: 'ENTRY_OUTLINE',
+        entry,
+        outlineReason: 'ERROR',
+    }));
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/insights/DocumentLatency.js

@@ -0,0 +1,258 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { isRequestCompressed } from './Common.js';
+import { InsightCategory, InsightWarning, } from './types.js';
+export const UIStrings = {
+    /**
+     * @description Title of an insight that provides a breakdown for how long it took to download the main document.
+     */
+    title: 'Document request latency',
+    /**
+     * @description Description of an insight that provides a breakdown for how long it took to download the main document.
+     */
+    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.
+     */
+    passingRedirects: 'Avoids redirects',
+    /**
+     * @description Text to tell the user that the document request had redirects.
+     * @example {3} PH1
+     * @example {1000 ms} PH2
+     */
+    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
+     */
+    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
+     */
+    failedServerResponseTime: 'Server responded slowly (observed {PH1})',
+    /**
+     * @description Text to tell the user that text compression (like gzip) was applied.
+     */
+    passingTextCompression: 'Applies text compression',
+    /**
+     * @description Text to tell the user that text compression (like gzip) was not applied.
+     */
+    failedTextCompression: 'No compression applied',
+    /**
+     * @description Text for a label describing a network request event as having redirects.
+     */
+    redirectsLabel: 'Redirects',
+    /**
+     * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+     */
+    serverResponseTimeLabel: 'Server response time',
+    /**
+     * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
+     */
+    uncompressedDownload: 'Uncompressed download',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+// Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.
+// We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.
+const TOO_SLOW_THRESHOLD_MS = 600;
+const TARGET_MS = 100;
+// Threshold for compression savings.
+const IGNORE_THRESHOLD_IN_BYTES = 1400;
+export function isDocumentLatencyInsight(x) {
+    return x.insightKey === 'DocumentLatency';
+}
+function getServerResponseTime(request) {
+    // For technical reasons, Lightrider does not have `sendEnd` timing values. The
+    // closest we can get to the server response time is from a header that Lightrider
+    // sets.
+    // @ts-expect-error
+    const isLightrider = globalThis.isLightrider;
+    if (isLightrider) {
+        return request.args.data.lrServerResponseTime ?? null;
+    }
+    const timing = request.args.data.timing;
+    if (!timing) {
+        return null;
+    }
+    const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);
+    return Math.round(ms);
+}
+function getCompressionSavings(request) {
+    const isCompressed = isRequestCompressed(request);
+    if (isCompressed) {
+        return 0;
+    }
+    // We don't know how many bytes this asset used on the network, but we can guess it was
+    // roughly the size of the content gzipped.
+    // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples
+    // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers
+    // See https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/ for MIME types to compress
+    const originalSize = request.args.data.decodedBodyLength;
+    let estimatedSavings = 0;
+    switch (request.args.data.mimeType) {
+        case 'text/css':
+            // Stylesheets tend to compress extremely well.
+            estimatedSavings = Math.round(originalSize * 0.8);
+            break;
+        case 'text/html':
+        case 'text/javascript':
+            // Scripts and HTML compress fairly well too.
+            estimatedSavings = Math.round(originalSize * 0.67);
+            break;
+        case 'text/plain':
+        case 'text/xml':
+        case 'text/x-component':
+        case 'application/javascript':
+        case 'application/json':
+        case 'application/manifest+json':
+        case 'application/vnd.api+json':
+        case 'application/xml':
+        case 'application/xhtml+xml':
+        case 'application/rss+xml':
+        case 'application/atom+xml':
+        case 'application/vnd.ms-fontobject':
+        case 'application/x-font-ttf':
+        case 'application/x-font-opentype':
+        case 'application/x-font-truetype':
+        case 'image/svg+xml':
+        case 'image/x-icon':
+        case 'image/vnd.microsoft.icon':
+        case 'font/ttf':
+        case 'font/eot':
+        case 'font/otf':
+        case 'font/opentype':
+            // Use the average savings in HTTPArchive.
+            estimatedSavings = Math.round(originalSize * 0.5);
+            break;
+        default: // Any other MIME types are likely already compressed.
+    }
+    // Check if the estimated savings are greater than the byte ignore threshold.
+    // Note that the estimated gzip savings are always more than 10%, so there is
+    // no percent threshold.
+    return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;
+}
+function finalize(partialModel) {
+    let hasFailure = false;
+    if (partialModel.data) {
+        hasFailure = !partialModel.data.checklist.usesCompression.value ||
+            !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;
+    }
+    return {
+        insightKey: "DocumentLatency" /* InsightKeys.DOCUMENT_LATENCY */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/document-latency',
+        category: InsightCategory.ALL,
+        state: hasFailure ? 'fail' : 'pass',
+        ...partialModel,
+    };
+}
+export function generateInsight(data, context) {
+    if (!context.navigation) {
+        return finalize({});
+    }
+    const millisToString = context.options.insightTimeFormatters?.milli ?? i18n.TimeUtilities.millisToString;
+    const documentRequest = data.NetworkRequests.byId.get(context.navigationId);
+    if (!documentRequest) {
+        return finalize({ warnings: [InsightWarning.NO_DOCUMENT_REQUEST] });
+    }
+    const serverResponseTime = getServerResponseTime(documentRequest);
+    if (serverResponseTime === null) {
+        throw new Error('missing document request timing');
+    }
+    const serverResponseTooSlow = serverResponseTime > TOO_SLOW_THRESHOLD_MS;
+    let overallSavingsMs = 0;
+    if (serverResponseTime > TOO_SLOW_THRESHOLD_MS) {
+        overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);
+    }
+    const redirectDuration = Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000);
+    overallSavingsMs += redirectDuration;
+    const metricSavings = {
+        FCP: overallSavingsMs,
+        LCP: overallSavingsMs,
+    };
+    const uncompressedResponseBytes = getCompressionSavings(documentRequest);
+    const noRedirects = redirectDuration === 0;
+    const serverResponseIsFast = !serverResponseTooSlow;
+    const usesCompression = uncompressedResponseBytes === 0;
+    return finalize({
+        relatedEvents: [documentRequest],
+        data: {
+            serverResponseTime,
+            redirectDuration: Types.Timing.Milli(redirectDuration),
+            uncompressedResponseBytes,
+            documentRequest,
+            checklist: {
+                noRedirects: {
+                    label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {
+                        PH1: documentRequest.args.data.redirects.length,
+                        PH2: millisToString(redirectDuration),
+                    }),
+                    value: noRedirects
+                },
+                serverResponseIsFast: {
+                    label: serverResponseIsFast ?
+                        i18nString(UIStrings.passingServerResponseTime, { PH1: millisToString(serverResponseTime) }) :
+                        i18nString(UIStrings.failedServerResponseTime, { PH1: millisToString(serverResponseTime) }),
+                    value: serverResponseIsFast
+                },
+                usesCompression: {
+                    label: usesCompression ? i18nString(UIStrings.passingTextCompression) :
+                        i18nString(UIStrings.failedTextCompression),
+                    value: usesCompression
+                },
+            },
+        },
+        metricSavings,
+        wastedBytes: uncompressedResponseBytes,
+    });
+}
+export function createOverlays(model) {
+    if (!model.data?.documentRequest) {
+        return [];
+    }
+    const overlays = [];
+    const event = model.data.documentRequest;
+    const redirectDurationMicro = Helpers.Timing.milliToMicro(model.data.redirectDuration);
+    const sections = [];
+    if (model.data.redirectDuration) {
+        const bounds = Helpers.Timing.traceWindowFromMicroSeconds(event.ts, (event.ts + redirectDurationMicro));
+        sections.push({ bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true });
+        overlays.push({ type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event });
+    }
+    if (!model.data.checklist.serverResponseIsFast.value) {
+        const serverResponseTimeMicro = Helpers.Timing.milliToMicro(model.data.serverResponseTime);
+        // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.
+        const sendEnd = event.args.data.timing?.sendEnd ?? Types.Timing.Milli(0);
+        const sendEndMicro = Helpers.Timing.milliToMicro(sendEnd);
+        const bounds = Helpers.Timing.traceWindowFromMicroSeconds(sendEndMicro, (sendEndMicro + serverResponseTimeMicro));
+        sections.push({ bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true });
+    }
+    if (model.data.uncompressedResponseBytes) {
+        const bounds = Helpers.Timing.traceWindowFromMicroSeconds(event.args.data.syntheticData.downloadStart, (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download));
+        sections.push({ bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true });
+        overlays.push({ type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event });
+    }
+    if (sections.length) {
+        overlays.push({
+            type: 'TIMESPAN_BREAKDOWN',
+            sections,
+            entry: model.data.documentRequest,
+            // Always render below because the document request is guaranteed to be
+            // the first request in the network track.
+            renderLocation: 'BELOW_EVENT',
+        });
+    }
+    overlays.push({
+        type: 'ENTRY_SELECTED',
+        entry: model.data.documentRequest,
+    });
+    return overlays;
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/insights/DuplicatedJavaScript.js

@@ -0,0 +1,90 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Extras from '../extras/extras.js';
+import * as Helpers from '../helpers/helpers.js';
+import { estimateCompressionRatioForScript, metricSavingsForWastedBytes } from './Common.js';
+import { InsightCategory, } from './types.js';
+export const UIStrings = {
+    /**
+     * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    title: 'Duplicated JavaScript',
+    /**
+     * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
+     */
+    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. */
+    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. */
+    columnDuplicatedBytes: 'Duplicated bytes',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+function finalize(partialModel) {
+    const requests = partialModel.scriptsWithDuplication.map(script => script.request).filter(e => !!e);
+    return {
+        insightKey: "DuplicatedJavaScript" /* InsightKeys.DUPLICATE_JAVASCRIPT */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/duplicated-javascript',
+        category: InsightCategory.LCP,
+        state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',
+        relatedEvents: [...new Set(requests)],
+        ...partialModel,
+    };
+}
+export function isDuplicatedJavaScriptInsight(model) {
+    return model.insightKey === "DuplicatedJavaScript" /* InsightKeys.DUPLICATE_JAVASCRIPT */;
+}
+export function generateInsight(data, context) {
+    const scripts = data.Scripts.scripts.filter(script => {
+        if (script.frame !== context.frameId) {
+            return false;
+        }
+        if (script.url?.startsWith('chrome-extension://')) {
+            return false;
+        }
+        return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);
+    });
+    const compressionRatios = new Map();
+    for (const script of scripts) {
+        if (script.request) {
+            compressionRatios.set(script.request.args.data.requestId, estimateCompressionRatioForScript(script));
+        }
+    }
+    const { duplication, duplicationGroupedByNodeModules } = Extras.ScriptDuplication.computeScriptDuplication({ scripts }, compressionRatios);
+    const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];
+    const wastedBytesByRequestId = new Map();
+    for (const { duplicates } of duplication.values()) {
+        for (let i = 1; i < duplicates.length; i++) {
+            const sourceData = duplicates[i];
+            if (!sourceData.script.request) {
+                continue;
+            }
+            const transferSize = sourceData.attributedSize;
+            const requestId = sourceData.script.request.args.data.requestId;
+            wastedBytesByRequestId.set(requestId, (wastedBytesByRequestId.get(requestId) || 0) + transferSize);
+        }
+    }
+    return finalize({
+        duplication,
+        duplicationGroupedByNodeModules,
+        scriptsWithDuplication: [...new Set(scriptsWithDuplication)],
+        scripts,
+        mainDocumentUrl: context.navigation?.args.data?.url ?? data.Meta.mainFrameURL,
+        metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),
+        wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),
+    });
+}
+export function createOverlays(model) {
+    return model.scriptsWithDuplication.map(script => script.request).filter(e => !!e).map(request => {
+        return {
+            type: 'ENTRY_OUTLINE',
+            entry: request,
+            outlineReason: 'ERROR',
+        };
+    });
+}

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/insights/FontDisplay.js

@@ -0,0 +1,82 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { InsightCategory, } from './types.js';
+export const UIStrings = {
+    /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
+    title: 'Font display',
+    /**
+     * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
+     */
+    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. */
+    fontColumn: 'Font',
+    /** Column for the amount of time wasted. */
+    wastedTimeColumn: 'Wasted time',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+function finalize(partialModel) {
+    return {
+        insightKey: "FontDisplay" /* InsightKeys.FONT_DISPLAY */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/font-display',
+        category: InsightCategory.INP,
+        state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',
+        ...partialModel,
+    };
+}
+export function isFontDisplayInsight(model) {
+    return model.insightKey === "FontDisplay" /* InsightKeys.FONT_DISPLAY */;
+}
+export function generateInsight(data, context) {
+    const fonts = [];
+    for (const remoteFont of data.LayoutShifts.remoteFonts) {
+        const event = remoteFont.beginRemoteFontLoadEvent;
+        if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {
+            continue;
+        }
+        const requestId = `${event.pid}.${event.args.id}`;
+        const request = data.NetworkRequests.byId.get(requestId);
+        if (!request) {
+            continue;
+        }
+        if (!/^(block|fallback|auto)$/.test(remoteFont.display)) {
+            continue;
+        }
+        const wastedTimeMicro = Types.Timing.Micro(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);
+        // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.
+        let wastedTime = Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5);
+        if (wastedTime === 0) {
+            continue;
+        }
+        // All browsers wait for no more than 3s.
+        wastedTime = Math.min(wastedTime, 3000);
+        fonts.push({
+            name: remoteFont.name,
+            request,
+            display: remoteFont.display,
+            wastedTime,
+        });
+    }
+    fonts.sort((a, b) => b.wastedTime - a.wastedTime);
+    const savings = Math.max(...fonts.map(f => f.wastedTime));
+    return finalize({
+        relatedEvents: fonts.map(f => f.request),
+        fonts,
+        metricSavings: { FCP: savings },
+    });
+}
+export function createOverlays(model) {
+    return model.fonts.map(font => ({
+        type: 'ENTRY_OUTLINE',
+        entry: font.request,
+        outlineReason: font.wastedTime ? 'ERROR' : 'INFO',
+    }));
+}