chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/security/SecurityPanel.ts

@@ -11,12 +11,14 @@ import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {CookieReportView} from './CookieReportView.js';
 import lockIconStyles from './lockIcon.css.js';
 import mainViewStyles from './mainView.css.js';
+import {ShowOriginEvent} from './OriginTreeElement.js';
 import originViewStyles from './originView.css.js';
-import {SecurityAndPrivacyPanelSidebar} from './SecurityAndPrivacyPanelSidebar.js';
 import {
   Events,
   type PageVisibleSecurityState,
@@ -25,6 +27,7 @@ import {
   SecurityStyleExplanation,
   SummaryMessages,
 } from './SecurityModel.js';
+import {SecurityPanelSidebar} from './SecurityPanelSidebar.js';
 
 const UIStrings = {
   /**
@@ -527,25 +530,69 @@ export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, secur
   return highlightedUrl;
 }
 
-export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
-    SDK.TargetManager.SDKModelObserver<SecurityModel> {
-  readonly mainView: SecurityMainView;
-  readonly sidebar: SecurityAndPrivacyPanelSidebar;
+const {render, html} = LitHtml;
+export type ViewInput = {
+  panel: SecurityPanel,
+};
+export type ViewOutput = {
+  setVisibleView: (view: UI.Widget.VBox) => void,
+  splitWidget: UI.SplitWidget.SplitWidget,
+  mainView: SecurityMainView,
+  visibleView: UI.Widget.VBox|null,
+  sidebar: SecurityPanelSidebar,
+};
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.SDKModelObserver<SecurityModel> {
+  readonly mainView!: SecurityMainView;
+  readonly sidebar!: SecurityPanelSidebar;
   private readonly lastResponseReceivedForLoaderId: Map<string, SDK.NetworkRequest.NetworkRequest>;
   private readonly origins: Map<string, OriginState>;
   private readonly filterRequestCounts: Map<string, number>;
-  private visibleView: UI.Widget.VBox|null;
+  visibleView: UI.Widget.VBox|null;
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private securityModel: SecurityModel|null;
-
-  constructor() {
+  readonly splitWidget!: UI.SplitWidget.SplitWidget;
+
+  constructor(private view: View = (input, output, target) => {
+    // clang-format off
+    render(
+      html`
+    <devtools-split-widget
+    .options=${{vertical: true, settingName: 'security'}}
+    ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
+        <devtools-widget
+          slot="main"
+          .widgetClass=${SecurityMainView}
+          .widgetParams=${[input.panel] as SecurityMainViewProps}
+          ${UI.Widget.widgetRef(SecurityMainView, e => {output.mainView = e;})}>
+        </devtools-widget>
+        <devtools-widget
+          slot="sidebar"
+          .widgetClass=${SecurityPanelSidebar}
+          @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
+          ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
+        </devtools-widget>
+    </devtools-split-widget>`,
+      target, {host: this});
+    // clang-format on
+  }) {
     super('security');
 
-    this.mainView = new SecurityMainView(this);
+    this.doUpdate();
 
-    this.sidebar =
-        new SecurityAndPrivacyPanelSidebar(this.showOrigin.bind(this), this.setVisibleView.bind(this, this.mainView));
-    this.sidebar.show(this.panelSidebarElement());
+    this.sidebar.setMinimumSize(100, 25);
+    this.sidebar.element.classList.add('panel-sidebar');
+    this.sidebar.element.setAttribute('jslog', `${VisualLogging.pane('sidebar').track({resize: true})}`);
+
+    this.element.addEventListener(ShowOriginEvent.eventName, (event: ShowOriginEvent) => {
+      if (event.origin) {
+        this.showOrigin(event.origin);
+      } else {
+        this.setVisibleView(this.mainView);
+      }
+    });
 
     this.lastResponseReceivedForLoaderId = new Map();
 
@@ -593,6 +640,10 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     return certificateButton;
   }
 
+  private doUpdate(): void {
+    this.view({panel: this}, this, this.contentElement);
+  }
+
   private updateVisibleSecurityState(visibleSecurityState: PageVisibleSecurityState): void {
     this.sidebar.securityOverviewElement.setSecurityState(visibleSecurityState.securityState);
     this.mainView.updateVisibleSecurityState(visibleSecurityState);
@@ -606,6 +657,7 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     // The sidebar element will trigger displaying the main view. Rather than making a redundant call to display the main view, we rely on this.
     this.sidebar.securityOverviewElement.select(true);
   }
+
   showOrigin(origin: Platform.DevToolsPath.UrlString): void {
     const originState = this.origins.get(origin);
     if (!originState) {
@@ -641,7 +693,7 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     this.visibleView = view;
 
     if (view) {
-      this.splitWidget().setMainWidget(view);
+      this.splitWidget.setMainWidget(view);
     }
   }
 
@@ -773,7 +825,9 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     const {frame} = event.data;
     const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
 
-    this.selectAndSwitchToMainView();
+    if (!(this.visibleView instanceof CookieReportView)) {
+      this.selectAndSwitchToMainView();
+    }
     this.sidebar.clearOrigins();
     this.origins.clear();
     this.lastResponseReceivedForLoaderId.clear();
@@ -815,6 +869,7 @@ export enum OriginGroup {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
+type SecurityMainViewProps = [SecurityPanel];
 export class SecurityMainView extends UI.Widget.VBox {
   private readonly panel: SecurityPanel;
   private readonly summarySection: HTMLElement;
@@ -824,8 +879,8 @@ export class SecurityMainView extends UI.Widget.VBox {
   private summaryText: HTMLElement;
   private explanations: (Protocol.Security.SecurityStateExplanation|SecurityStyleExplanation)[]|null;
   private securityState: Protocol.Security.SecurityState|null;
-  constructor(panel: SecurityPanel) {
-    super(true);
+  constructor(panel: SecurityPanel, element?: HTMLElement) {
+    super(undefined, undefined, element);
     this.element.setAttribute('jslog', `${VisualLogging.pane('security.main-view')}`);
 
     this.setMinimumSize(200, 100);

package/front_end/panels/security/{SecurityAndPrivacyPanelSidebar.ts → SecurityPanelSidebar.ts}

@@ -2,18 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {CookieReportTreeElement} from './CookieReportTreeElement.js';
 import lockIconStyles from './lockIcon.css.js';
 import {OriginTreeElement} from './OriginTreeElement.js';
 import {
   createHighlightedUrl,
   getSecurityStateIconForDetailedView,
   getSecurityStateIconForOverview,
-  type Origin,
   OriginGroup,
 } from './SecurityPanel.js';
 import type {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
@@ -24,6 +25,14 @@ const UIStrings = {
    *@description Section title for the the Security Panel's sidebar
    */
   security: 'Security',
+  /**
+   *@description Section title for the the Security Panel's sidebar
+   */
+  privacy: 'Privacy',
+  /**
+   *@description Sidebar element text in the Security panel
+   */
+  cookieReport: 'Third-party cookies',
   /**
    *@description Text in Security Panel of the Security panel
    */
@@ -58,10 +67,10 @@ const UIStrings = {
   mainOriginNonsecure: 'Main origin (non-secure)',
 };
 
-const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityAndPrivacyPanelSidebar.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
+export class SecurityPanelSidebar extends UI.Widget.VBox {
   readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
   readonly #originGroupTitles: Map<OriginGroup, string>;
   #originGroups: Map<OriginGroup, UI.TreeOutline.TreeElement>;
@@ -69,25 +78,28 @@ export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
   readonly #elementsByOrigin: Map<string, OriginTreeElement>;
   readonly #mainViewReloadMessage: UI.TreeOutline.TreeElement;
   #mainOrigin: string|null;
-  readonly #revealOrigin: (arg0: Origin) => void;
 
-  constructor(revealOrigin: (arg0: Origin) => void, revealMainView: () => void) {
-    super();
+  constructor(element?: HTMLElement) {
+    super(undefined, undefined, element);
 
     this.#mainOrigin = null;
-    this.#revealOrigin = revealOrigin;
 
     this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
     this.sidebarTree.element.classList.add('security-sidebar');
     this.contentElement.appendChild(this.sidebarTree.element);
 
+    if (Common.Settings.Settings.instance().getHostConfig().devToolsPrivacyUI?.enabled) {
+      const privacyTreeSection = this.#addSidebarSection(i18nString(UIStrings.privacy), 'privacy');
+      privacyTreeSection.appendChild(new CookieReportTreeElement(i18nString(UIStrings.cookieReport)));
+    }
+
     const securitySectionTitle = i18nString(UIStrings.security);
-    const securityTreeElement = this.#addSidebarSection(securitySectionTitle, 'security');
+    const securityTreeSection = this.#addSidebarSection(securitySectionTitle, 'security');
 
     this.securityOverviewElement =
-        new OriginTreeElement('security-main-view-sidebar-tree-item', revealMainView, this.#renderTreeElement);
+        new OriginTreeElement('security-main-view-sidebar-tree-item', this.#renderTreeElement);
     this.securityOverviewElement.tooltip = i18nString(UIStrings.overview);
-    securityTreeElement.appendChild(this.securityOverviewElement);
+    securityTreeSection.appendChild(this.securityOverviewElement);
 
     this.#originGroupTitles = new Map([
       [OriginGroup.MainOrigin, i18nString(UIStrings.mainOrigin)],
@@ -100,7 +112,7 @@ export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
     for (const group of Object.values(OriginGroup)) {
       const element = this.#createOriginGroupElement(this.#originGroupTitles.get(group) as string);
       this.#originGroups.set(group, element);
-      securityTreeElement.appendChild(element);
+      securityTreeSection.appendChild(element);
     }
 
     this.#mainViewReloadMessage = new UI.TreeOutline.TreeElement(i18nString(UIStrings.reloadToViewDetails));
@@ -151,8 +163,7 @@ export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
 
   addOrigin(origin: Platform.DevToolsPath.UrlString, securityState: Protocol.Security.SecurityState): void {
     this.#mainViewReloadMessage.hidden = true;
-    const originElement = new OriginTreeElement(
-        'security-sidebar-tree-item', this.#revealOrigin.bind(this, origin), this.#renderTreeElement, origin);
+    const originElement = new OriginTreeElement('security-sidebar-tree-item', this.#renderTreeElement, origin);
     originElement.tooltip = origin;
     this.#elementsByOrigin.set(origin, originElement);
     this.updateOrigin(origin, securityState);

package/front_end/panels/security/SecurityPanelSidebarTreeElement.ts

@@ -3,20 +3,9 @@
 // found in the LICENSE file.
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {SecurityPanel} from './SecurityPanel.js';
-
 export class SecurityPanelSidebarTreeElement extends UI.TreeOutline.TreeElement {
-  protected readonly securityPanel: SecurityPanel|undefined;
-
-  constructor(securityPanel: SecurityPanel|undefined, title: string = '', expandable: boolean = false) {
+  constructor(title: string = '', expandable: boolean = false) {
     super(title, expandable);
-    this.securityPanel = securityPanel;
     UI.ARIAUtils.setLabel(this.listItemElement, title);
   }
-
-  showView(view: UI.Widget.VBox): void {
-    if (this.securityPanel) {
-      this.securityPanel.setVisibleView(view);
-    }
-  }
 }

package/front_end/panels/security/cookieReportView.css

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2024 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.report {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  gap: var(--sys-size-6);
+  padding-top: var(--sys-size-5);
+  padding-bottom: var(--sys-size-5);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--sys-size-5);
+  padding-left: var(--sys-size-6);
+  padding-right: var(--sys-size-6);
+  min-width: var(--sys-size-31);
+
+  .title {
+    font: var(--sys-typescale-headline4);
+  }
+
+  .body {
+    font: var(--sys-typescale-body4-regular);
+  }
+}
+
+.x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.filter {
+  padding-left: var(--sys-size-5);
+  padding-right: var(--sys-size-6);
+  flex-shrink: 0;
+}

package/front_end/panels/security/sidebar.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+.tree-outline-disclosure {
+  width: 100%;
+}
+
 .tree-outline li.security-group-list-item {
   & + ol {
     padding-left: 0;
@@ -12,16 +16,50 @@
   &::before {
     display: none;
   }
+
+  &:not(:first-child) {
+    margin-top: var(--sys-size-6);
+  }
 }
 
 .security-main-view-reload-message {
   color: var(--sys-color-token-subtle);
 }
 
+.tree-outline li.security-sidebar-origins + .children > li {
+  &.selected {
+    .url-scheme-secure {
+      color: var(--sys-color-green);
+    }
+
+    .url-scheme-neutral,
+    .url-scheme-insecure,
+    .url-scheme-insecure-broken {
+      color: var(--sys-color-error);
+    }
+  }
+}
+
 .security-main-view-reload-message,
 .tree-outline li.security-sidebar-origins,
-.tree-outline li.security-group-list-item {
+.tree-outline li.security-group-list-item,
+.tree-outline span {
+  font: var(--sys-typescale-body4-medium);
+
   &:hover:not(:has(span[is="dt-checkbox"])) .selection {
     background: transparent;
   }
 }
+
+.tree-outline li {
+  & .leading-icons {
+    flex: none;
+  }
+
+  & .tree-element-title,
+  .highlighted-url,
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -4,6 +4,8 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -14,7 +16,7 @@ const UIStrings = {
    *@description Title in the Locations Settings Tab, where custom geographic locations that the user
    *has entered are stored.
    */
-  customLocations: 'Custom locations',
+  locations: 'Locations',
   /**
    *@description Label for the name of a geographic location that the user has entered.
    */
@@ -91,7 +93,7 @@ const UIStrings = {
   /**
    *@description Text of add locations button in Locations Settings Tab of the Device Toolbar
    */
-  addLocation: 'Add location...',
+  addLocation: 'Add location',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sensors/LocationsSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -106,16 +108,31 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('emulation-locations')}`);
 
-    this.contentElement.createChild('div', 'header').textContent = i18nString(UIStrings.customLocations);
-
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.addLocation), this.addButtonClicked.bind(this),
-        {className: 'add-locations-button', jslogContext: 'emulation.add-location'});
-    this.contentElement.appendChild(addButton);
+    const settingsContent =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    settingsContent.classList.add('settings-card-container');
+
+    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());
+
+    const listContainer = document.createElement('div');
+    const locationsCard = new Cards.Card.Card();
+    locationsCard.data = {
+      heading: i18nString(UIStrings.locations),
+      content: [listContainer, addButton],
+    };
+    settingsContent.appendChild(locationsCard);
 
     this.list = new UI.ListWidget.ListWidget(this, undefined, true);
     this.list.element.classList.add('locations-list');
-    this.list.show(this.contentElement);
+    this.list.show(listContainer);
     this.customSetting =
         Common.Settings.Settings.instance().moduleSetting<LocationDescription[]>('emulation.locations');
     const list =
@@ -144,8 +161,6 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
 
     this.customSetting.set(list);
     this.customSetting.addChangeListener(this.locationsUpdated, this);
-
-    this.setDefaultFocusedElement(addButton);
   }
 
   override wasShown(): void {

package/front_end/panels/sensors/SensorsView.ts

@@ -118,6 +118,10 @@ const UIStrings = {
    *@description Description of the Emulate Idle State select in Sensors tab
    */
   forcesSelectedIdleStateEmulation: 'Forces selected idle state emulation',
+  /**
+   *@description Description of the Emulate CPU Pressure State select in Sensors tab
+   */
+  forcesSelectedPressureStateEmulation: 'Forces selected pressure state emulation',
   /**
    *@description Title for a group of configuration options in a drop-down input.
    */
@@ -232,6 +236,10 @@ export class SensorsView extends UI.Widget.VBox {
     this.createHardwareConcurrencySection();
 
     this.createPanelSeparator();
+
+    this.createPressureSection();
+
+    this.createPanelSeparator();
   }
 
   override wasShown(): void {
@@ -509,6 +517,17 @@ export class SensorsView extends UI.Widget.VBox {
     this.setBoxOrientation(this.deviceOrientation, false);
   }
 
+  private createPressureSection(): void {
+    const container = this.contentElement.createChild('div', 'pressure-section');
+    const control = UI.SettingsUI.createControlForSetting(
+        Common.Settings.Settings.instance().moduleSetting('emulation.cpu-pressure'),
+        i18nString(UIStrings.forcesSelectedPressureStateEmulation));
+
+    if (control) {
+      container.appendChild(control);
+    }
+  }
+
   private enableOrientationFields(disable: boolean|null): void {
     if (disable) {
       this.deviceOrientationFieldset.disabled = true;
@@ -789,6 +808,14 @@ export const enum DeviceOrientationModificationSource {
   SELECT_PRESET = 'selectPreset',
 }
 
+export const PressureOptions = {
+  NoOverride: 'no-override',
+  Nominal: 'nominal',
+  Fair: 'fair',
+  Serious: 'serious',
+  Critical: 'critical',
+};
+
 export const NonPresetOptions = {
   NoOverride: 'noOverride',
   Custom: 'custom',

package/front_end/panels/sensors/locationsSettingsTab.css

@@ -4,28 +4,13 @@
  * found in the LICENSE file.
  */
 
-:host {
-  overflow: hidden;
-}
-
-.header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  font-size: 18px;
-  font-weight: normal;
-  flex: none;
-}
-
 .add-locations-button {
-  flex: none;
-  margin: 10px 5px;
-  min-width: 140px;
-  align-self: flex-start;
+  margin-bottom: var(--sys-size-5);
+  border: none;
 }
 
 .locations-list {
-  max-width: 600px;
-  min-width: 340px;
+  margin-top: var(--sys-size-3);
   flex: auto;
 }
 
@@ -85,3 +70,18 @@
 .locations-input-container {
   padding: 1px;
 }
+
+.settings-card-container-wrapper {
+  scrollbar-gutter: stable;
+  padding-bottom: var(--sys-size-8);
+  overflow: auto;
+  position: absolute;
+  inset: var(--sys-size-8) 0 0;
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}

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

@@ -93,6 +93,30 @@ const UIStrings = {
    *@description Command that shows geographic locations.
    */
   showLocations: 'Show Locations',
+  /**
+   * @description Text for the CPU Pressure type to simulate on a device.
+   */
+  cpuPressure: 'CPU Pressure',
+  /**
+   *@description Title of an option in Sensors tab cpu pressure emulation drop-down. Turns off emulation of cpu pressure state.
+   */
+  noPressureEmulation: 'No override',
+  /**
+   *@description An option that appears in a drop-down that represents the nominal state.
+   */
+  nominal: 'Nominal',
+  /**
+   *@description An option that appears in a drop-down that represents the fair state.
+   */
+  fair: 'Fair',
+  /**
+   *@description An option that appears in a drop-down that represents the serious state.
+   */
+  serious: 'Serious',
+  /**
+   *@description An option that appears in a drop-down that represents the critical state.
+   */
+  critical: 'Critical',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sensors/sensors-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -216,6 +240,41 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.cpuPressure),
+  reloadRequired: true,
+  settingName: 'emulation.cpu-pressure',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.noPressureEmulation),
+      text: i18nLazyString(UIStrings.noPressureEmulation),
+    },
+    {
+      value: 'nominal',
+      title: i18nLazyString(UIStrings.nominal),
+      text: i18nLazyString(UIStrings.nominal),
+    },
+    {
+      value: 'fair',
+      title: i18nLazyString(UIStrings.fair),
+      text: i18nLazyString(UIStrings.fair),
+    },
+    {
+      value: 'serious',
+      title: i18nLazyString(UIStrings.serious),
+      text: i18nLazyString(UIStrings.serious),
+    },
+    {
+      value: 'critical',
+      title: i18nLazyString(UIStrings.critical),
+      text: i18nLazyString(UIStrings.critical),
+    },
+  ],
+});
+
 Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.touch),
   reloadRequired: true,