chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

package/front_end/generated/InspectorBackendCommands.js

@@ -784,7 +784,7 @@ inspectorBackend.registerEnum("Network.TrustTokenParamsRefreshPolicy", {UseCache
 inspectorBackend.registerEnum("Network.TrustTokenOperationType", {Issuance: "Issuance", Redemption: "Redemption", Signing: "Signing"});
 inspectorBackend.registerEnum("Network.AlternateProtocolUsage", {AlternativeJobWonWithoutRace: "alternativeJobWonWithoutRace", AlternativeJobWonRace: "alternativeJobWonRace", MainJobWonRace: "mainJobWonRace", MappingMissing: "mappingMissing", Broken: "broken", DnsAlpnH3JobWonWithoutRace: "dnsAlpnH3JobWonWithoutRace", DnsAlpnH3JobWonRace: "dnsAlpnH3JobWonRace", UnspecifiedReason: "unspecifiedReason"});
 inspectorBackend.registerEnum("Network.ServiceWorkerRouterSource", {Network: "network", Cache: "cache", FetchEvent: "fetch-event", RaceNetworkAndFetchHandler: "race-network-and-fetch-handler", RaceNetworkAndCache: "race-network-and-cache"});
-inspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Preload: "preload", SignedExchange: "SignedExchange", Preflight: "preflight", Other: "other"});
+inspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Preload: "preload", SignedExchange: "SignedExchange", Preflight: "preflight", FedCM: "FedCM", Other: "other"});
 inspectorBackend.registerEnum("Network.SetCookieBlockedReason", {SecureOnly: "SecureOnly", SameSiteStrict: "SameSiteStrict", SameSiteLax: "SameSiteLax", SameSiteUnspecifiedTreatedAsLax: "SameSiteUnspecifiedTreatedAsLax", SameSiteNoneInsecure: "SameSiteNoneInsecure", UserPreferences: "UserPreferences", ThirdPartyPhaseout: "ThirdPartyPhaseout", ThirdPartyBlockedInFirstPartySet: "ThirdPartyBlockedInFirstPartySet", SyntaxError: "SyntaxError", SchemeNotSupported: "SchemeNotSupported", OverwriteSecure: "OverwriteSecure", InvalidDomain: "InvalidDomain", InvalidPrefix: "InvalidPrefix", UnknownError: "UnknownError", SchemefulSameSiteStrict: "SchemefulSameSiteStrict", SchemefulSameSiteLax: "SchemefulSameSiteLax", SchemefulSameSiteUnspecifiedTreatedAsLax: "SchemefulSameSiteUnspecifiedTreatedAsLax", SamePartyFromCrossPartyContext: "SamePartyFromCrossPartyContext", SamePartyConflictsWithOtherAttributes: "SamePartyConflictsWithOtherAttributes", NameValuePairExceedsMaxSize: "NameValuePairExceedsMaxSize", DisallowedCharacter: "DisallowedCharacter", NoCookieContent: "NoCookieContent"});
 inspectorBackend.registerEnum("Network.CookieBlockedReason", {SecureOnly: "SecureOnly", NotOnPath: "NotOnPath", DomainMismatch: "DomainMismatch", SameSiteStrict: "SameSiteStrict", SameSiteLax: "SameSiteLax", SameSiteUnspecifiedTreatedAsLax: "SameSiteUnspecifiedTreatedAsLax", SameSiteNoneInsecure: "SameSiteNoneInsecure", UserPreferences: "UserPreferences", ThirdPartyPhaseout: "ThirdPartyPhaseout", ThirdPartyBlockedInFirstPartySet: "ThirdPartyBlockedInFirstPartySet", UnknownError: "UnknownError", SchemefulSameSiteStrict: "SchemefulSameSiteStrict", SchemefulSameSiteLax: "SchemefulSameSiteLax", SchemefulSameSiteUnspecifiedTreatedAsLax: "SchemefulSameSiteUnspecifiedTreatedAsLax", SamePartyFromCrossPartyContext: "SamePartyFromCrossPartyContext", NameValuePairExceedsMaxSize: "NameValuePairExceedsMaxSize", PortMismatch: "PortMismatch", SchemeMismatch: "SchemeMismatch", AnonymousContext: "AnonymousContext"});
 inspectorBackend.registerEnum("Network.CookieExemptionReason", {None: "None", UserSetting: "UserSetting", TPCDMetadata: "TPCDMetadata", TPCDDeprecationTrial: "TPCDDeprecationTrial", TopLevelTPCDDeprecationTrial: "TopLevelTPCDDeprecationTrial", TPCDHeuristics: "TPCDHeuristics", EnterprisePolicy: "EnterprisePolicy", StorageAccess: "StorageAccess", TopLevelStorageAccess: "TopLevelStorageAccess", Scheme: "Scheme", SameSiteNoneCookiesInSandbox: "SameSiteNoneCookiesInSandbox"});
