chrome-devtools-mcp 0.2.0 → 0.2.2

package/build/node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js

@@ -177,6 +177,66 @@ export class PerformanceInsightFormatter {
         output += '\n\n' + Trace.Insights.Models.Cache.UIStrings.description;
         return output;
     }
+    /**
+     * Create an AI prompt string out of the CLS Culprits Insight model to use with Ask AI.
+     * @param insight The CLS Culprits Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatClsCulpritsInsight(insight) {
+        const { worstCluster, shifts } = insight;
+        if (!worstCluster) {
+            return '';
+        }
+        const baseTime = this.#parsedTrace.data.Meta.traceBounds.min;
+        const clusterTimes = {
+            start: worstCluster.ts - baseTime,
+            end: worstCluster.ts + worstCluster.dur - baseTime,
+        };
+        const shiftsFormatted = worstCluster.events.map((layoutShift, index) => {
+            return TraceEventFormatter.layoutShift(layoutShift, index, this.#parsedTrace, shifts.get(layoutShift));
+        });
+        return `The worst layout shift cluster was the cluster that started at ${this.#formatMicro(clusterTimes.start)} and ended at ${this.#formatMicro(clusterTimes.end)}, with a duration of ${this.#formatMicro(worstCluster.dur)}.
+The score for this cluster is ${worstCluster.clusterCumulativeScore.toFixed(4)}.
+
+Layout shifts in this cluster:
+${shiftsFormatted.join('\n')}`;
+    }
+    /**
+     * Create an AI prompt string out of the Document Latency Insight model to use with Ask AI.
+     * @param insight The Document Latency Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatDocumentLatencyInsight(insight) {
+        if (!insight.data) {
+            return '';
+        }
+        const { checklist, documentRequest } = insight.data;
+        if (!documentRequest) {
+            return '';
+        }
+        const checklistBulletPoints = [];
+        checklistBulletPoints.push({
+            name: 'The request was not redirected',
+            passed: checklist.noRedirects.value,
+        });
+        checklistBulletPoints.push({
+            name: 'Server responded quickly',
+            passed: checklist.serverResponseIsFast.value,
+        });
+        checklistBulletPoints.push({
+            name: 'Compression was applied',
+            passed: checklist.usesCompression.value,
+        });
+        return `${this.#lcpMetricSharedContext()}
+
+${TraceEventFormatter.networkRequests([documentRequest], this.#parsedTrace, {
+            verbose: true,
+            customTitle: 'Document network request'
+        })}
+
+The result of the checks for this insight are:
+${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED' : 'FAILED'}`).join('\n')}`;
+    }
     /**
      * Create an AI prompt string out of the DOM Size model to use with Ask AI.
      * Note: This function accesses the UIStrings within DomSize to help build the
@@ -224,6 +284,24 @@ export class PerformanceInsightFormatter {
         }
         return output;
     }
+    /**
+     * Create an AI prompt string out of the Duplicated JavaScript Insight model to use with Ask AI.
+     * @param insight The Duplicated JavaScript Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatDuplicatedJavaScriptInsight(insight) {
+        const totalWastedBytes = insight.wastedBytes;
+        const duplicatedScriptsByModule = insight.duplicationGroupedByNodeModules;
+        if (duplicatedScriptsByModule.size === 0) {
+            return 'There is no duplicated JavaScript in the page modules';
+        }
+        const filesFormatted = Array.from(duplicatedScriptsByModule)
+            .map(([module, duplication]) => `- Source: ${module} - Duplicated bytes: ${duplication.estimatedDuplicateBytes} bytes`)
+            .join('\n');
+        return `Total wasted bytes: ${totalWastedBytes} bytes.
+
+Duplication grouped by Node modules: ${filesFormatted}`;
+    }
     /**
      * Create an AI prompt string out of the NetworkDependencyTree Insight model to use with Ask AI.
      * Note: This function accesses the UIStrings within NetworkDependencyTree to help build the
@@ -297,6 +375,143 @@ export class PerformanceInsightFormatter {
         }
         return output;
     }
+    /**
+     * Create an AI prompt string out of the INP Brekdown Insight model to use with Ask AI.
+     * @param insight The INP Breakdown Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatImageDeliveryInsight(insight) {
+        const optimizableImages = insight.optimizableImages;
+        if (optimizableImages.length === 0) {
+            return 'There are no unoptimized images on this page.';
+        }
+        const imageDetails = optimizableImages
+            .map(image => {
+            // List potential optimizations for the image
+            const optimizations = image.optimizations
+                .map(optimization => {
+                const message = Trace.Insights.Models.ImageDelivery.getOptimizationMessage(optimization);
+                const byteSavings = bytes(optimization.byteSavings);
+                return `${message} (Est ${byteSavings})`;
+            })
+                .join('\n');
+            return `### ${image.request.args.data.url}
+- Potential savings: ${bytes(image.byteSavings)}
+- Optimizations:\n${optimizations}`;
+        })
+            .join('\n\n');
+        return `Total potential savings: ${bytes(insight.wastedBytes)}
+
+The following images could be optimized:\n\n${imageDetails}`;
+    }
+    /**
+     * Create an AI prompt string out of the INP Brekdown Insight model to use with Ask AI.
+     * @param insight The INP Breakdown Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatInpBreakdownInsight(insight) {
+        const event = insight.longestInteractionEvent;
+        if (!event) {
+            return '';
+        }
+        const inpInfoForEvent = `The longest interaction on the page was a \`${event.type}\` which had a total duration of \`${this.#formatMicro(event.dur)}\`. The timings of each of the three phases were:
+
+1. Input delay: ${this.#formatMicro(event.inputDelay)}
+2. Processing duration: ${this.#formatMicro(event.mainThreadHandling)}
+3. Presentation delay: ${this.#formatMicro(event.presentationDelay)}.`;
+        return inpInfoForEvent;
+    }
+    /**
+     * Create an AI prompt string out of the LCP Brekdown Insight model to use with Ask AI.
+     * @param insight The LCP Breakdown Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatLcpBreakdownInsight(insight) {
+        const { subparts, lcpMs } = insight;
+        if (!lcpMs || !subparts) {
+            return '';
+        }
+        // Text based LCP has TTFB & Render delay
+        // Image based has TTFB, Load delay, Load time and Render delay
+        // Note that we expect every trace + LCP to have TTFB + Render delay, but
+        // very old traces are missing the data, so we have to code defensively
+        // in case the subparts are not present.
+        const phaseBulletPoints = [];
+        Object.values(subparts).forEach((subpart) => {
+            const phaseMilli = Trace.Helpers.Timing.microToMilli(subpart.range);
+            const percentage = (phaseMilli / lcpMs * 100).toFixed(1);
+            phaseBulletPoints.push({ name: subpart.label, value: this.#formatMilli(phaseMilli), percentage });
+        });
+        return `${this.#lcpMetricSharedContext()}
+
+We can break this time down into the ${phaseBulletPoints.length} phases that combine to make the LCP time:
+
+${phaseBulletPoints.map(phase => `- ${phase.name}: ${phase.value} (${phase.percentage}% of total LCP time)`)
+            .join('\n')}`;
+    }
+    /**
+     * Create an AI prompt string out of the LCP Brekdown Insight model to use with Ask AI.
+     * @param insight The LCP Breakdown Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatLcpDiscoveryInsight(insight) {
+        const { checklist, lcpEvent, lcpRequest, earliestDiscoveryTimeTs } = insight;
+        if (!checklist || !lcpEvent || !lcpRequest || !earliestDiscoveryTimeTs) {
+            return '';
+        }
+        const checklistBulletPoints = [];
+        checklistBulletPoints.push({
+            name: checklist.priorityHinted.label,
+            passed: checklist.priorityHinted.value,
+        });
+        checklistBulletPoints.push({
+            name: checklist.eagerlyLoaded.label,
+            passed: checklist.eagerlyLoaded.value,
+        });
+        checklistBulletPoints.push({
+            name: checklist.requestDiscoverable.label,
+            passed: checklist.requestDiscoverable.value,
+        });
+        return `${this.#lcpMetricSharedContext()}
+
+The result of the checks for this insight are:
+${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED' : 'FAILED'}`).join('\n')}`;
+    }
+    /**
+     * Create an AI prompt string out of the Legacy JavaScript Insight model to use with Ask AI.
+     * @param insight The Legacy JavaScript Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatLegacyJavaScriptInsight(insight) {
+        const legacyJavaScriptResults = insight.legacyJavaScriptResults;
+        if (legacyJavaScriptResults.size === 0) {
+            return 'There is no significant amount of legacy JavaScript on the page.';
+        }
+        const filesFormatted = Array.from(legacyJavaScriptResults)
+            .map(([script, result]) => `\n- Script: ${script.url} - Wasted bytes: ${result.estimatedByteSavings} bytes
+Matches:
+${result.matches.map(match => `Line: ${match.line}, Column: ${match.column}, Name: ${match.name}`).join('\n')}`)
+            .join('\n');
+        return `Total legacy JavaScript: ${legacyJavaScriptResults.size} files.
+
+Legacy JavaScript by file:
+${filesFormatted}`;
+    }
+    /**
+     * Create an AI prompt string out of the Modern HTTP Insight model to use with Ask AI.
+     * @param insight The Modern HTTP Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatModernHttpInsight(insight) {
+        const requestSummary = (insight.http1Requests.length === 1) ?
+            TraceEventFormatter.networkRequests(insight.http1Requests, this.#parsedTrace, { verbose: true }) :
+            TraceEventFormatter.networkRequests(insight.http1Requests, this.#parsedTrace);
+        if (requestSummary.length === 0) {
+            return 'There are no requests that were served over a legacy HTTP protocol.';
+        }
+        return `Here is a list of the network requests that were served over a legacy HTTP protocol:
+${requestSummary}`;
+    }
     /**
      * Create an AI prompt string out of the NetworkDependencyTree Insight model to use with Ask AI.
      * Note: This function accesses the UIStrings within NetworkDependencyTree to help build the
@@ -368,6 +583,20 @@ export class PerformanceInsightFormatter {
         }
         return output;
     }
+    /**
+     * Create an AI prompt string out of the Render Blocking Insight model to use with Ask AI.
+     * @param insight The Render Blocking Model to query.
+     * @returns a string formatted for sending to Ask AI.
+     */
+    formatRenderBlockingInsight(insight) {
+        const requestSummary = TraceEventFormatter.networkRequests(insight.renderBlockingRequests, this.#parsedTrace);
+        if (requestSummary.length === 0) {
+            return 'There are no network requests that are render blocking.';
+        }
+        return `Here is a list of the network requests that were render blocking on this page and their duration:
+
+${requestSummary}`;
+    }
     /**
      * Create an AI prompt string out of the Slow CSS Selector Insight model to use with Ask AI.
      * Note: This function accesses the UIStrings within SlowCSSSelector to help build the
@@ -482,200 +711,51 @@ ${header} External resources:
 ${this.#links()}`;
     }
     #details() {
-        if (Trace.Insights.Models.ImageDelivery.isImageDelivery(this.#insight)) {
-            const optimizableImages = this.#insight.optimizableImages;
-            if (optimizableImages.length === 0) {
-                return 'There are no unoptimized images on this page.';
-            }
-            const imageDetails = optimizableImages
-                .map(image => {
-                // List potential optimizations for the image
-                const optimizations = image.optimizations
-                    .map(optimization => {
-                    const message = Trace.Insights.Models.ImageDelivery.getOptimizationMessage(optimization);
-                    const byteSavings = bytes(optimization.byteSavings);
-                    return `${message} (Est ${byteSavings})`;
-                })
-                    .join('\n');
-                return `### ${image.request.args.data.url}
-- Potential savings: ${bytes(image.byteSavings)}
-- Optimizations:\n${optimizations}`;
-            })
-                .join('\n\n');
-            return `Total potential savings: ${bytes(this.#insight.wastedBytes)}
-
-The following images could be optimized:\n\n${imageDetails}`;
-        }
-        if (Trace.Insights.Models.LCPBreakdown.isLCPBreakdown(this.#insight)) {
-            const { subparts, lcpMs } = this.#insight;
-            if (!lcpMs || !subparts) {
-                return '';
-            }
-            // Text based LCP has TTFB & Render delay
-            // Image based has TTFB, Load delay, Load time and Render delay
-            // Note that we expect every trace + LCP to have TTFB + Render delay, but
-            // very old traces are missing the data, so we have to code defensively
-            // in case the subparts are not present.
-            const phaseBulletPoints = [];
-            Object.values(subparts).forEach((subpart) => {
-                const phaseMilli = Trace.Helpers.Timing.microToMilli(subpart.range);
-                const percentage = (phaseMilli / lcpMs * 100).toFixed(1);
-                phaseBulletPoints.push({ name: subpart.label, value: this.#formatMilli(phaseMilli), percentage });
-            });
-            return `${this.#lcpMetricSharedContext()}
-
-We can break this time down into the ${phaseBulletPoints.length} phases that combine to make the LCP time:
-
-${phaseBulletPoints.map(phase => `- ${phase.name}: ${phase.value} (${phase.percentage}% of total LCP time)`)
-                .join('\n')}`;
+        if (Trace.Insights.Models.Cache.isCacheInsight(this.#insight)) {
+            return this.formatCacheInsight(this.#insight);
         }
-        if (Trace.Insights.Models.LCPDiscovery.isLCPDiscovery(this.#insight)) {
-            const { checklist, lcpEvent, lcpRequest, earliestDiscoveryTimeTs } = this.#insight;
-            if (!checklist || !lcpEvent || !lcpRequest || !earliestDiscoveryTimeTs) {
-                return '';
-            }
-            const checklistBulletPoints = [];
-            checklistBulletPoints.push({
-                name: checklist.priorityHinted.label,
-                passed: checklist.priorityHinted.value,
-            });
-            checklistBulletPoints.push({
-                name: checklist.eagerlyLoaded.label,
-                passed: checklist.eagerlyLoaded.value,
-            });
-            checklistBulletPoints.push({
-                name: checklist.requestDiscoverable.label,
-                passed: checklist.requestDiscoverable.value,
-            });
-            return `${this.#lcpMetricSharedContext()}
-
-The result of the checks for this insight are:
-${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED' : 'FAILED'}`).join('\n')}`;
+        if (Trace.Insights.Models.CLSCulprits.isCLSCulpritsInsight(this.#insight)) {
+            return this.formatClsCulpritsInsight(this.#insight);
         }
-        if (Trace.Insights.Models.RenderBlocking.isRenderBlocking(this.#insight)) {
-            const requestSummary = TraceEventFormatter.networkRequests(this.#insight.renderBlockingRequests, this.#parsedTrace);
-            if (requestSummary.length === 0) {
-                return 'There are no network requests that are render blocking.';
-            }
-            return `Here is a list of the network requests that were render blocking on this page and their duration:
-
-${requestSummary}`;
+        if (Trace.Insights.Models.DocumentLatency.isDocumentLatencyInsight(this.#insight)) {
+            return this.formatDocumentLatencyInsight(this.#insight);
         }
-        if (Trace.Insights.Models.DocumentLatency.isDocumentLatency(this.#insight)) {
-            if (!this.#insight.data) {
-                return '';
-            }
-            const { checklist, documentRequest } = this.#insight.data;
-            if (!documentRequest) {
-                return '';
-            }
-            const checklistBulletPoints = [];
-            checklistBulletPoints.push({
-                name: 'The request was not redirected',
-                passed: checklist.noRedirects.value,
-            });
-            checklistBulletPoints.push({
-                name: 'Server responded quickly',
-                passed: checklist.serverResponseIsFast.value,
-            });
-            checklistBulletPoints.push({
-                name: 'Compression was applied',
-                passed: checklist.usesCompression.value,
-            });
-            return `${this.#lcpMetricSharedContext()}
-
-${TraceEventFormatter.networkRequests([documentRequest], this.#parsedTrace, {
-                verbose: true,
-                customTitle: 'Document network request'
-            })}
-
-The result of the checks for this insight are:
-${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED' : 'FAILED'}`).join('\n')}`;
+        if (Trace.Insights.Models.DOMSize.isDomSizeInsight(this.#insight)) {
+            return this.formatDomSizeInsight(this.#insight);
         }
-        if (Trace.Insights.Models.INPBreakdown.isINPBreakdown(this.#insight)) {
-            const event = this.#insight.longestInteractionEvent;
-            if (!event) {
-                return '';
-            }
-            const inpInfoForEvent = `The longest interaction on the page was a \`${event.type}\` which had a total duration of \`${this.#formatMicro(event.dur)}\`. The timings of each of the three phases were:
-
-1. Input delay: ${this.#formatMicro(event.inputDelay)}
-2. Processing duration: ${this.#formatMicro(event.mainThreadHandling)}
-3. Presentation delay: ${this.#formatMicro(event.presentationDelay)}.`;
-            return inpInfoForEvent;
+        if (Trace.Insights.Models.DuplicatedJavaScript.isDuplicatedJavaScriptInsight(this.#insight)) {
+            return this.formatDuplicatedJavaScriptInsight(this.#insight);
         }
-        if (Trace.Insights.Models.CLSCulprits.isCLSCulprits(this.#insight)) {
-            const { worstCluster, shifts } = this.#insight;
-            if (!worstCluster) {
-                return '';
-            }
-            const baseTime = this.#parsedTrace.data.Meta.traceBounds.min;
-            const clusterTimes = {
-                start: worstCluster.ts - baseTime,
-                end: worstCluster.ts + worstCluster.dur - baseTime,
-            };
-            const shiftsFormatted = worstCluster.events.map((layoutShift, index) => {
-                return TraceEventFormatter.layoutShift(layoutShift, index, this.#parsedTrace, shifts.get(layoutShift));
-            });
-            return `The worst layout shift cluster was the cluster that started at ${this.#formatMicro(clusterTimes.start)} and ended at ${this.#formatMicro(clusterTimes.end)}, with a duration of ${this.#formatMicro(worstCluster.dur)}.
-The score for this cluster is ${worstCluster.clusterCumulativeScore.toFixed(4)}.
-
-Layout shifts in this cluster:
-${shiftsFormatted.join('\n')}`;
+        if (Trace.Insights.Models.FontDisplay.isFontDisplayInsight(this.#insight)) {
+            return this.formatFontDisplayInsight(this.#insight);
         }
-        if (Trace.Insights.Models.ModernHTTP.isModernHTTP(this.#insight)) {
-            const requestSummary = (this.#insight.http1Requests.length === 1) ?
-                TraceEventFormatter.networkRequests(this.#insight.http1Requests, this.#parsedTrace, { verbose: true }) :
-                TraceEventFormatter.networkRequests(this.#insight.http1Requests, this.#parsedTrace);
-            if (requestSummary.length === 0) {
-                return 'There are no requests that were served over a legacy HTTP protocol.';
-            }
-            return `Here is a list of the network requests that were served over a legacy HTTP protocol:
-${requestSummary}`;
+        if (Trace.Insights.Models.ForcedReflow.isForcedReflowInsight(this.#insight)) {
+            return this.formatForcedReflowInsight(this.#insight);
         }
-        if (Trace.Insights.Models.DuplicatedJavaScript.isDuplicatedJavaScript(this.#insight)) {
-            const totalWastedBytes = this.#insight.wastedBytes;
-            const duplicatedScriptsByModule = this.#insight.duplicationGroupedByNodeModules;
-            if (duplicatedScriptsByModule.size === 0) {
-                return 'There is no duplicated JavaScript in the page modules';
-            }
-            const filesFormatted = Array.from(duplicatedScriptsByModule)
-                .map(([module, duplication]) => `- Source: ${module} - Duplicated bytes: ${duplication.estimatedDuplicateBytes} bytes`)
-                .join('\n');
-            return `Total wasted bytes: ${totalWastedBytes} bytes.
-
-Duplication grouped by Node modules: ${filesFormatted}`;
+        if (Trace.Insights.Models.ImageDelivery.isImageDeliveryInsight(this.#insight)) {
+            return this.formatImageDeliveryInsight(this.#insight);
         }
-        if (Trace.Insights.Models.LegacyJavaScript.isLegacyJavaScript(this.#insight)) {
-            const legacyJavaScriptResults = this.#insight.legacyJavaScriptResults;
-            if (legacyJavaScriptResults.size === 0) {
-                return 'There is no significant amount of legacy JavaScript on the page.';
-            }
-            const filesFormatted = Array.from(legacyJavaScriptResults)
-                .map(([script, result]) => `\n- Script: ${script.url} - Wasted bytes: ${result.estimatedByteSavings} bytes
-Matches:
-${result.matches.map(match => `Line: ${match.line}, Column: ${match.column}, Name: ${match.name}`).join('\n')}`)
-                .join('\n');
-            return `Total legacy JavaScript: ${legacyJavaScriptResults.size} files.
-
-Legacy JavaScript by file:
-${filesFormatted}`;
+        if (Trace.Insights.Models.INPBreakdown.isINPBreakdownInsight(this.#insight)) {
+            return this.formatInpBreakdownInsight(this.#insight);
         }
-        if (Trace.Insights.Models.Cache.isCacheInsight(this.#insight)) {
-            return this.formatCacheInsight(this.#insight);
+        if (Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(this.#insight)) {
+            return this.formatLcpBreakdownInsight(this.#insight);
         }
-        if (Trace.Insights.Models.DOMSize.isDomSizeInsight(this.#insight)) {
-            return this.formatDomSizeInsight(this.#insight);
+        if (Trace.Insights.Models.LCPDiscovery.isLCPDiscoveryInsight(this.#insight)) {
+            return this.formatLcpDiscoveryInsight(this.#insight);
         }
-        if (Trace.Insights.Models.FontDisplay.isFontDisplayInsight(this.#insight)) {
-            return this.formatFontDisplayInsight(this.#insight);
+        if (Trace.Insights.Models.LegacyJavaScript.isLegacyJavaScript(this.#insight)) {
+            return this.formatLegacyJavaScriptInsight(this.#insight);
         }
-        if (Trace.Insights.Models.ForcedReflow.isForcedReflowInsight(this.#insight)) {
-            return this.formatForcedReflowInsight(this.#insight);
+        if (Trace.Insights.Models.ModernHTTP.isModernHTTPInsight(this.#insight)) {
+            return this.formatModernHttpInsight(this.#insight);
         }
-        if (Trace.Insights.Models.NetworkDependencyTree.isNetworkDependencyTree(this.#insight)) {
+        if (Trace.Insights.Models.NetworkDependencyTree.isNetworkDependencyTreeInsight(this.#insight)) {
             return this.formatNetworkDependencyTreeInsight(this.#insight);
         }
+        if (Trace.Insights.Models.RenderBlocking.isRenderBlockingInsight(this.#insight)) {
+            return this.formatRenderBlockingInsight(this.#insight);
+        }
         if (Trace.Insights.Models.SlowCSSSelector.isSlowCSSSelectorInsight(this.#insight)) {
             return this.formatSlowCssSelectorsInsight(this.#insight);
         }

package/build/node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/data_formatters/UnitFormatters.js

@@ -9,7 +9,7 @@ const defaultTimeFormatterOptions = {
     style: 'unit',
     unitDisplay: 'narrow',
     minimumFractionDigits: 0,
-    maximumFractionDigits: 1,
+    maximumFractionDigits: 0,
 };
 const defaultByteFormatterOptions = {
     style: 'unit',
@@ -22,8 +22,14 @@ const timeFormatters = {
         ...defaultTimeFormatterOptions,
         unit: 'millisecond',
     }),
+    milliWithPrecision: new Intl.NumberFormat('en-US', {
+        ...defaultTimeFormatterOptions,
+        maximumFractionDigits: 1,
+        unit: 'millisecond',
+    }),
     second: new Intl.NumberFormat('en-US', {
         ...defaultTimeFormatterOptions,
+        maximumFractionDigits: 1,
         unit: 'second',
     }),
     micro: new Intl.NumberFormat('en-US', {
@@ -71,6 +77,9 @@ export function millis(x) {
     if (numberIsTooLarge(x)) {
         return '-';
     }
+    if (x < 1) {
+        return formatAndEnsureSpace(timeFormatters.milliWithPrecision, x);
+    }
     return formatAndEnsureSpace(timeFormatters.milli, x);
 }
 export function micros(x) {

package/build/node_modules/chrome-devtools-frontend/front_end/models/ai_assistance/performance/AIContext.js

@@ -15,9 +15,10 @@ export class AgentFocus {
         }
         const insightSet = getFirstInsightSet(parsedTrace.insights);
         return new AgentFocus({
-            type: 'full',
             parsedTrace,
             insightSet,
+            callTree: null,
+            insight: null,
         });
     }
     static fromInsight(parsedTrace, insight) {
@@ -26,9 +27,9 @@ export class AgentFocus {
         }
         const insightSet = getFirstInsightSet(parsedTrace.insights);
         return new AgentFocus({
-            type: 'insight',
             parsedTrace,
             insightSet,
+            callTree: null,
             insight,
         });
     }
@@ -45,7 +46,7 @@ export class AgentFocus {
             })) ??
                 getFirstInsightSet(insights);
         }
-        return new AgentFocus({ type: 'call-tree', parsedTrace: callTree.parsedTrace, insightSet, callTree });
+        return new AgentFocus({ parsedTrace: callTree.parsedTrace, insightSet, callTree, insight: null });
     }
     #data;
     constructor(data) {
@@ -54,6 +55,16 @@ export class AgentFocus {
     get data() {
         return this.#data;
     }
+    withInsight(insight) {
+        const focus = new AgentFocus(this.#data);
+        focus.#data.insight = insight;
+        return focus;
+    }
+    withCallTree(callTree) {
+        const focus = new AgentFocus(this.#data);
+        focus.#data.callTree = callTree;
+        return focus;
+    }
 }
 export function getPerformanceAgentFocusFromModel(model) {
     const parsedTrace = model.parsedTrace();

package/build/node_modules/chrome-devtools-frontend/front_end/models/bindings/ContentProviderBasedProject.js

@@ -85,9 +85,9 @@ export class ContentProviderBasedProject extends Workspace.Workspace.ProjectStor
     }
     async findFilesMatchingSearchRequest(searchConfig, filesMatchingFileQuery, progress) {
         const result = new Map();
-        progress.setTotalWork(filesMatchingFileQuery.length);
+        progress.totalWork = filesMatchingFileQuery.length;
         await Promise.all(filesMatchingFileQuery.map(searchInContent.bind(this)));
-        progress.done();
+        progress.done = true;
         return result;
         async function searchInContent(uiSourceCode) {
             let allMatchesFound = true;
@@ -103,11 +103,13 @@ export class ContentProviderBasedProject extends Workspace.Workspace.ProjectStor
             if (allMatchesFound) {
                 result.set(uiSourceCode, matches);
             }
-            progress.incrementWorked(1);
+            ++progress.worked;
         }
     }
     indexContent(progress) {
-        queueMicrotask(progress.done.bind(progress));
+        queueMicrotask(() => {
+            progress.done = true;
+        });
     }
     addUISourceCodeWithProvider(uiSourceCode, contentProvider, metadata, mimeType) {
         this.#uiSourceCodeToData.set(uiSourceCode, { mimeType, metadata, contentProvider });

package/build/node_modules/chrome-devtools-frontend/front_end/models/formatter/FormatterWorkerPool.js

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
-const MAX_WORKERS = Math.max(2, navigator.hardwareConcurrency - 1);
 let formatterWorkerPoolInstance;
 export class FormatterWorkerPool {
     taskQueue;
@@ -24,11 +23,12 @@ export class FormatterWorkerPool {
         return worker;
     }
     processNextTask() {
+        const maxWorkers = Math.max(2, navigator.hardwareConcurrency - 1);
         if (!this.taskQueue.length) {
             return;
         }
         let freeWorker = [...this.workerTasks.keys()].find(worker => !this.workerTasks.get(worker));
-        if (!freeWorker && this.workerTasks.size < MAX_WORKERS) {
+        if (!freeWorker && this.workerTasks.size < maxWorkers) {
             freeWorker = this.createWorker();
         }
         if (!freeWorker) {

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

@@ -6,6 +6,9 @@ import * as Handlers from './handlers/handlers.js';
 import * as Helpers from './helpers/helpers.js';
 import { TraceParseProgressEvent, TraceProcessor } from './Processor.js';
 import * as Types from './types/types.js';
+// Note: this model is implemented in a way that can support multiple trace
+// processors. Currently there is only one implemented, but you will see
+// references to "processors" plural because it can easily be extended in the future.
 /**
  * The Model is responsible for parsing arrays of raw trace events and storing the
  * resulting data. It can store multiple traces at once, and can return the data for
@@ -69,8 +72,6 @@ export class Model extends EventTarget {
      **/
     async parse(traceEvents, config) {
         const metadata = config?.metadata || {};
-        const isFreshRecording = config?.isFreshRecording || false;
-        const isCPUProfile = metadata?.dataOrigin === "CPUProfile" /* Types.File.DataOrigin.CPU_PROFILE */;
         // During parsing, periodically update any listeners on each processors'
         // progress (if they have any updates).
         const onTraceUpdate = (event) => {
@@ -83,13 +84,7 @@ export class Model extends EventTarget {
         try {
             // Wait for all outstanding promises before finishing the async execution,
             // but perform all tasks in parallel.
-            const parseConfig = {
-                isFreshRecording,
-                isCPUProfile,
-                metadata,
-                resolveSourceMap: config?.resolveSourceMap,
-            };
-            await this.#processor.parse(traceEvents, parseConfig);
+            await this.#processor.parse(traceEvents, config ?? {});
             if (!this.#processor.data) {
                 throw new Error('processor did not parse trace');
             }