chrome-devtools-frontend 1.0.1578729 → 1.0.1581449

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

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as 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 * as Workspace from '../../workspace/workspace.js';
 
 import {
   type AgentOptions,
@@ -72,7 +75,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
     super(opts);
 
     this.declareFunction<Record<string, never>>('listNetworkRequests', {
-      description: `Gives a list of network requests`,
+      description: `Gives a list of network requests including URL, status code, and duration in ms`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -81,16 +84,30 @@ export class ContextSelectionAgent extends AiAgent<never> {
         properties: {},
       },
       displayInfoFromArgs: () => {
-        return {title: lockedString('Listing network requests…')};
+        return {
+          title: lockedString('Listing network requests…'),
+          action: 'listNetworkRequest()',
+        };
       },
       handler: async () => {
-        const requestURls = [];
+        const requests = [];
+        const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+        const inspectedURL = target?.inspectedURL();
+        const mainSecurityOrigin = inspectedURL ? new Common.ParsedURL.ParsedURL(inspectedURL).securityOrigin() : null;
+
         for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
-          requestURls.push(request.url());
+          if (mainSecurityOrigin && request.securityOrigin() !== mainSecurityOrigin) {
+            continue;
+          }
+          requests.push({
+            url: request.url(),
+            statusCode: request.statusCode,
+            duration: request.duration,
+          });
         }
 
         return {
-          result: requestURls,
+          result: requests,
         };
       },
     });
@@ -111,7 +128,10 @@ export class ContextSelectionAgent extends AiAgent<never> {
         },
       },
       displayInfoFromArgs: args => {
-        return {title: lockedString('Getting network request…'), action: `selectNetworkRequest(${args.url})`};
+        return {
+          title: lockedString('Getting network request…'),
+          action: `selectNetworkRequest(${args.url})`,
+        };
       },
       handler: async ({url}) => {
         // TODO: Switch to using IDs to make is easier to link to as well.
@@ -132,8 +152,92 @@ export class ContextSelectionAgent extends AiAgent<never> {
         };
       },
     });
+
+    this.declareFunction<Record<string, never>>('listSourceFiles', {
+      description: `Returns a list of all files in the project.`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: [],
+        properties: {},
+      },
+      displayInfoFromArgs: () => {
+        return {
+          title: lockedString('Listing source requests…'),
+          action: 'listSourceFile()',
+        };
+      },
+      handler: async () => {
+        const files = [];
+        for (const file of this.#getUISourceCodes()) {
+          files.push(file.fullDisplayName());
+        }
+
+        return {
+          result: files,
+        };
+      },
+    });
+
+    this.declareFunction<{name: string}>('selectSourceFile', {
+      description: `Returns a list of all files in the project.`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: ['name'],
+        properties: {
+          name: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The name of the file',
+            nullable: false,
+          },
+        },
+      },
+      displayInfoFromArgs: args => {
+        return {
+          title: lockedString('Getting source file'),
+          action: `selectSourceFile(${args.name})`,
+        };
+      },
+      handler: async params => {
+        for (const file of this.#getUISourceCodes()) {
+          if (file.fullDisplayName() === params.name) {
+            return {
+              context: file,
+            };
+          }
+        }
+
+        return {error: 'Unable to find file.'};
+      },
+    });
   }
 
+  #getUISourceCodes = (): Iterable<Workspace.UISourceCode.UISourceCode> => {
+    const workspace = Workspace.Workspace.WorkspaceImpl.instance();
+    const projects = workspace.projects().filter(project => {
+      switch (project.type()) {
+        case Workspace.Workspace.projectTypes.Network:
+        case Workspace.Workspace.projectTypes.FileSystem:
+        case Workspace.Workspace.projectTypes.ConnectableFileSystem:
+          return true;
+
+        default:
+          return false;
+      }
+    });
+    const uiSourceCodes = [];
+    for (const project of projects) {
+      for (const uiSourceCode of project.uiSourceCodes()) {
+        uiSourceCodes.push(uiSourceCode);
+      }
+    }
+
+    return uiSourceCodes;
+  };
+
   async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {
   }
 

package/front_end/models/computed_style/computed_style.ts

@@ -0,0 +1,9 @@
+// Copyright 2026 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 ComputedStyleModel from './ComputedStyleModel.js';
+
+export {
+  ComputedStyleModel,
+};

package/front_end/models/issues_manager/CorsIssue.ts

