chore: reflect emulated device in CrUX data (#2131)

CrUX data returned with the performance tool now reflects the emulated
device

Closes: #1813

Author: nroscino

src/McpResponse.ts

@@ -209,6 +209,10 @@ export class McpResponse implements Response {
   #error?: Error;
   #attachedWaitForResult?: WaitForEventsResult;
 
+  get #deviceScope(): DevTools.CrUXManager.DeviceScope {
+    return this.#page?.viewport?.isMobile ? 'PHONE' : 'DESKTOP';
+  }
+
   constructor(args: ParsedArguments) {
     this.#args = args;
   }
@@ -898,7 +902,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
     }
 
     if (data.traceSummary) {
-      const summary = getTraceSummary(data.traceSummary);
+      const summary = getTraceSummary(data.traceSummary, this.#deviceScope);
       response.push(summary);
       structuredContent.traceSummary = summary;
       structuredContent.traceInsights = [];
@@ -917,6 +921,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
         data.traceInsight.trace,
         data.traceInsight.insightSetId,
         data.traceInsight.insightName,
+        this.#deviceScope,
       );
       if ('error' in insightOutput) {
         response.push(insightOutput.error);

src/trace-processing/parse.ts

@@ -80,9 +80,12 @@ ${DevTools.PerformanceTraceFormatter.callFrameDataFormatDescription}
 
 ${DevTools.PerformanceTraceFormatter.networkDataFormatDescription}`;
 
-export function getTraceSummary(result: TraceResult): string {
+export function getTraceSummary(
+  result: TraceResult,
+  deviceScope?: DevTools.CrUXManager.DeviceScope | null,
+): string {
   const focus = DevTools.AgentFocus.fromParsedTrace(result.parsedTrace);
-  const formatter = new DevTools.PerformanceTraceFormatter(focus);
+  const formatter = new DevTools.PerformanceTraceFormatter(focus, deviceScope);
   const summaryText = formatter.formatTraceSummary();
   return `## Summary of Performance trace findings:
 ${summaryText}
@@ -99,6 +102,7 @@ export function getInsightOutput(
   result: TraceResult,
   insightSetId: string,
   insightName: InsightName,
+  deviceScope?: DevTools.CrUXManager.DeviceScope | null,
 ): InsightOutput {
   if (!result.insights) {
     return {
@@ -125,6 +129,7 @@ export function getInsightOutput(
   const formatter = new DevTools.PerformanceInsightFormatter(
     DevTools.AgentFocus.fromParsedTrace(result.parsedTrace),
     matchingInsight,
+    deviceScope,
   );
   return {output: formatter.formatInsight()};
 }

tests/tools/performance.test.ts

@@ -387,16 +387,125 @@ describe('performance', () => {
         {performanceCrux: false},
       );
     });
+
+    it('fetches CrUX data for desktop and includes it in the summary', async () => {
+      const rawData = loadTraceAsBuffer('web-dev-with-commit.json.gz');
+      await withMcpContext(async (response, context) => {
+        context.setIsRunningPerformanceTrace(true);
+        const selectedPage = context.getSelectedPptrPage();
+        sinon.stub(selectedPage.tracing, 'stop').resolves(rawData);
+
+        const fetchStub = globalThis.fetch as sinon.SinonStub;
+        fetchStub.resetHistory();
+        fetchStub.callsFake(async (url, options) => {
+          const body = options?.body ? JSON.parse(options.body as string) : {};
+          const requestedUrl = body.url || body.origin || 'https://web.dev/';
+          const lcp = body.formFactor === 'DESKTOP' ? 1000 : 2595;
+          return new Response(
+            JSON.stringify(cruxResponseFixture(requestedUrl, lcp)),
+            {
+              status: 200,
+              headers: {'Content-Type': 'application/json'},
+            },
+          );
+        });
+
+        await stopTrace.handler(
+          {params: {}, page: context.getSelectedMcpPage()},
+          response,
+          context,
+        );
+
+        const result = await response.handle('performance_stop_trace', context);
+        const fullOutput = result.content
+          .map(c => (c.type === 'text' ? c.text : ''))
+          .join('\n');
+
+        assert.ok(fetchStub.called, 'CrUX fetch should have been called');
+        assert.ok(
+          fullOutput.includes('Metrics (field / real users)'),
+          'Summary should include field data',
+        );
+        assert.ok(
+          fullOutput.includes('LCP: 1000 ms'),
+          'Summary should include desktop LCP value',
+        );
+      });
+    });
+
+    it('fetches CrUX data for mobile and includes it in the summary', async () => {
+      const rawData = loadTraceAsBuffer('web-dev-with-commit.json.gz');
+      // Use a unique URL to avoid cache issues
+      const jsonString = new TextDecoder().decode(rawData);
+      const modifiedJsonString = jsonString.replaceAll(
+        'https://web.dev/',
+        'https://mobile.web.dev/',
+      );
+      const modifiedData = new TextEncoder().encode(modifiedJsonString);
+
+      await withMcpContext(async (response, context) => {
+        context.setIsRunningPerformanceTrace(true);
+        const selectedPage = context.getSelectedPptrPage();
+        sinon.stub(selectedPage.tracing, 'stop').resolves(modifiedData);
+
+        // Emulate mobile
+        await context.emulate({
+          viewport: {
+            width: 375,
+            height: 667,
+            isMobile: true,
+            hasTouch: true,
+            deviceScaleFactor: 2,
+          },
+        });
+
+        const fetchStub = globalThis.fetch as sinon.SinonStub;
+        fetchStub.resetHistory();
+        fetchStub.callsFake(async (url, options) => {
+          const body = options?.body ? JSON.parse(options.body as string) : {};
+          const requestedUrl = body.url || body.origin || 'https://web.dev/';
+          const lcp = body.formFactor === 'PHONE' ? 2000 : 2595;
+          return new Response(
+            JSON.stringify(cruxResponseFixture(requestedUrl, lcp)),
+            {
+              status: 200,
+              headers: {'Content-Type': 'application/json'},
+            },
+          );
+        });
+
+        await stopTrace.handler(
+          {params: {}, page: context.getSelectedMcpPage()},
+          response,
+          context,
+        );
+
+        const result = await response.handle('performance_stop_trace', context);
+        const fullOutput = result.content
+          .map(c => (c.type === 'text' ? c.text : ''))
+          .join('\n');
+
+        assert.ok(fetchStub.called, 'CrUX fetch should have been called');
+        assert.ok(
+          fullOutput.includes('Metrics (field / real users)'),
+          'Summary should include field data',
+        );
+        assert.ok(
+          fullOutput.includes('LCP: 2000 ms'),
+          'Summary should include mobile LCP value',
+        );
+      });
+    });
   });
 });
 
-function cruxResponseFixture() {
+function cruxResponseFixture(url = 'https://web.dev/', lcp = 2595) {
   // Ideally we could use `mockResponse` from 'chrome-devtools-frontend/front_end/models/crux-manager/CrUXManager.test.ts'
   // But test files are not published in the cdtf npm package.
   return {
     record: {
       key: {
-        url: 'https://web.dev/',
+        url,
       },
       metrics: {
         form_factors: {
@@ -408,7 +517,7 @@ function cruxResponseFixture() {
             {start: 2500, end: 4000, density: 0.163},
             {start: 4000, density: 0.1061},
           ],
-          percentiles: {p75: 2595},
+          percentiles: {p75: lcp},
         },
         largest_contentful_paint_image_element_render_delay: {
           percentiles: {p75: 786},