chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -7,23 +7,27 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import type * as Protocol from '../../../generated/protocol.js';
+import * as Protocol from '../../../generated/protocol.js';
+import * as Greendev from '../../../models/greendev/greendev.js';
 import * as Annotations from '../../annotations/annotations.js';
+import * as Emulation from '../../emulation/emulation.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
 import {ExtensionScope} from '../ExtensionScope.js';
-import {FREESTYLER_WORLD_NAME} from '../injected.js';
+import {AI_ASSISTANCE_CSS_CLASS_NAME, FREESTYLER_WORLD_NAME} from '../injected.js';
 
 import {
   type AgentOptions as BaseAgentOptions,
   AiAgent,
+  type AnswerResponse,
   type ComputedStyleAiWidget,
   type ContextResponse,
   ConversationContext,
   type ConversationSuggestions,
   type FunctionCallHandlerResult,
   type FunctionHandlerOptions,
+  type MultimodalInput,
   MultimodalInputType,
   type RequestOptions,
   ResponseType
@@ -45,13 +49,14 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
-/**
- * WARNING: preamble defined in code is only used when userTier is
- * TESTERS. Otherwise, a server-side preamble is used (see
- * chrome_preambles.gcl). Sync local changes with the server-side.
- */
-/* clang-format off */
-const preamble = `You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
+function getPreamble(): string {
+  /**
+   * WARNING: preamble defined in code is only used when userTier is
+   * TESTERS. Otherwise, a server-side preamble is used (see
+   * chrome_preambles.gcl). Sync local changes with the server-side.
+   */
+  /* clang-format off */
+  let preamble = `You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
 You always suggest considering the best web development practices and the newest platform features such as view transitions.
 The user selected a DOM element in the browser's DevTools and sends a query about the page or the selected DOM element.
 First, examine the provided context, then use the functions to gather additional context and resolve the user request.
@@ -73,6 +78,47 @@ First, examine the provided context, then use the functions to gather additional
 * **CRITICAL** NEVER output text before a function call. Always do a function call first.
 * **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect \`position\`, \`display\` and ALL related properties.
 * **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.`;
+
+  const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
+  if (greenDevEmulationEnabled) {
+    preamble += `
+# Emulation and Screenshots
+
+* If asked to verify whether the page is visually broken or if there are display problems with specific devices, use the \`activateDeviceEmulation\` tool. This tool will activate emulation for a specified device and capture a screenshot.
+* **DEVICE SELECTION**: You must choose the most closely related device match from the allowed list.
+    * If the user asks about a specific device (e.g., "iPhone 6"), choose the closest match (e.g., "iPhone 6/7/8").
+    * If the user specifies a generic category (e.g., "Android phone", "iPhone", "Samsung"), choose the device with the highest version number available in that category (e.g., "Pixel 7" or "Samsung Galaxy S20" for Android, "iPhone 14 Pro Max" for iPhone).
+* **VISION DEFICIENCY**: If the user asks about checking for color blindness or vision issues, you can pass an optional \`visionDeficiency\` parameter to \`activateDeviceEmulation\`. Allowed values are: 'blurredVision', 'reducedContrast', 'achromatopsia', 'deuteranopia', 'protanopia', 'tritanopia'.
+* **IMPORTANT**: This is a **TWO-STEP** process.
+* **STEP 1**: Call \`activateDeviceEmulation\`. After calling this tool, YOU MUST STOP and tell the user that the screenshot has been captured and ask them whether they would like you to focus on specific sections of the screenshot or review it all for possible problems.
+* **STEP 2**: The captured screenshot will be automatically attached to the user's **NEXT** query.
+* **CRITICAL**: DO NOT try to investigate/analyze the page state or element visibility automatically. But, after the user has requested to analyze the page, you can prompt the user to select one of the problematic elements if they want to diagnose further.
+* **CRITICAL**: The output of the analysis should only be in json form (no supplemental text) and the json should list the problems found on the device, with a short description of the problem. If identical problems are identified acress multiple devices, feel free to combine sections.
+* **CRITICAL**: ALWAYS escape single and double quotes within the json output strings (\' and \").
+*
+* Example (with no duplication):
+
+[
+  {
+    "Problem": "Element not resizing",
+    "Element": "Hero banner",
+    "NodeId": "23",
+    "Details": "The \"hero\" element is not resizing because... etc etc."
+  }
+]
+
+# Additional notes:
+
+When referring to an element for which you know the nodeId, annotate your output using markdown link syntax:
+- For example, if nodeId is 23: ([link](#node-23))
+- Always prefix the nodeId with the 'node-' prefix when using the markdown syntax.
+- This link will reveal the element in the Elements panel
+- Never mention node or nodeId when referring to the element, and especially not in the link text.`;
+}
+
+  return preamble;
+}
+
 /* clang-format on */
 
 const promptForScreenshot =
