chrome-devtools-mcp-for-extension 0.19.2 → 0.20.0

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

@@ -98,6 +98,9 @@ export function handleEvent(event) {
         storeTraceEventWithRequestId(event.args.data.requestId, 'resourceMarkAsCached', event);
         return;
     }
+    if (Types.Events.isPreloadRenderBlockingStatusChangeEvent(event)) {
+        storeTraceEventWithRequestId(event.args.data.requestId, 'preloadRenderBlockingStatusChange', [event]);
+    }
     if (Types.Events.isWebSocketCreate(event) || Types.Events.isWebSocketInfo(event) ||
         Types.Events.isWebSocketTransfer(event)) {
         const identifier = event.args.data.identifier;
@@ -221,6 +224,7 @@ export async function finalize() {
          *
          * See `_updateTimingsForLightrider` in Lighthouse for more detail.
          */
+        let lrServerResponseTime;
         if (isLightrider && request.receiveResponse?.args.data.headers) {
             timing = {
                 requestTime: Helpers.Timing.microToSeconds(request.sendRequests.at(0)?.ts ?? 0),
@@ -254,6 +258,13 @@ export async function finalize() {
                 timing.connectEnd = TCPMs;
                 timing.sslEnd = TCPMs;
             }
+            // Lightrider does not have any equivalent for `sendEnd` timing values. The
+            // closest we can get to the server response time is from a header that
+            // Lightrider sets.
+            const ResponseMsHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-ResponseMs');
+            if (ResponseMsHeader) {
+                lrServerResponseTime = Math.max(0, parseInt(ResponseMsHeader.value, 10));
+            }
         }
         // TODO: consider allowing chrome / about.
         const allowedProtocols = [
@@ -346,6 +357,13 @@ export async function finalize() {
         const waiting = timing ?
             Types.Timing.Micro((timing.receiveHeadersEnd - timing.sendEnd) * MILLISECONDS_TO_MICROSECONDS) :
             Types.Timing.Micro(0);
+        // Server Response Time
+        // =======================
+        // Time from when the send finished going to when the first byte of headers were received.
+        const serverResponseTime = timing ?
+            Types.Timing.Micro(((timing.receiveHeadersStart ?? timing.receiveHeadersEnd) - timing.sendEnd) *
+                MILLISECONDS_TO_MICROSECONDS) :
+            Types.Timing.Micro(0);
         // Download
         // =======================
         // Time from receipt of headers to the finish time.
@@ -372,11 +390,18 @@ export async function finalize() {
             Types.Timing.Micro((timing.connectEnd - timing.connectStart) * MILLISECONDS_TO_MICROSECONDS) :
             Types.Timing.Micro(0);
         // Finally get some of the general data from the trace events.
-        const { frame, url, renderBlocking } = finalSendRequest.args.data;
+        const { frame, url, renderBlocking: sendRequestIsRenderBlocking } = finalSendRequest.args.data;
         const { encodedDataLength, decodedBodyLength } = request.resourceFinish ? request.resourceFinish.args.data : { encodedDataLength: 0, decodedBodyLength: 0 };
         const parsedUrl = new URL(url);
         const isHttps = parsedUrl.protocol === 'https:';
         const requestingFrameUrl = Helpers.Trace.activeURLForFrameAtTime(frame, finalSendRequest.ts, rendererProcessesByFrame) || '';
+        // A resource that is preloaded (and not marked as render blocking) can
+        // become render blocked later via a PreloadRenderBlockingStatusChange. In
+        // this case, we take the render blocking value of the last
+        // PreloadRenderBlockingStatusChange for this request.
+        const preloadRenderBlockingStatusChange = request.preloadRenderBlockingStatusChange?.at(-1)?.args.data.renderBlocking;
+        // In the event the property isn't set, assume non-blocking.
+        const isRenderBlocking = preloadRenderBlockingStatusChange ?? sendRequestIsRenderBlocking ?? 'non_blocking';
         // Construct a synthetic trace event for this network request.
         const networkEvent = Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent({
             rawSourceEvent: finalSendRequest,
@@ -404,6 +429,7 @@ export async function finalize() {
                         stalled,
                         totalTime,
                         waiting,
+                        serverResponseTime,
                     },
                     // All fields below are from TraceEventsForNetworkRequest.
                     decodedBodyLength,
@@ -416,8 +442,7 @@ export async function finalize() {
                     initialPriority,
                     protocol: request.receiveResponse?.args.data.protocol ?? 'unknown',
                     redirects,
-                    // In the event the property isn't set, assume non-blocking.
-                    renderBlocking: renderBlocking ?? 'non_blocking',
+                    renderBlocking: isRenderBlocking,
                     requestId,
                     requestingFrameUrl,
                     requestMethod: finalSendRequest.args.data.requestMethod,
@@ -428,6 +453,7 @@ export async function finalize() {
                     initiator: finalSendRequest.args.data.initiator,
                     stackTrace: finalSendRequest.args.data.stackTrace,
                     timing,
+                    lrServerResponseTime,
                     url,
                     failed: request.resourceFinish?.args.data.didFail ?? false,
                     finished: Boolean(request.resourceFinish),

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

@@ -17,23 +17,66 @@ let entryToNode = new Map();
 // are matched by profile id, which we then finish processing to export
 // events matched by thread id.
 let preprocessedData = new Map();
+/**
+ * Profile source selection priority when multiple profiles exist for the same thread.
+ *
+ * Profile sources and their typical scenarios:
+ * - 'Internal': Browser-initiated profiling performance panel traces.
+ *   This is the profiling mechanism when users click "Record" in the Devtools UI.
+ * - 'Inspector': User-initiated via console.profile()/profileEnd() calls.
+ *   Represents explicit developer intent to profile specific code.
+ * - 'SelfProfiling': Page-initiated via JS Self-Profiling API.
+ *    Lower signal vs the two above; treated as fallback.
+ *
+ * Selection strategy:
+ * - CPU Profile mode: Prefer 'Inspector' (explicit user request).
+ * - Performance trace: Prefer 'Internal' (integrated timeline context), then 'Inspector'.
+ * - Sources not in the priority list (including 'SelfProfiling') act as fallbacks.
+ *   When no priority source matches, the first candidate profile is selected.
+ */
+const PROFILE_SOURCES_BY_PRIORITY = {
+    cpuProfile: ['Inspector'],
+    performanceTrace: ['Internal', 'Inspector'],
+};
 function parseCPUProfileData(parseOptions) {
+    const priorityList = parseOptions.isCPUProfile ? PROFILE_SOURCES_BY_PRIORITY.cpuProfile : PROFILE_SOURCES_BY_PRIORITY.performanceTrace;
     for (const [processId, profiles] of preprocessedData) {
+        const profilesByThread = new Map();
         for (const [profileId, preProcessedData] of profiles) {
             const threadId = preProcessedData.threadId;
-            if (!preProcessedData.rawProfile.nodes.length || threadId === undefined) {
+            if (threadId === undefined) {
+                continue;
+            }
+            const listForThread = Platform.MapUtilities.getWithDefault(profilesByThread, threadId, () => []);
+            listForThread.push({ id: profileId, data: preProcessedData });
+        }
+        for (const [threadId, candidates] of profilesByThread) {
+            if (!candidates.length) {
+                continue;
+            }
+            let chosen = candidates[0];
+            for (const source of priorityList) {
+                const match = candidates.find(p => p.data.source === source);
+                if (match) {
+                    chosen = match;
+                    break;
+                }
+            }
+            const chosenData = chosen.data;
+            if (!chosenData.rawProfile.nodes.length) {
                 continue;
             }
             const indexStack = [];
-            const profileModel = new CPUProfile.CPUProfileDataModel.CPUProfileDataModel(preProcessedData.rawProfile);
+            const profileModel = new CPUProfile.CPUProfileDataModel.CPUProfileDataModel(chosenData.rawProfile);
             const profileTree = Helpers.TreeHelpers.makeEmptyTraceEntryTree();
             profileTree.maxDepth = profileModel.maxDepth;
+            const selectedProfileId = chosen.id;
             const finalizedData = {
-                rawProfile: preProcessedData.rawProfile,
+                rawProfile: chosenData.rawProfile,
                 parsedProfile: profileModel,
                 profileCalls: [],
                 profileTree,
-                profileId,
+                profileId: selectedProfileId,
             };
             const dataByThread = Platform.MapUtilities.getWithDefault(profilesInProcess, processId, () => new Map());
             dataByThread.set(threadId, finalizedData);
@@ -49,7 +92,7 @@ function parseCPUProfileData(parseOptions) {
                     }
                     const ts = Helpers.Timing.milliToMicro(Types.Timing.Milli(timeStampMilliseconds));
                     const nodeId = node.id;
-                    const profileCall = Helpers.Trace.makeProfileCall(node, profileId, sampleIndex, ts, processId, threadId);
+                    const profileCall = Helpers.Trace.makeProfileCall(node, selectedProfileId, sampleIndex, ts, processId, threadId);
                     finalizedData.profileCalls.push(profileCall);
                     indexStack.push(finalizedData.profileCalls.length - 1);
                     const traceEntryNode = Helpers.TreeHelpers.makeEmptyTraceEntryNode(profileCall, nodeId);
@@ -68,7 +111,7 @@ function parseCPUProfileData(parseOptions) {
                     }
                     const { callFrame, ts, pid, tid } = profileCall;
                     const traceEntryNode = entryToNode.get(profileCall);
-                    if (callFrame === undefined || ts === undefined || pid === undefined || profileId === undefined ||
+                    if (callFrame === undefined || ts === undefined || pid === undefined || selectedProfileId === undefined ||
                         tid === undefined || traceEntryNode === undefined) {
                         return;
                     }
@@ -119,6 +162,7 @@ export function handleEvent(event) {
         const profileData = getOrCreatePreProcessedData(event.pid, event.id);
         profileData.rawProfile.startTime = event.ts;
         profileData.threadId = event.tid;
+        assignProfileSourceIfKnown(profileData, event.args?.data?.source);
         return;
     }
     if (Types.Events.isProfileChunk(event)) {
@@ -146,9 +190,11 @@ export function handleEvent(event) {
         }
         const timeDeltas = event.args.data?.timeDeltas || [];
         const lines = event.args.data?.lines || Array(samples.length).fill(0);
+        const columns = event.args.data?.columns || Array(samples.length).fill(0);
         cdpProfile.samples?.push(...samples);
         cdpProfile.timeDeltas?.push(...timeDeltas);
         cdpProfile.lines?.push(...lines);
+        cdpProfile.columns?.push(...columns);
         if (traceIds) {
             cdpProfile.traceIds ??= {};
             for (const key in traceIds) {
@@ -163,12 +209,18 @@ export function handleEvent(event) {
             const timeDeltas = cdpProfile.timeDeltas;
             cdpProfile.endTime = timeDeltas.reduce((x, y) => x + y, cdpProfile.startTime);
         }
+        assignProfileSourceIfKnown(profileData, event.args?.data?.source);
         return;
     }
 }
 export async function finalize(parseOptions = {}) {
     parseCPUProfileData(parseOptions);
 }
+function assignProfileSourceIfKnown(profileData, source) {
+    if (Types.Events.VALID_PROFILE_SOURCES.includes(source)) {
+        profileData.source = source;
+    }
+}
 export function data() {
     return {
         profilesInProcess,
@@ -185,6 +237,7 @@ function getOrCreatePreProcessedData(processId, profileId) {
             samples: [],
             timeDeltas: [],
             lines: [],
+            columns: [],
         },
         profileId,
     }));

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

@@ -7,17 +7,19 @@ import * as Types from '../types/types.js';
 import { data as metaHandlerData } from './MetaHandler.js';
 import { data as networkRequestsHandlerData } from './NetworkRequestsHandler.js';
 let scriptById = new Map();
+let frameIdByIsolate = new Map();
 export function deps() {
     return ['Meta', 'NetworkRequests'];
 }
 export function reset() {
     scriptById = new Map();
+    frameIdByIsolate = new Map();
 }
 export function handleEvent(event) {
     const getOrMakeScript = (isolate, scriptIdAsNumber) => {
         const scriptId = String(scriptIdAsNumber);
         const key = `${isolate}.${scriptId}`;
-        return Platform.MapUtilities.getWithDefault(scriptById, key, () => ({ isolate, scriptId, frame: '', ts: 0 }));
+        return Platform.MapUtilities.getWithDefault(scriptById, key, () => ({ isolate, scriptId, frame: '', ts: event.ts }));
     };
     if (Types.Events.isRundownScriptCompiled(event) && event.args.data) {
         const { isolate, scriptId, frame } = event.args.data;
@@ -29,7 +31,11 @@ export function handleEvent(event) {
     if (Types.Events.isRundownScript(event)) {
         const { isolate, scriptId, url, sourceUrl, sourceMapUrl, sourceMapUrlElided } = event.args.data;
         const script = getOrMakeScript(isolate, scriptId);
+        if (!script.frame) {
+            script.frame = frameIdByIsolate.get(String(isolate)) ?? '';
+        }
         script.url = url;
+        script.ts = event.ts;
         if (sourceUrl) {
             script.sourceUrl = sourceUrl;
         }
@@ -58,6 +64,25 @@ export function handleEvent(event) {
         script.content = (script.content ?? '') + sourceText;
         return;
     }
+    // Setup frameIdByIsolate, which is used only in the case that we are missing
+    // rundown events for a script. We won't get a frame association from the rundown
+    // events if the recording started only after the script was first compiled. In
+    // that scenario, derive the frame via the isolate / FunctionCall events.
+    // TODO: ideally, we put the frame on ScriptCatchup event. So much easier. This approach has some
+    // issues.
+    if (Types.Events.isFunctionCall(event) && event.args.data?.isolate && event.args.data.frame) {
+        const { isolate, frame } = event.args.data;
+        const existingValue = frameIdByIsolate.get(isolate);
+        if (existingValue !== frame) {
+            frameIdByIsolate.set(isolate, frame);
+            // Update the scripts we discovered but without knowing their frame.
+            for (const script of scriptById.values()) {
+                if (!script.frame && script.isolate === isolate) {
+                    script.frame = frame;
+                }
+            }
+        }
+    }
 }
 function findFrame(meta, frameId) {
     for (const frames of meta.frameByProcessId?.values()) {

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

@@ -108,7 +108,7 @@ function getEventTrack(event) {
     return undefined;
 }
 /**
- * Similar to the default {@see Helpers.Trace.eventTimeComparator}
+ * Similar to the default {@link Helpers.Trace.eventTimeComparator}
  * but with a twist:
  * In case of equal start and end times, put the second event (within a
  * track) first.

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

@@ -142,7 +142,7 @@ export function addEventToEntityMapping(event, entityMappings) {
     }
     entityMappings.entityByEvent.set(event, entity);
 }
-// A slight upgrade of addEventToEntityMapping to handle the sub-events of a network request.
+/** A slight upgrade of addEventToEntityMapping to handle the sub-events of a network request. **/
 export function addNetworkRequestToEntityMapping(networkRequest, entityMappings, requestTraceEvents) {
     const entity = getEntityForEvent(networkRequest, entityMappings);
     if (!entity) {

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

@@ -25,8 +25,10 @@ export function timeStampForEventAdjustedByClosestNavigation(event, traceBounds,
     }
     return Types.Timing.Micro(eventTimeStamp);
 }
-// Expands the trace window by a provided percentage or, if it the expanded window is smaller than 1 millisecond, expands it to 1 millisecond.
-// If the expanded window is outside of the max trace window, cut the overflowing bound to the max trace window bound.
+/**
+ * Expands the trace window by a provided percentage or, if it the expanded window is smaller than 1 millisecond, expands it to 1 millisecond.
+ * If the expanded window is outside of the max trace window, cut the overflowing bound to the max trace window bound.
+ **/
 export function expandWindowByPercentOrToOneMillisecond(annotationWindow, maxTraceWindow, percentage) {
     // Expand min and max of the window by half of the provided percentage. That way, in total, the window will be expanded by the provided percentage.
     let newMin = annotationWindow.min - annotationWindow.range * (percentage / 100) / 2;

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

@@ -70,8 +70,10 @@ export function extractOriginFromTrace(firstNavigationURL) {
     }
     return null;
 }
-// Each thread contains events. Events indicate the thread and process IDs, which are
-// used to store the event in the correct process thread entry below.
+/**
+ * Each thread contains events. Events indicate the thread and process IDs, which are
+ * used to store the event in the correct process thread entry below.
+ **/
 export function addEventToProcessThread(event, eventsInProcessThread) {
     const { tid, pid } = event;
     let eventsInThread = eventsInProcessThread.get(pid);
@@ -500,6 +502,16 @@ export function getStackTraceTopCallFrameInEventPayload(event) {
         }
     }
 }
+export function rawCallFrameForEntry(entry) {
+    if (Types.Events.isProfileCall(entry)) {
+        return entry.callFrame;
+    }
+    const topCallFrame = getStackTraceTopCallFrameInEventPayload(entry);
+    if (topCallFrame) {
+        return topCallFrame;
+    }
+    return null;
+}
 /**
  * Given a 1-based call frame creates a 0-based one.
  */
@@ -704,8 +716,10 @@ export function extractSampleTraceId(event) {
     }
     return event.args?.sampleTraceId ?? event.args?.data?.sampleTraceId ?? null;
 }
-// This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
-// TODO(crbug.com/410884528)
+/**
+ * This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
+ * TODO(crbug.com/410884528)
+ **/
 export const VISIBLE_TRACE_EVENT_TYPES = new Set([
     "AbortPostTaskCallback" /* Types.Events.Name.ABORT_POST_TASK_CALLBACK */,
     "Animation" /* Types.Events.Name.ANIMATION */,

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

@@ -14,7 +14,7 @@ export const UIStrings = {
      * @description Description of a DevTools insight that identifies the reasons that elements shift on the page.
      * This is displayed after a user expands the section to see more. No character length limits.
      */
-    description: 'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.',
+    description: 'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://developer.chrome.com/docs/performance/insights/cls-culprit), such as elements being added, removed, or their fonts changing as the page loads.',
     /**
      * @description Text indicating the worst layout shift cluster.
      */
@@ -417,6 +417,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/cls-culprit',
         category: InsightCategory.CLS,
         state,
         ...partialModel,

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

@@ -14,7 +14,7 @@ export const UIStrings = {
     /**
      * @description Text to tell the user about how caching can help improve performance.
      */
-    description: 'A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).',
+    description: 'A long cache lifetime can speed up repeat visits to your page. [Learn more about caching](https://developer.chrome.com/docs/performance/insights/cache).',
     /**
      * @description Column for a font loaded by the page to render text.
      */
@@ -43,6 +43,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/cache',
         category: InsightCategory.ALL,
         state: partialModel.requests.length > 0 ? 'fail' : 'pass',
         ...partialModel,

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

@@ -14,7 +14,7 @@ export const UIStrings = {
     /**
      * @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/lighthouse/performance/dom-size/).',
+    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.
      */
@@ -73,6 +73,7 @@ function finalize(partialModel) {
         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,

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

@@ -14,7 +14,7 @@ export const UIStrings = {
     /**
      * @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 by avoiding redirects, ensuring a fast server response, and enabling text compression.',
+    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.
      */
@@ -67,20 +67,20 @@ const IGNORE_THRESHOLD_IN_BYTES = 1400;
 export function isDocumentLatencyInsight(x) {
     return x.insightKey === 'DocumentLatency';
 }
-function getServerResponseTime(request, context) {
-    // Prefer the value as given by the Lantern provider.
-    // For PSI, Lighthouse uses this to set a better value for the server response
-    // time. For technical reasons, in Lightrider we do not have `sendEnd` timing
-    // values. See Lighthouse's `asLanternNetworkRequest` function for more.
-    const lanternRequest = context.navigation && context.lantern?.requests.find(r => r.rawRequest === request);
-    if (lanternRequest?.serverResponseTime !== undefined) {
-        return lanternRequest.serverResponseTime;
+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.waiting);
+    const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);
     return Math.round(ms);
 }
 function getCompressionSavings(request) {
@@ -148,6 +148,7 @@ function finalize(partialModel) {
         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,
@@ -162,7 +163,7 @@ export function generateInsight(data, context) {
     if (!documentRequest) {
         return finalize({ warnings: [InsightWarning.NO_DOCUMENT_REQUEST] });
     }
-    const serverResponseTime = getServerResponseTime(documentRequest, context);
+    const serverResponseTime = getServerResponseTime(documentRequest);
     if (serverResponseTime === null) {
         throw new Error('missing document request timing');
     }

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

@@ -14,7 +14,7 @@ export const UIStrings = {
     /**
      * @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 from bundles to reduce unnecessary bytes consumed by network activity.',
+    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. */
@@ -29,6 +29,7 @@ function finalize(partialModel) {
         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)],

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

@@ -12,7 +12,7 @@ export const UIStrings = {
     /**
      * @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/blog/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).',
+    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. */
@@ -26,6 +26,7 @@ function finalize(partialModel) {
         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,

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

@@ -15,11 +15,11 @@ export const UIStrings = {
     /**
      * @description Text to describe the forced reflow.
      */
-    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://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.',
+    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
      */
-    relatedStackTrace: 'Stack trace',
+    reflowCallFrames: 'Call frames that trigger reflow',
     /**
      * @description Text to describe the top time-consuming function call
      */
@@ -100,6 +100,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/forced-reflow',
         category: InsightCategory.ALL,
         state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',
         ...partialModel,

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

@@ -2,13 +2,14 @@
 // 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, } from './types.js';
 export const UIStrings = {
     /**
      * @description Text to tell the user about the longest user interaction.
      */
-    description: 'Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',
+    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.
      */
@@ -45,13 +46,24 @@ export function isINPBreakdownInsight(insight) {
     return insight.insightKey === "INPBreakdown" /* InsightKeys.INP_BREAKDOWN */;
 }
 function finalize(partialModel) {
+    let state = 'pass';
+    if (partialModel.longestInteractionEvent) {
+        const classification = Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(partialModel.longestInteractionEvent.dur);
+        if (classification === "good" /* Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD */) {
+            state = 'informative';
+        }
+        else {
+            state = 'fail';
+        }
+    }
     return {
         insightKey: "INPBreakdown" /* InsightKeys.INP_BREAKDOWN */,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/inp-breakdown',
         category: InsightCategory.INP,
-        state: partialModel.longestInteractionEvent ? 'informative' : 'pass',
+        state,
         ...partialModel,
     };
 }

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

@@ -13,7 +13,7 @@ export const UIStrings = {
     /**
      * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
      */
-    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/lighthouse/performance/uses-optimized-images/)',
+    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.
      */
@@ -114,6 +114,7 @@ function finalize(partialModel) {
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/image-delivery',
         category: InsightCategory.LCP,
         state: partialModel.optimizableImages.length > 0 ? 'fail' : 'pass',
         ...partialModel,

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

@@ -16,7 +16,7 @@ export const UIStrings = {
      * @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.
      */
-    description: 'Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
+    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.
      */
@@ -124,13 +124,24 @@ function finalize(partialModel) {
     if (partialModel.lcpRequest) {
         relatedEvents.push(partialModel.lcpRequest);
     }
+    let state = 'pass';
+    if (partialModel.lcpMs !== undefined) {
+        const classification = Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(Helpers.Timing.milliToMicro(partialModel.lcpMs));
+        if (classification === "good" /* Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD */) {
+            state = 'informative';
+        }
+        else {
+            state = 'fail';
+        }
+    }
     return {
         insightKey: "LCPBreakdown" /* InsightKeys.LCP_BREAKDOWN */,
         strings: UIStrings,
         title: i18nString(UIStrings.title),
         description: i18nString(UIStrings.description),
+        docs: 'https://developer.chrome.com/docs/performance/insights/lcp-breakdown',
         category: InsightCategory.LCP,
-        state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',
+        state,
         ...partialModel,
         relatedEvents,
     };