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

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

@@ -0,0 +1,192 @@
+// 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 { InsightCategory, InsightWarning, } from './types.js';
+export const UIStrings = {
+    /**
+     * @description Title of an insight that provides the user with the list of network requests that blocked and therefore slowed down the page rendering and becoming visible to the user.
+     */
+    title: 'Render blocking requests',
+    /**
+     * @description Text to describe that there are requests blocking rendering, which may affect LCP.
+     */
+    description: 'Requests are blocking the page\'s initial render, which may delay LCP. ' +
+        '[Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) ' +
+        'can move these network requests out of the critical path.',
+    /**
+     * @description Label to describe a network request (that happens to be render-blocking).
+     */
+    renderBlockingRequest: 'Request',
+    /**
+     * @description Label used for a time duration.
+     */
+    duration: 'Duration',
+    /**
+     * @description Text status indicating that no requests blocked the initial render of a navigation
+     */
+    noRenderBlocking: 'No render blocking requests for this navigation',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/RenderBlocking.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export function isRenderBlockingInsight(insight) {
+    return insight.insightKey === 'RenderBlocking';
+}
+// Because of the way we detect blocking stylesheets, asynchronously loaded
+// CSS with link[rel=preload] and an onload handler (see https://github.com/filamentgroup/loadCSS)
+// can be falsely flagged as blocking. Therefore, ignore stylesheets that loaded fast enough
+// to possibly be non-blocking (and they have minimal impact anyway).
+const MINIMUM_WASTED_MS = 50;
+/**
+ * Given a simulation's nodeTimings, return an object with the nodes/timing keyed by network URL
+ */
+function getNodesAndTimingByRequestId(nodeTimings) {
+    const requestIdToNode = new Map();
+    for (const [node, nodeTiming] of nodeTimings) {
+        if (node.type !== 'network') {
+            continue;
+        }
+        requestIdToNode.set(node.request.requestId, { node, nodeTiming });
+    }
+    return requestIdToNode;
+}
+function estimateSavingsWithGraphs(deferredIds, lanternContext) {
+    const simulator = lanternContext.simulator;
+    const fcpGraph = lanternContext.metrics.firstContentfulPaint.optimisticGraph;
+    const { nodeTimings } = lanternContext.simulator.simulate(fcpGraph);
+    const adjustedNodeTimings = new Map(nodeTimings);
+    const totalChildNetworkBytes = 0;
+    const minimalFCPGraph = fcpGraph.cloneWithRelationships(node => {
+        // If a node can be deferred, exclude it from the new FCP graph
+        const canDeferRequest = deferredIds.has(node.id);
+        return !canDeferRequest;
+    });
+    if (minimalFCPGraph.type !== 'network') {
+        throw new Error('minimalFCPGraph not a NetworkNode');
+    }
+    // Recalculate the "before" time based on our adjusted node timings.
+    const estimateBeforeInline = Math.max(...Array.from(Array.from(adjustedNodeTimings).map(timing => timing[1].endTime)));
+    // Add the inlined bytes to the HTML response
+    const originalTransferSize = minimalFCPGraph.request.transferSize;
+    const safeTransferSize = originalTransferSize || 0;
+    minimalFCPGraph.request.transferSize = safeTransferSize + totalChildNetworkBytes;
+    const estimateAfterInline = simulator.simulate(minimalFCPGraph).timeInMs;
+    minimalFCPGraph.request.transferSize = originalTransferSize;
+    return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0));
+}
+function hasImageLCP(data, context) {
+    return data.LargestImagePaint.lcpRequestByNavigationId.has(context.navigationId);
+}
+function computeSavings(data, context, renderBlockingRequests) {
+    if (!context.lantern) {
+        return;
+    }
+    const nodesAndTimingsByRequestId = getNodesAndTimingByRequestId(context.lantern.metrics.firstContentfulPaint.optimisticEstimate.nodeTimings);
+    const metricSavings = { FCP: 0, LCP: 0 };
+    const requestIdToWastedMs = new Map();
+    const deferredNodeIds = new Set();
+    for (const request of renderBlockingRequests) {
+        const nodeAndTiming = nodesAndTimingsByRequestId.get(request.args.data.requestId);
+        if (!nodeAndTiming) {
+            continue;
+        }
+        const { node, nodeTiming } = nodeAndTiming;
+        // Mark this node and all its dependents as deferrable
+        node.traverse(node => deferredNodeIds.add(node.id));
+        // "wastedMs" is the download time of the network request, responseReceived - requestSent
+        const wastedMs = Math.round(nodeTiming.duration);
+        if (wastedMs < MINIMUM_WASTED_MS) {
+            continue;
+        }
+        requestIdToWastedMs.set(node.id, wastedMs);
+    }
+    if (requestIdToWastedMs.size) {
+        metricSavings.FCP = estimateSavingsWithGraphs(deferredNodeIds, context.lantern);
+        // In most cases, render blocking resources only affect LCP if LCP isn't an image.
+        if (!hasImageLCP(data, context)) {
+            metricSavings.LCP = metricSavings.FCP;
+        }
+    }
+    return { metricSavings, requestIdToWastedMs };
+}
+function finalize(partialModel) {
+    return {
+        insightKey: "RenderBlocking" /* InsightKeys.RENDER_BLOCKING */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/render-blocking',
+        category: InsightCategory.LCP,
+        state: partialModel.renderBlockingRequests.length > 0 ? 'fail' : 'pass',
+        ...partialModel,
+    };
+}
+export function generateInsight(data, context) {
+    if (!context.navigation) {
+        return finalize({
+            renderBlockingRequests: [],
+        });
+    }
+    const firstPaintTs = data.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)
+        ?.get(context.navigationId)
+        ?.get("FP" /* Handlers.ModelHandlers.PageLoadMetrics.MetricName.FP */)
+        ?.event?.ts;
+    if (!firstPaintTs) {
+        return finalize({
+            renderBlockingRequests: [],
+            warnings: [InsightWarning.NO_FP],
+        });
+    }
+    let renderBlockingRequests = [];
+    for (const req of data.NetworkRequests.byTime) {
+        if (req.args.data.frame !== context.frameId) {
+            continue;
+        }
+        if (!Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(req)) {
+            continue;
+        }
+        if (req.args.data.syntheticData.finishTime > firstPaintTs) {
+            continue;
+        }
+        // If a request is marked `in_body_parser_blocking` it should only be considered render blocking if it is a
+        // high enough priority. Some requests (e.g. scripts) are not marked as high priority if they are fetched
+        // after a non-preloaded image. (See "early" definition in https://web.dev/articles/fetch-priority)
+        //
+        // There are edge cases and exceptions (e.g. priority hints) but this gives us the best approximation
+        // of render blocking resources in the document body.
+        if (req.args.data.renderBlocking === 'in_body_parser_blocking') {
+            const priority = req.args.data.priority;
+            const isScript = req.args.data.resourceType === "Script" /* Protocol.Network.ResourceType.Script */;
+            const isBlockingScript = isScript && priority === "High" /* Protocol.Network.ResourcePriority.High */;
+            if (priority !== "VeryHigh" /* Protocol.Network.ResourcePriority.VeryHigh */ && !isBlockingScript) {
+                continue;
+            }
+        }
+        const navigation = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, data.Meta.navigationsByFrameId);
+        if (navigation === context.navigation) {
+            renderBlockingRequests.push(req);
+        }
+    }
+    const savings = computeSavings(data, context, renderBlockingRequests);
+    // Sort by request duration for insights.
+    renderBlockingRequests = renderBlockingRequests.sort((a, b) => {
+        return b.dur - a.dur;
+    });
+    return finalize({
+        relatedEvents: renderBlockingRequests,
+        renderBlockingRequests,
+        ...savings,
+    });
+}
+export function createOverlayForRequest(request) {
+    return {
+        type: 'ENTRY_OUTLINE',
+        entry: request,
+        outlineReason: 'ERROR',
+    };
+}
+export function createOverlays(model) {
+    return model.renderBlockingRequests.map(request => createOverlayForRequest(request));
+}

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

