chrome-devtools-frontend 1.0.1611825 → 1.0.1613625

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -13,7 +13,6 @@ 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 AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
-import * as GreenDev from '../../models/greendev/greendev.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
@@ -273,20 +272,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             nothing}`;
   }
 
-  function renderCopyPrompt(changedCode?: string): LitTemplate {
-    if (!GreenDev.Prototypes.instance().isEnabled('copyToGemini') || !changedCode) {
-      return nothing;
-    }
-
-    // clang-format off
-    return html`<devtools-widget class="copy-to-prompt"
-      ${widget(PanelCommon.CopyChangesToPrompt, {
-        workspaceDiff: input.workspaceDiff,
-        patchAgentCSSChange: changedCode,
-      })}></devtools-widget>`;
-    // clang-format on
-  }
-
   function renderFooter(): LitTemplate {
     if (input.savedToDisk) {
       return nothing;
@@ -357,7 +342,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
               </div>
             ` :
             html`
-               ${renderCopyPrompt(input.changeSummary)}
                 <devtools-button
                 @click=${input.onApplyToWorkspace}
                 .jslogContext=${'patch-widget.apply-to-workspace'}
@@ -435,7 +419,7 @@ export class PatchWidget extends UI.Widget.Widget {
   #project?: Workspace.Workspace.Project;
   #patchSources?: string;
   #savedToDisk?: boolean;
-  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
+  #loggingEnabled: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #patchSuggestionState = PatchSuggestionState.INITIAL;
   #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
   #workspace = Workspace.Workspace.WorkspaceImpl.instance();
@@ -450,7 +434,7 @@ export class PatchWidget extends UI.Widget.Widget {
   }) {
     super(element);
     this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
-    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+    this.#loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     this.#view = view;
 
@@ -514,9 +498,9 @@ export class PatchWidget extends UI.Widget.Widget {
           projectPath,
           projectType: this.#getSelectedProjectType(projectPath),
           savedToDisk: this.#savedToDisk,
-          applyToWorkspaceTooltipText: this.#noLogging ?
-              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltipNoLogging) :
-              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltip),
+          applyToWorkspaceTooltipText: this.#loggingEnabled ?
+              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltip) :
+              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltipNoLogging),
           onLearnMoreTooltipClick: this.#onLearnMoreTooltipClick.bind(this),
           onApplyToWorkspace: this.#onApplyToWorkspace.bind(this),
           onCancel: () => {
@@ -566,8 +550,8 @@ export class PatchWidget extends UI.Widget.Widget {
         },
         {
           iconName: 'google',
-          content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging) :
-                                     lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacy),
+          content: this.#loggingEnabled ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacy) :
+                                          lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging),
         },
         {
           iconName: 'warning',

package/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -233,14 +233,14 @@ export class SelectWorkspaceDialog extends UI.Widget.VBox {
   }
 
   override performUpdate(): void {
-    const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+    const loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
 
     const viewInput = {
       folders: this.#folders,
       selectedIndex: this.#selectedIndex,
-      selectProjectRootText: noLogging ? lockedString(UIStringsNotTranslate.selectProjectRootNoLogging) :
-                                         lockedString(UIStringsNotTranslate.selectProjectRoot),
+      selectProjectRootText: loggingEnabled ? lockedString(UIStringsNotTranslate.selectProjectRoot) :
+                                              lockedString(UIStringsNotTranslate.selectProjectRootNoLogging),
       showAutomaticWorkspaceNudge: this.#automaticFileSystemManager.automaticFileSystem === null &&
           this.#automaticFileSystemManager.availability === 'available',
       onProjectSelected: (index: number) => {

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -161,6 +161,13 @@ Common.Settings.registerSettingExtension({
   },
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.AI,
+  settingName: 'ai-assistance-v2-opt-in-change-dialog-seen',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 UI.ActionRegistration.registerActionExtension({
   actionId: 'freestyler.main-menu',
   contextTypes(): [] {

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -11,6 +11,7 @@ export * from './SelectWorkspaceDialog.js';
 export * as ChatMessage from './components/ChatMessage.js';
 export * as ExploreWidget from './components/ExploreWidget.js';
 export * as ExportForAgentsDialog from './components/ExportForAgentsDialog.js';
+export * as OptInChangeDialog from './components/OptInChangeDialog.js';
 export * as PatchWidget from './PatchWidget.js';
 export * as DisabledWidget from './components/DisabledWidget.js';
 export * as WalkthroughView from './components/WalkthroughView.js';

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

@@ -729,7 +729,7 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   // clang-format off
   return html`
     <details class=${stepClasses}