@@ -149,6 +195,8 @@ async function executeJsCode(
 const MAX_OBSERVATION_BYTE_LENGTH = 25_000;
 const OBSERVATION_TIMEOUT = 5_000;
 
+export const AI_ASSISTANCE_FILTER_REGEX = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
+
 type CreateExtensionScopeFunction = (changes: ChangeManager) => {
   install(): Promise<void>, uninstall(): Promise<void>,
 };
@@ -237,10 +285,11 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
  * instance for a new conversation.
  */
 export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
-  preamble = preamble;
+  preamble = getPreamble();
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_STYLING_AGENT;
   get userTier(): string|undefined {
-    return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
+    const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
+    return greenDevEmulationEnabled ? 'TESTERS' : Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
   }
   get executionMode(): Root.Runtime.HostConfigFreestylerExecutionMode {
     return Root.Runtime.hostConfig.devToolsFreestyler?.executionMode ??
@@ -269,15 +318,19 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
 
   #changes: ChangeManager;
   #createExtensionScope: CreateExtensionScopeFunction;
+  #greenDevEmulationScreenshot: string|null = null;
+  #greenDevEmulationAxTree: string|null = null;
+  #currentTurnId = 0;
 
   constructor(opts: AgentOptions) {
     super(opts);
 
     this.#changes = opts.changeManager || new ChangeManager();
     this.#execJs = opts.execJs ?? executeJsCode;
-    this.#createExtensionScope = opts.createExtensionScope ?? ((changes: ChangeManager) => {
-                                   return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null);
-                                 });
+    this.#createExtensionScope =
+        opts.createExtensionScope ?? ((changes: ChangeManager) => {
+          return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null, this.#currentTurnId);
+        });
 
     this.declareFunction<{
       elements: number[],
@@ -447,6 +500,37 @@ const data = {
         },
       });
     }
+
+    this.declareFunction<{
+      deviceName: string,
+      visionDeficiency?: string,
+    }>('activateDeviceEmulation', {
+      description:
+          'Sets emulation viewing mode for a specific device and optionally enables vision deficiency emulation.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          deviceName: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description:
+                'The name of the device to emulate. Allowed values: Pixel 3 XL, Pixel 7, Samsung Galaxy S8+, Samsung Galaxy S20 Ultra, Surface Pro 7, Surface Duo, Galaxy Z Fold 5, Asus Zenbook Fold, Samsung Galaxy A51/71, Nest Hub Max, Nest Hub, iPhone 4, iPhone 5/SE, iPhone 6/7/8, iPhone SE, iPhone XR, iPhone 12 Pro, iPhone 14 Pro Max, iPad Mini, iPad Air, iPad Pro.',
+            nullable: false,
+          },
+          visionDeficiency: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description:
+                'Optional vision deficiency to emulate. Allowed values: blurredVision, reducedContrast, achromatopsia, deuteranopia, protanopia, tritanopia.',
+            nullable: true,
+          },
+        },
+        required: ['deviceName']
+      },
+      handler: async params => {
+        return await this.activateDeviceEmulation(params.deviceName, params.visionDeficiency);
+      },
+    });
   }
 
   async generateObservation(
@@ -761,6 +845,198 @@ const data = {
     };
   }
 