@@ -14,10 +14,6 @@ const UIStrings = {
    * @description Label for the link for CORS Local Network Access issues
    */
   corsLocalNetworkAccess: 'Local Network Access',
-  /**
-   * @description Label for the link for CORS private network issues
-   */
-  corsPrivateNetworkAccess: 'Private Network Access',
   /**
    * @description Label for the link for CORS network issues
    */
@@ -27,7 +23,7 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/CorsIssue.ts', U
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const enum IssueCode {
-  INSECURE_PRIVATE_NETWORK = 'CorsIssue::InsecurePrivateNetwork',
+  INSECURE_LOCAL_NETWORK = 'CorsIssue::InsecureLocalNetwork',
   INVALID_HEADER_VALUES = 'CorsIssue::InvalidHeaders',
   WILDCARD_ORIGN_NOT_ALLOWED = 'CorsIssue::WildcardOriginWithCredentials',
   PREFLIGHT_RESPONSE_INVALID = 'CorsIssue::PreflightResponseInvalid',
@@ -43,7 +39,8 @@ export const enum IssueCode {
   // TODO(https://crbug.com/1263483): Remove this once it's removed from CDP.
   PREFLIGHT_INVALID_ALLOW_EXTERNAL = 'CorsIssue::PreflightInvalidAllowExternal',
   NO_CORS_REDIRECT_MODE_NOT_FOLLOW = 'CorsIssue::NoCorsRedirectModeNotFollow',
-  INVALID_PRIVATE_NETWORK_ACCESS = 'CorsIssue::InvalidPrivateNetworkAccess',
+
+  INVALID_LOCAL_NETWORK_ACCESS = 'CorsIssue::InvalidLocalNetworkAccess',
   LOCAL_NETWORK_ACCESS_PERMISSION_DENIED = 'CorsIssue::LocalNetworkAccessPermissionDenied',
 }
 
@@ -85,12 +82,12 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
       return IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL;
     case Protocol.Network.CorsError.PreflightInvalidAllowExternal:
       return IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL;
-    case Protocol.Network.CorsError.InsecurePrivateNetwork:
-      return IssueCode.INSECURE_PRIVATE_NETWORK;
+    case Protocol.Network.CorsError.InsecureLocalNetwork:
+      return IssueCode.INSECURE_LOCAL_NETWORK;
     case Protocol.Network.CorsError.NoCorsRedirectModeNotFollow:
       return IssueCode.NO_CORS_REDIRECT_MODE_NOT_FOLLOW;
-    case Protocol.Network.CorsError.InvalidPrivateNetworkAccess:
-      return IssueCode.INVALID_PRIVATE_NETWORK_ACCESS;
+    case Protocol.Network.CorsError.InvalidLocalNetworkAccess:
+      return IssueCode.INVALID_LOCAL_NETWORK_ACCESS;
     case Protocol.Network.CorsError.LocalNetworkAccessPermissionDenied:
       return IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED;
   }
@@ -109,12 +106,12 @@ export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode
 
   getDescription(): MarkdownIssueDescription|null {
     switch (getIssueCode(this.details())) {
-      case IssueCode.INSECURE_PRIVATE_NETWORK:
+      case IssueCode.INSECURE_LOCAL_NETWORK:
         return {
           file: 'corsInsecurePrivateNetwork.md',
           links: [{
             link: 'https://developer.chrome.com/blog/private-network-access-update',
-            linkTitle: i18nString(UIStrings.corsPrivateNetworkAccess),
+            linkTitle: i18nString(UIStrings.corsLocalNetworkAccess),
           }],
         };
       case IssueCode.INVALID_HEADER_VALUES:
@@ -215,7 +212,7 @@ export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode
         };
       case IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL:
       case IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL:
-      case IssueCode.INVALID_PRIVATE_NETWORK_ACCESS:
+      case IssueCode.INVALID_LOCAL_NETWORK_ACCESS:
         return null;
     }
   }
@@ -226,7 +223,7 @@ export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode
 
   getKind(): IssueKind {
     if (this.details().isWarning &&
-        this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.InsecurePrivateNetwork) {
+        this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.InsecureLocalNetwork) {
       return IssueKind.BREAKING_CHANGE;
     }
     return IssueKind.PAGE_ERROR;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6821,6 +6821,10 @@ export const NativeFunctions = [
     name: "UIEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "WebMCPEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "WheelEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -164,6 +164,10 @@ const UIStringsNotTranslate = {
    *@description Placeholder text for the chat UI input.
    */
   inputPlaceholderForNoContext: 'Ask AI Assistance',
+  /**
+   * @description Placeholder text for the chat UI input with branding Gemini (do not translate)
+   */
+  inputPlaceholderForNoContextBranded: 'Ask Gemini',
   /**
    * @description Disclaimer text right after the chat input.
    */
@@ -555,6 +559,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (this.#conversation) {
       const emptyStateSuggestions = await getEmptyStateSuggestions(this.#conversation);
       const markdownRenderer = getMarkdownRenderer(this.#conversation);
+      let onContextAdd: (() => void)|null = null;
+      if (isAiAssistanceContextSelectionAgentEnabled() &&
+          // Only add it the button if can have anything already selected
+          this.#getConversationContext(this.#getDefaultConversationType())) {
+        onContextAdd = this.#handleContextAdd.bind(this);
+      }
+
       return {
         state: ViewState.CHAT_VIEW,
         props: {
@@ -591,6 +602,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onContextClick: this.#handleContextClick.bind(this),
           onNewConversation: this.#handleNewChatRequest.bind(this),
           onCopyResponseClick: this.#onCopyResponseClick.bind(this),
+          onContextRemoved: isAiAssistanceContextSelectionAgentEnabled() ? this.#handleContextRemoved.bind(this) : null,
+          onContextAdd,
         }
       };
     }
@@ -1011,6 +1024,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceWithNoRecording);
       }
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+        if (AiAssistanceModel.AiUtils.isGeminiBranding()) {
+          return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContextBranded);
+        }
         return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
     }
   }
