npm - chrome-devtools-frontend - Versions diffs - 1.0.1597448 → 1.0.1597624 - Mend

chrome-devtools-frontend 1.0.1597448 → 1.0.1597624

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/front_end/models/trace/insights/CharacterSet.ts ADDED Viewed

@@ -0,0 +1,172 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+import {
+  type Checklist,
+  InsightCategory,
+  InsightKeys,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type PartialInsightModel,
+} from './types.js';
+export const UIStrings = {
+  /**
+   * @description Title of an insight that checks whether the page declares a character encoding early enough.
+   */
+  title: 'Declare a character encoding',
+  /**
+   * @description Description of an insight that checks whether the page has a proper character encoding declaration via HTTP header or early meta tag.
+   */
+  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/).',
+  /**
+   * @description Text to tell the user that the charset is declared in the Content-Type HTTP response header.
+   */
+  passingHttpHeader: 'Declares charset in HTTP header',
+  /**
+   * @description Text to tell the user that the charset is NOT declared in the Content-Type HTTP response header.
+   */
+  failedHttpHeader: 'Does not declare charset in HTTP header',
+  /**
+   * @description Text to tell the user that a meta charset tag was found in the first 1024 bytes of the HTML.
+   */
+  passingMetaCharsetEarly: 'Declares charset using a meta tag in the first 1024 bytes',
+  /**
+   * @description Text to tell the user that a meta charset tag was found, but too late in the HTML.
+   */
+  failedMetaCharsetLate: 'Declares charset using a meta tag after the first 1024 bytes',
+  /**
+   * @description Text to tell the user that no meta charset tag was found in the HTML.
+   */
+  failedMetaCharsetMissing: 'Does not declare charset using a meta tag',
+  /**
+   * @description Text to tell the user that trace data did not include the Blink signal for meta charset.
+   */
+  failedMetaCharsetUnknown: 'Could not determine meta charset declaration from trace',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/CharacterSet.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const CHARSET_HTTP_REGEX = /charset\s*=\s*[a-zA-Z0-9\-_:.()]{2,}/i;
+export type CharacterSetInsightModel = InsightModel<typeof UIStrings, {
+  data?: {
+    hasHttpCharset: boolean,
+    checklist: Checklist<'httpCharset'|'metaCharset'>,
+    metaCharsetDisposition?: Types.Events.MetaCharsetDisposition,
+    documentRequest?: Types.Events.SyntheticNetworkRequest,
+  },
+}>;
+export function isCharacterSetInsight(model: InsightModel): model is CharacterSetInsightModel {
+  return model.insightKey === InsightKeys.CHARACTER_SET;
+}
+function finalize(partialModel: PartialInsightModel<CharacterSetInsightModel>): CharacterSetInsightModel {
+  let hasFailure = false;
+  if (partialModel.data) {
+    hasFailure = !partialModel.data.checklist.httpCharset.value && !partialModel.data.checklist.metaCharset.value;
+  }
+  return {
+    insightKey: InsightKeys.CHARACTER_SET,
+    strings: UIStrings,
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/insights/charset/',
+    category: InsightCategory.ALL,
+    state: hasFailure ? 'fail' : 'pass',
+    ...partialModel,
+  };
+}
+function hasCharsetInContentType(request: Types.Events.SyntheticNetworkRequest): boolean {
+  if (!request.args.data.responseHeaders) {
+    return false;
+  }
+  for (const header of request.args.data.responseHeaders) {
+    if (header.name.toLowerCase() === 'content-type') {
+      return CHARSET_HTTP_REGEX.test(header.value);
+    }
+  }
+  return false;
+}
+function findMetaCharsetDisposition(
+    data: Handlers.Types.HandlerData,
+    context: InsightSetContext,
+    ): Types.Events.MetaCharsetDisposition|undefined {
+  if (!context.navigation) {
+    return undefined;
+  }
+  return data.PageLoadMetrics.metaCharsetCheckEventsByNavigation.get(context.navigation)
+      ?.at(-1)
+      ?.args.data?.disposition;
+}
+function metaCharsetLabel(disposition: Types.Events.MetaCharsetDisposition|undefined): ReturnType<typeof i18nString> {
+  switch (disposition) {
+    case 'found-in-first-1024-bytes':
+      return i18nString(UIStrings.passingMetaCharsetEarly);
+    case 'found-after-first-1024-bytes':
+      return i18nString(UIStrings.failedMetaCharsetLate);
+    case 'not-found':
+      return i18nString(UIStrings.failedMetaCharsetMissing);
+    default:
+      return i18nString(UIStrings.failedMetaCharsetUnknown);
+  }
+}
+export function generateInsight(
+    data: Handlers.Types.HandlerData, context: InsightSetContext): CharacterSetInsightModel {
+  if (!context.navigation) {
+    return finalize({});
+  }
+  const documentRequest = data.NetworkRequests.byId.get(context.navigationId);
+  if (!documentRequest) {
+    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
+  }
+  const hasHttpCharset = hasCharsetInContentType(documentRequest);
+  const metaCharsetDisposition = findMetaCharsetDisposition(data, context);
+  const hasMetaCharsetInFirst1024Bytes = metaCharsetDisposition === 'found-in-first-1024-bytes';
+  return finalize({
+    relatedEvents: [documentRequest],
+    data: {
+      hasHttpCharset,
+      metaCharsetDisposition,
+      documentRequest,
+      checklist: {
+        httpCharset: {
+          label: hasHttpCharset ? i18nString(UIStrings.passingHttpHeader) : i18nString(UIStrings.failedHttpHeader),
+          value: hasHttpCharset,
+        },
+        metaCharset: {
+          label: metaCharsetLabel(metaCharsetDisposition),
+          value: hasMetaCharsetInFirst1024Bytes,
+        },
+      },
+    },
+  });
+}
+export function createOverlays(model: CharacterSetInsightModel): Types.Overlays.Overlay[] {
+  if (!model.data?.documentRequest) {
+    return [];
+  }
+  return [{
+    type: 'ENTRY_SELECTED',
+    entry: model.data.documentRequest,
+  }];
+}

