chrome-devtools-frontend 1.0.1593959 → 1.0.1595090

package/front_end/entrypoints/main/main-meta.ts

@@ -135,11 +135,11 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Appearance category in Settings
    */
-  enableCtrlShortcutToSwitchPanels: 'Enable Ctrl + 1-9 shortcut to switch panels',
+  enableCtrlShortcutToSwitchPanels: 'Use Ctrl + 1-9 to switch panels',
   /**
    * @description (Mac only) Title of a setting under the Appearance category in Settings
    */
-  enableShortcutToSwitchPanels: 'Enable ⌘ + 1-9 shortcut to switch panels',
+  enableShortcutToSwitchPanels: 'Use ⌘ + 1-9 to switch panels',
   /**
    * @description A drop-down menu option to dock to right
    */

package/front_end/generated/SupportedCSSProperties.js

@@ -623,6 +623,7 @@ export const generatedProperties = [
    "page-margin-safety",
    "page-orientation",
    "paint-order",
+   "path-length",
    "pathname",
    "pattern",
    "perspective",
@@ -3574,6 +3575,12 @@ export const generatedProperties = [
   ],
   "name": "paint-order"
  },
+ {
+  "keywords": [
+   "none"
+  ],
+  "name": "path-length"
+ },
  {
   "name": "pathname"
  },
@@ -6590,6 +6597,11 @@ export const generatedPropertyValues = {
    "markers"
   ]
  },