+  async #compressScreenshot(base64Data: string): Promise<string> {
+    return await new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        // eslint-disable-next-line @devtools/no-imperative-dom-api
+        const canvas = document.createElement('canvas');
+        const maxDimension = 2000;
+        let scale = 1;
+        if (img.width > maxDimension || img.height > maxDimension) {
+          scale = maxDimension / Math.max(img.width, img.height);
+        }
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          reject(new Error('Could not get canvas context'));
+          return;
+        }
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
+        resolve(dataUrl.split(',')[1]);
+      };
+      img.onerror = e => reject(new Error('Image load error: ' + e));
+      img.src = 'data:image/png;base64,' + base64Data;
+    });
+  }
+
+  async activateDeviceEmulation(deviceName: string, visionDeficiency?: string):
+      Promise<FunctionCallHandlerResult<unknown>> {
+    const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
+    if (!greenDevEmulationEnabled) {
+      return {error: `GreenDev emulation capabilities not enabled`};
+    }
+
+    // eslint-disable-next-line no-console
+    console.log('activateDeviceEmulation called with device:', deviceName, 'visionDeficiency:', visionDeficiency);
+
+    this.#greenDevEmulationScreenshot = null;
+    this.#greenDevEmulationAxTree = null;
+
+    const emulatedDevicesList = Emulation.EmulatedDevices.EmulatedDevicesList.instance();
+    const device = emulatedDevicesList.standard().find(d => d.title === deviceName);
+
+    if (!device) {
+      return {
+        error: `Could not find device "${deviceName}" in the list of emulated devices.`,
+      };
+    }
+
+    const deviceModeModel = Emulation.DeviceModeModel.DeviceModeModel.instance();
+
+    const verticalMode = device.modesForOrientation(Emulation.EmulatedDevices.Vertical)[0];
+    if (!verticalMode) {
+      return {
+        error: `Could not find vertical mode for "${deviceName}".`,
+      };
+    }
+    deviceModeModel.emulate(Emulation.DeviceModeModel.Type.Device, device, verticalMode);
+
+    // Get the selected node early to use for both vision deficiency and wait mechanism.
+    const selectedNode = this.#getSelectedNode();
+
+    // Apply vision deficiency if provided (and turn it off when not provided).
+    try {
+      if (selectedNode) {
+        const target = selectedNode.domModel().target();
+        const emulationModel = target.model(SDK.EmulationModel.EmulationModel);
+        if (emulationModel) {
+          let type = Protocol.Emulation.SetEmulatedVisionDeficiencyRequestType.None;
+          if (visionDeficiency && visionDeficiency !== 'none') {
+            type = visionDeficiency as Protocol.Emulation.SetEmulatedVisionDeficiencyRequestType;
+          }
+          await target.emulationAgent().invoke_setEmulatedVisionDeficiency({type});
+        }
+      } else {
+        console.error('No selected node context to retrieve EmulationModel.');
+      }
+    } catch {
+      return {
+        error: `Unable to apply vision deficiency "${visionDeficiency}".`,
+      };
+    }
+
+    // Wait for the layout to settle after emulation changes.
+    // We use a double requestAnimationFrame to ensure at least one frame is rendered.
+    if (selectedNode) {
+      try {
+        const code = 'await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))';
+        // We use throwOnSideEffect: false because this is a benign wait, not a modification of the page state relevant to the user.
+        await this.#execJs(code, {throwOnSideEffect: false, contextNode: selectedNode});
+      } catch (e) {
+        console.error('Failed to wait for layout settle:', e);
+      }
+    }
+
+    const orientation = device.orientationByName(Emulation.EmulatedDevices.Vertical);
+    const width = orientation.width;
+
+    // TODO(finnur): Investigate better screen capture alternatives (that can do the whole page).
+    let documentHeight = 2000;
+    if (selectedNode) {
+      try {
+        const heightJs = 'document.body.scrollHeight';
+        const result = await this.#execJs(heightJs, {throwOnSideEffect: false, contextNode: selectedNode});
+        const parsedHeight = Number(result);
+        if (!isNaN(parsedHeight)) {
+          documentHeight = Math.min(parsedHeight, 2000);
+        }
+      } catch (e) {
+        console.error('Failed to get document height:', e);
+      }
+    }
+
+    // Specify a clip capping the height to the top 5000px.
+    const clip: Protocol.Page.Viewport = {
+      x: 0,
+      y: 0,
+      width,
+      height: documentHeight,
+      scale: 1,
+    };
+
+    // Capture using the clip. fullSize must be false when clip is used.
+    const screenshot = await deviceModeModel.captureScreenshot(false, clip);
+
+    if (!screenshot) {
+      return {
+        error: `Emulation for ${deviceName} activated, but failed to capture screenshot.`,
+      };
+    }
+
+    try {
+      this.#greenDevEmulationScreenshot = await this.#compressScreenshot(screenshot);
+    } catch (e) {
+      console.error('Screenshot compression failed, using original', e);
+      this.#greenDevEmulationScreenshot = screenshot;
+    }
+
+    try {
+      if (selectedNode) {
+        const accessibilityModel = selectedNode.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
+        if (accessibilityModel) {
+          await accessibilityModel.resumeModel();
+          const axResponse = await accessibilityModel.agent.invoke_getFullAXTree({});
+          if (!axResponse.getError()) {
+            this.#greenDevEmulationAxTree = JSON.stringify(axResponse.nodes);
+          } else {
+            console.error('Failed to capture Accessibility Tree:', axResponse.getError());
+          }
+        }
+      }
+    } catch (e) {
+      console.error('Exception capturing Accessibility Tree:', e);
+    }
+
+    let resultMsg = `Emulation for ${deviceName} activated and screenshot has been captured.`;
+    if (visionDeficiency) {
+      resultMsg += ` Vision deficiency "${visionDeficiency}" was also applied.`;
+    }
+    resultMsg += ' Ready for analysis.';
+
+    return {
+      result: resultMsg,
+    };
+  }
+
+  override popPendingMultimodalInput(): MultimodalInput|undefined {
+    const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
+    if (!greenDevEmulationEnabled) {
+      return undefined;
+    }
+
+    if (this.#greenDevEmulationScreenshot) {
+      const data = this.#greenDevEmulationScreenshot;
+      this.#greenDevEmulationScreenshot = null;
+      return {
+        type: MultimodalInputType.SCREENSHOT,
+        input: {
+          inlineData: {
+            data,
+            mimeType: 'image/jpeg',
+          },
+        },
+        id: crypto.randomUUID(),
+      };
+    }
+    return undefined;
+  }
+
   override async *
       handleContextDetails(selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null):
           AsyncGenerator<ContextResponse, void, void> {
@@ -777,15 +1053,46 @@ const data = {
     };
   }
 
