chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 /*
  * Copyright (C) 2012 Research In Motion Limited. All rights reserved.
@@ -26,11 +25,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {BinaryResourceView} from './BinaryResourceView.js';
-import {DataGridItem, OriginalResourceChunkView} from './OriginalResourceChunkView.js';
+import {DataGridItem, ResourceChunkView} from './ResourceChunkView.js';
 
 const UIStrings = {
   /**
@@ -91,12 +89,11 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/ResourceWebSocketFrameV
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export class ResourceWebSocketFrameView extends OriginalResourceChunkView<SDK.NetworkRequest.WebSocketFrame> {
+export class ResourceWebSocketFrameView extends ResourceChunkView<SDK.NetworkRequest.WebSocketFrame> {
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
-    super(
-        request, 'network-web-socket-message-filter', 'resource-web-socket-frame-split-view-state',
-        i18nString(UIStrings.webSocketFrame), i18nString(UIStrings.filterUsingRegex));
-    this.element.setAttribute('jslog', `${VisualLogging.pane('web-socket-messages').track({resize: true})}`);
+    super(request, 'network-web-socket-message-filter', 'resource-web-socket-frame-split-view-state',
+          i18nString(UIStrings.webSocketFrame), i18nString(UIStrings.filterUsingRegex),
+          {jslog: `${VisualLogging.pane('web-socket-messages').track({resize: true})}`});
   }
 
   override getRequestChunks(): SDK.NetworkRequest.WebSocketFrame[] {
@@ -115,7 +112,7 @@ export class ResourceWebSocketFrameView extends OriginalResourceChunkView<SDK.Ne
 
   override wasShown(): void {
     super.wasShown();
-    this.refresh();
+    this.requestUpdate();
     this.request.addEventListener(SDK.NetworkRequest.Events.WEBSOCKET_FRAME_ADDED, this.onWebSocketFrameAdded, this);
   }
 
@@ -161,16 +158,13 @@ class ResourceFrameNode extends DataGridItem {
   readonly frame: SDK.NetworkRequest.WebSocketFrame;
   override readonly isTextFrame: boolean;
   #dataText: string;
-  #binaryView: BinaryResourceView|null;
+  #binaryView: BinaryResourceView|null = null;
+  override readonly data: Record<string, string|HTMLElement>;
+  override readonly cssClass?: string;
 
   constructor(frame: SDK.NetworkRequest.WebSocketFrame) {
+    super();
     let length = String(frame.text.length);
-    const time = new Date(frame.time * 1000);
-    const timeText = ('0' + time.getHours()).substr(-2) + ':' + ('0' + time.getMinutes()).substr(-2) + ':' +
-        ('0' + time.getSeconds()).substr(-2) + '.' + ('00' + time.getMilliseconds()).substr(-3);
-    const timeNode = document.createElement('div');
-    UI.UIUtils.createTextChild(timeNode, timeText);
-    UI.Tooltip.Tooltip.install(timeNode, time.toLocaleString());
 
     let dataText: string = frame.text;
     let description = ResourceWebSocketFrameView.opCodeDescription(frame.opCode, frame.mask);
@@ -179,39 +173,31 @@ class ResourceFrameNode extends DataGridItem {
     if (frame.type === SDK.NetworkRequest.WebSocketFrameType.Error) {
       description = dataText;
       length = i18nString(UIStrings.na);
-
     } else if (isTextFrame) {
       description = dataText;
-
     } else if (frame.opCode === OpCodes.BINARY_FRAME) {
       length = i18n.ByteUtilities.bytesToString(Platform.StringUtilities.base64ToSize(frame.text));
       description = opCodeDescriptions[frame.opCode]();
-
     } else {
       dataText = description;
     }
 
-    super({data: description, length, time: timeNode});
-
     this.frame = frame;
     this.isTextFrame = isTextFrame;
     this.#dataText = dataText;
 
-    this.#binaryView = null;
-  }
+    this.data = {
+      data: description,
+      length,
+    };
 
-  override createCells(element: Element): void {
-    element.classList.toggle(
-        'resource-chunk-view-row-error', this.frame.type === SDK.NetworkRequest.WebSocketFrameType.Error);
-    element.classList.toggle(
-        'resource-chunk-view-row-send', this.frame.type === SDK.NetworkRequest.WebSocketFrameType.Send);
-    element.classList.toggle(
-        'resource-chunk-view-row-receive', this.frame.type === SDK.NetworkRequest.WebSocketFrameType.Receive);
-    super.createCells(element);
-  }
-
-  override nodeSelfHeight(): number {
-    return 21;
+    if (frame.type === SDK.NetworkRequest.WebSocketFrameType.Error) {
+      this.cssClass = 'resource-chunk-view-row-error';
+    } else if (frame.type === SDK.NetworkRequest.WebSocketFrameType.Send) {
+      this.cssClass = 'resource-chunk-view-row-send';
+    } else if (frame.type === SDK.NetworkRequest.WebSocketFrameType.Receive) {
+      this.cssClass = 'resource-chunk-view-row-receive';
+    }
   }
 
   override dataText(): string {

package/front_end/panels/network/resourceChunkView.css

@@ -4,46 +4,51 @@
  * found in the LICENSE file.
  */
 