-      jslog=${VisualLogging.section('step')}
+      jslog=${VisualLogging.expand('step').track({click: true})}
       .open=${Boolean(step.requestApproval)}>
       <summary>
         <div class="summary">
@@ -755,6 +755,7 @@ interface WidgetMakerResponse {
   customRevealTitle?: Platform.UIString.LocalizedString;
   // Can be null if the widget is only used to add the Reveal CTA.
   title: Lit.LitTemplate|Platform.UIString.LocalizedString|null;
+  jslogContext?: string;
 }
 
 const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -823,6 +824,7 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
         </span>
       </span>`,
     // clang-format on
+    jslogContext: 'computed-styles',
   };
 }
 
@@ -836,6 +838,7 @@ async function makeCoreWebVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey),
     title: lockedString(UIStringsNotTranslate.coreVitals),
+    jslogContext: 'core-web-vitals',
   };
 }
 
@@ -872,6 +875,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
       node: domNodeForId,
     })}
     ></devtools-widget>`,
+    jslogContext: 'standalone-styles',
   };
 }
 
@@ -894,6 +898,7 @@ async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
     title: lockedString(UIStringsNotTranslate.lcpBreakdown),
+    jslogContext: 'lcp-breakdown',
   };
 }
 
@@ -922,7 +927,8 @@ async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget):
   return {
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableBottomUpProfile(widgetData.data.bounds),
-    title: lockedString(UIStringsNotTranslate.bottomUpTree)
+    title: lockedString(UIStringsNotTranslate.bottomUpTree),
+    jslogContext: 'bottom-up',
   };
 }
 
@@ -947,6 +953,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     <devtools-button class="widget-reveal-button"
       .variant=${Buttons.Button.Variant.TEXT}
       .accessibleLabel=${lockedString(UIStringsNotTranslate.reveal)}
+      .jslogContext=${'reveal'}
       @click=${onReveal}
     >
       ${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}
@@ -956,7 +963,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 
   // clang-format off
   return html`
-    <div class=${classes}>
+    <div class=${classes} jslog=${ifDefined(response.jslogContext ? VisualLogging.section(response.jslogContext) : undefined)}>
       ${response.title ? html`
         <div class="widget-header">
           <h3 class="widget-name">${response.title}</h3>
@@ -986,6 +993,7 @@ async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget):
     title: null,
     revealable: new Timeline.TimelinePanel.ParsedTraceRevealable(widgetData.data.parsedTrace),
     customRevealTitle: lockedString(UIStringsNotTranslate.revealTrace),
+    jslogContext: 'performance-trace',
   };
 }
 
@@ -1045,6 +1053,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
     renderedWidget,
     revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
     title: lockedString(UIStringsNotTranslate.lcpElement),
+    jslogContext: 'dom-snapshot',
   };
 }
 
@@ -1607,5 +1616,6 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
     renderedWidget: template,
     revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
     title: lockedString(UIStringsNotTranslate.performanceSummary),
+    jslogContext: 'timeline-range-summary',
   };
 }

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

@@ -282,6 +282,10 @@ export class ChatView extends HTMLElement {
     textArea.focus();
   }
 
