chrome-devtools-frontend 1.0.1581449 → 1.0.1582745

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

@@ -9,7 +9,9 @@ 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 Logs from '../../logs/logs.js';
+import type * as Trace from '../../trace/trace.js';
 import * as Workspace from '../../workspace/workspace.js';
+import {AgentFocus} from '../performance/AIContext.js';
 
 import {
   type AgentOptions,
@@ -30,7 +32,7 @@ You aim to help developers of all levels, prioritizing teaching web concepts as
 
 # Considerations
 * Determine what the question the domain of the question is - styling, network, sources, performance or other part of DevTools.
-* When possible proactively try to gather additional data and select context that they user may find relevant to the question they are asking utilizing the function calls available to you.
+* Proactively try to gather additional data. If a select specific data can be selected, select one.
 * Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
 * Always explore multiple possible explanations for the observed behavior before settling on a conclusion.
 * When presenting solutions, clearly distinguish between the primary cause and contributing factors.
@@ -71,11 +73,19 @@ export class ContextSelectionAgent extends AiAgent<never> {
     };
   }
 
-  constructor(opts: AgentOptions) {
+  readonly #performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>;
+  readonly #onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
+
+  constructor(opts: AgentOptions&{
+    performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>,
+    onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>,
+  }) {
     super(opts);
+    this.#performanceRecordAndReload = opts.performanceRecordAndReload;
+    this.#onInspectElement = opts.onInspectElement;
 
     this.declareFunction<Record<string, never>>('listNetworkRequests', {
-      description: `Gives a list of network requests including URL, status code, and duration in ms`,
+      description: `Gives a list of network requests including URL, status code, and duration in ms.`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -106,6 +116,12 @@ export class ContextSelectionAgent extends AiAgent<never> {
           });
         }
 
+        if (requests.length === 0) {
+          return {
+            error: 'No requests recorded by DevTools',
+          };
+        }
+
         return {
           result: requests,
         };
@@ -113,7 +129,8 @@ export class ContextSelectionAgent extends AiAgent<never> {
     });
 
     this.declareFunction<{url: string}>('selectNetworkRequest', {
-      description: `From the list of selected request select one to debug`,
+      description:
+          `Selects a specific network request to further provide information about. Use this when asked about network requests issues.`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -181,7 +198,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
     });
 
     this.declareFunction<{name: string}>('selectSourceFile', {
-      description: `Returns a list of all files in the project.`,
+      description: `Selects a source file. Use this when asked about files on the page.`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -190,14 +207,14 @@ export class ContextSelectionAgent extends AiAgent<never> {
         properties: {
           name: {
             type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The name of the file',
+            description: 'The name of the file you want to select.',
             nullable: false,
           },
         },
       },
       displayInfoFromArgs: args => {
         return {
-          title: lockedString('Getting source file'),
+          title: lockedString('Getting source file…'),
           action: `selectSourceFile(${args.name})`,
         };
       },
@@ -213,6 +230,67 @@ export class ContextSelectionAgent extends AiAgent<never> {
         return {error: 'Unable to find file.'};
       },
     });
+
+    this.declareFunction('performanceRecordAndReload', {
+      description: 'Records a new performance trace, to help debug performance issue.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: [],
+        properties: {},
+      },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Recording a performance trace…',
+          action: 'performanceRecordAndReload()',
+        };
+      },
+      handler: async () => {
+        if (!this.#performanceRecordAndReload) {
+          return {
+            error: 'Performance recording is not available.',
+          };
+        }
+        const result = await this.#performanceRecordAndReload();
+
+        return {
+          context: AgentFocus.fromParsedTrace(result),
+        };
+      }
+    });
+
+    this.declareFunction<Record<string, never>>('inspectDom', {
+      description:
+          `Prompts user to select a DOM element from the page. Use this when you don't know which element is selected.`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: [],
+        properties: {},
+      },
+      displayInfoFromArgs: () => {
+        return {
+          title: lockedString('Please select an element on the page…'),
+          action: 'selectElement()',
+        };
+      },
+      handler: async () => {
+        if (!this.#onInspectElement) {
+          return {error: 'The inspect element action is not available.'};
+        }
+        const node = await this.#onInspectElement();
+        if (node) {
+          return {
+            context: node,
+          };
+        }
+        return {
+          error: 'Unable to select element.',
+        };
+      },
+    });
   }
 
   #getUISourceCodes = (): Iterable<Workspace.UISourceCode.UISourceCode> => {

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

