chrome-devtools-frontend 1.0.1579812 → 1.0.1581708

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

@@ -2,12 +2,16 @@
 // 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 type * as Trace from '../../trace/trace.js';
 import * as Workspace from '../../workspace/workspace.js';
+import {AgentFocus} from '../performance/AIContext.js';
 
 import {
   type AgentOptions,
@@ -69,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`,
+      description: `Gives a list of network requests including URL, status code, and duration in ms`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -82,16 +94,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,
         };
       },
     });
@@ -112,7 +138,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.
@@ -144,7 +173,10 @@ export class ContextSelectionAgent extends AiAgent<never> {
         properties: {},
       },
       displayInfoFromArgs: () => {
-        return {title: lockedString('Listing source requests…')};
+        return {
+          title: lockedString('Listing source requests…'),
+          action: 'listSourceFile()',
+        };
       },
       handler: async () => {
         const files = [];
@@ -174,7 +206,10 @@ export class ContextSelectionAgent extends AiAgent<never> {
         },
       },
       displayInfoFromArgs: args => {
-        return {title: lockedString('Getting source file'), action: `selectSourceFile(${args.name})`};
+        return {
+          title: lockedString('Getting source file'),
+          action: `selectSourceFile(${args.name})`,
+        };
       },
       handler: async params => {
         for (const file of this.#getUISourceCodes()) {
@@ -188,6 +223,66 @@ export class ContextSelectionAgent extends AiAgent<never> {
         return {error: 'Unable to find file.'};
       },
     });
+
+    this.declareFunction('performanceRecordAndReload', {
+      description: 'Start a new performance recording and reload the page.',
+      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.`,
+      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/{panels/elements → 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/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/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/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/panels/accessibility/AXBreadcrumbsPane.ts

@@ -452,11 +452,9 @@ export class AXBreadcrumb {
 
     this.#element = document.createElement('div');
     this.#element.classList.add('ax-breadcrumb');
-    this.#element.setAttribute('jslog', `${VisualLogging.treeItem().track({
-                                 click: true,
-                                 resize: true,
-                                 keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'
-                               })}`);
+    this.#element.setAttribute(
+        'jslog',
+        `${VisualLogging.treeItem().track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'})}`);
     elementsToAXBreadcrumb.set(this.#element, this);
 
     this.#nodeElement = document.createElement('div');

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -15,6 +15,7 @@ import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as GreenDev from '../../models/greendev/greendev.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
@@ -503,6 +504,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
   // Messages displayed in the `ChatView` component.
   #messages: Message[] = [];
+  #isContextAutoSelectionSuspended = false;
 
   // Whether the UI should show loading or not.
   #isLoading = false;
@@ -559,6 +561,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: {
@@ -596,6 +605,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onNewConversation: this.#handleNewChatRequest.bind(this),
           onCopyResponseClick: this.#onCopyResponseClick.bind(this),
           onContextRemoved: isAiAssistanceContextSelectionAgentEnabled() ? this.#handleContextRemoved.bind(this) : null,
+          onContextAdd,
         }
       };
     }
@@ -664,6 +674,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
+  async #handlePerformanceRecordAndReload(): Promise<Trace.TraceModel.ParsedTrace> {
+    return await TimelinePanel.TimelinePanel.TimelinePanel.executeRecordAndReload();
+  }
+
   #getDefaultConversationType(): AiAssistanceModel.AiHistoryStorage.ConversationType|undefined {
     const {hostConfig} = Root.Runtime;
     const viewManager = UI.ViewManager.ViewManager.instance();
@@ -707,7 +721,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
     const conversation = targetConversationType ?
         new AiAssistanceModel.AiConversation.AiConversation(
-            targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager) :
+            targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager, false,
+            this.#handlePerformanceRecordAndReload.bind(this), this.#handleInspectElement.bind(this)) :
         undefined;
 
     this.#updateConversationState(conversation);
@@ -727,16 +742,28 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         const conversationType = this.#getDefaultConversationType();
         if (conversationType) {
           conversation = new AiAssistanceModel.AiConversation.AiConversation(
-              conversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
+              conversationType,
+              [],
+              undefined,
+              false,
+              this.#aidaClient,
+              this.#changeManager,
+              false,
+              this.#handlePerformanceRecordAndReload.bind(this),
+              this.#handleInspectElement.bind(this),
+          );
         }
       }
 
       this.#conversation = conversation;
+      this.#isContextAutoSelectionSuspended = false;
     }
 
-    this.#conversation?.setContext(this.#getConversationContext(
-        isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
-                                                       (this.#conversation?.type ?? null)));
+    if (!this.#isContextAutoSelectionSuspended) {
+      this.#conversation?.setContext(this.#getConversationContext(
+          isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
+                                                         (this.#conversation?.type ?? null)));
+    }
 
     this.requestUpdate();
   }
@@ -1108,6 +1135,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #handleContextRemoved(): void {
     this.#conversation?.setContext(null);
+    this.#isContextAutoSelectionSuspended = true;
+    this.requestUpdate();
+  }
+
+  #handleContextAdd(): void {
+    this.#isContextAutoSelectionSuspended = false;
+    this.#conversation?.setContext(this.#getConversationContext(this.#getDefaultConversationType()));
     this.requestUpdate();
   }
 