@@ -1098,6 +1114,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Node picker is using linkifier.
   }
 
+  #handleContextRemoved(): void {
+    this.#conversation?.setContext(null);
+    this.requestUpdate();
+  }
+
+  #handleContextAdd(): void {
+    this.#conversation?.setContext(this.#getConversationContext(this.#getDefaultConversationType()));
+    this.requestUpdate();
+  }
+
   #canExecuteQuery(): boolean {
     const isBrandedBuild = Boolean(Root.Runtime.hostConfig.aidaAvailability?.enabled);
     const isBlockedByAge = Boolean(Root.Runtime.hostConfig.aidaAvailability?.blockedByAge);
@@ -1292,22 +1318,25 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (data instanceof Workspace.UISourceCode.UISourceCode) {
       const context = new AiAssistanceModel.FileAgent.FileContext(data);
       this.#selectedFile = context;
-
+      this.#conversation?.setContext(context);
     } else if (data instanceof SDK.DOMModel.DOMNode) {
       const context = new AiAssistanceModel.StylingAgent.NodeContext(data);
       this.#selectedElement = context;
-
+      this.#conversation?.setContext(context);
     } else if (data instanceof SDK.NetworkRequest.NetworkRequest) {
       const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-
       const context = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
       this.#selectedRequest = context;
+      this.#conversation?.setContext(context);
     } else if (data instanceof AiAssistanceModel.AIContext.AgentFocus) {
       const context = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
       this.#selectedPerformanceTrace = context;
+      this.#conversation?.setContext(context);
     }
 
