chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -129,7 +129,7 @@ export class CSSOverviewSidebarPanel extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  #select(id: string, shouldFocus = false): Promise<boolean> {
+  #select(id: string, shouldFocus = false): Promise<void> {
     this.#selectedId = id;
     this.requestUpdate();
     this.#onItemSelected(id, shouldFocus);

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -17,7 +17,7 @@ import {DeveloperResourcesListView} from './DeveloperResourcesListView.js';
 import developerResourcesViewStyles from './developerResourcesView.css.js';
 
 const {widgetConfig} = UI.Widget;
-const {bindToSetting} = UI.SettingsUI;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -12,7 +12,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import elementStatePaneWidgetStyles from './elementStatePaneWidget.css.js';
 
-const {bindToSetting} = UI.SettingsUI;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/elements/EventListenersWidget.ts

@@ -39,8 +39,7 @@ import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as EventListeners from '../event_listeners/event_listeners.js';
 
-const {bindToSetting} = UI.SettingsUI;
-const {bindToAction} = UI.UIUtils;
+const {bindToAction, bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/elements/PropertiesWidget.ts

@@ -47,7 +47,7 @@ import propertiesWidgetStyles from './propertiesWidget.css.js';
 
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
-const {bindToSetting} = UI.SettingsUI;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/network/NetworkConfigView.ts

@@ -8,6 +8,7 @@ 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 Protocol from '../../generated/protocol.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -208,7 +209,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
 
   private createCacheSection(): void {
     const section = this.createSection(i18nString(UIStrings.caching), 'network-config-disable-cache');
-    section.appendChild(UI.SettingsUI.createSettingCheckbox(
+    section.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.disableCache), Common.Settings.Settings.instance().moduleSetting('cache-disabled')));
   }
 

package/front_end/panels/network/NetworkPanel.ts

@@ -48,6 +48,7 @@ import type * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -259,17 +260,17 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
     const settingsPane = panel.contentElement.createChild('div', 'network-settings-pane');
     settingsPane.append(
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.useLargeRequestRows), this.networkLogLargeRowsSetting,
             i18nString(UIStrings.showMoreInformationInRequestRows)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.groupByFrame),
             Common.Settings.Settings.instance().moduleSetting('network.group-by-frame'),
             i18nString(UIStrings.groupRequestsByTopLevelRequest)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.showOverview), this.networkLogShowOverviewSetting,
             i18nString(UIStrings.showOverviewOfNetworkRequests)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.captureScreenshots), this.networkRecordFilmStripSetting,
             i18nString(UIStrings.captureScreenshotsWhenLoadingA)),
 

package/front_end/panels/network/RequestCookiesView.ts

@@ -10,6 +10,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -104,7 +105,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
     titleText.textContent = i18nString(UIStrings.requestCookies);
     UI.Tooltip.Tooltip.install(titleText, i18nString(UIStrings.cookiesThatWereSentToTheServerIn));
 
