chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -1,7 +1,6 @@
 // Copyright 2018 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 */
 
 import '../../ui/kit/kit.js';
 
@@ -10,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import locationsSettingsTabStyles from './locationsSettingsTab.css.js';
@@ -114,31 +114,114 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sensors/LocationsSettingsTab.ts', UIStrings);
 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-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-separator"></div>
+      <div class="locations-list-text" role="cell">${location.long}</div>
+      <div class="locations-list-separator"></div>
+      <div class="locations-list-text" role="cell">${location.timezoneId}</div>
+      <div class="locations-list-separator"></div>
+      <div class="locations-list-text" role="cell">${location.locale}</div>
+      <div class="locations-list-separator"></div>
+      <div class="locations-list-text" role="cell">${
+          location.accuracy ?? SDK.EmulationModel.Location.DEFAULT_ACCURACY}</div>
+    </div>`;
+  // clang-format on
+}
+
+interface EditorInputControls {
+  titleInput: Element;
+  latInput: Element;
+  longInput: Element;
+  timezoneIdInput: Element;
+  localeInput: Element;
+  accuracyInput: Element;
+}
+
+function renderEditorView(controls: EditorInputControls): LitTemplate {
+  // clang-format off
+  return html`
+    <div class="locations-edit-row">
+      <div class="locations-list-text locations-list-title">${i18nString(UIStrings.locationName)}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text">${i18nString(UIStrings.lat)}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text">${i18nString(UIStrings.long)}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text">${i18nString(UIStrings.timezoneId)}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text">${i18nString(UIStrings.locale)}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text">${i18nString(UIStrings.accuracy)}</div>
+    </div>
+    <div class="locations-edit-row">
+      <div class="locations-list-text locations-list-title locations-input-container">${controls.titleInput}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text locations-input-container">${controls.latInput}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text locations-list-text-longitude locations-input-container">${controls.longInput}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text locations-input-container">${controls.timezoneIdInput}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text locations-input-container">${controls.localeInput}</div>
+      <div class="locations-list-separator locations-list-separator-invisible"></div>
+      <div class="locations-list-text locations-input-container">${controls.accuracyInput}</div>
+    </div>`;
+  // clang-format on
+}
+
+interface LocationsViewInput {
+  onAddLocation: () => void;
+}
+
+export type ViewOutput = undefined;
+
+export const DEFAULT_VIEW = (input: LocationsViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${locationsSettingsTabStyles}</style>
+    <div class="settings-card-container-wrapper">
+      <div class="settings-card-container">
+        <devtools-card .heading=${i18nString(UIStrings.locations)}>
+          <div class="list-container"></div>
+          <devtools-button
+            class="add-locations-button"
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            .iconName=${'plus'}
+            .jslogContext=${'emulation.add-location'}
+            @click=${input.onAddLocation}>
+            ${i18nString(UIStrings.addLocation)}
+          </devtools-button>
+        </devtools-card>
+      </div>
+    </div>`, target);
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
 export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidget.Delegate<LocationDescription> {
   private readonly list: UI.ListWidget.ListWidget<LocationDescription>;
   private readonly customSetting: Common.Settings.Setting<LocationDescription[]>;
   private editor?: UI.ListWidget.Editor<LocationDescription>;
+  #view: View;
 
-  constructor() {
-    super({
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {
       jslog: `${VisualLogging.pane('emulation-locations')}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(locationsSettingsTabStyles);
-
-    const settingsContent =
-        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
-    settingsContent.classList.add('settings-card-container');
-
-    const locationsCard = settingsContent.createChild('devtools-card');
-    locationsCard.heading = i18nString(UIStrings.locations);
-
-    const listContainer = locationsCard.createChild('div');
+    this.#view = view;
 
     this.list = new UI.ListWidget.ListWidget(this, undefined, true);
     this.list.element.classList.add('locations-list');
     this.list.registerRequiredCSS(locationsSettingsTabStyles);
-    this.list.show(listContainer);
     this.customSetting =
         Common.Settings.Settings.instance().moduleSetting<LocationDescription[]>('emulation.locations');
     const list =
@@ -165,17 +248,6 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
       return location;
     }
 
-    const addButton = new Buttons.Button.Button();
-    addButton.classList.add('add-locations-button');
-    addButton.data = {
-      variant: Buttons.Button.Variant.OUTLINED,
-      iconName: 'plus',
-      jslogContext: 'emulation.add-location',
-    };
-    addButton.textContent = i18nString(UIStrings.addLocation);
-    addButton.addEventListener('click', () => this.addButtonClicked());
-    locationsCard.append(addButton);
-
     this.customSetting.set(list);
     this.customSetting.addChangeListener(this.locationsUpdated, this);
   }
@@ -185,6 +257,17 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     this.locationsUpdated();
   }
 
+  override performUpdate(): void {
+    const viewInput = {
+      onAddLocation: () => this.addButtonClicked(),
+    };
+    this.#view(viewInput, undefined, this.contentElement as HTMLElement);
+
+    const listContainer = this.contentElement.querySelector('.list-container');
+    if (listContainer) {
+      this.list.show(listContainer);
+    }
+  }
   private locationsUpdated(): void {
     this.list.clear();
 
@@ -194,6 +277,7 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     }
 
     this.list.appendSeparator();
+    this.requestUpdate();
   }
 
   private addButtonClicked(): void {
@@ -203,39 +287,15 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
       long: 0,
       timezoneId: '',
       locale: '',
-      accuracy: SDK.EmulationModel.Location.DEFAULT_ACCURACY
+      accuracy: SDK.EmulationModel.Location.DEFAULT_ACCURACY,
     });
   }
 
   renderItem(location: LocationDescription, _editable: boolean): Element {
-    const element = document.createElement('div');
-    element.role = 'row';
-    element.classList.add('locations-list-item');
-    const title = element.createChild('div', 'locations-list-text locations-list-title');
-    title.role = 'cell';
-    const titleText = title.createChild('div', 'locations-list-title-text');
-    titleText.textContent = location.title;
-    UI.Tooltip.Tooltip.install(titleText, location.title);
-    element.createChild('div', 'locations-list-separator');
-    const lat = element.createChild('div', 'locations-list-text');
-    lat.textContent = String(location.lat);
-    lat.role = 'cell';
-    element.createChild('div', 'locations-list-separator');
-    const long = element.createChild('div', 'locations-list-text');
-    long.textContent = String(location.long);
-    long.role = 'cell';
-    element.createChild('div', 'locations-list-separator');
-    const timezoneId = element.createChild('div', 'locations-list-text');
-    timezoneId.textContent = location.timezoneId;
-    timezoneId.role = 'cell';
-    element.createChild('div', 'locations-list-separator');
-    const locale = element.createChild('div', 'locations-list-text');
-    locale.textContent = location.locale;
-    locale.role = 'cell';
-    element.createChild('div', 'locations-list-separator');
-    element.createChild('div', 'locations-list-text').textContent =
-        String(location.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY);
-    return element;
+    const fragment = document.createDocumentFragment();
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(renderItemView(location), fragment);
+    return fragment.firstElementChild as Element;
   }
 
   removeItemRequested(_item: LocationDescription, index: number): void {
@@ -271,7 +331,7 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     editor.control('long').value = String(location.long);
     editor.control('timezone-id').value = location.timezoneId;
     editor.control('locale').value = location.locale;
-    editor.control('accuracy').value = String(location.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY);
+    editor.control('accuracy').value = String(location.accuracy ?? SDK.EmulationModel.Location.DEFAULT_ACCURACY);
     return editor;
   }
 
@@ -284,196 +344,149 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     this.editor = editor;
     const content = editor.contentElement();
 
-    const titles = content.createChild('div', 'locations-edit-row');
-    titles.createChild('div', 'locations-list-text locations-list-title').textContent =
-        i18nString(UIStrings.locationName);
-    titles.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-    titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.lat);
-    titles.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-    titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.long);
-    titles.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-    titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.timezoneId);
-    titles.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-    titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.locale);
-    titles.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-    titles.createChild('div', 'locations-list-text').textContent = i18nString(UIStrings.accuracy);
-
-    const fields = content.createChild('div', 'locations-edit-row');
-    fields.createChild('div', 'locations-list-text locations-list-title locations-input-container')
-        .appendChild(editor.createInput('title', 'text', i18nString(UIStrings.locationName), titleValidator));
-    fields.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-
-    let cell = fields.createChild('div', 'locations-list-text locations-input-container');
-    cell.appendChild(editor.createInput('lat', 'text', i18nString(UIStrings.latitude), latValidator));
-    fields.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-
-    cell = fields.createChild('div', 'locations-list-text locations-list-text-longitude locations-input-container');
-    cell.appendChild(editor.createInput('long', 'text', i18nString(UIStrings.longitude), longValidator));
-    fields.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-
-    cell = fields.createChild('div', 'locations-list-text locations-input-container');
-    cell.appendChild(editor.createInput('timezone-id', 'text', i18nString(UIStrings.timezoneId), timezoneIdValidator));
-    fields.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-
-    cell = fields.createChild('div', 'locations-list-text locations-input-container');
-    cell.appendChild(editor.createInput('locale', 'text', i18nString(UIStrings.locale), localeValidator));
-    fields.createChild('div', 'locations-list-separator locations-list-separator-invisible');
-
-    cell = fields.createChild('div', 'locations-list-text locations-input-container');
-    cell.appendChild(editor.createInput('accuracy', 'text', i18nString(UIStrings.accuracy), accuracyValidator));
-
-    return editor;
-
-    function titleValidator(
-        _item: LocationDescription, _index: number, input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
-      const maxLength = 50;
-      const value = input.value.trim();
-
-      let errorMessage;
-      if (!value.length) {
-        errorMessage = i18nString(UIStrings.locationNameCannotBeEmpty);
-      } else if (value.length > maxLength) {
-        errorMessage = i18nString(UIStrings.locationNameMustBeLessThanS, {PH1: maxLength});
-      }
-
-      if (errorMessage) {
-        return {valid: false, errorMessage};
-      }
-      return {
-        valid: true,
-      };
-    }
-
-    function latValidator(
-        _item: LocationDescription, _index: number, input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
-      const minLat = -90;
-      const maxLat = 90;
-      const value = input.value.trim();
-      const parsedValue = Number(value);
-
-      if (!value) {
-        return {
-          valid: true,
+    const createValidator = (validator: (value: string) => string | null) =>
+        (_item: LocationDescription, _index: number,
+         input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult => {
+          const errorMessage = validator(input.value);
+          if (errorMessage) {
+            return {valid: false, errorMessage};
+          }
+          return {valid: true};
         };
-      }
 
-      let errorMessage;
-      if (Number.isNaN(parsedValue)) {
-        errorMessage = i18nString(UIStrings.latitudeMustBeANumber);
-      } else if (parseFloat(value) < minLat) {
-        errorMessage = i18nString(UIStrings.latitudeMustBeGreaterThanOrEqual, {PH1: minLat});
-      } else if (parseFloat(value) > maxLat) {
-        errorMessage = i18nString(UIStrings.latitudeMustBeLessThanOrEqualToS, {PH1: maxLat});
-      }
+    const titleInput =
+        editor.createInput('title', 'text', i18nString(UIStrings.locationName), createValidator(validateTitle));
+    const latInput =
+        editor.createInput('lat', 'text', i18nString(UIStrings.latitude), createValidator(validateLatitude));
+    const longInput =
+        editor.createInput('long', 'text', i18nString(UIStrings.longitude), createValidator(validateLongitude));
+    const timezoneIdInput = editor.createInput('timezone-id', 'text', i18nString(UIStrings.timezoneId),
+                                               createValidator(validateTimezoneId));
+    const localeInput =
+        editor.createInput('locale', 'text', i18nString(UIStrings.locale), createValidator(validateLocale));
+    const accuracyInput =
+        editor.createInput('accuracy', 'text', i18nString(UIStrings.accuracy), createValidator(validateAccuracy));
+
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(renderEditorView({
+             titleInput,
+             latInput,
+             longInput,
+             timezoneIdInput,
+             localeInput,
+             accuracyInput,
+           }),
+           content as HTMLElement);
 
-      if (errorMessage) {
-        return {valid: false, errorMessage};
-      }
-      return {
-        valid: true,
-      };
-    }
+    return editor;
+  }
+}
+export interface LocationDescription {
+  title: string;
+  lat: number;
+  long: number;
+  timezoneId: string;
+  locale: string;
+  accuracy?: number;
+}
 
-    function longValidator(
-        _item: LocationDescription, _index: number, input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
-      const minLong = -180;
-      const maxLong = 180;
-      const value = input.value.trim();
-      const parsedValue = Number(value);
+export function validateTitle(value: string): string|null {
+  const maxLength = 50;
+  const trimmedValue = value.trim();
 
-      if (!value) {
-        return {
-          valid: true,
-        };
-      }
+  if (!trimmedValue.length) {
+    return i18nString(UIStrings.locationNameCannotBeEmpty);
+  }
+  if (trimmedValue.length > maxLength) {
+    return i18nString(UIStrings.locationNameMustBeLessThanS, {PH1: maxLength});
+  }
+  return null;
+}
 
-      let errorMessage;
-      if (Number.isNaN(parsedValue)) {
-        errorMessage = i18nString(UIStrings.longitudeMustBeANumber);
-      } else if (parseFloat(value) < minLong) {
-        errorMessage = i18nString(UIStrings.longitudeMustBeGreaterThanOr, {PH1: minLong});
-      } else if (parseFloat(value) > maxLong) {
-        errorMessage = i18nString(UIStrings.longitudeMustBeLessThanOrEqualTo, {PH1: maxLong});
-      }
+export function validateLatitude(value: string): string|null {
+  const minLat = -90;
+  const maxLat = 90;
+  const trimmedValue = value.trim();
+  const parsedValue = Number(trimmedValue);
 
-      if (errorMessage) {
-        return {valid: false, errorMessage};
-      }
-      return {
-        valid: true,
-      };
-    }
+  if (!trimmedValue) {
+    return null;
+  }
+  if (Number.isNaN(parsedValue)) {
+    return i18nString(UIStrings.latitudeMustBeANumber);
+  }
+  if (parsedValue < minLat) {
+    return i18nString(UIStrings.latitudeMustBeGreaterThanOrEqual, {PH1: minLat});
+  }
+  if (parsedValue > maxLat) {
+    return i18nString(UIStrings.latitudeMustBeLessThanOrEqualToS, {PH1: maxLat});
+  }
+  return null;
+}
 
-    function timezoneIdValidator(
-        _item: LocationDescription, _index: number, input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
-      const value = input.value.trim();
-      // Chromium uses ICU's timezone implementation, which is very
-      // liberal in what it accepts. ICU does not simply use an allowlist
-      // but instead tries to make sense of the input, even for
-      // weird-looking timezone IDs. There's not much point in validating
-      // the input other than checking if it contains at least one
-      // alphabetic character. The empty string resets the override,
-      // and is accepted as well.
-      if (value === '' || /[a-zA-Z]/.test(value)) {
-        return {
-          valid: true,
-        };
-      }
-      const errorMessage = i18nString(UIStrings.timezoneIdMustContainAlphabetic);
-      return {valid: false, errorMessage};
-    }
+export function validateLongitude(value: string): string|null {
+  const minLong = -180;
+  const maxLong = 180;
+  const trimmedValue = value.trim();
+  const parsedValue = Number(trimmedValue);
 
-    function localeValidator(
-        _item: LocationDescription, _index: number, input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
-      const value = input.value.trim();
-      // Similarly to timezone IDs, there's not much point in validating
-      // input locales other than checking if it contains at least two
-      // alphabetic characters.
-      // https://unicode.org/reports/tr35/#Unicode_language_identifier
-      // The empty string resets the override, and is accepted as
-      // well.
-      if (value === '' || /[a-zA-Z]{2}/.test(value)) {
-        return {
-          valid: true,
-        };
-      }
-      const errorMessage = i18nString(UIStrings.localeMustContainAlphabetic);
-      return {valid: false, errorMessage};
-    }
+  if (!trimmedValue) {
+    return null;
+  }
+  if (Number.isNaN(parsedValue)) {
+    return i18nString(UIStrings.longitudeMustBeANumber);
+  }
+  if (parsedValue < minLong) {
+    return i18nString(UIStrings.longitudeMustBeGreaterThanOr, {PH1: minLong});
+  }
+  if (parsedValue > maxLong) {
+    return i18nString(UIStrings.longitudeMustBeLessThanOrEqualTo, {PH1: maxLong});
+  }
+  return null;
+}
 
-    function accuracyValidator(
-        _item: LocationDescription, _index: number, input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
-      const minAccuracy = 0;
-      const value = input.value.trim();
-      const parsedValue = Number(value);
+export function validateTimezoneId(value: string): string|null {
+  const trimmedValue = value.trim();
+  // Chromium uses ICU's timezone implementation, which is very
+  // liberal in what it accepts. ICU does not simply use an allowlist
+  // but instead tries to make sense of the input, even for
+  // weird-looking timezone IDs. There's not much point in validating
+  // the input other than checking if it contains at least one
+  // alphabetic character. The empty string resets the override,
+  // and is accepted as well.
+  if (trimmedValue === '' || /[a-zA-Z]/.test(trimmedValue)) {
+    return null;
+  }
+  return i18nString(UIStrings.timezoneIdMustContainAlphabetic);
+}
 
-      if (!value) {
-        return {
-          valid: true,
-        };
-      }
+export function validateLocale(value: string): string|null {
+  const trimmedValue = value.trim();
+  // Similarly to timezone IDs, there's not much point in validating
+  // input locales other than checking if it contains at least two
+  // alphabetic characters.
+  // https://unicode.org/reports/tr35/#Unicode_language_identifier
+  // The empty string resets the override, and is accepted as
+  // well.
+  if (trimmedValue === '' || /[a-zA-Z]{2}/.test(trimmedValue)) {
+    return null;
+  }
+  return i18nString(UIStrings.localeMustContainAlphabetic);
+}
 
-      let errorMessage;
-      if (Number.isNaN(parsedValue)) {
-        errorMessage = i18nString(UIStrings.accuracyMustBeANumber);
-      } else if (parseFloat(value) < minAccuracy) {
-        errorMessage = i18nString(UIStrings.accuracyMustBeGreaterThanOrEqual, {PH1: minAccuracy});
-      }
+export function validateAccuracy(value: string): string|null {
+  const minAccuracy = 0;
+  const trimmedValue = value.trim();
+  const parsedValue = Number(trimmedValue);
 
-      if (errorMessage) {
-        return {valid: false, errorMessage};
-      }
-      return {
-        valid: true,
-      };
-    }
+  if (!trimmedValue) {
+    return null;
   }
-}
-export interface LocationDescription {
-  title: string;
-  lat: number;
-  long: number;
-  timezoneId: string;
-  locale: string;
-  accuracy?: number;
+  if (Number.isNaN(parsedValue)) {
+    return i18nString(UIStrings.accuracyMustBeANumber);
+  }
+  if (parsedValue < minAccuracy) {
+    return i18nString(UIStrings.accuracyMustBeGreaterThanOrEqual, {PH1: minAccuracy});
+  }
+  return null;
 }

package/front_end/panels/sensors/SensorsView.ts

@@ -711,7 +711,7 @@ export class SensorsView extends UI.Widget.VBox {
           </div>
         </div>
       `,
-      orientationGroup
+      orientationGroup,
     );
     // clang-format on
 

package/front_end/panels/settings/AISettingsTab.ts

@@ -327,7 +327,7 @@ export const AI_SETTINGS_TAB_DEFAULT_VIEW: View = (input, _output, target): void
       <div class="disclaimer-list">
         ${input.sharedDisclaimerBulletPoints.map(item =>
           html`<div><devtools-icon .name=${item.icon} class="medium"></devtools-icon>
-              </div><div>${item.text}</div>`
+              </div><div>${item.text}</div>`,
         )}
       </div>
     </div>
@@ -537,12 +537,12 @@ export class AISettingsTab extends UI.Widget.VBox {
         enableSettingText: i18nString(UIStrings.enableConsoleInsights),
         settingItems: [
           {iconName: 'lightbulb', text: i18nString(UIStrings.explainConsole)},
-          {iconName: 'code', text: i18nString(UIStrings.receiveSuggestions)}
+          {iconName: 'code', text: i18nString(UIStrings.receiveSuggestions)},
         ],
         toConsiderSettingItems: [{
           iconName: 'google',
           text: noLogging ? i18nString(UIStrings.consoleInsightsSendsDataNoLogging) :
-                            i18nString(UIStrings.consoleInsightsSendsData)
+                            i18nString(UIStrings.consoleInsightsSendsData),
         }],
         learnMoreLink: {
           url: 'https://developer.chrome.com/docs/devtools/console/understand-messages',
@@ -605,11 +605,11 @@ export class AISettingsTab extends UI.Widget.VBox {
         toConsiderSettingItems: [{
           iconName: 'google',
           text: noLogging ? i18nString(UIStrings.generatedAiAnnotationsSendDataNoLogging) :
-                            i18nString(UIStrings.generatedAiAnnotationsSendData)
+                            i18nString(UIStrings.generatedAiAnnotationsSendData),
         }],
         learnMoreLink: {
           url: 'https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations',
-          linkJSLogContext: 'learn-more.auto-annotations'
+          linkJSLogContext: 'learn-more.auto-annotations',
         },
         settingExpandState: {
           isSettingExpanded: false,
@@ -623,11 +623,12 @@ export class AISettingsTab extends UI.Widget.VBox {
     if (this.#aiCodeCompletionSetting) {
       const settingItems = Root.Runtime.hostConfig.devToolsAiCodeGeneration?.enabled ?
           [
-            {iconName: 'code', text: i18nString(UIStrings.asYouTypeRelevantDataIsBeingSentToGoogle)}, {
+            {iconName: 'code', text: i18nString(UIStrings.asYouTypeRelevantDataIsBeingSentToGoogle)},
+            {
               iconName: 'text-analysis',
               text: Host.Platform.isMac() ? i18nString(UIStrings.describeCodeInCommentForMacOs) :
-                                            i18nString(UIStrings.describeCodeInComment)
-            }
+                                            i18nString(UIStrings.describeCodeInComment),
+            },
           ] :
           [{iconName: 'code', text: i18nString(UIStrings.asYouTypeCodeSuggestions)}];
 
@@ -640,11 +641,11 @@ export class AISettingsTab extends UI.Widget.VBox {
         toConsiderSettingItems: [{
           iconName: 'google',
           text: noLogging ? i18nString(UIStrings.codeSuggestionsSendDataNoLogging) :
-                            i18nString(UIStrings.codeSuggestionsSendData)
+                            i18nString(UIStrings.codeSuggestionsSendData),
         }],
         learnMoreLink: {
           url: ' https://developers.chrome.com/docs/devtools/ai-assistance/code-completion',
-          linkJSLogContext: 'learn-more.code-completion'
+          linkJSLogContext: 'learn-more.code-completion',
         },
         settingExpandState: {
           isSettingExpanded: false,