package/front_end/models/trace/insights/Models.ts CHANGED Viewed

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 export * as Cache from './Cache.js';
+export * as CharacterSet from './CharacterSet.js';
 export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as DOMSize from './DOMSize.js';

package/front_end/models/trace/insights/types.ts CHANGED Viewed

@@ -164,4 +164,5 @@ export const enum InsightKeys {
   VIEWPORT = 'Viewport',
   MODERN_HTTP = 'ModernHTTP',
   CACHE = 'Cache',
+  CHARACTER_SET = 'CharacterSet',
 }

package/front_end/models/trace/types/TraceEvents.ts CHANGED Viewed

@@ -1360,6 +1360,22 @@ export function isParseMetaViewport(event: Event): event is ParseMetaViewport {
   return event.name === Name.PARSE_META_VIEWPORT;
 }
+export type MetaCharsetDisposition = 'found-in-first-1024-bytes'|'found-after-first-1024-bytes'|'not-found';
+export interface MetaCharsetCheck extends Instant {
+  name: Name.META_CHARSET_CHECK;
+  args: Args&{
+    data: {
+      frame: string,
+      disposition: MetaCharsetDisposition,
+    },
+  };
+}
+export function isMetaCharsetCheck(event: Event): event is MetaCharsetCheck {
+  return event.name === Name.META_CHARSET_CHECK;
+}
 export interface LinkPreconnect extends Instant {
   name: Name.LINK_PRECONNECT;
   args: Args&{
@@ -3110,6 +3126,7 @@ export const enum Name {
   SELECTOR_STATS = 'SelectorStats',
   BEGIN_COMMIT_COMPOSITOR_FRAME = 'BeginCommitCompositorFrame',
   PARSE_META_VIEWPORT = 'ParseMetaViewport',
+  META_CHARSET_CHECK = 'MetaCharsetCheck',
   /* Paint */
   SCROLL_LAYER = 'ScrollLayer',

package/front_end/panels/ai_assistance/AiAssistancePanel.ts CHANGED Viewed

@@ -1699,8 +1699,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               parts: [],
             };
             this.#messages.push(systemMessage);
-            if (Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent') &&
-                this.#conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT) {
+            // If the walkthrough is currently expanded in the sidebar, we want to
+            // automatically swap it to the newly created message's walkthrough.
+            // This ensures that when a user asks a new question, the sidebar updates
+            // immediately to show the "loading" state of the new walkthrough.
+            const isSidebarWalkthroughOpen = this.#walkthrough.isExpanded && !this.#walkthrough.isInlined;
+            if (isSidebarWalkthroughOpen ||
+                (Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent') &&
+                 this.#conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT)) {
               this.#openWalkthrough(systemMessage);
             }
             break;
@@ -1788,6 +1794,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               systemMessage.parts.push(newPart);
             }
+            if (data.widgets && Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+              systemMessage.parts.push({
+                type: 'widget',
+                widgets: data.widgets,
+              });
+            }
             // When there is an answer without any thinking steps, we don't want to show the thinking step.
             // TODO(crbug.com/463323934): Remove specially handling this case.
             if (systemMessage.parts.length > 1) {
@@ -1881,7 +1894,7 @@ export function getResponseMarkdown(message: ModelChatMessage): string {
   for (const part of message.parts) {
     if (part.type === 'answer') {
       contentParts.push(`### Answer\n\n${part.text}`);
-    } else {
+    } else if (part.type === 'step') {
       const step = part.step;
       if (step.title) {
         contentParts.push(`### ${step.title}`);