@@ -0,0 +1,136 @@
+// 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 { SelectorTimingsKey } from '../types/TraceEvents.js';
+import * as Types from '../types/types.js';
+import { InsightCategory, } from './types.js';
+export const UIStrings = {
+    /**
+     * @description Title of an insight that provides details about slow CSS selectors.
+     */
+    title: 'CSS Selector costs',
+    /**
+     * @description Text to describe how to improve the performance of CSS selectors.
+     */
+    description: 'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/performance/insights/slow-css-selector) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
+    /**
+     * @description Column name for count of elements that the engine attempted to match against a style rule
+     */
+    matchAttempts: 'Match attempts',
+    /**
+     * @description Column name for count of elements that matched a style rule
+     */
+    matchCount: 'Match count',
+    /**
+     * @description Column name for elapsed time spent computing a style rule
+     */
+    elapsed: 'Elapsed time',
+    /**
+     * @description Column name for the selectors that took the longest amount of time/effort.
+     */
+    topSelectors: 'Top selectors',
+    /**
+     * @description Column name for a total sum.
+     */
+    total: 'Total',
+    /**
+     * @description Text status indicating that no CSS selector data was found.
+     */
+    enableSelectorData: 'No CSS selector data was found. CSS selector stats need to be enabled in the performance panel settings.',
+    /**
+     * @description top CSS selector when ranked by elapsed time in ms
+     */
+    topSelectorElapsedTime: 'Top selector elapsed time',
+    /**
+     * @description top CSS selector when ranked by match attempt
+     */
+    topSelectorMatchAttempt: 'Top selector match attempt',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/SlowCSSSelector.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const slowCSSSelectorThreshold = 500; // 500us threshold for slow selectors
+function aggregateSelectorStats(data, context) {
+    const selectorMap = new Map();
+    for (const [event, value] of data.dataForRecalcStyleEvent) {
+        if (event.args.beginData?.frame !== context.frameId) {
+            continue;
+        }
+        if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {
+            continue;
+        }
+        for (const timing of value.timings) {
+            const key = timing[SelectorTimingsKey.Selector] + '_' + timing[SelectorTimingsKey.StyleSheetId];
+            const findTiming = selectorMap.get(key);
+            if (findTiming !== undefined) {
+                findTiming[SelectorTimingsKey.Elapsed] += timing[SelectorTimingsKey.Elapsed];
+                findTiming[SelectorTimingsKey.FastRejectCount] += timing[SelectorTimingsKey.FastRejectCount];
+                findTiming[SelectorTimingsKey.MatchAttempts] += timing[SelectorTimingsKey.MatchAttempts];
+                findTiming[SelectorTimingsKey.MatchCount] += timing[SelectorTimingsKey.MatchCount];
+            }
+            else {
+                selectorMap.set(key, { ...timing });
+            }
+        }
+    }
+    return [...selectorMap.values()];
+}
+function finalize(partialModel) {
+    return {
+        insightKey: "SlowCSSSelector" /* InsightKeys.SLOW_CSS_SELECTOR */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/slow-css-selector',
+        category: InsightCategory.ALL,
+        state: partialModel.topSelectorElapsedMs && partialModel.topSelectorMatchAttempts ? 'informative' : 'pass',
+        ...partialModel,
+    };
+}
+export function isSlowCSSSelectorInsight(model) {
+    return model.insightKey === "SlowCSSSelector" /* InsightKeys.SLOW_CSS_SELECTOR */;
+}
+export function generateInsight(data, context) {
+    const selectorStatsData = data.SelectorStats;
+    if (!selectorStatsData) {
+        throw new Error('no selector stats data');
+    }
+    const selectorTimings = aggregateSelectorStats(selectorStatsData, context);
+    let totalElapsedUs = 0;
+    let totalMatchAttempts = 0;
+    let totalMatchCount = 0;
+    selectorTimings.map(timing => {
+        totalElapsedUs += timing[SelectorTimingsKey.Elapsed];
+        totalMatchAttempts += timing[SelectorTimingsKey.MatchAttempts];
+        totalMatchCount += timing[SelectorTimingsKey.MatchCount];
+    });
+    let topSelectorElapsedMs = null;
+    let topSelectorMatchAttempts = null;
+    if (selectorTimings.length > 0) {
+        // find the selector with most elapsed time
+        topSelectorElapsedMs = selectorTimings.reduce((a, b) => {
+            return a[SelectorTimingsKey.Elapsed] > b[SelectorTimingsKey.Elapsed] ? a : b;
+        });
+        // check if the slowest selector is slow enough to trigger insights info
+        if (topSelectorElapsedMs && topSelectorElapsedMs[SelectorTimingsKey.Elapsed] < slowCSSSelectorThreshold) {
+            topSelectorElapsedMs = null;
+        }
+        // find the selector with most match attempts
+        topSelectorMatchAttempts = selectorTimings.reduce((a, b) => {
+            return a[SelectorTimingsKey.MatchAttempts] > b[SelectorTimingsKey.MatchAttempts] ? a : b;
+        });
+    }
+    return finalize({
+        // TODO: should we identify RecalcStyle events as linked to this insight?
+        relatedEvents: [],
+        totalElapsedMs: Types.Timing.Milli(totalElapsedUs / 1000.0),
+        totalMatchAttempts,
+        totalMatchCount,
+        topSelectorElapsedMs,
+        topSelectorMatchAttempts,
+    });
+}
+export function createOverlays(_) {
+    return [];
+}

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

@@ -0,0 +1,92 @@
+// 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.
+// Lifted from Lighthouse: https://github.com/GoogleChrome/lighthouse/blob/36cac182a6c637b1671c57326d7c0241633d0076/shared/statistics.js
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// The exact double values for the max and min scores possible in each range.
+const MIN_PASSING_SCORE = 0.90000000000000002220446049250313080847263336181640625;
+const MAX_AVERAGE_SCORE = 0.899999999999999911182158029987476766109466552734375;
+const MIN_AVERAGE_SCORE = 0.5;
+const MAX_FAILING_SCORE = 0.499999999999999944488848768742172978818416595458984375;
+/**
+ * Approximates the Gauss error function, the probability that a random variable
+ * from the standard normal distribution lies within [-x, x]. Moved from
+ * traceviewer.b.math.erf, based on Abramowitz and Stegun, formula 7.1.26.
+ */
+function erf(x) {
+    // erf(-x) = -erf(x);
+    const sign = Math.sign(x);
+    x = Math.abs(x);
+    const a1 = 0.254829592;
+    const a2 = -0.284496736;
+    const a3 = 1.421413741;
+    const a4 = -1.453152027;
+    const a5 = 1.061405429;
+    const p = 0.3275911;
+    const t = 1 / (1 + p * x);
+    const y = t * (a1 + t * (a2 + t * (a3 + t * (a4 + t * a5))));
+    return sign * (1 - y * Math.exp(-x * x));
+}
+/**
+ * Returns the score (1 - percentile) of `value` in a log-normal distribution
+ * specified by the `median` value, at which the score will be 0.5, and a 10th
+ * percentile value, at which the score will be 0.9. The score represents the
+ * amount of the distribution greater than `value`. All values should be in the
+ * same units (e.g. milliseconds). See
+ *   https://www.desmos.com/calculator/o98tbeyt1t
+ * for an interactive view of the relationship between these parameters and the
+ * typical parameterization (location and shape) of the log-normal distribution.
+ */
+export function getLogNormalScore({ median, p10 }, value) {
+    // Required for the log-normal distribution.
+    if (median <= 0) {
+        throw new Error('median must be greater than zero');
+    }
+    if (p10 <= 0) {
+        throw new Error('p10 must be greater than zero');
+    }
+    // Not strictly required, but if p10 > median, it flips around and becomes the p90 point.
+    if (p10 >= median) {
+        throw new Error('p10 must be less than the median');
+    }
+    // Non-positive values aren't in the distribution, so always 1.
+    if (value <= 0) {
+        return 1;
+    }
+    // Closest double to `erfc-1(1/5)`.
+    const INVERSE_ERFC_ONE_FIFTH = 0.9061938024368232;
+    // Shape (σ) is `|log(p10/median) / (sqrt(2)*erfc^-1(1/5))|` and
+    // standardizedX is `1/2 erfc(log(value/median) / (sqrt(2)*σ))`, so simplify a bit.
+    const xRatio = Math.max(Number.MIN_VALUE, value / median); // value and median are > 0, so is ratio.
+    const xLogRatio = Math.log(xRatio);
+    const p10Ratio = Math.max(Number.MIN_VALUE, p10 / median); // p10 and median are > 0, so is ratio.
+    const p10LogRatio = -Math.log(p10Ratio); // negate to keep σ positive.
+    const standardizedX = xLogRatio * INVERSE_ERFC_ONE_FIFTH / p10LogRatio;
+    const complementaryPercentile = (1 - erf(standardizedX)) / 2;
+    // Clamp to avoid floating-point out-of-bounds issues and keep score in expected range.
+    let score;
+    if (value <= p10) {
+        // Passing. Clamp to [0.9, 1].
+        score = Math.max(MIN_PASSING_SCORE, Math.min(1, complementaryPercentile));
+    }
+    else if (value <= median) {
+        // Average. Clamp to [0.5, 0.9).
+        score = Math.max(MIN_AVERAGE_SCORE, Math.min(MAX_AVERAGE_SCORE, complementaryPercentile));
+    }
+    else {
+        // Failing. Clamp to [0, 0.5).
+        score = Math.max(0, Math.min(MAX_FAILING_SCORE, complementaryPercentile));
+    }
+    return score;
+}
+/**
+ * Interpolates the y value at a point x on the line defined by (x0, y0) and (x1, y1)
+ */
+export function linearInterpolation(x0, y0, x1, y1, x) {
+    const slope = (y1 - y0) / (x1 - x0);
+    return y0 + (x - x0) * slope;
+}

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

@@ -0,0 +1,98 @@
+// 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 ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
+import * as Extras from '../extras/extras.js';
+import * as Handlers from '../handlers/handlers.js';
+import { InsightCategory, } from './types.js';
+export const UIStrings = {
+    /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). */
+    title: '3rd parties',
+    /**
+     * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.
+     * This is displayed after a user expands the section to see more. No character length limits.
+     */
+    description: '3rd party code can significantly impact load performance. ' +
+        '[Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page\'s content.',
+    /** Label for a table column that displays the name of a third-party provider. */
+    columnThirdParty: '3rd party',
+    /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
+    columnTransferSize: 'Transfer size',
+    /** Label for a table column that displays how much time each row spent running on the main thread, entries will be the number of milliseconds spent. */
+    columnMainThreadTime: 'Main thread time',
+    /**
+     * @description Text block indicating that no third party content was detected on the page
+     */
+    noThirdParties: 'No third parties found',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ThirdParties.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+function getRelatedEvents(summaries, firstPartyEntity) {
+    const relatedEvents = [];
+    for (const summary of summaries) {
+        if (summary.entity !== firstPartyEntity) {
+            relatedEvents.push(...summary.relatedEvents);
+        }
+    }
+    return relatedEvents;
+}
+function finalize(partialModel) {
+    return {
+        insightKey: "ThirdParties" /* InsightKeys.THIRD_PARTIES */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/third-parties',
+        category: InsightCategory.ALL,
+        state: partialModel.entitySummaries.find(summary => summary.entity !== partialModel.firstPartyEntity) ?
+            'informative' :
+            'pass',
+        ...partialModel,
+    };
+}
+export function isThirdPartyInsight(model) {
+    return model.insightKey === "ThirdParties" /* InsightKeys.THIRD_PARTIES */;
+}
+export function generateInsight(data, context) {
+    const entitySummaries = Extras.ThirdParties.summarizeByThirdParty(data, context.bounds);
+    const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? data.Meta.mainFrameURL;
+    const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
+        Handlers.Helpers.makeUpEntity(data.Renderer.entityMappings.createdEntityCache, firstPartyUrl);
+    return finalize({
+        relatedEvents: getRelatedEvents(entitySummaries, firstPartyEntity),
+        firstPartyEntity,
+        entitySummaries,
+    });
+}
+export function createOverlaysForSummary(summary) {
+    const overlays = [];
+    for (const event of summary.relatedEvents) {
+        // The events found for a third party can be vast, as they gather every
+        // single main thread task along with everything else on the page. If the
+        // main thread is busy with large icicles, we can easily create tens of
+        // thousands of overlays. Therefore, only create overlays for events of at least 1ms.
+        if (event.dur === undefined || event.dur < 1_000) {
+            continue;
+        }
+        const overlay = {
+            type: 'ENTRY_OUTLINE',
+            entry: event,
+            outlineReason: 'INFO',
+        };
+        overlays.push(overlay);
+    }
+    return overlays;
+}
+export function createOverlays(model) {
+    const overlays = [];
+    const summaries = model.entitySummaries ?? [];
+    for (const summary of summaries) {
+        if (summary.entity === model.firstPartyEntity) {
+            continue;
+        }
+        const summaryOverlays = createOverlaysForSummary(summary);
+        overlays.push(...summaryOverlays);
+    }
+    return overlays;
+}

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

@@ -0,0 +1,102 @@
+// 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 Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+import { InsightCategory, InsightWarning, } from './types.js';
+export const UIStrings = {
+    /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
+    title: 'Optimize viewport for mobile',
+    /**
+     * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
+     */
+    description: 'Tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport is not optimized for mobile.',
+    /**
+     * @description Text for a label describing the portion of an interaction event that was delayed due to a bad mobile viewport.
+     */
+    mobileTapDelayLabel: 'Mobile tap delay',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/Viewport.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+function finalize(partialModel) {
+    return {
+        insightKey: "Viewport" /* InsightKeys.VIEWPORT */,
+        strings: UIStrings,
+        title: i18nString(UIStrings.title),
+        description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/viewport',
+        category: InsightCategory.INP,
+        state: partialModel.mobileOptimized === false ? 'fail' : 'pass',
+        ...partialModel,
+    };
+}
+export function isViewportInsight(model) {
+    return model.insightKey === "Viewport" /* InsightKeys.VIEWPORT */;
+}
+export function generateInsight(data, context) {
+    const viewportEvent = data.UserInteractions.parseMetaViewportEvents.find(event => {
+        if (event.args.data.frame !== context.frameId) {
+            return false;
+        }
+        return Helpers.Timing.eventIsInBounds(event, context.bounds);
+    });
+    const compositorEvents = data.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {
+        if (event.args.frame !== context.frameId) {
+            return false;
+        }
+        // Commit compositor frame events can be emitted before the viewport tag is parsed.
+        // We shouldn't count these since the browser hasn't had time to make the viewport mobile optimized.
+        if (viewportEvent && event.ts < viewportEvent.ts) {
+            return false;
+        }
+        return Helpers.Timing.eventIsInBounds(event, context.bounds);
+    });
+    if (!compositorEvents.length) {
+        // Trace doesn't have the data we need.
+        return finalize({
+            mobileOptimized: null,
+            warnings: [InsightWarning.NO_LAYOUT],
+        });
+    }
+    // Returns true only if all events are mobile optimized.
+    for (const event of compositorEvents) {
+        if (!event.args.is_mobile_optimized) {
+            // Grab all the pointer events with at least 50ms of input delay.
+            const longPointerInteractions = [...data.UserInteractions.interactionsOverThreshold.values()].filter(interaction => Handlers.ModelHandlers.UserInteractions.categoryOfInteraction(interaction) === 'POINTER' &&
+                interaction.inputDelay >= 50_000);
+            // The actual impact varies between 0 and 300.
+            // Using inputDelay as the closest thing we have for measuring this, though inputDelay may be high for other reasons.
+            // b/371566378#comment8
+            const inputDelay = Math.max(0, ...longPointerInteractions.map(interaction => interaction.inputDelay)) / 1000;
+            const inpMetricSavings = Platform.NumberUtilities.clamp(inputDelay, 0, 300);
+            return finalize({
+                mobileOptimized: false,
+                viewportEvent,
+                longPointerInteractions,
+                metricSavings: { INP: inpMetricSavings },
+            });
+        }
+    }
+    return finalize({
+        mobileOptimized: true,
+        viewportEvent,
+    });
+}
+export function createOverlays(model) {
+    if (!model.longPointerInteractions) {
+        return [];
+    }
+    return model.longPointerInteractions.map(interaction => {
+        const delay = Math.min(interaction.inputDelay, 300 * 1000);
+        const bounds = Helpers.Timing.traceWindowFromMicroSeconds(Types.Timing.Micro(interaction.ts), Types.Timing.Micro(interaction.ts + delay));
+        return {
+            type: 'TIMESPAN_BREAKDOWN',
+            entry: interaction,
+            sections: [{ bounds, label: i18nString(UIStrings.mobileTapDelayLabel), showDuration: true }],
+            renderLocation: 'ABOVE_EVENT',
+        };
+    });
+}

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

@@ -0,0 +1,9 @@
+// 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.
+export * as Cache from './Cache.js'; // TODO(crbug.com/444191656): Exported for tests.
+export * as Common from './Common.js';
+export * as Models from './Models.js';
+export * as ModernHTTP from './ModernHTTP.js'; // TODO(crbug.com/444191656): Exported for tests.
+export * as Statistics from './Statistics.js';
+export * as Types from './types.js';

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

@@ -0,0 +1,18 @@
+// 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.
+export var InsightWarning;
+(function (InsightWarning) {
+    InsightWarning["NO_FP"] = "NO_FP";
+    InsightWarning["NO_LCP"] = "NO_LCP";
+    // No network request could be identified as the primary HTML document.
+    InsightWarning["NO_DOCUMENT_REQUEST"] = "NO_DOCUMENT_REQUEST";
+    InsightWarning["NO_LAYOUT"] = "NO_LAYOUT";
+})(InsightWarning || (InsightWarning = {}));
+export var InsightCategory;
+(function (InsightCategory) {
+    InsightCategory["ALL"] = "All";
+    InsightCategory["INP"] = "INP";
+    InsightCategory["LCP"] = "LCP";
+    InsightCategory["CLS"] = "CLS";
+})(InsightCategory || (InsightCategory = {}));

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/core/LanternError.js

@@ -0,0 +1,6 @@
+// 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.
+class LanternError extends Error {
+}
+export { LanternError };