@@ -80,10 +80,6 @@ const UIStringsNotTranslate = {
    * @description Title text for request timing details.
    */
   timing: 'Timing',
-  /**
-   * @description Prefix text for response status.
-   */
-  responseStatus: 'Response Status',
   /**
    * @description Title text for request initiator chain.
    */
@@ -178,8 +174,8 @@ async function createContextDetailsForNetworkAgent(
 
   const responseContextDetail: ContextDetail = {
     title: lockedString(UIStringsNotTranslate.response),
-    text: lockedString(UIStringsNotTranslate.responseStatus) + ': ' + request.statusCode + ' ' + request.statusText +
-        `\n\n${formatter.formatResponseHeaders()}` + responseBodyString,
+    text: formatter.formatResponseHeaders() + responseBodyString +
+        `\n\n${formatter.formatStatus()}${formatter.formatFailureReasons()}`,
   };
   const timingContextDetail: ContextDetail = {
     title: lockedString(UIStringsNotTranslate.timing),

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Annotations from '../../annotations/annotations.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
@@ -75,6 +76,51 @@ export class NetworkRequestFormatter {
     return '<redacted cross-origin initiator URL>';
   }
 
+  static formatStatus(status: {
+    statusCode: number,
+    statusText: string,
+    failed: boolean,
+    canceled: boolean,
+    preserved: boolean,
+    finished: boolean,
+  }): string {
+    let responseStatus = '';
+    if (status.statusCode) {
+      responseStatus = `Response status: ${status.statusCode} ${status.statusText}\n`;
+    }
+    const flags = [];
+    flags.push(status.finished ? 'finished' : 'pending');
+    if (status.failed) {
+      flags.push('failed');
+    }
+    if (status.canceled) {
+      flags.push('canceled');
+    }
+    if (status.preserved) {
+      flags.push('preserved');
+    }
+    const requestStatus = flags.length > 0 ? `Network request status: ${flags.join(', ')}\n` : '';
+    return `${responseStatus}${requestStatus}`;
+  }
+
+  static formatFailureReasons(reasons: {
+    blockedReason?: Protocol.Network.BlockedReason,
+    corsErrorStatus?: Protocol.Network.CorsErrorStatus,
+    localizedFailDescription?: string|null,
+  }): string {
+    const lines = [];
+    if (reasons.blockedReason) {
+      lines.push(`Blocked reason: ${reasons.blockedReason}`);
+    }
+    if (reasons.corsErrorStatus) {
+      lines.push(`CORS error: ${reasons.corsErrorStatus.corsError} ${reasons.corsErrorStatus.failedParameter}`);
+    }
+    if (reasons.localizedFailDescription) {
+      lines.push(`Fail description: ${reasons.localizedFailDescription}`);
+    }
+    return lines.length > 0 ? `${lines.join('\n')}\n` : '';
+  }
+
   constructor(
       request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator) {
     this.#request = request;
@@ -111,13 +157,31 @@ ${this.formatRequestHeaders()}
 
 ${this.formatResponseHeaders()}${responseBody}
 
-Response status: ${this.#request.statusCode} ${this.#request.statusText}
-
+${this.formatStatus()}${this.formatFailureReasons()}
 Request timing:\n${this.formatNetworkRequestTiming()}
 
 Request initiator chain:\n${this.formatRequestInitiatorChain()}`;
   }
 
+  formatStatus(): string {
+    return NetworkRequestFormatter.formatStatus({
+      statusCode: this.#request.statusCode,
+      statusText: this.#request.statusText,
+      failed: this.#request.failed,
+      canceled: this.#request.canceled,
+      preserved: this.#request.preserved,
+      finished: this.#request.finished,
+    });
+  }
+
+  formatFailureReasons(): string {
+    return NetworkRequestFormatter.formatFailureReasons({
+      blockedReason: this.#request.blockedReason(),
+      corsErrorStatus: this.#request.corsErrorStatus(),
+      localizedFailDescription: this.#request.localizedFailDescription,
+    });
+  }
+
   /**
    * Note: nothing here should include information from origins other than
    * the request's origin.

package/front_end/models/computed_style/ComputedStyleModel.ts

@@ -137,6 +137,32 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
                                                            null as ComputedStyle | null;
     }
   }
+
+  private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
+    const node = this.node;
+    if (!node || !this.cssModel()) {
+      return null;
+    }
+
+    const cssModel = this.cssModel();
+    if (!cssModel) {
+      return null;
+    }
+
+    const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
+    if (!matchedStyles) {
+      return null;
+    }
+    return matchedStyles.node() === this.node ? matchedStyles : null;
+  }
+
+  async fetchAllComputedStyleInfo(): Promise<{
+    computedStyle: ComputedStyle | null,
+    matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
+  }> {
+    const [computedStyle, matchedStyles] = await Promise.all([this.fetchComputedStyle(), this.fetchMatchedCascade()]);
+    return {computedStyle, matchedStyles};
+  }
 }
 
 export const enum Events {

package/front_end/models/greendev/Prototypes.ts

@@ -9,8 +9,6 @@ let instance: Prototypes|null = null;
 
 export interface GreenDevSettings {
   inDevToolsFloaty: Common.Settings.Setting<boolean>;
-  inlineWidgets: Common.Settings.Setting<boolean>;
-  artifactViewer: Common.Settings.Setting<boolean>;
   aiAnnotations: Common.Settings.Setting<boolean>;
   copyToGemini: Common.Settings.Setting<boolean>;
 }
@@ -41,21 +39,14 @@ export class Prototypes {
     const inDevToolsFloaty =
         settings.createSetting('greendev-in-devtools-floaty-enabled', false, Common.Settings.SettingStorageType.LOCAL);
 
-    const inlineWidgets =
-        settings.createSetting('greendev-inline-widgets-enabled', false, Common.Settings.SettingStorageType.LOCAL);
-
     const aiAnnotations = settings.createSetting(
         'greendev-ai-annotations-enabled',
         false,
         Common.Settings.SettingStorageType.LOCAL,
     );
-
-    const artifactViewer =
-        settings.createSetting('greendev-artifact-viewer-enabled', false, Common.Settings.SettingStorageType.LOCAL);
-
     const copyToGemini =
         settings.createSetting('greendev-copy-to-gemini-enabled', false, Common.Settings.SettingStorageType.LOCAL);
 
-    return {inDevToolsFloaty, inlineWidgets, aiAnnotations, artifactViewer, copyToGemini};
+    return {inDevToolsFloaty, aiAnnotations, copyToGemini};
   }
 }

package/front_end/models/issues_manager/ConnectionAllowlistIssue.ts

@@ -0,0 +1,75 @@
+// 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 SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import {
+  type LazyMarkdownIssueDescription,
+  type MarkdownIssueDescription,
+  resolveLazyDescription,
+} from './MarkdownIssueDescription.js';
+
+const UIStrings = {
+  /**
+   *@description Title for Connection-Allowlist specification url
+   */
+  connectionAllowlistHeader: 'Connection-Allowlist specification',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('models/issues_manager/ConnectionAllowlistIssue.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export class ConnectionAllowlistIssue extends Issue<Protocol.Audits.ConnectionAllowlistIssueDetails> {
+  constructor(
+      issueDetails: Protocol.Audits.ConnectionAllowlistIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
+    super(
+        {
+          code: `${Protocol.Audits.InspectorIssueCode.ConnectionAllowlistIssue}::${issueDetails.error}`,
+          umaCode: `${Protocol.Audits.InspectorIssueCode.ConnectionAllowlistIssue}::${issueDetails.error}`,
+        },
+        issueDetails, issuesModel);
+  }
+
+  override primaryKey(): string {
+    return JSON.stringify(this.details());
+  }
+
+  override getDescription(): MarkdownIssueDescription|null {
+    const description: LazyMarkdownIssueDescription = {
+      file: `connectionAllowlist${this.details().error}.md`,
+      links: [
+        {
+          link: 'https://wicg.github.io/private-network-access/#connection-allowlist',
+          linkTitle: i18nLazyString(UIStrings.connectionAllowlistHeader),
+        },
+      ],
+    };
+    return resolveLazyDescription(description);
+  }
+
+  override getCategory(): IssueCategory {
+    return IssueCategory.OTHER;
+  }
+
+  override getKind(): IssueKind {
+    return IssueKind.PAGE_ERROR;
+  }
+
+  override requests(): Iterable<Protocol.Audits.AffectedRequest> {
+    return this.details().request ? [this.details().request] : [];
+  }
+
+  static fromInspectorIssue(
+      issuesModel: SDK.IssuesModel.IssuesModel|null,
+      inspectorIssue: Protocol.Audits.InspectorIssue): ConnectionAllowlistIssue[] {
+    const details = inspectorIssue.details.connectionAllowlistIssueDetails;
+    if (!details) {
+      console.warn('Connection-Allowlist issue without details received.');
+      return [];
+    }
+    return [new ConnectionAllowlistIssue(details, issuesModel)];
+  }
+}

package/front_end/models/issues_manager/CookieIssue.ts

@@ -8,7 +8,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as ThirdPartyWeb from '../../third_party/third-party-web/third-party-web.js';
 
 import {Issue, IssueCategory, IssueKind} from './Issue.js';
 import {
@@ -55,15 +54,6 @@ export const enum CookieStatus {
   ALLOWED_BY_HEURISTICS = 3,
 }
 
-export interface CookieReportInfo {
-  name: string;
-  domain: string;
-  type?: string;
-  platform?: string;
-  status: CookieStatus;
-  insight?: Protocol.Audits.CookieIssueInsight;
-}
-
 export class CookieIssue extends Issue<Protocol.Audits.CookieIssueDetails> {
   cookieId(): string {
     const details = this.details();
@@ -246,24 +236,6 @@ export class CookieIssue extends Issue<Protocol.Audits.CookieIssueDetails> {
     return IssueKind.BREAKING_CHANGE;
   }
 
-  makeCookieReportEntry(): CookieReportInfo|undefined {
-    const status = CookieIssue.getCookieStatus(this.details());
-    const details = this.details();
-    if (details.cookie && details.cookieUrl && status !== undefined) {
-      const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(details.cookieUrl);
-      return {
-        name: details.cookie.name,
-        domain: details.cookie.domain,
-        type: entity?.category,
-        platform: entity?.name,
-        status,
-        insight: this.details().insight,
-      };
-    }
-
-    return;
-  }
-
   static getCookieStatus(cookieIssueDetails: Protocol.Audits.CookieIssueDetails): CookieStatus|undefined {
     if (cookieIssueDetails.cookieExclusionReasons.includes(
             Protocol.Audits.CookieExclusionReason.ExcludeThirdPartyPhaseout)) {

package/front_end/models/issues_manager/FederatedAuthRequestIssue.ts

@@ -109,36 +109,6 @@ const issueDescriptions = new Map<Protocol.Audits.FederatedAuthRequestIssueReaso
       }],
     },
   ],
-  [
-    Protocol.Audits.FederatedAuthRequestIssueReason.ClientMetadataHttpNotFound,
-    {
-      file: 'federatedAuthRequestClientMetadataHttpNotFound.md',
-      links: [{
-        link: 'https://fedidcg.github.io/FedCM/',
-        linkTitle: i18nLazyString(UIStrings.fedCm),
-      }],
-    },
-  ],
-  [
-    Protocol.Audits.FederatedAuthRequestIssueReason.ClientMetadataNoResponse,
-    {
-      file: 'federatedAuthRequestClientMetadataNoResponse.md',
-      links: [{
-        link: 'https://fedidcg.github.io/FedCM/',
-        linkTitle: i18nLazyString(UIStrings.fedCm),
-      }],
-    },
-  ],
-  [
-    Protocol.Audits.FederatedAuthRequestIssueReason.ClientMetadataInvalidResponse,
-    {
-      file: 'federatedAuthRequestClientMetadataInvalidResponse.md',
-      links: [{
-        link: 'https://fedidcg.github.io/FedCM/',
-        linkTitle: i18nLazyString(UIStrings.fedCm),
-      }],
-    },
-  ],
   [
     Protocol.Audits.FederatedAuthRequestIssueReason.ErrorFetchingSignin,
     {

package/front_end/models/issues_manager/IssuesManager.ts

@@ -9,6 +9,7 @@ import * as Protocol from '../../generated/protocol.js';
 import {AttributionReportingIssue} from './AttributionReportingIssue.js';
 import {BounceTrackingIssue} from './BounceTrackingIssue.js';
 import {ClientHintIssue} from './ClientHintIssue.js';
+import {ConnectionAllowlistIssue} from './ConnectionAllowlistIssue.js';
 import {ContentSecurityPolicyIssue} from './ContentSecurityPolicyIssue.js';
 import {CookieDeprecationMetadataIssue} from './CookieDeprecationMetadataIssue.js';
 import {CookieIssue} from './CookieIssue.js';
@@ -144,6 +145,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue,
     UnencodedDigestIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.ConnectionAllowlistIssue,
+    ConnectionAllowlistIssue.fromInspectorIssue,
+  ],
   [
     Protocol.Audits.InspectorIssueCode.PermissionElementIssue,
     PermissionElementIssue.fromInspectorIssue,

package/front_end/models/issues_manager/descriptions/connectionAllowlistInvalidAllowlistItemType.md

@@ -0,0 +1,12 @@
+# An item in the `Connection-Allowlist` header is invalid.
+
+Each item in the `Connection-Allowlist`'s header's [Inner List](sfInnerList)
+must be a [String](sfString) representing a [URL Pattern](urlPatternSpec), or
+the [Token](sfToken) `response-origin`.
+
+For example, the following header allows connections to (only)
+`https://example.com/` and the origin from which the response was delivered:
+
+```
+Connection-Allowlist: ("https://example.com" response-origin)
+```

package/front_end/models/issues_manager/descriptions/connectionAllowlistInvalidHeader.md

@@ -0,0 +1,12 @@
+# The `Connection-Allowlist` header is not formatted as a Structured Field List.
+
+Responses' `Connection-Allowlist` header should be formatted as a [List](sfList)
+containing a single [Inner List](sfInnerList) that declares the allowed set of
+[URL Patterns](urlPatternSpec) for a given context.
+
+For example, the following header allows connections to (only)
+`https://example.com/`:
+
+```
+Connection-Allowlist: ("https://example.com")
+```

package/front_end/models/issues_manager/descriptions/connectionAllowlistInvalidUrlPattern.md

@@ -0,0 +1,8 @@
+# An item in the `Connection-Allowlist` header is not a valid URL pattern.
+
+Each item in the `Connection-Allowlist` header must be a valid
+[URL Pattern](urlPatternSpec) that can be used to match against the request's
+origin.
+
+Note that our current implementation does not allow regular expressions to be
+used as part of the pattern.

package/front_end/models/issues_manager/descriptions/connectionAllowlistItemNotInnerList.md

@@ -0,0 +1,12 @@
+# An item in the `Connection-Allowlist` header is not an Inner List.
+
+Responses' `Connection-Allowlist` header should be formatted as a [List](sfList)
+containing a single [Inner List](sfInnerList) that declares the allowed set of
+[URL Patterns](urlPatternSpec) for a given context.
+
+For example, the following header allows connections to (only)
+`https://example.com/`:
+
+```
+Connection-Allowlist: ("https://example.com")
+```

package/front_end/models/issues_manager/descriptions/connectionAllowlistMoreThanOneList.md

@@ -0,0 +1,7 @@
+# `Connection-Allowlist` has multiple items.
+
+Responses' `Connection-Allowlist` header should be formatted as a [List](sfList)
+containing a single [Inner List](sfInnerList) that declares the allowed set of
+[URL Patterns](urlPatternSpec) for a given context. This response was a
+[List](sfList) containing more than one item: all but the first have been
+ignored.

package/front_end/models/issues_manager/descriptions/connectionAllowlistReportingEndpointNotToken.md

@@ -0,0 +1,10 @@
+# The `report-to` parameter in the `Connection-Allowlist` header is not a token.
+
+If provided, the `report-to` parameter must be a [Token](sfToken)
+naming a reporting endpoint.
+
+For example:
+
+```
+Connection-Allowlist: ("https://example.com");report-to=endpoint
+```

package/front_end/models/issues_manager/issues_manager.ts

@@ -5,6 +5,7 @@
 import * as AttributionReportingIssue from './AttributionReportingIssue.js';
 import * as CheckFormsIssuesTrigger from './CheckFormsIssuesTrigger.js';
 import * as ClientHintIssue from './ClientHintIssue.js';
+import * as ConnectionAllowlistIssue from './ConnectionAllowlistIssue.js';
 import * as ContentSecurityPolicyIssue from './ContentSecurityPolicyIssue.js';
 import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CookieDeprecationMetadataIssue from './CookieDeprecationMetadataIssue.js';
@@ -39,6 +40,7 @@ export {
   AttributionReportingIssue,
   CheckFormsIssuesTrigger,
   ClientHintIssue,
+  ConnectionAllowlistIssue,
   ContentSecurityPolicyIssue,
   ContrastCheckTrigger,
   CookieDeprecationMetadataIssue,