-    const requestCookiesCheckbox = UI.SettingsUI.createSettingCheckbox(
+    const requestCookiesCheckbox = SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.showFilteredOutRequestCookies), this.showFilteredOutCookiesSetting);
     requestCookiesCheckbox.addEventListener('change', () => {
       this.refreshRequestCookiesView();

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -16,6 +16,7 @@ import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapsh
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -1339,7 +1340,7 @@ export class HeapSnapshotProfileType extends
     const showOptionToExposeInternalsInHeapSnapshot =
         Root.Runtime.experiments.isEnabled('show-option-tp-expose-internals-in-heap-snapshot');
     const exposeInternalsInHeapSnapshotCheckbox =
-        UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
     this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
     return showOptionToExposeInternalsInHeapSnapshot ? exposeInternalsInHeapSnapshotCheckbox : null;
   }
@@ -1549,7 +1550,7 @@ export class TrackingHeapSnapshotProfileType extends
   }
 
   override customContent(): Element|null {
-    const checkboxSetting = UI.SettingsUI.createSettingCheckbox(
+    const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
     this.customContentInternal = (checkboxSetting);
     return checkboxSetting;

package/front_end/panels/recorder/RecorderController.ts

@@ -1072,7 +1072,7 @@ export class RecorderController extends LitElement {
         } else if (this.currentPage === Pages.CREATE_RECORDING_PAGE) {
           if (this.#createRecordingView) {
             this.#shortcutHelper.handleShortcut(() => {
-              this.#createRecordingView?.triggerFormSubmission();
+              this.#createRecordingView?.startRecording();
             });
           }
         } else if (this.isRecording) {
@@ -1242,7 +1242,6 @@ export class RecorderController extends LitElement {
         class="recording-view"
         .widgetConfig=${UI.Widget.widgetConfig(Components.CreateRecordingView.CreateRecordingView, {
           recorderSettings: this.#recorderSettings,
-          defaultRecordingName: this.#recorderSettings.defaultTitle,
           onRecordingStarted: this.#onRecordingStarted.bind(this),
           onRecordingCancelled: this.onRecordingCancelled.bind(this),
         })}

package/front_end/panels/recorder/components/CreateRecordingView.ts

@@ -17,7 +17,7 @@ import * as Actions from '../recorder-actions/recorder-actions.js';
 
 import createRecordingViewStyles from './createRecordingView.css.js';
 
-const {html, Directives: {ifDefined, ref, createRef}} = Lit;
+const {html, Directives: {ref, createRef, repeat}} = Lit;
 
 const UIStrings = {
   /**
@@ -103,91 +103,74 @@ const str_ = i18n.i18n.registerUIStrings(
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
-  defaultRecordingName: string;
-  recorderSettings?: Models.RecorderSettings.RecorderSettings;
+  name: string;
+  selectorAttribute: string;
+  selectorTypes: Array<{
+    selectorType: Models.Schema.SelectorType,
+    checked: boolean,
+  }>;
   error?: Error;
-  startRecording: (name: string, selectorTypes: Models.Schema.SelectorType[], selectorAttribute?: string) => void;
+  onRecordingStarted: () => void;
   onRecordingCancelled: () => void;
-  resetError: () => void;
+  onErrorReset: () => void;
+  onUpdate: (update: {
+    selectorType: Models.Schema.SelectorType,
+    checked: boolean,
+  }|{
+    name: string,
+  }|{
+    selectorAttribute: string,
+  }) => void;
 }
 
 export interface ViewOutput {
   focusInput?: () => void;
-  triggerFormSubmission?: () => void;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const {defaultRecordingName, recorderSettings, error, startRecording, onRecordingCancelled, resetError} = input;
-
-  // TODO(crbug.com/455531160): move state from input elements into the presenter widget.
-  const selectorTypeToLabel = new Map([
-    [Models.Schema.SelectorType.ARIA, i18nString(UIStrings.selectorTypeARIA)],
-    [Models.Schema.SelectorType.CSS, i18nString(UIStrings.selectorTypeCSS)],
-    [Models.Schema.SelectorType.Text, i18nString(UIStrings.selectorTypeText)],
-    [
-      Models.Schema.SelectorType.XPath,
-      i18nString(UIStrings.selectorTypeXPath),
-    ],
-    [
-      Models.Schema.SelectorType.Pierce,
-      i18nString(UIStrings.selectorTypePierce),
-    ],
-  ]);
-  function getSelectorTypes(): Models.Schema.SelectorType[] {
-    const selectorTypeElements = target.querySelectorAll(
-        '.selector-type input[type=checkbox]',
-    );
-    const selectorTypesToRecord: Models.Schema.SelectorType[] = [];
-    for (const selectorType of selectorTypeElements) {
-      const checkbox = selectorType as HTMLInputElement;
-      const checkboxValue = checkbox.value as Models.Schema.SelectorType;
-      if (checkbox.checked) {
-        selectorTypesToRecord.push(checkboxValue);
-      }
-    }
-    return selectorTypesToRecord;
-  }
-
-  const selectorAttributeInputRef = createRef<HTMLInputElement>();
-
-  function getSelectorAttribute(): string|undefined {
-    const selectorAttribute = selectorAttributeInputRef.value?.value.trim();
-    if (!selectorAttribute) {
-      return undefined;
-    }
-    return selectorAttribute;
-  }
+  const {
+    name,
+    selectorAttribute,
+    selectorTypes,
+    error,
+    onUpdate,
+    onRecordingStarted,
+    onRecordingCancelled,
+    onErrorReset
+  } = input;
 
   const nameInputRef = createRef<HTMLInputElement>();
 
-  function handleStartRecording(): void {
-    startRecording(nameInputRef.value?.value ?? '', getSelectorTypes(), getSelectorAttribute());
-  }
-
   const onKeyDown = (event: KeyboardEvent): void => {
     if (error) {
-      resetError();
+      onErrorReset();
     }
 
     const keyboardEvent = event;
     if (keyboardEvent.key === 'Enter') {
-      handleStartRecording();
+      onRecordingStarted();
       event.stopPropagation();
       event.preventDefault();
     }
   };
 
-  const onInputFocus = (): void => {
-    nameInputRef.value?.select();
-  };
-
   output.focusInput = () => {
     nameInputRef.value?.focus();
   };
 
-  output.triggerFormSubmission = () => {
-    handleStartRecording();
-  };
+  const selectorTypeToLabel = new Map([
+    [Models.Schema.SelectorType.ARIA, i18nString(UIStrings.selectorTypeARIA)],
+    [Models.Schema.SelectorType.CSS, i18nString(UIStrings.selectorTypeCSS)],
+    [Models.Schema.SelectorType.Text, i18nString(UIStrings.selectorTypeText)],
+    [
+      Models.Schema.SelectorType.XPath,
+      i18nString(UIStrings.selectorTypeXPath),
+    ],
+    [
+      Models.Schema.SelectorType.Pierce,
+      i18nString(UIStrings.selectorTypePierce),
+    ],
+  ]);
 
   // clang-format off
   Lit.render(
@@ -215,13 +198,16 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           UIStrings.recordingName,
         )}</label>
         <input
-          value=${defaultRecordingName}
-          @focus=${onInputFocus}
+          value=${name}
+          @focus=${() => nameInputRef.value?.select()}
           @keydown=${onKeyDown}
           jslog=${VisualLogging.textField('user-flow-name').track({change: true})}
           class="devtools-text-input"
           id="user-flow-name"
           ${ref(nameInputRef)}
+          @input=${(e:Event) => onUpdate({
+            name: (e.target as HTMLInputElement).value.trim()
+          })}
         />
         <label class="row-label" for="selector-attribute">
           <span>${i18nString(UIStrings.selectorAttribute)}</span>
@@ -234,13 +220,15 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           </x-link>
         </label>
         <input
-          value=${ifDefined(recorderSettings?.selectorAttribute)}
+          value=${selectorAttribute}
           placeholder="data-testid"
           @keydown=${onKeyDown}
           jslog=${VisualLogging.textField('selector-attribute').track({change: true})}
           class="devtools-text-input"
           id="selector-attribute"
-          ${ref(selectorAttributeInputRef)}
+          @input=${(e:Event) => onUpdate({
+            selectorAttribute: (e.target as HTMLInputElement).value.trim()
+          })}
         />
         <label class="row-label">
           <span>${i18nString(UIStrings.selectorTypes)}</span>
@@ -253,37 +241,34 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           </x-link>
         </label>
         <div class="checkbox-container">
-          ${Object.values(Models.Schema.SelectorType).map(selectorType => {
-            const checked =
-              recorderSettings?.getSelectorByType(selectorType);
+          ${repeat(selectorTypes, item => {
             return html`
-                <label class="checkbox-label selector-type">
-                  <input
-                    @keydown=${onKeyDown}
-                    .value=${selectorType}
-                    jslog=${VisualLogging.toggle().track({click: true}).context(`selector-${selectorType}`)}
-                    ?checked=${checked}
-                    type="checkbox"
-                  />
-                  ${selectorTypeToLabel.get(selectorType) || selectorType}
-                </label>
-              `;
+              <label class="checkbox-label selector-type">
+                <input
+                  @keydown=${onKeyDown}
+                  .value=${item.selectorType}
+                  jslog=${VisualLogging.toggle().track({click: true}).context(`selector-${item.selectorType}`)}
+                  ?checked=${item.checked}
+                  type="checkbox"
+                  @change=${(e:Event) => onUpdate({
+                    selectorType: item.selectorType,
+                    checked: (e.target as HTMLInputElement).checked
+                  })}
+                />
+                ${selectorTypeToLabel.get(item.selectorType) || item.selectorType}
+              </label>
+            `;
           })}
         </div>
-
         ${
           error &&
-          html`
-        <div class="error" role="alert">
-          ${error.message}
-        </div>
-      `
+          html` <div class="error" role="alert"> ${error.message} </div>`
         }
       </div>
       <div class="footer">
         <div class="controls">
           <devtools-control-button
-            @click=${handleStartRecording}
+            @click=${onRecordingStarted}
             .label=${i18nString(UIStrings.startRecording)}
             .shape=${'circle'}
             jslog=${VisualLogging.action(Actions.RecorderActions.START_RECORDING).track({click: true})}
@@ -302,15 +287,33 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
 
 export class CreateRecordingView extends UI.Widget.Widget {
   #error?: Error;
+  #name = '';
+  #selectorAttribute = '';
+  #selectorTypes: Array<{
+    selectorType: Models.Schema.SelectorType,
+    checked: boolean,
+  }> = [];
   #view: typeof DEFAULT_VIEW;
   #output: ViewOutput = {};
+  #recorderSettings?: Models.RecorderSettings.RecorderSettings;
 
   onRecordingStarted:
       (data: {name: string, selectorTypesToRecord: Models.Schema.SelectorType[], selectorAttribute?: string}) => void =
           () => {};
   onRecordingCancelled = (): void => {};
-  recorderSettings?: Models.RecorderSettings.RecorderSettings;
-  defaultRecordingName = '';
+
+  set recorderSettings(value: Models.RecorderSettings.RecorderSettings) {
+    this.#recorderSettings = value;
+    this.#name = this.#recorderSettings.defaultTitle;
+    this.#selectorAttribute = this.#recorderSettings.selectorAttribute;
+    this.#selectorTypes = Object.values(Models.Schema.SelectorType).map(selectorType => {
+      return {
+        selectorType,
+        checked: this.#recorderSettings?.getSelectorByType(selectorType) ?? true,
+      };
+    }),
+    this.requestUpdate();
+  }
 
   constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -323,57 +326,78 @@ export class CreateRecordingView extends UI.Widget.Widget {
     void this.updateComplete.then(() => this.#output.focusInput?.());
   }
 
-  triggerFormSubmission(): void {
-    this.#output.triggerFormSubmission?.();
+  startRecording(): void {
+    if (!this.#recorderSettings) {
+      throw new Error('settings not set');
+    }
+
+    if (!this.#name.trim()) {
+      this.#error = new Error(i18nString(UIStrings.recordingNameIsRequired));
+      this.requestUpdate();
+      return;
+    }
+
+    const selectorTypesToRecord = this.#selectorTypes.filter(item => item.checked).map(item => item.selectorType);
+
+    if (!selectorTypesToRecord.includes(Models.Schema.SelectorType.CSS) &&
+        !selectorTypesToRecord.includes(Models.Schema.SelectorType.XPath) &&
+        !selectorTypesToRecord.includes(Models.Schema.SelectorType.Pierce)) {
+      this.#error = new Error(i18nString(UIStrings.includeNecessarySelectors));
+      this.requestUpdate();
+      return;
+    }
+
+    for (const selectorType of Object.values(Models.Schema.SelectorType)) {
+      this.#recorderSettings.setSelectorByType(
+          selectorType,
+          selectorTypesToRecord.includes(selectorType),
+      );
+    }
+
+    const selectorAttribute = this.#selectorAttribute.trim();
+    if (selectorAttribute) {
+      this.#recorderSettings.selectorAttribute = selectorAttribute;
+    }
+
+    this.onRecordingStarted({
+      name: this.#name,
+      selectorTypesToRecord,
+      selectorAttribute: this.#selectorAttribute ? this.#selectorAttribute : undefined,
+    });
+
+    Badges.UserBadges.instance().recordAction(Badges.BadgeAction.RECORDER_RECORDING_STARTED);
   }
 
   override performUpdate(): void {
     this.#view(
         {
-          defaultRecordingName: this.defaultRecordingName,
-          recorderSettings: this.recorderSettings,
+          name: this.#name,
+          selectorAttribute: this.#selectorAttribute,
+          selectorTypes: this.#selectorTypes,
           error: this.#error,
           onRecordingCancelled: this.onRecordingCancelled,
-          startRecording:
-              (name: string, selectorTypesToRecord: Models.Schema.SelectorType[], selectorAttribute?: string): void => {
-                if (!this.recorderSettings) {
-                  throw new Error('settings not set');
-                }
-
-                if (!name.trim()) {
-                  this.#error = new Error(i18nString(UIStrings.recordingNameIsRequired));
-                  this.requestUpdate();
-                  return;
-                }
-
-                if (!selectorTypesToRecord.includes(Models.Schema.SelectorType.CSS) &&
-                    !selectorTypesToRecord.includes(Models.Schema.SelectorType.XPath) &&
-                    !selectorTypesToRecord.includes(Models.Schema.SelectorType.Pierce)) {
-                  this.#error = new Error(i18nString(UIStrings.includeNecessarySelectors));
-                  this.requestUpdate();
-                  return;
-                }
-
-                for (const selectorType of Object.values(Models.Schema.SelectorType)) {
-                  this.recorderSettings.setSelectorByType(
-                      selectorType,
-                      selectorTypesToRecord.includes(selectorType),
-                  );
+          onUpdate: update => {
+            if ('name' in update) {
+              this.#name = update.name;
+            } else if ('selectorAttribute' in update) {
+              this.#selectorAttribute = update.selectorAttribute;
+            } else {
+              this.#selectorTypes = this.#selectorTypes.map(item => {
+                if (item.selectorType === update.selectorType) {
+                  return {
+                    ...item,
+                    checked: update.checked,
+                  };
                 }
-
-                if (selectorAttribute) {
-                  this.recorderSettings.selectorAttribute = selectorAttribute;
-                }
-
-                this.onRecordingStarted({
-                  name,
-                  selectorTypesToRecord,
-                  selectorAttribute,
-                });
-
-                Badges.UserBadges.instance().recordAction(Badges.BadgeAction.RECORDER_RECORDING_STARTED);
-              },
-          resetError: () => {
+                return item;
+              });
+            }
+            this.requestUpdate();
+          },
+          onRecordingStarted: (): void => {
+            this.startRecording();
+          },
+          onErrorReset: () => {
             this.#error = undefined;
             this.requestUpdate();
           },

package/front_end/panels/sensors/SensorsView.ts

@@ -8,6 +8,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -549,7 +550,7 @@ export class SensorsView extends UI.Widget.VBox {
 
   private createPressureSection(): void {
     const container = this.contentElement.createChild('div', 'pressure-section');
-    const control = UI.SettingsUI.createControlForSetting(
+    const control = SettingsUI.SettingsUI.createControlForSetting(
         Common.Settings.Settings.instance().moduleSetting('emulation.cpu-pressure'),
         i18nString(UIStrings.forcesSelectedPressureStateEmulation));
 
@@ -798,7 +799,7 @@ export class SensorsView extends UI.Widget.VBox {
 
   private appendTouchControl(): void {
     const container = this.contentElement.createChild('div', 'touch-section');
-    const control = UI.SettingsUI.createControlForSetting(
+    const control = SettingsUI.SettingsUI.createControlForSetting(
         Common.Settings.Settings.instance().moduleSetting('emulation.touch'),
         i18nString(UIStrings.forcesTouchInsteadOfClick));
 
@@ -809,7 +810,7 @@ export class SensorsView extends UI.Widget.VBox {
 
   private appendIdleEmulator(): void {
     const container = this.contentElement.createChild('div', 'idle-section');
-    const control = UI.SettingsUI.createControlForSetting(
+    const control = SettingsUI.SettingsUI.createControlForSetting(
         Common.Settings.Settings.instance().moduleSetting('emulation.idle-detection'),
         i18nString(UIStrings.forcesSelectedIdleStateEmulation));