@@ -1128,6 +1162,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
+    this.#isContextAutoSelectionSuspended = false;
     let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined;
     switch (actionId) {
       case 'freestyler.elements-floating-button': {
@@ -1174,7 +1209,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     let conversation = this.#conversation;
     if (!this.#conversation || this.#conversation.type !== targetConversationType || this.#conversation.isEmpty) {
       conversation = new AiAssistanceModel.AiConversation.AiConversation(
-          targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
+          targetConversationType,
+          [],
+          undefined,
+          false,
+          this.#aidaClient,
+          this.#changeManager,
+          false,
+          this.#handlePerformanceRecordAndReload.bind(this),
+          this.#handleInspectElement.bind(this),
+      );
     }
     this.#updateConversationState(conversation);
     const predefinedPrompt = opts?.['prompt'];
@@ -1321,9 +1365,61 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation?.setContext(context);
     }
 
+    this.#isContextAutoSelectionSuspended = false;
+
+    void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);
+
     this.requestUpdate();
   };
 
+  async #handleInspectElement(): Promise<SDK.DOMModel.DOMNode|null> {
+    if (!this.#toggleSearchElementAction) {
+      return null;
+    }
+
+    const result = new Promise<SDK.DOMModel.DOMNode|null>(resolve => {
+      // Track the new flavor change for dom node.
+      const handleDOMNodeFlavorChange = (ev: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void => {
+        if (!ev.data) {
+          return;
+        }
+        resolve(selectedElementFilter(ev.data));
+        removeListeners();
+      };
+
+      // If the inspect mode is toggled, we want to resolve null.
+      const handleInspectModeToggled = (ev: Common.EventTarget.EventTargetEvent<boolean>): void => {
+        if (!ev.data) {
+          // The inspect element is toggled off
+          // before the flavor change event fires
+          // so we need to wait a bit to see if the flavor changed.
+          window.setTimeout(() => {
+            resolve((selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode))));
+            removeListeners();
+          }, 50);
+        }
+      };
+
+      const removeListeners = (): void => {
+        UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
+        this.#toggleSearchElementAction?.removeEventListener(
+            UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
+      };
+
+      UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
+      this.#toggleSearchElementAction?.addEventListener(UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
+
+      // Clean-up listeners in case of abort.
+      this.#runAbortController.signal.addEventListener('abort', () => {
+        resolve(null);
+        removeListeners();
+      }, {once: true});
+    });
+
+    void this.#toggleSearchElementAction.execute();
+    return await result;
+  }
+
   async #startConversation(
       text: string,
       imageInput?: Host.AidaClient.Part,

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

@@ -142,6 +142,7 @@ export interface ViewInput {
   onImageDragOver: (event: DragEvent) => void;
   onImageDrop: (event: DragEvent) => void;
   onContextRemoved: (() => void)|null;
+  onContextAdd: (() => void)|null;
 }
 
 export type ViewOutput = undefined;
@@ -152,7 +153,7 @@ export const
             void => {
               const chatInputContainerCls = Lit.Directives.classMap({
                 'chat-input-container': true,
-                'single-line-layout': !input.selectedContext,
+                'single-line-layout': !input.selectedContext && !input.onContextAdd,
                 disabled: input.isTextInputDisabled,
               });
 
@@ -383,7 +384,17 @@ export const
                                     @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-added'}
+                                    .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">
@@ -522,6 +533,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   onCancelClick = (): void => {};
   onNewConversation = (): void => {};
   onContextRemoved: (() => void)|null = null;
+  onContextAdd: (() => void)|null = null;
 
   async #handleTakeScreenshot(): Promise<void> {
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
@@ -705,6 +717,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           onImageDragOver: this.#handleImageDragOver,
           onImageDrop: this.#handleImageDrop,
           onContextRemoved: this.onContextRemoved,
+          onContextAdd: this.onContextAdd,
         },
         undefined, this.contentElement);
   }

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

@@ -57,6 +57,7 @@ export interface Props {
   onNewConversation: () => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
   onContextRemoved: (() => void)|null;
+  onContextAdd: (() => void)|null;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
@@ -177,6 +178,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             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/animation/AnimationGroupPreviewUI.ts

@@ -98,7 +98,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <div class="animation-group-preview-ui">
       <button
-        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true, resize: true})}
+        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true})}
         class=${classes}
         role="option"
         aria-label=${input.label}

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1916,17 +1916,19 @@ export class ResourcesSection implements SDK.TargetManager.Observer {
     frameManager.addEventListener(
         SDK.FrameManager.Events.RESOURCE_ADDED, event => this.resourceAdded(event.data.resource), this);
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_CREATED, this.windowOpened,
-        this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_INFO_CHANGED,
-        this.windowChanged, this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_DESTROYED, this.windowDestroyed,
-        this, {scoped: true});
-
-    SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
+    if (this.panel.mode !== 'node') {
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_CREATED, this.windowOpened,
+          this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_INFO_CHANGED,
+          this.windowChanged, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_DESTROYED,
+          this.windowDestroyed, this, {scoped: true});
+
+      SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
+    }
   }
 
   private initialize(): void {

package/front_end/panels/application/DOMStorageModel.ts

@@ -250,7 +250,7 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 }
 
-SDK.SDKModel.SDKModel.register(DOMStorageModel, {capabilities: SDK.Target.Capability.DOM, autostart: false});
+SDK.SDKModel.SDKModel.register(DOMStorageModel, {capabilities: SDK.Target.Capability.DOM_STORAGE, autostart: false});
 
 export const enum Events {
   DOM_STORAGE_ADDED = 'DOMStorageAdded',