@@ -870,7 +870,7 @@ inspectorBackend.registerCommand("Network.getResponseBodyForInterception", [{"na
 inspectorBackend.registerCommand("Network.takeResponseBodyForInterceptionAsStream", [{"name": "interceptionId", "type": "string", "optional": false, "description": "", "typeRef": "Network.InterceptionId"}], ["stream"], "Returns a handle to the stream representing the response body. Note that after this command, the intercepted request can't be continued as is -- you either need to cancel it or to provide the response body. The stream only supports sequential read, IO.read will fail if the position is specified.");
 inspectorBackend.registerCommand("Network.replayXHR", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of XHR to replay.", "typeRef": "Network.RequestId"}], [], "This method sends a new XMLHttpRequest which is identical to the original one. The following parameters should be identical: method, url, async, request body, extra headers, withCredentials attribute, user, password.");
 inspectorBackend.registerCommand("Network.searchInResponseBody", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of the network response to search.", "typeRef": "Network.RequestId"}, {"name": "query", "type": "string", "optional": false, "description": "String to search for.", "typeRef": null}, {"name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive.", "typeRef": null}, {"name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex.", "typeRef": null}], ["result"], "Searches for given string in response content.");
-inspectorBackend.registerCommand("Network.setBlockedURLs", [{"name": "urlPatterns", "type": "array", "optional": true, "description": "URL patterns to block. Patterns use the URLPattern constructor string syntax (https://urlpattern.spec.whatwg.org/) and must be absolute. Example: `*://*:*/*.css`.", "typeRef": "string"}, {"name": "urls", "type": "array", "optional": true, "description": "URL patterns to block. Wildcards ('*') are allowed.", "typeRef": "string"}], [], "Blocks URLs from loading.");
+inspectorBackend.registerCommand("Network.setBlockedURLs", [{"name": "urlPatterns", "type": "array", "optional": true, "description": "Patterns to match in the order in which they are given. These patterns also take precedence over any wildcard patterns defined in `urls`.", "typeRef": "Network.BlockPattern"}, {"name": "urls", "type": "array", "optional": true, "description": "URL patterns to block. Wildcards ('*') are allowed.", "typeRef": "string"}], [], "Blocks URLs from loading.");
 inspectorBackend.registerCommand("Network.setBypassServiceWorker", [{"name": "bypass", "type": "boolean", "optional": false, "description": "Bypass service worker and load from network.", "typeRef": null}], [], "Toggles ignoring of service worker for each request.");
 inspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false, "description": "Cache disabled state.", "typeRef": null}], [], "Toggles ignoring cache for each request. If `true`, cache will not be used.");
 inspectorBackend.registerCommand("Network.setCookie", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "url", "type": "string", "optional": true, "description": "The request-URI to associate with the setting of the cookie. This value can affect the default domain, path, source port, and source scheme values of the created cookie.", "typeRef": null}, {"name": "domain", "type": "string", "optional": true, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": true, "description": "Cookie path.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": true, "description": "True if cookie is secure.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": true, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "expires", "type": "number", "optional": true, "description": "Cookie expiration date, session cookie if not set", "typeRef": "Network.TimeSinceEpoch"}, {"name": "priority", "type": "string", "optional": true, "description": "Cookie Priority type.", "typeRef": "Network.CookiePriority"}, {"name": "sameParty", "type": "boolean", "optional": true, "description": "True if cookie is SameParty.", "typeRef": null}, {"name": "sourceScheme", "type": "string", "optional": true, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": true, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key. If not set, the cookie will be set as not partitioned.", "typeRef": "Network.CookiePartitionKey"}], ["success"], "Sets a cookie with the given cookie data; may overwrite equivalent cookies if they exist.");
@@ -912,6 +912,7 @@ inspectorBackend.registerType("Network.SignedExchangeHeader", [{"name": "request
 inspectorBackend.registerType("Network.SignedExchangeError", [{"name": "message", "type": "string", "optional": false, "description": "Error message.", "typeRef": null}, {"name": "signatureIndex", "type": "number", "optional": true, "description": "The index of the signature which caused the error.", "typeRef": null}, {"name": "errorField", "type": "string", "optional": true, "description": "The field which caused the error.", "typeRef": "Network.SignedExchangeErrorField"}]);
 inspectorBackend.registerType("Network.SignedExchangeInfo", [{"name": "outerResponse", "type": "object", "optional": false, "description": "The outer response of signed HTTP exchange which was received from network.", "typeRef": "Network.Response"}, {"name": "hasExtraInfo", "type": "boolean", "optional": false, "description": "Whether network response for the signed exchange was accompanied by extra headers.", "typeRef": null}, {"name": "header", "type": "object", "optional": true, "description": "Information about the signed exchange header.", "typeRef": "Network.SignedExchangeHeader"}, {"name": "securityDetails", "type": "object", "optional": true, "description": "Security details for the signed exchange header.", "typeRef": "Network.SecurityDetails"}, {"name": "errors", "type": "array", "optional": true, "description": "Errors occurred while handling the signed exchange.", "typeRef": "Network.SignedExchangeError"}]);
 inspectorBackend.registerType("Network.NetworkConditions", [{"name": "urlPattern", "type": "string", "optional": false, "description": "Only matching requests will be affected by these conditions. Patterns use the URLPattern constructor string syntax (https://urlpattern.spec.whatwg.org/) and must be absolute. If the pattern is empty, all requests are matched (including p2p connections).", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}, {"name": "packetLoss", "type": "number", "optional": true, "description": "WebRTC packet loss (percent, 0-100). 0 disables packet loss emulation, 100 drops all the packets.", "typeRef": null}, {"name": "packetQueueLength", "type": "number", "optional": true, "description": "WebRTC packet queue length (packet). 0 removes any queue length limitations.", "typeRef": null}, {"name": "packetReordering", "type": "boolean", "optional": true, "description": "WebRTC packetReordering feature.", "typeRef": null}]);
+inspectorBackend.registerType("Network.BlockPattern", [{"name": "urlPattern", "type": "string", "optional": false, "description": "URL pattern to match. Patterns use the URLPattern constructor string syntax (https://urlpattern.spec.whatwg.org/) and must be absolute. Example: `*://*:*/*.css`.", "typeRef": null}, {"name": "block", "type": "boolean", "optional": false, "description": "Whether or not to block the pattern. If false, a matching request will not be blocked even if it matches a later `BlockPattern`.", "typeRef": null}]);
 inspectorBackend.registerType("Network.DirectTCPSocketOptions", [{"name": "noDelay", "type": "boolean", "optional": false, "description": "TCP_NODELAY option", "typeRef": null}, {"name": "keepAliveDelay", "type": "number", "optional": true, "description": "Expected to be unsigned integer.", "typeRef": null}, {"name": "sendBufferSize", "type": "number", "optional": true, "description": "Expected to be unsigned integer.", "typeRef": null}, {"name": "receiveBufferSize", "type": "number", "optional": true, "description": "Expected to be unsigned integer.", "typeRef": null}, {"name": "dnsQueryType", "type": "string", "optional": true, "description": "", "typeRef": "Network.DirectSocketDnsQueryType"}]);
 inspectorBackend.registerType("Network.DirectUDPSocketOptions", [{"name": "remoteAddr", "type": "string", "optional": true, "description": "", "typeRef": null}, {"name": "remotePort", "type": "number", "optional": true, "description": "Unsigned int 16.", "typeRef": null}, {"name": "localAddr", "type": "string", "optional": true, "description": "", "typeRef": null}, {"name": "localPort", "type": "number", "optional": true, "description": "Unsigned int 16.", "typeRef": null}, {"name": "dnsQueryType", "type": "string", "optional": true, "description": "", "typeRef": "Network.DirectSocketDnsQueryType"}, {"name": "sendBufferSize", "type": "number", "optional": true, "description": "Expected to be unsigned integer.", "typeRef": null}, {"name": "receiveBufferSize", "type": "number", "optional": true, "description": "Expected to be unsigned integer.", "typeRef": null}]);
 inspectorBackend.registerType("Network.DirectUDPMessage", [{"name": "data", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "remoteAddr", "type": "string", "optional": true, "description": "Null for connected mode.", "typeRef": null}, {"name": "remotePort", "type": "number", "optional": true, "description": "Null for connected mode. Expected to be unsigned integer.", "typeRef": null}]);

package/front_end/generated/SupportedCSSProperties.js

@@ -4375,6 +4375,7 @@ export const generatedProperties = [
    "capitalize",
    "uppercase",
    "lowercase",
+   "full-width",
    "none",
    "math-auto"
   ],
@@ -6803,6 +6804,7 @@ export const generatedPropertyValues = {
    "capitalize",
    "uppercase",
    "lowercase",
+   "full-width",
    "none",
    "math-auto"
   ]

package/front_end/generated/protocol.ts

@@ -10466,6 +10466,7 @@ export namespace Network {
     Preload = 'preload',
     SignedExchange = 'SignedExchange',
     Preflight = 'preflight',
+    FedCM = 'FedCM',
     Other = 'other',
   }
 
@@ -11046,6 +11047,19 @@ export namespace Network {
     packetReordering?: boolean;
   }
 
+  export interface BlockPattern {
+    /**
+     * URL pattern to match. Patterns use the URLPattern constructor string syntax
+     * (https://urlpattern.spec.whatwg.org/) and must be absolute. Example: `*://*:*\/*.css`.
+     */
+    urlPattern: string;
+    /**
+     * Whether or not to block the pattern. If false, a matching request will not be blocked even if it matches a later
+     * `BlockPattern`.
+     */
+    block: boolean;
+  }
+
   export const enum DirectSocketDnsQueryType {
     Ipv4 = 'ipv4',
     Ipv6 = 'ipv6',
@@ -11607,10 +11621,10 @@ export namespace Network {
 
   export interface SetBlockedURLsRequest {
     /**
-     * URL patterns to block. Patterns use the URLPattern constructor string syntax
-     * (https://urlpattern.spec.whatwg.org/) and must be absolute. Example: `*://*:*\/*.css`.
+     * Patterns to match in the order in which they are given. These patterns
+     * also take precedence over any wildcard patterns defined in `urls`.
      */
-    urlPatterns?: string[];
+    urlPatterns?: BlockPattern[];
     /**
      * URL patterns to block. Wildcards ('*') are allowed.
      * @deprecated

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -0,0 +1,111 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Root from '../../core/root/root.js';
+
+let builtInAiInstance: BuiltInAi|undefined;
+let availability = '';
+
+const RESPONSE_SCHEMA = {
+  type: 'object',
+  properties: {
+    header: {type: 'string', maxLength: 60, description: 'Label for the console message which is being analyzed'},
+    // No hard `maxLength` for `explanation`. This would often result in responses which are cut off in the middle of a
+    // sentence. Instead provide a soft `maxLength` via the prompt.
+    explanation: {
+      type: 'string',
+      description: 'Actual explanation of the console message being analyzed',
+    },
+  },
+  required: ['header', 'explanation'],
+  additionalProperties: false,
+};
+
+export interface LanguageModel {
+  promptStreaming: (arg0: string, opts?: {
+    responseConstraint: Object,
+    signal?: AbortSignal,
+  }) => AsyncGenerator<string>;
+  clone: () => LanguageModel;
+  destroy: () => void;
+}
+
+export class BuiltInAi {
+  #consoleInsightsSession: LanguageModel;
+
+  static async isAvailable(): Promise<boolean> {
+    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.enabled) {
+      return false;
+    }
+    // @ts-expect-error
+    availability = await window.LanguageModel.availability({expectedOutputs: [{type: 'text', languages: ['en']}]});
+    return availability === 'available';
+  }
+
+  static cachedIsAvailable(): boolean {
+    return availability === 'available';
+  }
+
+  private constructor(consoleInsightsSession: LanguageModel) {
+    this.#consoleInsightsSession = consoleInsightsSession;
+  }
+
+  static async instance(): Promise<BuiltInAi|undefined> {
+    if (builtInAiInstance === undefined) {
+      if (!(await BuiltInAi.isAvailable())) {
+        return undefined;
+      }
+      // @ts-expect-error
+      const consoleInsightsSession = await window.LanguageModel.create({
+        initialPrompts: [{
+          role: 'system',
+          content: `
+You are an expert web developer. Your goal is to help a human web developer who
+is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
+console is showing a message which is either an error or a warning. Please help
+the user understand the problematic console message.
+
+Your instructions are as follows:
+  - Explain the reason why the error or warning is showing up.
+  - The explanation has a maximum length of 200 characters. Anything beyond this
+    length will be cut off. Make sure that your explanation is at most 200 characters long.
+  - Your explanation should not end in the middle of a sentence.
+  - Your explanation should consist of a single paragraph only. Do not include any
+    headings or code blocks. Only write a single paragraph of text.
+  - Your response should be concise and to the point. Avoid lengthy explanations
+    or unnecessary details.
+          `
+        }],
+        expectedInputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+        expectedOutputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+      }) as LanguageModel;
+      builtInAiInstance = new BuiltInAi(consoleInsightsSession);
+    }
+    return builtInAiInstance;
+  }
+
+  static removeInstance(): void {
+    builtInAiInstance = undefined;
+  }
+
+  async * getConsoleInsight(prompt: string, abortController: AbortController): AsyncGenerator<string> {
+    // Clone the session to start a fresh conversation for each answer. Otherwise
+    // previous dialog would pollute the context resulting in worse answers.
+    const session = await this.#consoleInsightsSession.clone();
+    const stream = session.promptStreaming(prompt, {
+      signal: abortController.signal,
+      responseConstraint: RESPONSE_SCHEMA,
+    });
+    for await (const chunk of stream) {
+      yield chunk;
+    }
+    session.destroy();
+  }
+}

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -8,8 +8,6 @@ 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 * as Snackbars from '../../ui/components/snackbars/snackbars.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
 
 import {
@@ -55,13 +53,6 @@ export interface ExternalPerformanceRequestParameters {
   data: ExternalPerformanceAIConversationData;
 }
 
-const UIStrings = {
-  /**
-   * @description Notification shown to the user whenever DevTools receives an external request.
-   */
-  externalRequestReceived: '`DevTools` received an external request',
-} as const;
-
 /*
 * Strings that don't need to be translated at this time.
 */
@@ -72,8 +63,6 @@ const UIStringsNotTranslate = {
   enableInSettings: 'For AI features to be available, you need to enable AI assistance in DevTools settings.',
 } as const;
 
-const str_ = i18n.i18n.registerUIStrings('models/ai_assistance/ConversationHandler.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
 function isAiAssistanceServerSideLoggingEnabled(): boolean {
@@ -124,13 +113,14 @@ async function inspectNetworkRequestByUrl(selector: string): Promise<SDK.Network
 
 let conversationHandlerInstance: ConversationHandler|undefined;
 
-export class ConversationHandler {
+export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #aiAssistanceEnabledSetting: Common.Settings.Setting<boolean>|undefined;
   #aidaClient: Host.AidaClient.AidaClient;
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
 
   private constructor(
       aidaClient: Host.AidaClient.AidaClient, aidaAvailability?: Host.AidaClient.AidaAccessPreconditions) {
+    super();
     this.#aidaClient = aidaClient;
     if (aidaAvailability) {
       this.#aidaAvailability = aidaAvailability;
@@ -186,7 +176,7 @@ export class ConversationHandler {
       ExternalPerformanceRequestParameters,
       ): Promise<AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse>> {
     try {
-      Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)});
+      this.dispatchEventToListeners(ConversationHandlerEvents.EXTERNAL_REQUEST_RECEIVED);
       const disabledReasons = await this.#getDisabledReasons();
       const aiAssistanceSetting = this.#aiAssistanceEnabledSetting?.getIfNotDisabled();
       if (!aiAssistanceSetting) {
@@ -196,7 +186,8 @@ export class ConversationHandler {
         return this.#generateErrorResponse(disabledReasons.join(' '));
       }
 
-      void VisualLogging.logFunctionCall(`start-conversation-${parameters.conversationType}`, 'external');
+      this.dispatchEventToListeners(
+          ConversationHandlerEvents.EXTERNAL_CONVERSATION_STARTED, parameters.conversationType);
       switch (parameters.conversationType) {
         case ConversationType.STYLING: {
           return await this.#handleExternalStylingConversation(parameters.prompt, parameters.selector);
@@ -356,3 +347,13 @@ export class ConversationHandler {
     return agent;
   }
 }
+
+export const enum ConversationHandlerEvents {
+  EXTERNAL_REQUEST_RECEIVED = 'ExternalRequestReceived',
+  EXTERNAL_CONVERSATION_STARTED = 'ExternalConversationStarted',
+}
+
+export interface EventTypes {
+  [ConversationHandlerEvents.EXTERNAL_REQUEST_RECEIVED]: void;
+  [ConversationHandlerEvents.EXTERNAL_CONVERSATION_STARTED]: ConversationType;
+}

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -2,27 +2,56 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export * from './debug.js';
-export * from './AgentProject.js';
-export * from './agents/AiAgent.js';
-export * from './agents/FileAgent.js';
-export * from './agents/NetworkAgent.js';
-export * from './agents/PerformanceAgent.js';
-export * from './agents/PerformanceAnnotationsAgent.js';
-export * from './agents/StylingAgent.js';
-export * from './agents/PatchAgent.js';
-export * from './AiHistoryStorage.js';
-export * from './AiUtils.js';
-export * from './ChangeManager.js';
-export * from './EvaluateAction.js';
-export * from './ExtensionScope.js';
-export * from './data_formatters/FileFormatter.js';
-export * from './data_formatters/NetworkRequestFormatter.js';
-export * from './data_formatters/PerformanceInsightFormatter.js';
-export * from './data_formatters/PerformanceTraceFormatter.js';
-export * from './data_formatters/UnitFormatters.js';
-export * from './ConversationHandler.js';
-export * from './injected.js';
-export * from './performance/AICallTree.js';
-export * from './performance/AIContext.js';
-export * from './performance/AIQueries.js';
+import * as AgentProject from './AgentProject.js';
+import * as AiAgent from './agents/AiAgent.js';
+import * as FileAgent from './agents/FileAgent.js';
+import * as NetworkAgent from './agents/NetworkAgent.js';
+import * as PatchAgent from './agents/PatchAgent.js';
+import * as PerformanceAgent from './agents/PerformanceAgent.js';
+import * as PerformanceAnnotationsAgent from './agents/PerformanceAnnotationsAgent.js';
+import * as StylingAgent from './agents/StylingAgent.js';
+import * as AiHistoryStorage from './AiHistoryStorage.js';
+import * as AiUtils from './AiUtils.js';
+import * as BuiltInAi from './BuiltInAi.js';
+import * as ChangeManager from './ChangeManager.js';
+import * as ConversationHandler from './ConversationHandler.js';
+import * as FileFormatter from './data_formatters/FileFormatter.js';
+import * as NetworkRequestFormatter from './data_formatters/NetworkRequestFormatter.js';
+import * as PerformanceInsightFormatter from './data_formatters/PerformanceInsightFormatter.js';
+import * as PerformanceTraceFormatter from './data_formatters/PerformanceTraceFormatter.js';
+import * as UnitFormatters from './data_formatters/UnitFormatters.js';
+import * as Debug from './debug.js';
+import * as EvaluateAction from './EvaluateAction.js';
+import * as ExtensionScope from './ExtensionScope.js';
+import * as Injected from './injected.js';
+import * as AICallTree from './performance/AICallTree.js';
+import * as AIContext from './performance/AIContext.js';
+import * as AIQueries from './performance/AIQueries.js';
+
+export {
+  AgentProject,
+  AiAgent,
+  AICallTree,
+  AIContext,
+  AiHistoryStorage,
+  AIQueries,
+  AiUtils,
+  BuiltInAi,
+  ChangeManager,
+  ConversationHandler,
+  Debug,
+  EvaluateAction,
+  ExtensionScope,
+  FileAgent,
+  FileFormatter,
+  Injected,
+  NetworkAgent,
+  NetworkRequestFormatter,
+  PatchAgent,
+  PerformanceAgent,
+  PerformanceAnnotationsAgent,
+  PerformanceInsightFormatter,
+  PerformanceTraceFormatter,
+  StylingAgent,
+  UnitFormatters,
+};

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

@@ -346,6 +346,51 @@ Layout shifts in this cluster:
 - https://web.dev/articles/optimize-cls
 === end content
 
+Title: PerformanceInsightFormatter CLS includes iframe root causes
+Content:
+## Insight Title: Layout shift culprits
+
+## Insight Summary:
+Cumulative Layout Shifts (CLS) is a measure of the largest burst of layout shifts for every unexpected layout shift that occurs during the lifecycle of a page. This is a Core Web Vital and the thresholds for categorizing a score are:
+- Good: 0.1 or less
+- Needs improvement: more than 0.1 and less than or equal to 0.25
+- Bad: over 0.25
+
+## Detailed analysis:
+The worst layout shift cluster was the cluster that started at 2,712 ms and ended at 3,913 ms, with a duration of 1,200 ms.
+The score for this cluster is 0.0832.
+
+Layout shifts in this cluster:
+### Layout shift 1:
+- Impacted elements:
+  - DIV class='max-w-6xl mx-auto bg-white shadow-lg min-h-screen relative z-[99999]'
+  - BUTTON class='text-gray-700 hover:text-red-600 w-6 h-6 flex items-center justify-center'
+  - #text
+
+- Start time: 2,712 ms
+- Score: 0.0832
+- Potential root causes:
+  - An iframe (id: D12A05FC36C4D90C7826DDD3E9D7035B, url: https://astro-news-1026410574114.us-central1.run.app/ads/fireplace-ad-top.html was injected into the page)
+- An iframe (id: 8CDF5BC2F8AD1DCF04A38398E95671FC, url: https://astro-news-1026410574114.us-central1.run.app/ads/fireplace-ad-right.html was injected into the page)
+- An iframe (id: 022F4D6C4B361B315A1A7C18B98AA9C4, url: https://astro-news-1026410574114.us-central1.run.app/ads/fireplace-ad-left.html was injected into the page)
+### Layout shift 2:
+- Impacted elements:
+  - #text
+  - A class='button'
+
+- Start time: 2,913 ms
+- Score: 0.0000
+- Potential root causes:
+  - A font that was loaded over the network: https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2 (eventKey: s-11464, ts: 153867214727).
+
+## Estimated savings: none
+
+## External resources:
+- https://developer.chrome.com/docs/performance/insights/cls-culprit
+- https://web.dev/articles/cls
+- https://web.dev/articles/optimize-cls
+=== end content
+
 Title: PerformanceInsightFormatter CLS serializes correctly when there are no layout shifts
 Content:
 ## Insight Title: Layout shift culprits
@@ -383,50 +428,110 @@ The score for this cluster is 0.0140.
 
 Layout shifts in this cluster:
 ### Layout shift 1:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 60 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 2:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 76 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 3:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 93 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 4:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 110 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 5:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 126 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 6:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 143 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 7:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 160 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 8:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 176 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 9:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 193 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 10:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 210 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 11:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 226 ms
 - Score: 0.0012
 - No potential root causes identified
 ### Layout shift 12:
+- Impacted elements:
+  - P
+  - P
+  - P
+
 - Start time: 243 ms
 - Score: 0.0012
 - Potential root causes:

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

@@ -280,7 +280,12 @@ export class PerformanceInsightFormatter {
                                                        '- No potential root causes identified';
 
     const startTime = Trace.Helpers.Timing.microToMilli(Trace.Types.Timing.Micro(shift.ts - baseTime));
-    return `### Layout shift ${index + 1}:
+
+    const impactedNodeNames =
+        shift.rawSourceEvent.args.data?.impacted_nodes?.map(n => n.debug_name).filter(name => name !== undefined) ?? [];
+    const impactedNodeText =
+        impactedNodeNames.length ? `\n- Impacted elements:\n  - ${impactedNodeNames.join('\n  - ')}\n` : '';
+    return `### Layout shift ${index + 1}:${impactedNodeText}
 - Start time: ${millis(startTime)}
 - Score: ${shift.args.data?.weighted_score_delta.toFixed(4)}
 ${rootCauseText}`;

package/front_end/models/extensions/ExtensionView.ts

@@ -76,6 +76,7 @@ export class ExtensionView extends UI.Widget.Widget {
   }
 
   override willHide(): void {
+    super.willHide();
     if (typeof this.#frameIndex === 'number') {
       this.#server.notifyViewHidden(this.#id);
     }
@@ -104,10 +105,12 @@ export class ExtensionNotifierView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.server.notifyViewShown(this.id);
   }
 
   override willHide(): void {
+    super.willHide();
     this.server.notifyViewHidden(this.id);
   }
 }