chrome-devtools-frontend 1.0.1597448 → 1.0.1598808

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

@@ -2,11 +2,10 @@
 // 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';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
-import * as SDK from '../../../core/sdk/sdk.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import type * as Trace from '../../trace/trace.js';
@@ -63,7 +62,7 @@ You aim to help developers of all levels, prioritizing teaching web concepts as
  */
 export class ContextSelectionAgent extends AiAgent<never> {
   readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_FILE_AGENT;
+  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_CONTEXT_SELECTION_AGENT;
   get userTier(): string|undefined {
     // TODO: Make this depend on variable.
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
@@ -81,6 +80,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
   readonly #performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>;
   readonly #onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
   readonly #networkTimeCalculator?: NetworkTimeCalculator.NetworkTransferTimeCalculator;
+  #allowedOrigin: () => string | undefined;
 
   constructor(opts: AgentOptions&{
     performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>,
@@ -91,6 +91,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
     this.#performanceRecordAndReload = opts.performanceRecordAndReload;
     this.#onInspectElement = opts.onInspectElement;
     this.#networkTimeCalculator = opts.networkTimeCalculator;
+    this.#allowedOrigin = opts.allowedOrigin ?? (() => undefined);
 
     this.declareFunction<Record<string, never>>('listNetworkRequests', {
       description: `Gives a list of network requests including URL, status code, and duration.`,
@@ -109,12 +110,12 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       handler: async () => {
         const requests = [];
-        const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-        const inspectedURL = target?.inspectedURL();
-        const mainSecurityOrigin = inspectedURL ? new Common.ParsedURL.ParsedURL(inspectedURL).securityOrigin() : null;
+        const origin = this.#allowedOrigin();
 
+        let hasCrossOriginRequest = false;
         for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
-          if (mainSecurityOrigin && request.securityOrigin() !== mainSecurityOrigin) {
+          if (origin && request.securityOrigin() !== origin) {
+            hasCrossOriginRequest = true;
             continue;
           }
 
@@ -129,7 +130,9 @@ export class ContextSelectionAgent extends AiAgent<never> {
 
         if (requests.length === 0) {
           return {
-            error: 'No requests recorded by DevTools',
+            error: hasCrossOriginRequest ?
+                `No requests showing with origin ${origin}. Tell the user to start a new chat` :
+                'No requests recorded by DevTools',
           };
         }
 

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

@@ -0,0 +1,109 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as Root from '../../../core/root/root.js';
+
+import {AiAgent, type ContextResponse, ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
+
+const preamble =
+    `You are an expert technical assistant specializing in summarizing debugging conversations from Chrome DevTools.
+You will receive a markdown-formatted transcript of a conversation between a user and a DevTools AI assistant.
+Your goal is to produce a succinct, structured summary that a local AI agent in the user's IDE can use to apply code fixes.
+
+Focus on extracting:
+1. **Core Issue:** The primary problem or question the user was investigating.
+2. **Diagnostic Findings:** Key technical details discovered (e.g., specific functions, bottlenecks, error messages, URLs, or CSS properties).
+3. **Proposed Solution:** The specific changes or optimizations recommended by the DevTools assistant.
+4. **Actionable Steps:** A clear, step-by-step list of instructions for the IDE agent to implement the fix.
+
+Maintain a professional, technical, and extremely concise tone. Avoid conversational filler or introductory/concluding remarks.
+The output must be structured markdown.`;
+
+export class ConversationSummaryContext extends ConversationContext<string> {
+  #conversation: string;
+  constructor(conversation: string) {
+    super();
+    this.#conversation = conversation;
+  }
+
+  getOrigin(): string {
+    return 'devtools://ai-assistance';
+  }
+
+  getItem(): string {
+    return this.#conversation;
+  }
+
+  override getTitle(): string {
+    return 'Conversation';
+  }
+}
+
+/**
+ * An agent that takes a full conversation between a user and an agent in markdown
+ * format and produces a succinct summary of the conversation.
+ *
+ * This summary is designed to be read by a local agent in the user's IDE and it
+ * will be used to help apply fixes to the user's local codebase based on the
+ * debugging information the devtools agent found.
+ *
+ * This agent is not intended to be used directly by users in the AI Assistance
+ * panel when chatting with DevTools AI.
+ */
+export class ConversationSummaryAgent extends AiAgent<string> {
+  override preamble = preamble;
+
+  get clientFeature(): Host.AidaClient.ClientFeature {
+    return Host.AidaClient.ClientFeature.CHROME_CONVERSATION_SUMMARY_AGENT;
+  }
+
+  get userTier(): string|undefined {
+    // TODO(b/491772868): tidy up userTier & feature flags in the backend.
+    return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
+  }
+
+  get options(): RequestOptions {
+    // TODO(b/491772868): tidy up userTier & feature flags in the backend.
+    const temperature = Root.Runtime.hostConfig.devToolsFreestyler?.temperature;
+    const modelId = Root.Runtime.hostConfig.devToolsFreestyler?.modelId;
+
+    return {
+      temperature,
+      modelId,
+    };
+  }
+
+  async * handleContextDetails(context: ConversationContext<string>|null): AsyncGenerator<ContextResponse, void, void> {
+    if (!context) {
+      return;
+    }
+
+    yield {
+      type: ResponseType.CONTEXT,
+      title: 'Summarizing conversation',
+      details: [
+        {
+          title: 'Conversation transcript',
+          text: context.getItem(),
+        },
+      ],
+    };
+  }
+
+  override async enhanceQuery(query: string, context: ConversationContext<string>|null): Promise<string> {
+    const conversation = context ? context.getItem() : query;
+    return `Summarize the following conversation:\n\n${conversation}`;
+  }
+
+  async summarizeConversation(conversation: string): Promise<string> {
+    const context = new ConversationSummaryContext(conversation);
+    const response = await Array.fromAsync(this.run('', {selected: context}));
+    const lastResponse = response.at(-1);
+    if (lastResponse && lastResponse.type === ResponseType.ANSWER && lastResponse.complete === true) {
+      return lastResponse.text.trim();
+    }
+    throw new Error('Failed to summarize conversation');
+  }
+}

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

@@ -8,6 +8,7 @@ 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 Tracing from '../../../services/tracing/tracing.js';
 import * as Annotations from '../../annotations/annotations.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
@@ -700,6 +701,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace} = focus;
+    const processedNodeIds = new Set<Protocol.DOM.BackendNodeId>();
 
     this.declareFunction<{insightSetId: string, insightName: string}, {details: string}>('getInsightDetails', {
       description:
@@ -749,9 +751,36 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
         const details = new PerformanceInsightFormatter(focus, insight).formatInsight();
 
+        const widgets: AiWidget[] = [];
+        if (params.insightName === 'LCPDiscovery' || params.insightName === 'LCPBreakdown') {
+          const lcpMetric = Trace.Insights.Common.getLCP(insightSet);
+          const lcpEvent = lcpMetric?.event;
+          if (lcpEvent && Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
+            const nodeId = lcpEvent.args.data?.nodeId;
+            // We want to show only one DOM tree widget per walkthrough per node.
+            // We do want to show the widget for the same node again, if it's within a new walkthrough.
+            if (nodeId && !processedNodeIds.has(nodeId)) {
+              const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+              const domModel = target?.model(SDK.DOMModel.DOMModel);
+              if (domModel) {
+                const nodeMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([nodeId]));
+                const node = nodeMap?.get(nodeId);
+                if (node) {
+                  const snapshot = await node.takeSnapshot();
+                  widgets.push({
+                    name: 'DOM_TREE',
+                    data: {root: snapshot},
+                  });
+                  processedNodeIds.add(nodeId);
+                }
+              }
+            }
+          }
+        }
+
         const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;
         this.#cacheFunctionResult(focus, key, details);
-        return {result: {details}};
+        return {result: {details}, widgets};
       },
     });
 

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

@@ -15,11 +15,12 @@ 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,
@@ -194,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>,
 };
@@ -317,15 +320,17 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   #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[],
@@ -1048,6 +1053,31 @@ 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> {

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -3,9 +3,11 @@
 // 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';
+import * as ConversationSummaryAgent from './agents/ConversationSummaryAgent.js';
 import * as FileAgent from './agents/FileAgent.js';
 import * as NetworkAgent from './agents/NetworkAgent.js';
 import * as PatchAgent from './agents/PatchAgent.js';
@@ -32,6 +34,7 @@ import * as AIContext from './performance/AIContext.js';
 import * as AIQueries from './performance/AIQueries.js';
 
 export {
+  AccessibilityAgent,
   AgentProject,
   AiAgent,
   AICallTree,
@@ -45,6 +48,7 @@ export {
   ChangeManager,
   ContextSelectionAgent,
   ConversationHandler,
+  ConversationSummaryAgent,
   Debug,
   EvaluateAction,
   ExtensionScope,

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/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,
   };
 }