+  protected override async preRun(): Promise<void> {
+    this.#currentTurnId++;
+  }
+
+  protected override async finalizeAnswer(answer: AnswerResponse): Promise<AnswerResponse> {
+    if (!Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+      return answer;
+    }
+
+    const changedNodeIds = this.#changes.getChangedNodesForGroupId(this.sessionId, this.#currentTurnId);
+    if (changedNodeIds.length === 0) {
+      return answer;
+    }
+    answer.widgets = [
+      ...(answer.widgets ?? []),
+      ...changedNodeIds.map(id => ({
+                              name: 'STYLE_PROPERTIES' as const,
+                              data: {
+                                backendNodeId: id,
+                                selector: AI_ASSISTANCE_FILTER_REGEX,
+                              },
+                            })),
+    ];
+    return answer;
+  }
   override async enhanceQuery(
       query: string, selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null,
       multimodalInputType?: MultimodalInputType): Promise<string> {
+    let multimodalInputEnhancementQuery =
+        this.multimodalInputEnabled && multimodalInputType ? MULTIMODAL_ENHANCEMENT_PROMPTS[multimodalInputType] : '';
+
+    if (this.#greenDevEmulationAxTree) {
+      multimodalInputEnhancementQuery += '\n# Accessibility Tree\n\n' + this.#greenDevEmulationAxTree;
+      this.#greenDevEmulationAxTree = null;
+    }
+
     const elementEnchancementQuery = selectedElement ?
         `# Inspected element\n\n${
             await StylingAgent.describeElement(selectedElement.getItem())}\n\n# User request\n\n` :
         '';
-    const multimodalInputEnhancementQuery =
-        this.multimodalInputEnabled && multimodalInputType ? MULTIMODAL_ENHANCEMENT_PROMPTS[multimodalInputType] : '';
     return `${multimodalInputEnhancementQuery}${elementEnchancementQuery}QUERY: ${query}`;
   }
 }

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as AgentProject from './AgentProject.js';
+import * as AccessibilityAgent from './agents/AccessibilityAgent.js';
 import * as AiAgent from './agents/AiAgent.js';
 import * as BreakpointDebuggerAgent from './agents/BreakpointDebuggerAgent.js';
 import * as ContextSelectionAgent from './agents/ContextSelectionAgent.js';