-    this.#updateConversationState(this.#conversation);
+    void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);
+
+    this.requestUpdate();
   };
 
   async #startConversation(

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -39,6 +39,10 @@ const UIStrings = {
    * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContext: 'Remove selected context',
 } as const;
 
 /*
@@ -137,23 +141,28 @@ export interface ViewInput {
   onImagePaste: (event: ClipboardEvent) => void;
   onImageDragOver: (event: DragEvent) => void;
   onImageDrop: (event: DragEvent) => void;
+  onContextRemoved: (() => void)|null;
+  onContextAdd: (() => void)|null;
 }
 
 export type ViewOutput = undefined;
 
-export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const chatInputContainerCls = Lit.Directives.classMap({
-    'chat-input-container': true,
-    'single-line-layout': !input.selectedContext,
-    disabled: input.isTextInputDisabled,
-  });
-
-  const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
-    const classes = Lit.Directives.classMap({
-      'chat-input-disclaimer': true,
-      'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
-    });
-    // clang-format off
+export const
+    DEFAULT_VIEW =
+        (input: ViewInput, output: ViewOutput, target: HTMLElement):
+            void => {
+              const chatInputContainerCls = Lit.Directives.classMap({
+                'chat-input-container': true,
+                'single-line-layout': !input.selectedContext && !input.onContextAdd,
+                disabled: input.isTextInputDisabled,
+              });
+
+              const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
+                const classes = Lit.Directives.classMap({
+                  'chat-input-disclaimer': true,
+                  'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
+                });
+                // clang-format off
     return html`
       <div class=${classes}>
         <button
@@ -185,10 +194,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </div></devtools-tooltip>
       </div>
     `;
-    // clang-format on
-  };
+                // clang-format on
+              };
 
-  // clang-format off
+              // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${chatInputStyles}</style>
@@ -363,9 +372,29 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                             :
                             input.selectedContext.getTitle()}
                         </span>
+                        ${input.onContextRemoved ? html`
+                                  <devtools-button
+                                    title=${i18nString(UIStrings.removeContext)}
+                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    class="remove-context"
+                                    .iconName=${'cross'}
+                                    .size=${Buttons.Button.Size.MICRO}
+                                    .jslogContext=${'context-removed'}
+                                    .variant=${Buttons.Button.Variant.ICON}
+                                    @click=${input.onContextRemoved}></devtools-button>` : Lit.nothing}
                       </div>
                     </div>`
-                  : Lit.nothing}
+                  :
+                    input.onContextAdd ? html`
+                                  <devtools-button
+                                    title=${i18nString(UIStrings.removeContext)}
+                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    class="add-context"
+                                    .iconName=${'plus'}
+                                    .size=${Buttons.Button.Size.SMALL}
+                                    .jslogContext=${'context-add'}
+                                    .variant=${Buttons.Button.Variant.ICON}
+                                    @click=${input.onContextAdd}></devtools-button>` : Lit.nothing}
               </div>
               <div class="chat-input-actions-right">
                 <div class="chat-input-disclaimer-container">
@@ -462,8 +491,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
     </footer>
   `, target);
-  // clang-format on
-};
+              // clang-format on
+            };
 
 /**
  * ChatInput is a presenter for the input area in the AI Assistance panel.
@@ -503,6 +532,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   onInspectElementClick = (): void => {};
   onCancelClick = (): void => {};
   onNewConversation = (): void => {};
+  onContextRemoved: (() => void)|null = null;
+  onContextAdd: (() => void)|null = null;
 
   async #handleTakeScreenshot(): Promise<void> {
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
@@ -685,6 +716,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           onImageUpload: this.onImageUpload,
           onImageDragOver: this.#handleImageDragOver,
           onImageDrop: this.#handleImageDrop,
+          onContextRemoved: this.onContextRemoved,
+          onContextAdd: this.onContextAdd,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -323,6 +323,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           }
           return renderStep({
             step: part.step,
+            isLoading: input.isLoading,
             markdownRenderer: input.markdownRenderer,
             isLast: isLastPart,
           });
@@ -450,11 +451,12 @@ function renderStepDetails({
   // clang-format on
 }
 
-function renderStepBadge({step, isLast}: {
+function renderStepBadge({step, isLoading, isLast}: {
   step: Step,
+  isLoading: boolean,
   isLast: boolean,
 }): Lit.LitTemplate {
-  if (step.isLoading && isLast && !step.sideEffect) {
+  if (isLoading && isLast && !step.sideEffect) {
     return html`<devtools-spinner></devtools-spinner>`;
   }
 
@@ -478,8 +480,9 @@ function renderStepBadge({step, isLast}: {
     ></devtools-icon>`;
 }
 
-function renderStep({step, markdownRenderer, isLast}: {
+function renderStep({step, isLoading, markdownRenderer, isLast}: {
   step: Step,
+  isLoading: boolean,
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
@@ -496,7 +499,7 @@ function renderStep({step, markdownRenderer, isLast}: {
       .open=${Boolean(step.sideEffect)}>
       <summary>
         <div class="summary">
-          ${renderStepBadge({ step, isLast })}
+          ${renderStepBadge({ step, isLoading, isLast })}
           ${renderTitle(step)}
           <devtools-icon
             class="arrow"

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -56,6 +56,8 @@ export interface Props {
   onContextClick: () => void;
   onNewConversation: () => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
+  onContextRemoved: (() => void)|null;
+  onContextAdd: (() => void)|null;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
@@ -175,6 +177,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             onTextSubmit: input.onTextSubmit,
             onCancelClick: input.onCancelClick,
             onNewConversation: input.onNewConversation,
+            onContextRemoved: input.onContextRemoved,
+            onContextAdd: input.onContextAdd,
           })} ${ref(element => { output.input = element as UI.Widget.WidgetElement<ChatInput>; } )}></devtools-widget>
         </main>
       </div>

package/front_end/panels/ai_assistance/components/chatInput.css

@@ -22,7 +22,6 @@
   max-width: var(--sys-size-36);
   background-color: var(--sys-color-cdt-base-container);
   width: 100%;
-
 }
 
 .chat-readonly-container {
@@ -221,6 +220,8 @@
 
   .resource-link,
   .resource-task {
+    display: flex;
+    align-items: center;
     cursor: pointer;
     padding: var(--sys-size-2) var(--sys-size-3);
     font: var(--sys-typescale-body5-regular);
@@ -239,6 +240,12 @@
     & .title {
       vertical-align: middle;
       font: var(--sys-typescale-body5-regular);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & .remove-context {
+      vertical-align: middle;
     }
 
     &.has-picker-behavior {
@@ -253,8 +260,8 @@
     devtools-file-source-icon {
       display: inline-flex;
       vertical-align: middle;
-      width: var(--sys-size-7);
-      height: var(--sys-size-7);
+      min-width: var(--sys-size-7);
+      min-height: var(--sys-size-7);
     }
 
     /*