+  setInputValue(text: string): void {
+    this.#output.input?.getWidget()?.setInputValue(text);
+  }
+
   restoreScrollPosition(): void {
     if (this.#scrollTop === undefined) {
       return;

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

@@ -10,6 +10,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import styles from './exportForAgentsDialog.css.js';
 
@@ -59,6 +60,8 @@ export const enum StateType {
   CONVERSATION = 'conversation',
 }
 
+const DEFAULT_STATE_TYPE = StateType.PROMPT;
+
 export interface State {
   activeType: StateType;
   promptText: string;
@@ -78,14 +81,12 @@ type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, _output, target): void => {
   const isPrompt = input.state.activeType === StateType.PROMPT;
   const buttonText = isPrompt ? i18nString(UIStrings.copyToClipboard) : i18nString(UIStrings.saveAsMarkdown);
-  const exportText = isPrompt && input.state.isPromptLoading ?
-      i18nString(UIStrings.generatingSummary) :
-      (isPrompt ? input.state.promptText : input.state.conversationText);
+  const exportText = isPrompt ? input.state.promptText : input.state.conversationText;
   // clang-format off
 
   render(html`
     <style>${styles}</style>
-    <div class="export-for-agents-dialog">
+    <div class="export-for-agents-dialog" jslog=${VisualLogging.dialog('ai-export-for-agents')}>
       <header>
         <h1 id="export-for-agents-dialog-title" tabindex="-1">
           ${i18nString(UIStrings.exportForAgents)}
@@ -116,13 +117,13 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
         </label>
       </div>
       <main>
-        ${input.state.isPromptLoading ? html`
+        ${isPrompt && input.state.isPromptLoading ? html`
           <span class="prompt-loading">
             <devtools-spinner></devtools-spinner>
             ${i18nString(UIStrings.generatingSummary)}
           </span>
           ` : Lit.nothing}
-        <textarea readonly .value=${input.state.isPromptLoading ? '' : exportText}></textarea>
+        <textarea readonly .value=${isPrompt && input.state.isPromptLoading ? '' : exportText}></textarea>
       </main>
       <div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>
       <footer>
@@ -144,6 +145,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
 };
 
 export class ExportForAgentsDialog extends UI.Widget.VBox {
+  static #lastSelectedType: StateType = DEFAULT_STATE_TYPE;
   readonly #view: View;
   readonly #dialog: UI.Dialog.Dialog;
   #state: State;
@@ -160,7 +162,7 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
     super();
     this.#dialog = options.dialog;
     this.#state = {
-      activeType: StateType.PROMPT,
+      activeType: ExportForAgentsDialog.#lastSelectedType,
       promptText: typeof options.promptText === 'string' ? options.promptText : '',
       conversationText: options.markdownText,
       isPromptLoading: typeof options.promptText !== 'string',
@@ -179,8 +181,13 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  static clearPersistedViewState(): void {
+    ExportForAgentsDialog.#lastSelectedType = DEFAULT_STATE_TYPE;
+  }
+
   #onStateChange = (newState: StateType): void => {
     this.#state.activeType = newState;
+    ExportForAgentsDialog.#lastSelectedType = newState;
     this.requestUpdate();
   };
 

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

@@ -0,0 +1,179 @@
+// 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 * as Root from '../../../core/root/root.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+
+import styles from './optInChangeDialog.css.js';
+
+const {html, render} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Title for the opt-in change dialog.
+   */
+  title: 'AI assistance just got better',
+  /**
+   * @description First point in the opt-in change dialog, describing the new integration.
+   */
+  integrationPoint:
+      'AI assistance is now integrated with Application and Lighthouse panels, and pulls context from data sources simultaneously',
+  /**
+   * @description Second point in the opt-in change dialog, describing the new widgets.
+   */
+  widgetPoint: 'Use widgets to verify results or jump to source data for select debugging cases',
+  /**
+   * @description Third point in the opt-in change dialog (disclaimer) for regular users.
+   */
+  privacyDisclaimer:
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Third point in the opt-in change dialog (disclaimer) for enterprise users with logging disabled.
+   */
+  privacyDisclaimerEnterpriseNoLogging:
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Button text for managing settings.
+   */
+  manageSettings: 'Manage in settings',
+  /**
+   * @description Button text for acknowledging the changes.
+   */
+  gotIt: 'Got it',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/OptInChangeDialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface ViewInput {
+  onGotIt: () => void;
+  onManageSettings: () => void;
+  loggingEnabled: boolean;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target): void => {
+  const disclaimer = input.loggingEnabled ? i18nString(UIStrings.privacyDisclaimer) :
+                                            i18nString(UIStrings.privacyDisclaimerEnterpriseNoLogging);
+  // clang-format off
+  render(html`
+    <style>${styles}</style>
+    <div class="opt-in-change-dialog" jslog=${VisualLogging.dialog('ai-v2-opt-in-change-dialog')}>
+      <header>
+        <div class="header-icon-container">
+          <devtools-icon name="smart-assistant" role="presentation"></devtools-icon>
+        </div>
+        <h1 tabindex="-1">
+          ${i18nString(UIStrings.title)}
+        </h1>
+      </header>
+      <main>
+        <div class="item">
+          <devtools-icon name="lightbulb-spark" role="presentation"></devtools-icon>
+          <div class="text">${i18nString(UIStrings.integrationPoint)}</div>
+        </div>
+        <div class="item">
+          <devtools-icon name="flowsheet" role="presentation"></devtools-icon>
+          <div class="text">${i18nString(UIStrings.widgetPoint)}</div>
+        </div>
+        <div class="item">
+          <devtools-icon name="google" role="presentation"></devtools-icon>
+          <div class="text">${disclaimer}</div>
+        </div>
+      </main>
+      <footer>
+        <div class="right-buttons">
+          <devtools-button
+            @click=${input.onManageSettings}
+            .jslogContext=${'ai-assistance-v2-opt-in.manage-settings'}
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            .accessibleLabel=${i18nString(UIStrings.manageSettings)}
+          >
+            ${i18nString(UIStrings.manageSettings)}
+          </devtools-button>
+          <devtools-button
+            @click=${input.onGotIt}
+            .jslogContext=${'ai-assistance-v2-opt-in.got-it'}
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            .accessibleLabel=${i18nString(UIStrings.gotIt)}
+          >
+            ${i18nString(UIStrings.gotIt)}
+          </devtools-button>
+        </div>
+      </footer>
+    </div>
+  `, target);
+  // clang-format on
+};
+
+export class OptInChangeDialog extends UI.Widget.VBox {
+  readonly #view: View;
+  readonly #onGotIt: () => void;
+  readonly #onManageSettings: () => void;
+
+  constructor(
+      options: {
+        onGotIt: () => void,
+        onManageSettings: () => void,
+      },
+      view: View = DEFAULT_VIEW) {
+    super();
+    this.#onGotIt = options.onGotIt;
+    this.#onManageSettings = options.onManageSettings;
+    this.#view = view;
+
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+
+    const viewInput = {
+      onGotIt: this.#onGotIt,
+      onManageSettings: this.#onManageSettings,
+      loggingEnabled,
+    };
+
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  focusTitle(): void {
+    this.contentElement.querySelector('h1')?.focus();
+  }
+
+  static show(options: {
+    onGotIt: () => void,
+    onManageSettings: () => void,
+  }): void {
+    const dialog = new UI.Dialog.Dialog();
+    dialog.setAriaLabel(i18nString(UIStrings.title));
+    dialog.setOutsideClickCallback(event => event.consume(true));
+    dialog.setCloseOnEscape(false);
+    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+    dialog.setDimmed(true);
+
+    const optInChangeDialog = new OptInChangeDialog({
+      onGotIt: () => {
+        dialog.hide();
+        options.onGotIt();
+      },
+      onManageSettings: () => {
+        dialog.hide();
+        options.onManageSettings();
+      },
+    });
+    optInChangeDialog.show(dialog.contentElement);
+
+    void optInChangeDialog.updateComplete.then(() => {
+      dialog.show();
+      optInChangeDialog.focusTitle();
+    });
+  }
+}

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

@@ -9,6 +9,7 @@ import * as Input from '../../../ui/components/input/input.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatMessageStyles from './chatMessage.css.js';
 import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
@@ -119,14 +120,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
 
   // clang-format off
   return html`
-    <div class="inline-wrapper" ?data-open=${input.isExpanded}>
+    <div class="inline-wrapper" ?data-open=${input.isExpanded} jslog=${VisualLogging.section('walkthrough-container')}>
       <span class="inline-icon">
         ${input.isLoading ?
             html`<devtools-spinner aria-label=${lockedString(UIStrings.inProgress)}></devtools-spinner>` :
             html`<devtools-icon name=${icon}></devtools-icon>`
         }
       </span>
-      <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
+      <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle} jslog=${VisualLogging.expand('walkthrough').track({click: true})}>
         <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
           <span class="walkthrough-inline-title">
             ${input.isExpanded ?
@@ -151,7 +152,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
 
   // clang-format off
   return html`
-    <div class="walkthrough-view">
+    <div class="walkthrough-view" jslog=${VisualLogging.section('walkthrough-container')}>
       <div class="walkthrough-header">
          <h2 class="walkthrough-title">${i18nString(UIStrings.title)}</h2>
          <devtools-button

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

@@ -0,0 +1,95 @@
+/*
+ * 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.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    width: 100%;
+    box-shadow: none;
+    padding: var(--sys-size-8);
+    background-color: var(--sys-color-surface);
+    border-radius: var(--sys-shape-corner-medium);
+  }
+
+  .opt-in-change-dialog {
+    width: var(--sys-size-33);
+    max-width: 100%;
+  }
+
+  header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--sys-size-8);
+    margin-bottom: var(--sys-size-8);
+
+    h2 {
+      margin: 0;
+      color: var(--sys-color-on-surface);
+      font: var(--sys-typescale-headline5);
+    }
+
+    .header-icon-container {
+      background: linear-gradient(
+        135deg,
+        var(--sys-color-gradient-primary),
+        var(--sys-color-gradient-tertiary)
+      );
+      border-radius: var(--sys-size-4);
+      height: var(--sys-size-14);
+      width: var(--sys-size-14);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      devtools-icon {
+        width: var(--sys-size-9);
+        height: var(--sys-size-9);
+        color: var(--sys-color-on-primary);
+      }
+    }
+  }
+
+  main {
+    background-color: var(--sys-color-surface4);
+    border-radius: var(--sys-shape-corner-medium-small);
+    padding: var(--sys-size-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-6);
+    margin-bottom: var(--sys-size-8);
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--sys-size-8);
+
+      devtools-icon {
+        width: var(--sys-size-8);
+        height: var(--sys-size-8);
+        flex-shrink: 0;
+        color: var(--sys-color-on-surface-subtle);
+      }
+
+      .text {
+        font: var(--sys-typescale-body4);
+        color: var(--sys-color-on-surface);
+      }
+    }
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+
+    .right-buttons {
+      display: flex;
+      gap: var(--sys-size-5);
+    }
+  }
+}

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

@@ -99,7 +99,7 @@
 
   .inline-wrapper {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: var(--sys-size-2);
     justify-content: flex-start;
 

package/front_end/panels/application/CookieItemsView.ts

@@ -375,9 +375,10 @@ export class CookieItemsView extends UI.Widget.VBox {
   }
 
   deleteSelectedItem(): void {
-    if (this.selectedCookie) {
+    const cookie = this.selectedCookie;
+    if (cookie) {
       this.showPreview(null);
-      void this.model.deleteCookie(this.selectedCookie);
+      void this.model.deleteCookie(cookie);
     }
   }