chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

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

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

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

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

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

@@ -43,6 +43,7 @@ import {DisabledWidget} from './components/DisabledWidget.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
 import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
+import {StylingAgentMarkdownRenderer} from './components/StylingAgentMarkdownRenderer.js';
 import {
   WalkthroughView,
 } from './components/WalkthroughView.js';
@@ -233,6 +234,10 @@ const lockedString = i18n.i18n.lockedString;
 
 function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
   if (maybeNode) {
+    if (Greendev.Prototypes.instance().isEnabled('emulationCapabilities')) {
+      return maybeNode;
+    }
+
     return maybeNode.nodeType() === Node.ELEMENT_NODE ? maybeNode : null;
   }
 
@@ -260,7 +265,12 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       return [
         {title: 'What can you help me with?', jslogContext: 'styling-default'},
         {title: 'Why isn’t this element visible?', jslogContext: 'styling-default'},
-        {title: 'How do I center this element?', jslogContext: 'styling-default'},
+        {
+          title: Greendev.Prototypes.instance().isEnabled('emulationCapabilities') ?
+              'Are there display issues on this page for people using an Android phone?' :
+              'How do I center this element?',
+          jslogContext: 'styling-default'
+        },
       ];
     case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
       return [
@@ -313,6 +323,14 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
   } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE) {
     // Handle historical conversations (can't linkify anything).
     return new PerformanceAgentMarkdownRenderer();
+  } else if (
+      Greendev.Prototypes.instance().isEnabled('emulationCapabilities') &&
+      conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING &&
+      SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel)) {
+    const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
+    const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const mainFrameId = resourceTreeModel?.mainFrame?.id;
+    return new StylingAgentMarkdownRenderer(mainFrameId);
   }
 
   return new MarkdownRendererWithCodeBlock();
@@ -602,12 +620,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #isLoading = false;
   // Stores the availability status of the `AidaClient` and the reason for unavailability, if any.
   #aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
-  // Info of the currently logged in user.
-  #userInfo: {
-    accountImage?: string,
-    accountFullName?: string,
-    accountGivenName?: string,
-  };
   #timelinePanelInstance: TimelinePanel.TimelinePanel.TimelinePanel|null = null;
   #runAbortController = new AbortController();
   #walkthrough: WalkthroughState = {
@@ -616,10 +628,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     activeMessage: null,
   };
 
-  constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
+  constructor(private view: View = defaultView, {aidaClient, aidaAvailability}: {
     aidaClient: Host.AidaClient.AidaClient,
     aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
-    syncInfo: Host.InspectorFrontendHostAPI.SyncInformation,
   }) {
     super(AiAssistancePanel.panelName);
     this.registerRequiredCSS(aiAssistancePanelStyles);
@@ -627,11 +638,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     this.#aidaClient = aidaClient;
     this.#aidaAvailability = aidaAvailability;
-    this.#userInfo = {
-      accountImage: syncInfo.accountImage,
-      accountFullName: syncInfo.accountFullName,
-      accountGivenName: syncInfo.accountGivenName,
-    };
 
     if (UI.ActionRegistry.ActionRegistry.instance().hasAction('elements.toggle-element-search')) {
       this.#toggleSearchElementAction =
@@ -706,7 +712,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           isReadOnly: this.#conversation.isReadOnly ?? false,
           changeSummary: this.#getChangeSummary(),
           inspectElementToggled: this.#toggleSearchElementAction?.toggled() ?? false,
-          userInfo: this.#userInfo,
           canShowFeedbackForm: this.#serverSideLoggingEnabled,
           multimodalInputEnabled: isAiAssistanceMultimodalInputEnabled() &&
               this.#conversation.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
@@ -792,11 +797,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const {forceNew} = opts;
     if (!panelInstance || forceNew) {
       const aidaClient = new Host.AidaClient.AidaClient();
-      const syncInfoPromise = new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
-          resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
-      const [aidaAvailability, syncInfo] =
-          await Promise.all([Host.AidaClient.AidaClient.checkAccessPreconditions(), syncInfoPromise]);
-      panelInstance = new AiAssistancePanel(defaultView, {aidaClient, aidaAvailability, syncInfo});
+      const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+      panelInstance = new AiAssistancePanel(defaultView, {aidaClient, aidaAvailability});
     }
 
     return panelInstance;
@@ -1059,13 +1061,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
     if (currentAidaAvailability !== this.#aidaAvailability) {
       this.#aidaAvailability = currentAidaAvailability;
-      const syncInfo = await new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
-          resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
-      this.#userInfo = {
-        accountImage: syncInfo.accountImage,
-        accountFullName: syncInfo.accountFullName,
-        accountGivenName: syncInfo.accountGivenName,
-      };
       this.requestUpdate();
     }
   };
@@ -1635,12 +1630,19 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (this.#conversation.isEmpty) {
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.STARTED_AI_CONVERSATION);
     }
-    const multimodalInput = isAiAssistanceMultimodalInputEnabled() && imageInput && multimodalInputType ? {
-      input: imageInput,
-      id: crypto.randomUUID(),
-      type: multimodalInputType,
-    } :
-                                                                                                          undefined;
+
+    const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
+    let multimodalInput: AiAssistanceModel.AiAgent.MultimodalInput|undefined;
+    const pendingInput = this.#conversation.getPendingMultimodalInput();
+    if (greenDevEmulationEnabled && pendingInput) {
+      multimodalInput = pendingInput;
+    } else if (isAiAssistanceMultimodalInputEnabled() && imageInput && multimodalInputType) {
+      multimodalInput = {
+        input: imageInput,
+        id: crypto.randomUUID(),
+        type: multimodalInputType,
+      };
+    }
 
     void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
 
@@ -1697,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;
@@ -1786,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) {
@@ -1879,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}`);

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -125,6 +125,7 @@ const UIStringsNotTranslate = {
 const lockedString = i18n.i18n.lockedString;
 
 const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
+const {widget} = UI.Widget;
 
 export enum PatchSuggestionState {
   /**
@@ -251,12 +252,11 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     }
 
     if (input.patchSuggestionState === PatchSuggestionState.SUCCESS) {
-      return html`<devtools-widget .widgetConfig=${
-          UI.Widget.widgetConfig(ChangesPanel.CombinedDiffView.CombinedDiffView, {
-            workspaceDiff: input.workspaceDiff,
-            // Ignore user creates inspector-stylesheets
-            ignoredUrls: ['inspector://']
-          })}></devtools-widget>`;
+      return html`${widget(ChangesPanel.CombinedDiffView.CombinedDiffView, {
+        workspaceDiff: input.workspaceDiff,
+        // Ignore user creates inspector-stylesheets
+        ignoredUrls: ['inspector://']
+      })}`;
     }
 
     return html`<devtools-code-block