chrome-devtools-mcp 0.11.0 → 0.12.1

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

@@ -1,181 +0,0 @@
-// 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

@@ -1,258 +0,0 @@
-// 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

@@ -1,90 +0,0 @@
-// 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

@@ -1,82 +0,0 @@
-// 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',
-    }));
-}