@@ -32,6 +33,7 @@ import * as AIContext from './performance/AIContext.js';
 import * as AIQueries from './performance/AIQueries.js';
 
 export {
+  AccessibilityAgent,
   AgentProject,
   AiAgent,
   AICallTree,

package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -203,6 +203,10 @@ export class PerformanceInsightFormatter {
           {title: 'Is my site polyfilling modern JavaScript features?'},
           {title: 'How can I reduce the amount of legacy JavaScript on my page?'},
         ];
+      case 'CharacterSet':
+        return [
+          {title: 'How do I declare a character encoding for my page?'},
+        ];
       default:
         throw new Error(`Unknown insight key '${this.#insight.insightKey}'`);
     }
@@ -881,6 +885,20 @@ ${requestSummary}`;
    * @param insight The Network Dependency Tree Insight Model to query.
    * @returns a string formatted for sending to Ask AI.
    */
+  formatCharacterSetInsight(insight: Trace.Insights.Models.CharacterSet.CharacterSetInsightModel): string {
+    let output = '';
+    if (insight.data) {
+      output += 'HTTP Content-Type header charset: ' + (insight.data.hasHttpCharset ? 'present' : 'missing') + '.\n';
+      output += 'HTML meta charset disposition: ' + (insight.data.metaCharsetDisposition ?? 'unknown') + '.\n';
+
+      if (!insight.data.hasHttpCharset && insight.data.metaCharsetDisposition !== 'found-in-first-1024-bytes') {
+        output +=
+            '\nThe page does not declare character encoding via HTTP header or a meta charset tag in the first 1024 bytes.\n';
+      }
+    }
+    return output;
+  }
+
   formatViewportInsight(insight: Trace.Insights.Models.Viewport.ViewportInsightModel): string {
     let output = '';
 
@@ -995,6 +1013,10 @@ ${this.#links()}`;
       return this.formatViewportInsight(this.#insight);
     }
 
+    if (Trace.Insights.Models.CharacterSet.isCharacterSetInsight(this.#insight)) {
+      return this.formatCharacterSetInsight(this.#insight);
+    }
+
     return '';
   }
 
@@ -1074,6 +1096,9 @@ ${this.#links()}`;
         links.push('https://web.dev/articles/baseline-and-polyfills');
         links.push('https://philipwalton.com/articles/the-state-of-es5-on-the-web/');
         break;
+      case 'CharacterSet':
+        links.push('https://developer.chrome.com/docs/insights/charset/');
+        break;
     }
 
     return links.map(link => '- ' + link).join('\n');
@@ -1158,6 +1183,8 @@ To pass this insight, ensure your server supports and prioritizes a modern HTTP
         return `This insight identified legacy JavaScript in your application's modules that may be creating unnecessary code.
 
 Polyfills and transforms enable older browsers to use new JavaScript features. However, many are not necessary for modern browsers. Consider modifying your JavaScript build process to not transpile Baseline features, unless you know you must support older browsers.`;
+      case 'CharacterSet':
+        return `This insight checks that the page declares a character encoding, ideally via the Content-Type HTTP response header. A missing or late charset declaration can force the browser to re-parse the document once it finally determines the encoding, delaying first contentful paint. Best practice: include charset=utf-8 in the Content-Type header and add <meta charset="utf-8"> as the very first element inside <head>.`;
     }
   }
 }

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -467,6 +467,7 @@ Here are all the insights that contain some related request from the given range
 - DocumentLatency: news.yahoo.com/ (news.yahoo.com) (eventKey: s-2116, ts: 157423489126)
 - ThirdParties: cmp.js (consent.cmp.oath.com) (eventKey: s-3382, ts: 157423742399), gpt.js (securepubads.g.doubleclick.net) (eventKey: s-6244, ts: 157423760529), loader.js (cdn.taboola.com) (eventKey: s-6352, ts: 157423761978)
 - Cache: prebid-2.0.js (s.yimg.com) (eventKey: s-6279, ts: 157423760925), cmp.js (consent.cmp.oath.com) (eventKey: s-3382, ts: 157423742399), d1irmdsmbztlvx.js (s.yimg.com) (eventKey: s-6185, ts: 157423759200), consent.js (s.yimg.com) (eventKey: s-3384, ts: 157423742450), wnsrvbjmeprtfrnfx.js (s.yimg.com) (eventKey: s-6273, ts: 157423760794)
