chrome-devtools-frontend 1.0.1579812 → 1.0.1581449

package/front_end/generated/SupportedCSSProperties.js

@@ -500,7 +500,6 @@ export const generatedProperties = [
    "font-weight",
    "forced-color-adjust",
    "frame-sizing",
-   "gap-rule-overlap",
    "grid-auto-columns",
    "grid-auto-flow",
    "grid-auto-rows",
@@ -555,6 +554,7 @@ export const generatedProperties = [
    "margin-left",
    "margin-right",
    "margin-top",
+   "margin-trim",
    "marker-end",
    "marker-mid",
    "marker-start",
@@ -660,6 +660,7 @@ export const generatedProperties = [
    "ruby-align",
    "ruby-overhang",
    "ruby-position",
+   "rule-overlap",
    "rx",
    "ry",
    "scale",
@@ -747,10 +748,10 @@ export const generatedProperties = [
    "text-wrap-mode",
    "text-wrap-style",
    "timeline-scope",
+   "timeline-trigger-activation-range-end",
+   "timeline-trigger-activation-range-start",
    "timeline-trigger-active-range-end",
    "timeline-trigger-active-range-start",
-   "timeline-trigger-entry-range-end",
-   "timeline-trigger-entry-range-start",
    "timeline-trigger-name",
    "timeline-trigger-source",
    "top",
@@ -2615,14 +2616,6 @@ export const generatedProperties = [
   ],
   "name": "gap"
  },
- {
-  "inherited": false,
-  "keywords": [
-   "row-over-column",
-   "column-over-row"
-  ],
-  "name": "gap-rule-overlap"
- },
  {
   "longhands": [
    "grid-template-rows",
@@ -3073,6 +3066,9 @@ export const generatedProperties = [
   ],
   "name": "margin-top"
  },
+ {
+  "name": "margin-trim"
+ },
  {
   "inherited": true,
   "longhands": [
@@ -3668,7 +3664,9 @@ export const generatedProperties = [
    "none",
    "flip-block",
    "flip-inline",
-   "flip-start"
+   "flip-start",
+   "flip-x",
+   "flip-y"
   ],
   "name": "position-try-fallbacks"
  },
@@ -3938,6 +3936,14 @@ export const generatedProperties = [
   ],
   "name": "rule-interior-inset"
  },
+ {
+  "inherited": false,
+  "keywords": [
+   "row-over-column",
+   "column-over-row"
+  ],
+  "name": "rule-overlap"
+ },
  {
   "longhands": [
    "column-rule-style",
@@ -4602,8 +4608,8 @@ export const generatedProperties = [
   "longhands": [
    "timeline-trigger-name",
    "timeline-trigger-source",
-   "timeline-trigger-entry-range-start",
-   "timeline-trigger-entry-range-end",
+   "timeline-trigger-activation-range-start",
+   "timeline-trigger-activation-range-end",
    "timeline-trigger-active-range-start",
    "timeline-trigger-active-range-end"
   ],
@@ -4611,29 +4617,29 @@ export const generatedProperties = [
  },
  {
   "longhands": [
-   "timeline-trigger-active-range-start",
-   "timeline-trigger-active-range-end"
+   "timeline-trigger-activation-range-start",
+   "timeline-trigger-activation-range-end"
   ],
-  "name": "timeline-trigger-active-range"
+  "name": "timeline-trigger-activation-range"
  },
  {
-  "name": "timeline-trigger-active-range-end"
+  "name": "timeline-trigger-activation-range-end"
  },
  {
-  "name": "timeline-trigger-active-range-start"
+  "name": "timeline-trigger-activation-range-start"
  },
  {
   "longhands": [
-   "timeline-trigger-entry-range-start",
-   "timeline-trigger-entry-range-end"
+   "timeline-trigger-active-range-start",
+   "timeline-trigger-active-range-end"
   ],
-  "name": "timeline-trigger-entry-range"
+  "name": "timeline-trigger-active-range"
  },
  {
-  "name": "timeline-trigger-entry-range-end"
+  "name": "timeline-trigger-active-range-end"
  },
  {
-  "name": "timeline-trigger-entry-range-start"
+  "name": "timeline-trigger-active-range-start"
  },
  {
   "name": "timeline-trigger-name"
@@ -6062,12 +6068,6 @@ export const generatedPropertyValues = {
    "content-inline-size"
   ]
  },
- "gap-rule-overlap": {
-  "values": [
-   "row-over-column",
-   "column-over-row"
-  ]
- },
  "grid-auto-columns": {
   "values": [
    "auto",
@@ -6598,7 +6598,9 @@ export const generatedPropertyValues = {
    "none",
    "flip-block",
    "flip-inline",
-   "flip-start"
+   "flip-start",
+   "flip-x",
+   "flip-y"
   ]
  },
  "position-try-order": {
@@ -6720,6 +6722,12 @@ export const generatedPropertyValues = {
    "under"
   ]
  },
+ "rule-overlap": {
+  "values": [
+   "row-over-column",
+   "column-over-row"
+  ]
+ },
  "rx": {
   "values": [
    "auto"

package/front_end/generated/protocol-mapping.d.ts

@@ -464,6 +464,14 @@ export namespace ProtocolMapping {
      * Fired when user asks to capture screenshot of some area on the page.
      */
     'Overlay.screenshotRequested': [Protocol.Overlay.ScreenshotRequestedEvent];
+    /**
+     * Fired when user asks to show the Inspect panel.
+     */
+    'Overlay.inspectPanelShowRequested': [Protocol.Overlay.InspectPanelShowRequestedEvent];
+    /**
+     * Fired when user asks to restore the Inspected Element floating window.
+     */
+    'Overlay.inspectedElementWindowRestored': [Protocol.Overlay.InspectedElementWindowRestoredEvent];
     /**
      * Fired when user cancels the inspect mode.
      */
@@ -3815,6 +3823,10 @@ export namespace ProtocolMapping {
       paramsType: [Protocol.Overlay.SetShowContainerQueryOverlaysRequest];
       returnType: void;
     };
+    'Overlay.setShowInspectedElementAnchor': {
+      paramsType: [Protocol.Overlay.SetShowInspectedElementAnchorRequest];
+      returnType: void;
+    };
     /**
      * Requests that backend shows paint rectangles
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -3022,6 +3022,8 @@ declare namespace ProtocolProxyApi {
 
     invoke_setShowContainerQueryOverlays(params: Protocol.Overlay.SetShowContainerQueryOverlaysRequest): Promise<Protocol.ProtocolResponseWithError>;
 
+    invoke_setShowInspectedElementAnchor(params: Protocol.Overlay.SetShowInspectedElementAnchorRequest): Promise<Protocol.ProtocolResponseWithError>;
+
     /**
      * Requests that backend shows paint rectangles
      */
@@ -3087,6 +3089,16 @@ declare namespace ProtocolProxyApi {
      */
     screenshotRequested(params: Protocol.Overlay.ScreenshotRequestedEvent): void;
 
+    /**
+     * Fired when user asks to show the Inspect panel.
+     */
+    inspectPanelShowRequested(params: Protocol.Overlay.InspectPanelShowRequestedEvent): void;
+
+    /**
+     * Fired when user asks to restore the Inspected Element floating window.
+     */
+    inspectedElementWindowRestored(params: Protocol.Overlay.InspectedElementWindowRestoredEvent): void;
+
     /**
      * Fired when user cancels the inspect mode.
      */

package/front_end/generated/protocol.ts

@@ -1127,6 +1127,15 @@ export namespace Audits {
     IncorrectDigestLength = 'IncorrectDigestLength',
   }
 
+  export const enum ConnectionAllowlistError {
+    InvalidHeader = 'InvalidHeader',
+    MoreThanOneList = 'MoreThanOneList',
+    ItemNotInnerList = 'ItemNotInnerList',
+    InvalidAllowlistItemType = 'InvalidAllowlistItemType',
+    ReportingEndpointNotToken = 'ReportingEndpointNotToken',
+    InvalidUrlPattern = 'InvalidUrlPattern',
+  }
+
   /**
    * Details for issues around "Attribution Reporting API" usage.
    * Explainer: https://github.com/WICG/attribution-reporting-api
@@ -1179,6 +1188,11 @@ export namespace Audits {
     request: AffectedRequest;
   }
 
+  export interface ConnectionAllowlistIssueDetails {
+    error: ConnectionAllowlistError;
+    request: AffectedRequest;
+  }
+
   export const enum GenericIssueErrorType {
     FormLabelForNameError = 'FormLabelForNameError',
     FormDuplicateIdForInputError = 'FormDuplicateIdForInputError',
@@ -1553,6 +1567,7 @@ export namespace Audits {
     ElementAccessibilityIssue = 'ElementAccessibilityIssue',
     SRIMessageSignatureIssue = 'SRIMessageSignatureIssue',
     UnencodedDigestIssue = 'UnencodedDigestIssue',
+    ConnectionAllowlistIssue = 'ConnectionAllowlistIssue',
     UserReidentificationIssue = 'UserReidentificationIssue',
     PermissionElementIssue = 'PermissionElementIssue',
   }
@@ -1591,6 +1606,7 @@ export namespace Audits {
     elementAccessibilityIssueDetails?: ElementAccessibilityIssueDetails;
     sriMessageSignatureIssueDetails?: SRIMessageSignatureIssueDetails;
     unencodedDigestIssueDetails?: UnencodedDigestIssueDetails;
+    connectionAllowlistIssueDetails?: ConnectionAllowlistIssueDetails;
     userReidentificationIssueDetails?: UserReidentificationIssueDetails;
     permissionElementIssueDetails?: PermissionElementIssueDetails;
   }
@@ -10275,8 +10291,8 @@ export namespace Network {
     MethodDisallowedByPreflightResponse = 'MethodDisallowedByPreflightResponse',
     HeaderDisallowedByPreflightResponse = 'HeaderDisallowedByPreflightResponse',
     RedirectContainsCredentials = 'RedirectContainsCredentials',
-    InsecurePrivateNetwork = 'InsecurePrivateNetwork',
-    InvalidPrivateNetworkAccess = 'InvalidPrivateNetworkAccess',
+    InsecureLocalNetwork = 'InsecureLocalNetwork',
+    InvalidLocalNetworkAccess = 'InvalidLocalNetworkAccess',
     NoCorsRedirectModeNotFollow = 'NoCorsRedirectModeNotFollow',
     LocalNetworkAccessPermissionDenied = 'LocalNetworkAccessPermissionDenied',
   }
@@ -13546,6 +13562,17 @@ export namespace Overlay {
     None = 'none',
   }
 
+  export interface InspectedElementAnchorConfig {
+    /**
+     * Identifier of the node to highlight.
+     */
+    nodeId?: DOM.NodeId;
+    /**
+     * Identifier of the backend node to highlight.
+     */
+    backendNodeId?: DOM.BackendNodeId;
+  }
+
   export interface GetHighlightObjectForTestRequest {
     /**
      * Id of the node to get highlight object for.
@@ -13771,6 +13798,13 @@ export namespace Overlay {
     containerQueryHighlightConfigs: ContainerQueryHighlightConfig[];
   }
 
+  export interface SetShowInspectedElementAnchorRequest {
+    /**
+     * Node identifier for which to show an anchor for.
+     */
+    inspectedElementAnchorConfig: InspectedElementAnchorConfig;
+  }
+
   export interface SetShowPaintRectsRequest {
     /**
      * True for showing paint rectangles
@@ -13858,6 +13892,26 @@ export namespace Overlay {
      */
     viewport: Page.Viewport;
   }
+
+  /**
+   * Fired when user asks to show the Inspect panel.
+   */
+  export interface InspectPanelShowRequestedEvent {
+    /**
+     * Id of the node to show in the panel.
+     */
+    backendNodeId: DOM.BackendNodeId;
+  }
+
+  /**
+   * Fired when user asks to restore the Inspected Element floating window.
+   */
+  export interface InspectedElementWindowRestoredEvent {
+    /**
+     * Id of the node to restore the floating window for.
+     */
+    backendNodeId: DOM.BackendNodeId;
+  }
 }
 
 /**

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.snapshot.txt

@@ -1,4 +1,4 @@
-Title: FileAgent buildRequest structure matches the snapshot
+Title: ContextSelectionAgent buildRequest structure matches the snapshot
 Content:
 {
   "client": "CHROME_DEVTOOLS",
@@ -31,7 +31,7 @@ Content:
   "function_declarations": [
     {
       "name": "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": 6,
         "description": "",

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

@@ -2,10 +2,12 @@
 // 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';
 
@@ -73,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: '',
@@ -82,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,
         };
       },
     });
@@ -112,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.
@@ -144,7 +163,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 +196,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()) {

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

@@ -559,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: {
@@ -596,6 +603,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,
         }
       };
     }
@@ -1111,6 +1119,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     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);
@@ -1321,6 +1334,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation?.setContext(context);
     }
 
+    void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);
+
     this.requestUpdate();
   };
 

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