+ "path-length": {
+  "values": [
+   "none"
+  ]
+ },
  "perspective": {
   "values": [
    "none"

package/front_end/models/issues_manager/Issue.ts

@@ -52,6 +52,7 @@ export const enum IssueCategory {
   ATTRIBUTION_REPORTING = 'AttributionReporting',
   QUIRKS_MODE = 'QuirksMode',
   PERMISSION_ELEMENT = 'PermissionElement',
+  SELECTIVE_PERMISSIONS_INTERVENTION = 'SelectivePermissionsIntervention',
   OTHER = 'Other',
 }
 

package/front_end/models/issues_manager/IssueAggregator.ts

@@ -22,6 +22,7 @@ import {MixedContentIssue} from './MixedContentIssue.js';
 import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
 import {PermissionElementIssue} from './PermissionElementIssue.js';
 import {QuirksModeIssue} from './QuirksModeIssue.js';
+import {SelectivePermissionsInterventionIssue} from './SelectivePermissionsInterventionIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
 
 export interface IssuesProvider extends Common.EventTarget.EventTarget<IssuesManagerEventsTypes> {
@@ -67,6 +68,7 @@ export class AggregatedIssue extends Issue {
   #mixedContentIssues = new Set<MixedContentIssue>();
   #partitioningBlobURLIssues = new Set<PartitioningBlobURLIssue>();
   #permissionElementIssues = new Set<PermissionElementIssue>();
+  #selectivePermissionsInterventionIssues = new Set<SelectivePermissionsInterventionIssue>();
   #sharedArrayBufferIssues = new Set<SharedArrayBufferIssue>();
   #quirksModeIssues = new Set<QuirksModeIssue>();
   #attributionReportingIssues = new Set<AttributionReportingIssue>();
@@ -144,6 +146,10 @@ export class AggregatedIssue extends Issue {
     return this.#affectedRequests.values();
   }
 
+  getSelectivePermissionsInterventionIssues(): Iterable<SelectivePermissionsInterventionIssue> {
+    return this.#selectivePermissionsInterventionIssues;
+  }
+
   getSharedArrayBufferIssues(): Iterable<SharedArrayBufferIssue> {
     return this.#sharedArrayBufferIssues;
   }
@@ -282,6 +288,9 @@ export class AggregatedIssue extends Issue {
     if (issue instanceof PermissionElementIssue) {
       this.#permissionElementIssues.add(issue);
     }
+    if (issue instanceof SelectivePermissionsInterventionIssue) {
+      this.#selectivePermissionsInterventionIssues.add(issue);
+    }
   }
 
   getKind(): IssueKind {

package/front_end/models/issues_manager/IssuesManager.ts

@@ -27,6 +27,7 @@ import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
 import {PermissionElementIssue} from './PermissionElementIssue.js';
 import {PropertyRuleIssue} from './PropertyRuleIssue.js';
 import {QuirksModeIssue} from './QuirksModeIssue.js';
+import {SelectivePermissionsInterventionIssue} from './SelectivePermissionsInterventionIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
 import {SharedDictionaryIssue} from './SharedDictionaryIssue.js';
 import {SourceFrameIssuesManager} from './SourceFrameIssuesManager.js';
@@ -148,6 +149,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.PermissionElementIssue,
     PermissionElementIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.SelectivePermissionsInterventionIssue,
+    SelectivePermissionsInterventionIssue.fromInspectorIssue,
+  ],
 ]);
 
 /**

package/front_end/models/issues_manager/SelectivePermissionsInterventionIssue.ts

@@ -0,0 +1,65 @@
+// 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 {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+const UIStrings = {
+  /**
+   * @description Title for a learn more link in Selective Permissions Intervention issue description
+   */
+  selectivePermissionsIntervention: 'Selective Permissions Intervention',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('models/issues_manager/SelectivePermissionsInterventionIssue.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class SelectivePermissionsInterventionIssue extends
+    Issue<Protocol.Audits.SelectivePermissionsInterventionIssueDetails> {
+  constructor(
+      issueDetails: Protocol.Audits.SelectivePermissionsInterventionIssueDetails,
+      issuesModel: SDK.IssuesModel.IssuesModel|null) {
+    super(Protocol.Audits.InspectorIssueCode.SelectivePermissionsInterventionIssue, issueDetails, issuesModel);
+  }
+
+  primaryKey(): string {
+    return `${Protocol.Audits.InspectorIssueCode.SelectivePermissionsInterventionIssue}-${
+        JSON.stringify(this.details())}`;
+  }
+
+  getDescription(): MarkdownIssueDescription {
+    return {
+      file: 'selectivePermissionsIntervention.md',
+      links: [
+        {
+          link: 'https://crbug.com/435223477',
+          linkTitle: i18nString(UIStrings.selectivePermissionsIntervention),
+        },
+      ],
+    };
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.SELECTIVE_PERMISSIONS_INTERVENTION;
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.PAGE_ERROR;
+  }
+
+  static fromInspectorIssue(
+      issuesModel: SDK.IssuesModel.IssuesModel|null,
+      inspectorIssue: Protocol.Audits.InspectorIssue): SelectivePermissionsInterventionIssue[] {
+    const selectivePermissionsInterventionIssueDetails =
+        inspectorIssue.details.selectivePermissionsInterventionIssueDetails;
+    if (!selectivePermissionsInterventionIssueDetails) {
+      console.warn('Selective Permissions Intervention issue without details received.');
+      return [];
+    }
+    return [new SelectivePermissionsInterventionIssue(selectivePermissionsInterventionIssueDetails, issuesModel)];
+  }
+}

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

@@ -0,0 +1,7 @@
+# Selective Permissions Intervention
+
+The Selective Permissions Intervention blocks calls to privacy-sensitive APIs when they are called from ad scripts in order to align the permission grant with the user's intent. The particular API that was blocked, the call-stack that triggered the intervention, and why the script that called the API is considered ad-related is shown below.
+
+Note that Chrome considers any script with a URL that matches a rule in the [filterlist](ChromeFilterlistRepository) as ad script, and the matching rule is shown in the Ad Ancestry section. In addition, any script loaded while an ad script is in the JavaScript stack will also be considered an ad script by Chrome and is also shown in Ad Ancestry.
+
+If you believe this intervention  was in error (e.g., this call would occur even when loading the page with an ad blocker enabled), then please [file a bug](SelectivePermissionsInterventionIssue).

package/front_end/models/issues_manager/issues_manager.ts

@@ -27,6 +27,7 @@ import * as PermissionElementIssue from './PermissionElementIssue.js';
 import * as PropertyRuleIssue from './PropertyRuleIssue.js';
 import * as QuirksModeIssue from './QuirksModeIssue.js';
 import * as RelatedIssue from './RelatedIssue.js';
+import * as SelectivePermissionsInterventionIssue from './SelectivePermissionsInterventionIssue.js';
 import * as SharedArrayBufferIssue from './SharedArrayBufferIssue.js';
 import * as SharedDictionaryIssue from './SharedDictionaryIssue.js';
 import * as SourceFrameIssuesManager from './SourceFrameIssuesManager.js';
@@ -60,6 +61,7 @@ export {
   PropertyRuleIssue,
   QuirksModeIssue,
   RelatedIssue,
+  SelectivePermissionsInterventionIssue,
   SharedArrayBufferIssue,
   SharedDictionaryIssue,
   SourceFrameIssuesManager,

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -2485,6 +2485,11 @@ export const NativeFunctions = [
     signatures: [["qualifiedName"],["name"]],
     receivers: ["Element"]
   },
+  {
+    name: "getAttribute",
+    signatures: [["name"]],
+    receivers: ["ProcessingInstruction"]
+  },
   {
     name: "getAttribute",
     signatures: [["tag"]],
@@ -2508,7 +2513,13 @@ export const NativeFunctions = [
   },
   {
     name: "hasAttribute",
-    signatures: [["qualifiedName"],["name"]]
+    signatures: [["qualifiedName"],["name"]],
+    receivers: ["Element"]
+  },
+  {
+    name: "hasAttribute",
+    signatures: [["name"]],
+    receivers: ["ProcessingInstruction"]
   },
   {
     name: "hasAttributeNS",
@@ -2543,6 +2554,11 @@ export const NativeFunctions = [
     signatures: [["qualifiedName"],["name"]],
     receivers: ["Element"]
   },
+  {
+    name: "removeAttribute",
+    signatures: [["name"]],
+    receivers: ["ProcessingInstruction"]
+  },
   {
     name: "removeAttribute",
     signatures: [["attribute"]],
@@ -2586,6 +2602,11 @@ export const NativeFunctions = [
     signatures: [["qualifiedName","value"],["name","value"]],
     receivers: ["Element"]
   },
+  {
+    name: "setAttribute",
+    signatures: [["name","value"]],
+    receivers: ["ProcessingInstruction"]
+  },
   {
     name: "setAttribute",
     signatures: [["tag","value"]],
@@ -2619,7 +2640,13 @@ export const NativeFunctions = [
   },
   {
     name: "toggleAttribute",
-    signatures: [["qualifiedName","?force"]]
+    signatures: [["qualifiedName","?force"]],
+    receivers: ["Element"]
+  },
+  {
+    name: "toggleAttribute",
+    signatures: [["name","?force"]],
+    receivers: ["ProcessingInstruction"]
   },
   {
     name: "webkitMatchesSelector",
@@ -3149,7 +3176,7 @@ export const NativeFunctions = [
   },
   {
     name: "initKeyboardEvent",
-    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?keyArg","?locationArg","?ctrlKey","?altKey","?shiftKey","?metaKey"]]
+    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?keyArg","?locationArg","?ctrlKey","?altKey","?shiftKey","?metaKey"],["type","?bubbles","?cancelable","?view","?keyIdentifier","?location","?ctrlKey","?altKey","?shiftKey","?metaKey"]]
   },
   {
     name: "setKeyframes",
@@ -4183,7 +4210,7 @@ export const NativeFunctions = [
   },
   {
     name: "initUIEvent",
-    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?detailArg"],["type","?bubbles","?cancelable","?view","?detail"]]
+    signatures: [["typeArg","?bubblesArg","?cancelableArg","?viewArg","?detailArg"]]
   },
   {
     name: "getTranslatedShaderSource",
@@ -6817,6 +6844,10 @@ export const NativeFunctions = [
     name: "ErrorEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "FocusEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "HashChangeEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6829,6 +6860,10 @@ export const NativeFunctions = [
     name: "InterestEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "KeyboardEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "MessageEvent",
     signatures: [["type","?eventInitDict"]]
@@ -6866,7 +6901,7 @@ export const NativeFunctions = [
     signatures: [["type","?eventInitDict"]]
   },
   {
-    name: "UIEvent",
+    name: "TouchEvent",
     signatures: [["type","?eventInitDict"]]
   },
   {
@@ -7325,10 +7360,6 @@ export const NativeFunctions = [
     name: "TaskPriorityChangeEvent",
     signatures: [["type","eventInitDict"]]
   },
-  {
-    name: "provideContext",
-    signatures: [["?options"]]
-  },
   {
     name: "registerTool",
     signatures: [["tool"]]
@@ -9254,6 +9285,10 @@ export const NativeFunctions = [
     name: "MIDIMessageEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "startDiagnosticLogging",
+    signatures: [["?options"]]
+  },
   {
     name: "CloseEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/models/persistence/persistence-meta.ts

@@ -9,7 +9,7 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Persistence category in Settings
    */
-  enableLocalOverrides: 'Enable Local Overrides',
+  localOverrides: 'Local overrides',
   /**
    * @description A tag of Enable Local Overrides setting that can be searched in the command menu
    */
@@ -32,11 +32,11 @@ const UIStrings = {
    */
   request: 'request',
   /**
-   * @description Title of a setting under the Persistence category that can be invoked through the Command Menu
+   * @description Title of an option under the Persistence category that can be invoked through the Command Menu
    */
   enableOverrideNetworkRequests: 'Enable override network requests',
   /**
-   * @description Title of a setting under the Persistence category that can be invoked through the Command Menu
+   * @description Title of an option under the Persistence category that can be invoked through the Command Menu
    */
   disableOverrideNetworkRequests: 'Disable override network requests',
 } as const;
@@ -45,7 +45,7 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERSISTENCE,
-  title: i18nLazyString(UIStrings.enableLocalOverrides),
+  title: i18nLazyString(UIStrings.localOverrides),
   settingName: 'persistence-network-overrides-enabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -693,7 +693,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           blockedByCrossOrigin: this.#conversation.isBlockedByOrigin,
           isLoading: this.#isLoading,
           messages: this.#messages,
-          selectedContext: this.#conversation.selectedContext ?? null,
+          /**
+           * We pass either the selected context with isContextSelected=true
+           * to make sure the pill is show with normal styling and a remove button.
+           * Or we pass the panels default context with isContextSelected=false
+           * to display a placeholder pill with neutral styling and an add button.
+           */
+          context:
+              this.#conversation.selectedContext ?? this.#getConversationContext(this.#getDefaultConversationType()),
+          isContextSelected: Boolean(this.#conversation.selectedContext),
           conversationType: this.#conversation.type,
           isReadOnly: this.#conversation.isReadOnly ?? false,
           changeSummary: this.#getChangeSummary(),
@@ -857,17 +865,20 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectDefaultAgentIfNeeded(): void {
     // We don't change the current agent when there is a message in flight.
     if (this.#isLoading) {
+      this.requestUpdate();
       return;
     }
 
     // If there already is an agent and if it is not empty,
     // we don't automatically change the agent.
     if (this.#conversation && !this.#conversation.isEmpty) {
+      this.requestUpdate();
       return;
     }
 
     const targetConversationType = this.#getDefaultConversationType();
     if (this.#conversation?.type === targetConversationType) {
+      this.requestUpdate();
       // The above if makes sure even if we have an active agent it's empty
       // So we can just reuse it
       return;

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

@@ -134,7 +134,8 @@ export interface ViewInput {
   blockedByCrossOrigin: boolean;
   isTextInputDisabled: boolean;
   inputPlaceholder: Platform.UIString.LocalizedString;
-  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  isContextSelected: boolean;
   inspectElementToggled: boolean;
   disclaimerText: string;
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
@@ -183,7 +184,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
 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,
+    'single-line-layout': !input.context,
     disabled: input.isTextInputDisabled,
   });
 
@@ -300,7 +301,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
             ></textarea>
             <div class="chat-input-actions">
               <div class="chat-input-actions-left">
-                ${input.selectedContext ?
+                ${input.context ?
                   html`
                     <div class="select-element">
                       ${input.conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING ?
@@ -321,29 +322,33 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                           ></devtools-button>`
                         : Lit.nothing}
                       <div
-                        class="resource-link"
+                        class=${Lit.Directives.classMap({
+                          'resource-link': true,
+                          disabled: !input.isContextSelected,
+                        })}
                       >
                         ${
-                          input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?
+                          input.context instanceof AiAssistanceModel.StylingAgent.NodeContext ?
                             html`
                               <devtools-widget
                                 class="title"
                                 .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-                                  node: input.selectedContext.getItem(),
+                                  node: input.context.getItem(),
                                   options: {
-                                    hiddenClassList: input.selectedContext.getItem().classNames().filter(
+                                    disabled: !input.isContextSelected,
+                                    hiddenClassList: input.context.getItem().classNames().filter(
                                       className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME)),
                                     ariaDescription: i18nString(UIStrings.revealContextDescription),
                                   },
                                 })}
                               ></devtools-widget>` :
                             html`
-                          ${input.selectedContext instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
-                            PanelUtils.PanelUtils.getIconForNetworkRequest(input.selectedContext.getItem()) :
-                            input.selectedContext instanceof AiAssistanceModel.FileAgent.FileContext ?
-                            PanelUtils.PanelUtils.getIconForSourceFile(input.selectedContext.getItem()) :
-                            input.selectedContext instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
-                            html`<devtools-icon name="performance" title="Performance"></devtools-icon>` :
+                          ${input.context instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
+                            PanelUtils.PanelUtils.getIconForNetworkRequest(input.context.getItem()) :
+                            input.context instanceof AiAssistanceModel.FileAgent.FileContext ?
+                            PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
+                            input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
+                            html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
                             Lit.nothing}
                             <span 
                               role="button"
@@ -356,31 +361,31 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                                 }
                               }}
                               aria-description=${i18nString(UIStrings.revealContextDescription)}
-                            >${input.selectedContext.getTitle()}</span>`
+                            >${input.context.getTitle()}</span>`
                         }
-                        ${input.onContextRemoved ? html`
+                        ${input.isContextSelected && input.onContextRemoved ? html`
                                   <devtools-button
-                                    title=${getContextRemoveLabel(input.selectedContext)}
-                                    aria-label=${getContextRemoveLabel(input.selectedContext)}
+                                    title=${getContextRemoveLabel(input.context)}
+                                    aria-label=${getContextRemoveLabel(input.context)}
                                     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}
+                      ${!input.isContextSelected && input.onContextAdd ? html`
+                                    <devtools-button
+                                      title=${lockedString(UIStringsNotTranslate.addContext)}
+                                      aria-label=${lockedString(UIStringsNotTranslate.addContext)}
+                                      class="add-context"
+                                      .iconName=${'plus'}
+                                      .size=${Buttons.Button.Size.MICRO}
+                                      .jslogContext=${'context-added'}
+                                      .variant=${Buttons.Button.Variant.ICON}
+                                      @click=${input.onContextAdd}></devtools-button>` : Lit.nothing}
                       </div>
                     </div>`
-                  :
-                    input.onContextAdd ? html`
-                                  <devtools-button
-                                    title=${lockedString(UIStringsNotTranslate.addContext)}
-                                    aria-label=${lockedString(UIStringsNotTranslate.addContext)}
-                                    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}
+                  : Lit.nothing}
               </div>
               <div class="chat-input-actions-right">
                 <div class="chat-input-disclaimer-container">
@@ -488,7 +493,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   blockedByCrossOrigin = false;
   isTextInputDisabled = false;
   inputPlaceholder = '' as Platform.UIString.LocalizedString;
-  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null = null;
+  context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null = null;
+  isContextSelected = false;
   inspectElementToggled = false;
   disclaimerText = '';
   conversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
@@ -675,7 +681,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           isLoading: this.isLoading,
           blockedByCrossOrigin: this.blockedByCrossOrigin,
           isTextInputDisabled: this.isTextInputDisabled,
-          selectedContext: this.selectedContext,
+          context: this.context,
+          isContextSelected: this.isContextSelected,
           inspectElementToggled: this.inspectElementToggled,
           isTextInputEmpty: this.#isTextInputEmpty(),
           disclaimerText: this.disclaimerText,

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

@@ -65,7 +65,8 @@ export interface Props {
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
-  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  isContextSelected: boolean;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountGivenName'>;
@@ -178,7 +179,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             isTextInputDisabled: input.isTextInputDisabled,
             inputPlaceholder: input.inputPlaceholder,
             disclaimerText: input.disclaimerText,
-            selectedContext: input.selectedContext,
+            context: input.context,
+            isContextSelected: input.isContextSelected,
             inspectElementToggled: input.inspectElementToggled,
             multimodalInputEnabled: input.multimodalInputEnabled ?? false,
             conversationType: input.conversationType,

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

@@ -239,12 +239,15 @@
 
     & .title {
       vertical-align: middle;
+      /* Fixed italic text getting cut off */
+      padding-right: var(--sys-size-2);
       font: var(--sys-typescale-body5-regular);
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
-    & .remove-context {
+    & .remove-context,
+    & .add-context {
       vertical-align: middle;
     }
 
@@ -260,6 +263,28 @@
       min-height: var(--sys-size-7);
     }
 
+    &.disabled {
+      border-style: dashed;
+      border-color: var(--sys-color-neutral-outline);
+      color: var(--sys-color-on-surface-light);
+
+      devtools-icon,
+      devtools-file-source-icon {
+        /* Override devtools-file-source-icon */
+        --override-file-source-icon-color: var(
+          --sys-color-on-surface-light-graphics
+        );
+        /* Some icons set their style attribute and we need to override it */
+        /* stylelint-disable-next-line declaration-no-important */
+        color: var(--sys-color-on-surface-light-graphics) !important;
+      }
+
+      .title {
+        color: var(--sys-color-on-surface-light);
+        font-style: italic;
+      }
+    }
+
     /*
       CSS styling for `network-override-marker` is similar to
       https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/network/networkLogView.css;l=379.

package/front_end/panels/application/StorageView.ts

@@ -510,8 +510,14 @@ export class StorageView extends UI.Widget.VBox {
     const quotaAsString = i18n.ByteUtilities.bytesToString(response.quota);
     const usageAsString = i18n.ByteUtilities.bytesToString(response.usage);
     const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
-    const quota =
-        quotaOverridden ? UI.Fragment.Fragment.build`<b>${formattedQuotaAsString}</b>`.element() : quotaAsString;
+
+    let quota: string|HTMLElement = quotaAsString;
+    if (quotaOverridden) {
+      const element = document.createElement('b');
+      element.textContent = formattedQuotaAsString;
+      quota = element;
+    }
+
     const element = uiI18n.getFormatLocalizedString(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota});
     this.quotaRow.appendChild(element);
     UI.Tooltip.Tooltip.install(