+- CharacterSet: news.yahoo.com/ (news.yahoo.com) (eventKey: s-2116, ts: 157423489126)
 - LegacyJavaScript: benji-2.2.99.js (s.yimg.com) (eventKey: s-3387, ts: 157423742567), 25fa214.caas-news_web.min.js (s.yimg.com) (eventKey: s-3412, ts: 157423743431), wnsrvbjmeprtfrnfx.js (s.yimg.com) (eventKey: s-6273, ts: 157423760794), consent.js (s.yimg.com) (eventKey: s-3384, ts: 157423742450), news.yahoo.com/ (news.yahoo.com) (eventKey: s-2116, ts: 157423489126)
 === end content
 
@@ -510,6 +511,10 @@ Available insights:
     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.
     relevant trace bounds: {min: 1020034871372, max: 1020035171789}
     example question: Which third parties are having the largest impact on my page performance?
+  - insight name: CharacterSet
+    description: A character encoding declaration is required. It can be done with a meta charset tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more about declaring the character encoding](https://developer.chrome.com/docs/insights/charset/).
+    relevant trace bounds: {min: 1020034836013, max: 1020034892491}
+    example question: How do I declare a character encoding for my page?
 === end content
 
 Title: PerformanceTraceFormatter formatTraceSummary yahoo-news.json.gz
@@ -617,6 +622,10 @@ Available insights:
     relevant trace bounds: {min: 171608170438, max: 171608877165}
     example question: Show me the most impactful render-blocking requests that I should focus on
     example question: How can I reduce the number of render-blocking requests?
+  - insight name: CharacterSet
+    description: A character encoding declaration is required. It can be done with a meta charset tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more about declaring the character encoding](https://developer.chrome.com/docs/insights/charset/).
+    relevant trace bounds: {min: 171607584346, max: 171608171143}
+    example question: How do I declare a character encoding for my page?
 
 ## insight set id: NAVIGATION_1
 
@@ -641,6 +650,10 @@ Available insights:
     relevant trace bounds: {min: 171614330544, max: 171615043224}
     example question: Show me the most impactful render-blocking requests that I should focus on
     example question: How can I reduce the number of render-blocking requests?
+  - insight name: CharacterSet
+    description: A character encoding declaration is required. It can be done with a meta charset tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more about declaring the character encoding](https://developer.chrome.com/docs/insights/charset/).
+    relevant trace bounds: {min: 171613750986, max: 171614330870}
+    example question: How do I declare a character encoding for my page?
 === end content
 
 Title: PerformanceTraceFormatter formatTraceSummary deals with CrUX manager errors
@@ -714,6 +727,10 @@ Available insights:
     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.
     relevant trace bounds: {min: 59728701403, max: 59729465969}
     example question: Which third parties are having the largest impact on my page performance?
+  - insight name: CharacterSet
+    description: A character encoding declaration is required. It can be done with a meta charset tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more about declaring the character encoding](https://developer.chrome.com/docs/insights/charset/).
+    relevant trace bounds: {min: 59728651057, max: 59728790724}
+    example question: How do I declare a character encoding for my page?
 === end content
 
 Title: PerformanceTraceFormatter formatTraceSummary image-delivery.json.gz
@@ -794,6 +811,10 @@ Available insights:
     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.
     relevant trace bounds: {min: 59728701403, max: 59729465969}
     example question: Which third parties are having the largest impact on my page performance?
+  - insight name: CharacterSet
+    description: A character encoding declaration is required. It can be done with a meta charset tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more about declaring the character encoding](https://developer.chrome.com/docs/insights/charset/).
+    relevant trace bounds: {min: 59728651057, max: 59728790724}
+    example question: How do I declare a character encoding for my page?
 === end content
 
 Title: PerformanceTraceFormatter formatTraceSummary includes INP insight when there is no navigation

package/front_end/models/greendev/Prototypes.ts

@@ -11,6 +11,7 @@ export interface GreenDevSettings {
   aiAnnotations: Common.Settings.Setting<boolean>;
   copyToGemini: Common.Settings.Setting<boolean>;
   breakpointDebuggerAgent: Common.Settings.Setting<boolean>;
+  emulationCapabilities: Common.Settings.Setting<boolean>;
 }
 
 export class Prototypes {
@@ -48,7 +49,12 @@ export class Prototypes {
         false,
         Common.Settings.SettingStorageType.LOCAL,
     );
+    const emulationCapabilities = settings.createSetting(
+        'greendev-emulation-capabilities-enabled',
+        false,
+        Common.Settings.SettingStorageType.LOCAL,
+    );
 
-    return {aiAnnotations, copyToGemini, breakpointDebuggerAgent};
+    return {aiAnnotations, copyToGemini, breakpointDebuggerAgent, emulationCapabilities};
   }
 }