-.resource-chunk-view {
-  user-select: text;
-}
-
-.resource-chunk-view .data-grid {
-  flex: auto;
-  border: none;
-
-  .resource-chunk-view-td {
-    border-bottom: 1px solid var(--sys-color-divider);
+@scope to (devtools-widget > *) {
+  :scope {
+    overflow: auto;
+    height: 100%;
   }
 
-  & tr {
-    &.resource-chunk-view-row-send td:first-child::before {
-      content: "\2B06";
-      color: var(--sys-color-tertiary);
-      padding-right: 4px;
-    }
-
-    &.resource-chunk-view-row-receive td:first-child::before {
-      content: "\2B07";
-      color: var(--sys-color-error);
-      padding-right: 4px;
-    }
+  .resource-chunk-view {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    user-select: text;
+  }
 
-    &.resource-chunk-view-row-send {
-      background-color: color-mix(in srgb, var(--sys-color-tertiary-container), transparent 50%);
-    }
+  devtools-split-view {
+    flex: auto;
+    height: 100%;
+  }
 
-    &.resource-chunk-view-row-error {
-      background-color: var(--sys-color-surface-error);
-      color: var(--sys-color-on-surface-error);
+  .data-grid .data-container table.data {
+    tr.data-grid-data-grid-node {
+      td.resource-chunk-view-td {
+        border-bottom: 1px solid var(--sys-color-divider);
+      }
+
+      &.resource-chunk-view-row-send td:first-child::before {
+        content: "\2B06";
+        color: var(--sys-color-tertiary);
+        padding-right: 4px;
+      }
+
+      &.resource-chunk-view-row-receive td:first-child::before {
+        content: "\2B07";
+        color: var(--sys-color-error);
+        padding-right: 4px;
+      }
+
+      &.resource-chunk-view-row-send {
+        background-color: color-mix(in srgb, var(--sys-color-tertiary-container), transparent 50%);
+      }
+
+      &.resource-chunk-view-row-error {
+        background-color: var(--sys-color-surface-error);
+        color: var(--sys-color-on-surface-error);
+      }
     }
   }
 }
-
-.resource-chunk-view .data-grid .data {
-  background-image: none;
-}
-
-.resource-chunk-view devtools-toolbar {
-  border-bottom: 1px solid var(--sys-color-divider);
-}

package/front_end/panels/profiler/HeapDetachedElementsDataGrid.ts

@@ -1,15 +1,17 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as Elements from '../elements/elements.js';
 
+const {widget} = UI.Widget;
+
 const UIStrings = {
   /**
    * @description Text in Heap Snapshot View of a profiler tool
@@ -79,7 +81,7 @@ export class HeapDetachedElementsDataGridNode extends DataGrid.DataGrid.DataGrid
 
       case 'detached-node-count': {
         const size = this.#getNodeSize(this.detachedElementInfo);
-        UI.UIUtils.createTextChild(cell, size.toString());
+        render(html`${size}`, cell);
         return cell;
       }
     }
@@ -111,14 +113,21 @@ export class HeapDetachedElementsDataGridNode extends DataGrid.DataGrid.DataGrid
 
   // FIXME: is it a partial dupe of front_end/panels/elements/ElementsTreeOutlineRenderer.ts?
   #renderNode(node: SDK.DOMModel.DOMNode, target: HTMLElement): void {
-    const domTree = new Elements.ElementsTreeOutline.DOMTreeWidget();
-    domTree.omitRootDOMNode = false;
-    domTree.selectEnabled = true;
-    domTree.hideGutter = true;
-    domTree.rootDOMNode = node;
-    domTree.showSelectionOnKeyboardFocus = true;
-    domTree.preventTabOrder = true;
-    domTree.deindentSingleNode = true;
-    domTree.show(target, undefined, true);
+    render(
+        html`
+          <devtools-widget
+            ${widget(Elements.ElementsTreeOutline.DOMTreeWidget, {
+          omitRootDOMNode: false,
+          selectEnabled: true,
+          hideGutter: true,
+          rootDOMNode: node,
+          showSelectionOnKeyboardFocus: true,
+          preventTabOrder: true,
+          deindentSingleNode: true,
+        })}
+          ></devtools-widget>
+        `,
+        target,
+    );
   }
 }

package/front_end/panels/profiler/profiler.ts

@@ -3,6 +3,8 @@
 // found in the LICENSE file.
 
 import * as BottomUpProfileDataGrid from './BottomUpProfileDataGrid.js';
+import * as HeapDetachedElementsDataGrid from './HeapDetachedElementsDataGrid.js';
+import * as HeapDetachedElementsView from './HeapDetachedElementsView.js';
 import * as HeapProfilerPanel from './HeapProfilerPanel.js';
 import * as HeapProfileView from './HeapProfileView.js';
 import * as HeapSnapshotDataGrids from './HeapSnapshotDataGrids.js';
@@ -22,6 +24,8 @@ import * as WritableProfileHeader from './WritableProfileHeader.js';
 
 export {
   BottomUpProfileDataGrid,
+  HeapDetachedElementsDataGrid,
+  HeapDetachedElementsView,
   HeapProfilerPanel,
   HeapProfileView,
   HeapSnapshotDataGrids,

package/front_end/panels/recorder/RecorderPanel.ts

@@ -10,10 +10,10 @@ 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 Bindings from '../../models/bindings/bindings.js';
+import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as PublicExtensions from '../../models/extensions/extensions.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as PanelCommon from '../../panels/common/common.js';
-import * as Emulation from '../../panels/emulation/emulation.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Dialogs from '../../ui/components/dialogs/dialogs.js';
@@ -190,14 +190,6 @@ export const enum Pages {
   RECORDING_PAGE = 'RecordingPage',
 }
 
-const CONVERTER_ID_TO_METRIC: Record<string, Host.UserMetrics.RecordingExported|undefined> = {
-  [Models.ConverterIds.ConverterIds.JSON]: Host.UserMetrics.RecordingExported.TO_JSON,
-  [Models.ConverterIds.ConverterIds.REPLAY]: Host.UserMetrics.RecordingExported.TO_PUPPETEER_REPLAY,
-  [Models.ConverterIds.ConverterIds.PUPPETEER]: Host.UserMetrics.RecordingExported.TO_PUPPETEER,
-  [Models.ConverterIds.ConverterIds.PUPPETEER_FIREFOX]: Host.UserMetrics.RecordingExported.TO_PUPPETEER,
-  [Models.ConverterIds.ConverterIds.LIGHTHOUSE]: Host.UserMetrics.RecordingExported.TO_LIGHTHOUSE,
-};
-
 /** Provide some defaults to prevent OOM issues like crbug.com/491027421 */
 function verifyFlowSize(flow: Models.Schema.UserFlow): void {
   if (flow.steps.length > 4096) {
@@ -1248,9 +1240,9 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
 
   async #disableDeviceModeIfEnabled(): Promise<void> {
     try {
-      const deviceModeWrapper = Emulation.DeviceModeWrapper.DeviceModeWrapper.instance();
-      if (deviceModeWrapper.isDeviceModeOn()) {
-        deviceModeWrapper.toggleDeviceMode();
+      const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+      if (model.isDeviceModeOn()) {
+        model.toggleDeviceMode();
         const emulationModel = this.#getMainTarget().model(SDK.EmulationModel.EmulationModel);
         await emulationModel?.emulateDevice(null);
       }
@@ -1615,14 +1607,14 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
     }
     const id = event.itemValue;
     const byId = (converter: Converters.Converter.Converter): boolean => converter.getId() === id;
+    const isBuiltIn = this.#builtInConverters.some(byId);
     const converter = this.#builtInConverters.find(byId) || this.extensionConverters.find(byId);
     if (!converter) {
       throw new Error('No recording selected');
     }
     const [content] = await converter.stringify(this.currentRecording.flow);
     await this.#exportContent(converter.getFilename(this.currentRecording.flow), content);
-    const builtInMetric = CONVERTER_ID_TO_METRIC[converter.getId()];
-    if (builtInMetric) {
+    if (isBuiltIn) {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));
     } else if (converter.getId().startsWith(Converters.ExtensionConverter.EXTENSION_PREFIX)) {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -137,20 +137,20 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 function renderItemView(location: LocationDescription): LitTemplate {
   // clang-format off
   return html`
-    <div class="locations-list-item" role="row">
-      <div class="locations-list-text locations-list-title" role="cell">
+    <div class="locations-list-item">
+      <div class="locations-list-text locations-list-title">
         <div class="locations-list-title-text" title=${location.title}>${location.title}</div>
       </div>
       <div class="locations-list-separator"></div>
-      <div class="locations-list-text" role="cell">${location.lat}</div>
+      <div class="locations-list-text">${location.lat}</div>
       <div class="locations-list-separator"></div>
-      <div class="locations-list-text" role="cell">${location.long}</div>
+      <div class="locations-list-text">${location.long}</div>
       <div class="locations-list-separator"></div>
-      <div class="locations-list-text" role="cell">${location.timezoneId}</div>
+      <div class="locations-list-text">${location.timezoneId}</div>
       <div class="locations-list-separator"></div>
-      <div class="locations-list-text" role="cell">${location.locale}</div>
+      <div class="locations-list-text">${location.locale}</div>
       <div class="locations-list-separator"></div>
-      <div class="locations-list-text" role="cell">${
+      <div class="locations-list-text">${
           location.accuracy ?? SDK.EmulationModel.Location.DEFAULT_ACCURACY}</div>
     </div>`;
   // clang-format on

package/front_end/panels/settings/AISettingsTab.ts

@@ -224,6 +224,21 @@ const UIStrings = {
    * @description Text informing the user that AI assistance isn't available in Incognito mode or Guest mode.
    */
   notAvailableInIncognitoMode: 'AI assistance isn’t available in Incognito mode or Guest mode.',
+  /**
+   * @description Message shown to the user if the DevTools locale is not
+   * supported.
+   */
+  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings.',
+  /**
+   * @description Message shown to the user if the user's region is not
+   * supported.
+   */
+  geoRestricted: 'This feature is unavailable in your region.',
+  /**
+   * @description Message shown to the user if the enterprise policy does
+   * not allow this feature.
+   */
+  policyRestricted: 'This setting is managed by your administrator.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/AISettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -235,6 +250,7 @@ interface SettingItem {
 
 interface AiSettingParams {
   settingName: Platform.UIString.LocalizedString;
+  setting?: Common.Settings.Setting<boolean>;
   iconName: string;
   settingDescription: Platform.UIString.LocalizedString;
   enableSettingText: Common.UIString.LocalizedString;
@@ -250,9 +266,9 @@ interface AiSettingParams {
 interface ViewInput {
   disabledReasons: string[];
   sharedDisclaimerBulletPoints: Array<{icon: string, text: Common.UIString.LocalizedString|Lit.LitTemplate}>;
-  settingToParams: Map<Common.Settings.Setting<boolean>, AiSettingParams>;
-  expandSetting(setting: Common.Settings.Setting<boolean>): void;
-  toggleSetting(setting: Common.Settings.Setting<boolean>, ev: Event): void;
+  settingToParams: Map<string, AiSettingParams>;
+  expandSetting(settingName: string): void;
+  toggleSetting(settingName: string, ev: Event): void;
 }
 
 type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
@@ -297,18 +313,15 @@ export const AI_SETTINGS_TAB_DEFAULT_VIEW: View = (input, _output, target): void
 
   const isDisabled = input.disabledReasons.length > 0;
   const disabledReasonsJoined = input.disabledReasons.join('\n') || undefined;
-  const settings = Array.from(input.settingToParams.keys()).map(setting => {
-    const settingData = input.settingToParams.get(setting);
-    if (!settingData) {
-      return nothing;
-    }
+  const settings = Array.from(input.settingToParams.entries()).map(([settingName, settingData]) => {
+    const isChecked = settingData.setting ? Boolean(settingData.setting.get()) : false;
     const detailsClasses = {
       'whole-row': true,
       open: settingData.settingExpandState.isSettingExpanded,
     };
     const tabindex = settingData.settingExpandState.isSettingExpanded ? '0' : '-1';
     return html`
-      <div class="accordion-header" @click=${input.expandSetting.bind(this, setting)}>
+      <div class="accordion-header" @click=${input.expandSetting.bind(this, settingName)}>
         <div class="icon-container centered">
           <devtools-icon name=${settingData.iconName}></devtools-icon>
         </div>
@@ -334,15 +347,15 @@ export const AI_SETTINGS_TAB_DEFAULT_VIEW: View = (input, _output, target): void
       <div class="divider"></div>
       <div class="toggle-container centered"
         title=${ifDefined(disabledReasonsJoined)}
-        @click=${input.toggleSetting.bind(this, setting)}
+        @click=${settingData.setting ? input.toggleSetting.bind(this, settingName) : nothing}
       >
         <devtools-switch
-          .checked=${Boolean(setting.get()) && !isDisabled}
-          .jslogContext=${setting.name || ''}
-          .disabled=${isDisabled}
+          .checked=${isChecked && !isDisabled}
+          .jslogContext=${settingName}
+          .disabled=${isDisabled || !settingData.setting}
           .label=${disabledReasonsJoined || settingData.enableSettingText}
           data-testid=${settingData.enableSettingText}
-          @switchchange=${input.toggleSetting.bind(this, setting)}
+          @switchchange=${settingData.setting ? input.toggleSetting.bind(this, settingName) : nothing}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>
@@ -394,17 +407,18 @@ export class AISettingsTab extends UI.Widget.VBox {
       (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
   // Setting to parameters needed to display it in the UI.
   // To display a a setting, it needs to be added to this map.
-  #settingToParams = new Map<Common.Settings.Setting<boolean>, AiSettingParams>();
+  #settingToParams = new Map<string, AiSettingParams>();
 
   constructor(view?: View) {
     super();
     try {
-      this.#consoleInsightsSetting = Common.Settings.Settings.instance().moduleSetting('console-insights-enabled');
+      this.#consoleInsightsSetting =
+          Common.Settings.Settings.instance().moduleSetting<boolean>('console-insights-enabled');
     } catch {
       this.#consoleInsightsSetting = undefined;
     }
     try {
-      this.#aiAssistanceSetting = Common.Settings.Settings.instance().moduleSetting('ai-assistance-enabled');
+      this.#aiAssistanceSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('ai-assistance-enabled');
     } catch {
       this.#aiAssistanceSetting = undefined;
     }
@@ -425,6 +439,26 @@ export class AISettingsTab extends UI.Widget.VBox {
     this.#view = view ?? AI_SETTINGS_TAB_DEFAULT_VIEW;
   }
 
+  #mapSettingDisabledReasons(reasons: AiAssistanceModel.AiUtils.DisabledReason[]): Platform.UIString.LocalizedString[] {
+    const mappedReasons: Platform.UIString.LocalizedString[] = [];
+    for (const reason of reasons) {
+      switch (reason) {
+        case AiAssistanceModel.AiUtils.DisabledReason.GEO_RESTRICTED:
+          mappedReasons.push(i18nString(UIStrings.geoRestricted));
+          break;
+        case AiAssistanceModel.AiUtils.DisabledReason.POLICY_RESTRICTED:
+          mappedReasons.push(i18nString(UIStrings.policyRestricted));
+          break;
+        case AiAssistanceModel.AiUtils.DisabledReason.WRONG_LOCALE:
+          mappedReasons.push(i18nString(UIStrings.wrongLocale));
+          break;
+        case AiAssistanceModel.AiUtils.DisabledReason.NOT_SUPPORTED:
+          break;
+      }
+    }
+    return mappedReasons;
+  }
+
   #getDisabledReasons(): Platform.UIString.LocalizedString[] {
     const preconditions = AiAssistanceModel.AiUtils.getDisabledReasons(this.#aidaAvailability);
     const mappedReasons: Platform.UIString.LocalizedString[] = [];
@@ -447,8 +481,11 @@ export class AISettingsTab extends UI.Widget.VBox {
           Platform.assertNever(precondition, `Unknown precondition: ${precondition}`);
       }
     }
-    const settingDisabledReasons =
-        Common.Settings.Settings.instance().moduleSetting('ai-assistance-enabled').disabledReasons();
+    const availability =
+        AiAssistanceModel.AiUtils.aiAssistanceEnabledSettingDescriptor.isAvailable(Root.Runtime.hostConfig);
+    const settingDisabledReasons = availability.status === Common.Settings.SettingAvailability.DISABLED ?
+        this.#mapSettingDisabledReasons(availability.reason) :
+        [];
     return [...mappedReasons, ...settingDisabledReasons];
   }
 
@@ -488,6 +525,7 @@ export class AISettingsTab extends UI.Widget.VBox {
     if (this.#consoleInsightsSetting) {
       const consoleInsightsData: AiSettingParams = {
         settingName: i18n.i18n.lockedString('Console Insights'),
+        setting: this.#consoleInsightsSetting,
         iconName: 'lightbulb-spark',
         settingDescription: i18nString(UIStrings.helpUnderstandConsole),
         enableSettingText: i18nString(UIStrings.enableConsoleInsights),
@@ -510,13 +548,14 @@ export class AISettingsTab extends UI.Widget.VBox {
         },
       };
 
-      this.#settingToParams.set(this.#consoleInsightsSetting, consoleInsightsData);
+      this.#settingToParams.set('console-insights-enabled', consoleInsightsData);
     }
 
     if (this.#aiAssistanceSetting) {
       const aiAssistanceData: AiSettingParams = {
         settingName: i18n.i18n.lockedString(AiAssistanceModel.AiUtils.isGeminiBranding() ? 'Gemini in Chrome DevTools' :
                                                                                            'AI assistance'),
+        setting: this.#aiAssistanceSetting,
         iconName: AiAssistanceModel.AiUtils.getIconName(),
         settingDescription: this.#getAiAssistanceSettingDescription(),
         enableSettingText: i18nString(UIStrings.enableAiAssistance),
@@ -542,12 +581,13 @@ export class AISettingsTab extends UI.Widget.VBox {
         },
       };
 
-      this.#settingToParams.set(this.#aiAssistanceSetting, aiAssistanceData);
+      this.#settingToParams.set('ai-assistance-enabled', aiAssistanceData);
     }
 
     if (this.#aiAnnotationsSetting) {
       const aiAnnotationsData: AiSettingParams = {
         settingName: i18n.i18n.lockedString('Auto annotations'),
+        setting: this.#aiAnnotationsSetting,
         iconName: 'pen-spark',
         settingDescription: i18nString(UIStrings.aIAnnotationsFeatureDescription),
         enableSettingText: i18nString(UIStrings.enableAiSuggestedAnnotations),
@@ -569,7 +609,7 @@ export class AISettingsTab extends UI.Widget.VBox {
         },
       };
 
-      this.#settingToParams.set(this.#aiAnnotationsSetting, aiAnnotationsData);
+      this.#settingToParams.set('ai-annotations-enabled', aiAnnotationsData);
     }
 
     if (this.#aiCodeCompletionSetting) {
@@ -586,6 +626,7 @@ export class AISettingsTab extends UI.Widget.VBox {
 
       const aiCodeCompletionData: AiSettingParams = {
         settingName: i18n.i18n.lockedString('Code suggestions'),
+        setting: this.#aiCodeCompletionSetting,
         iconName: 'text-analysis',
         settingDescription: i18nString(UIStrings.helpUnderstandCodeSuggestions),
         enableSettingText: i18nString(UIStrings.enableAiCodeSuggestions),
@@ -605,7 +646,7 @@ export class AISettingsTab extends UI.Widget.VBox {
         },
       };
 
-      this.#settingToParams.set(this.#aiCodeCompletionSetting, aiCodeCompletionData);
+      this.#settingToParams.set('ai-code-completion-enabled', aiCodeCompletionData);
     }
   }
 
@@ -628,8 +669,8 @@ export class AISettingsTab extends UI.Widget.VBox {
     return i18nString(UIStrings.aiAssistanceWhenOnItem1);
   }
 
-  #expandSetting(setting: Common.Settings.Setting<boolean>): void {
-    const settingData = this.#settingToParams.get(setting);
+  #expandSetting(settingName: string): void {
+    const settingData = this.#settingToParams.get(settingName);
     if (!settingData) {
       return;
     }
@@ -637,18 +678,19 @@ export class AISettingsTab extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  #toggleSetting(setting: Common.Settings.Setting<boolean>, ev: Event): void {
+  #toggleSetting(settingName: string, ev: Event): void {
     // If the switch is being clicked, there is both a click- and a
     // change-event. Aborting on click avoids running this method twice.
     if (ev.target instanceof Switch.Switch.Switch && ev.type !== Switch.Switch.SwitchChangeEvent.eventName) {
       return;
     }
 
-    const settingData = this.#settingToParams.get(setting);
-    if (!settingData) {
+    const settingData = this.#settingToParams.get(settingName);
+    if (!settingData || !settingData.setting) {
       return;
     }
 
+    const setting = settingData.setting;
     const oldSettingValue = setting.get();
     setting.set(!oldSettingValue);
     if (!oldSettingValue && !settingData.settingExpandState.isSettingExpanded) {
@@ -656,7 +698,7 @@ export class AISettingsTab extends UI.Widget.VBox {
     }
 
     // Custom settings logic
-    if (setting.name === 'console-insights-enabled') {
+    if (settingName === 'console-insights-enabled') {
       if (oldSettingValue) {
         // If the user turns the feature off, we want them to go through the full onboarding flow should they later turn
         // the feature on again. We achieve this by resetting the onboardig setting.
@@ -669,14 +711,16 @@ export class AISettingsTab extends UI.Widget.VBox {
             .createSetting('console-insights-skip-reminder', true, Common.Settings.SettingStorageType.SESSION)
             .set(true);
       }
-    } else if (setting.name === 'ai-assistance-enabled') {
+    } else if (settingName === 'ai-assistance-enabled') {
       if (!setting.get()) {
         // If the "AI Assistance" is toggled off, we remove all the history entries related to the feature.
         void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteAll();
       }
 
       if (setting.get()) {
-        Common.Settings.Settings.instance().moduleSetting('ai-assistance-v2-opt-in-change-dialog-seen').set(true);
+        Common.Settings.Settings.instance()
+            .resolve(AiAssistanceModel.AiUtils.aiAssistanceV2OptInChangeDialogSeenSettingDescriptor)
+            .set(true);
       }
     }
     this.requestUpdate();