package/front_end/models/trace/Processor.ts

@@ -352,6 +352,7 @@ export class TraceProcessor extends EventTarget {
       SlowCSSSelector: null,
       ForcedReflow: null,
       Cache: null,
+      CharacterSet: null,
       ModernHTTP: null,
       LegacyJavaScript: null,
     };

package/front_end/models/trace/handlers/PageLoadMetricsHandler.ts

@@ -40,11 +40,17 @@ let metricScoresByFrameId = new Map<FrameId, Map<AnyNavigationStart, Map<MetricN
  */
 let allMarkerEvents: Types.Events.PageLoadEvent[] = [];
 
+// Grouped by navigation to make it easier for insights to scope checks.
+let metaCharsetCheckEventsByNavigation = new Map<AnyNavigationStart, Types.Events.MetaCharsetCheck[]>();
+let metaCharsetCheckEventsArray: Types.Events.MetaCharsetCheck[] = [];
+
 export function reset(): void {
   metricScoresByFrameId = new Map();
   pageLoadEventsArray = [];
   allMarkerEvents = [];
   selectedLCPCandidateEvents = new Set();
+  metaCharsetCheckEventsByNavigation = new Map();
+  metaCharsetCheckEventsArray = [];
 }
 
 let pageLoadEventsArray: Types.Events.PageLoadEvent[] = [];
@@ -60,6 +66,11 @@ let pageLoadEventsArray: Types.Events.PageLoadEvent[] = [];
 let selectedLCPCandidateEvents = new Set<Types.Events.AnyLargestContentfulPaintCandidate>();
 
 export function handleEvent(event: Types.Events.Event): void {
+  if (Types.Events.isMetaCharsetCheck(event)) {
+    metaCharsetCheckEventsArray.push(event);
+    return;
+  }
+
   if (!Types.Events.eventIsPageLoadEvent(event)) {
     return;
   }
@@ -393,6 +404,23 @@ export async function finalize(): Promise<void> {
       storePageLoadMetricAgainstNavigationId(navigation, pageLoadEvent);
     }
   }
+
+  const {navigationsByFrameId} = metaHandlerData();
+  metaCharsetCheckEventsArray.sort((a, b) => a.ts - b.ts);
+  for (const metaCharsetCheckEvent of metaCharsetCheckEventsArray) {
+    const frameId = metaCharsetCheckEvent.args.data?.frame;
+    if (!frameId) {
+      continue;
+    }
+    const navigation = Helpers.Trace.getNavigationForTraceEvent(metaCharsetCheckEvent, frameId, navigationsByFrameId);
+    if (!navigation) {
+      continue;
+    }
+    const eventsForNavigation =
+        Platform.MapUtilities.getWithDefault(metaCharsetCheckEventsByNavigation, navigation, () => []);
+    eventsForNavigation.push(metaCharsetCheckEvent);
+  }
+
   // NOTE: if you are looking for the TBT calculation, it has temporarily been
   // removed. See crbug.com/1424335 for details.
   const allFinalLCPEvents = gatherFinalLCPEvents();
@@ -421,12 +449,17 @@ export interface PageLoadMetricsData {
    * main frame.
    */
   allMarkerEvents: Types.Events.PageLoadEvent[];
+  /**
+   * MetaCharsetCheck events grouped by navigation.
+   */
+  metaCharsetCheckEventsByNavigation: Map<AnyNavigationStart, Types.Events.MetaCharsetCheck[]>;
 }
 
 export function data(): PageLoadMetricsData {
   return {
     metricScoresByFrameId,
     allMarkerEvents,
+    metaCharsetCheckEventsByNavigation,
   };
 }