Settings Split: Add settings to touchpad page (use existing prefs)

Screenshot: http://screen/9focMMXtguQCto9

Bug: b/241965700
Test: browser_tests OSSettingsPerDeviceTouchpadSubsectionV3Test
Change-Id: I81554ada7cbbd20bf110f340502cccb01fde464a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4159718
Reviewed-by: Michael Checo <michaelcheco@google.com>
Commit-Queue: Danny Wang <wangdanny@google.com>
Reviewed-by: David Padlipsky <dpad@google.com>
Cr-Commit-Position: refs/heads/main@{#1099461}

chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.html

@@ -1 +1,4 @@
-<div id="perDeviceTouchpadSubpageTitle">$i18n{touchpadTitle}</div>
+<template is="dom-repeat" items="[[touchpads]]" as="touchpad">
+  <settings-per-device-touchpad-subsection touchpad="[[touchpad]]">
+  </settings-per-device-touchpad-subsection>
+</template>

chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.ts

@@ -10,8 +10,16 @@
 
 import '../../icons.html.js';
 import '../../settings_shared.css.js';
+import 'chrome://resources/cr_components/localized_link/localized_link.js';
+import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.js';
+import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
+import '../../controls/settings_radio_group.js';
+import '../../controls/settings_slider.js';
+import '../../controls/settings_toggle_button.js';
+import '../../settings_shared.css.js';
+import 'chrome://resources/cr_elements/cr_slider/cr_slider.js';
 
-import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
+import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {routes} from '../os_route.js';
@@ -22,26 +30,20 @@ import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_prov
 import {InputDeviceSettingsProviderInterface, Touchpad} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_touchpad.html.js';
 
-const SettingsPerDeviceTouchpadElementBase =
-    RouteObserverMixin(I18nMixin(PolymerElement));
+const SettingsPerDeviceTouchpadElementBase = RouteObserverMixin(PolymerElement);
 
 class SettingsPerDeviceTouchpadElement extends
     SettingsPerDeviceTouchpadElementBase {
-  static get is() {
+  static get is(): string {
     return 'settings-per-device-touchpad';
   }
 
-  static get template() {
+  static get template(): HTMLTemplateElement {
     return getTemplate();
   }
 
-  static get properties() {
+  static get properties(): PolymerElementProperties {
     return {
-      isDeviceSettingsSplitEnabled: {
-        type: Boolean,
-        value: false,
-      },
-
       touchpads: {
         type: Array,
       },

chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.html

@@ -0,0 +1,114 @@
+<style include="settings-shared">
+  h2 {
+    padding-inline-start: var(--cr-section-padding);
+  }
+
+  .subsection {
+    padding-inline-end: var(--cr-section-padding);
+    padding-inline-start: var(--cr-section-indent-padding);
+  }
+
+  .subsection > settings-toggle-button,
+  .subsection > .settings-box  {
+    padding-inline-end: 0;
+    padding-inline-start: 0;
+  }
+</style>
+<div id="touchpad">
+  <h2>[[touchpad.name]]</h2>
+  <div class="subsection">
+    <settings-toggle-button id="enableTapToClick"
+        pref="{{enableTapToClickPref}}"
+        label="$i18n{touchpadTapToClickEnabledLabel}">
+    </settings-toggle-button>
+    <settings-toggle-button id="enableTapDragging"
+        class="hr"
+        pref="{{enableTapDraggingPref}}"
+        label="$i18n{tapDraggingLabel}">
+    </settings-toggle-button>
+    <settings-toggle-button id="touchpadAcceleration"
+        class="hr"
+        pref="{{accelerationPref}}"
+        label="$i18n{touchpadAccelerationLabel}">
+    </settings-toggle-button>
+    <div class="settings-box">
+      <div class="start" id="touchpadSpeedLabel" aria-hidden="true">
+        $i18n{touchpadSpeed}
+      </div>
+        <settings-slider id="touchpadSensitivity"
+            pref="{{sensitivityPref}}"
+            ticks="[[sensitivityValues_]]"
+            label-aria="$i18n{touchpadSpeed}"
+            label-min="$i18n{pointerSlow}"
+            label-max="$i18n{pointerFast}">
+        </settings-slider>
+    </div>
+    <template is="dom-if" if="[[allowScrollSettings_]]">
+      <settings-toggle-button id="touchpadScrollAcceleration"
+          class="hr"
+          pref="{{scrollAccelerationPref}}"
+          label="$i18n{touchpadScrollAccelerationLabel}">
+      </settings-toggle-button>
+      <div class="settings-box">
+        <div class="start" id="touchpadScrollSpeedLabel" aria-hidden="true">
+          $i18n{touchpadScrollSpeed}
+        </div>
+        <settings-slider
+            pref="{{scrollSensitivityPref}}"
+            ticks="[[sensitivityValues_]]"
+            label-aria="$i18n{touchpadScrollSpeed}"
+            label-min="$i18n{pointerSlow}"
+            label-max="$i18n{pointerFast}">
+        </settings-slider>
+      </div>
+    </template>
+    <template is="dom-if" if="[[touchpad.isHaptic]]">
+      <div class="settings-box">
+        <div class="start" id="touchpadHapticClickSensitivityLabel"
+            aria-hidden="true">
+          $i18n{touchpadHapticClickSensitivityLabel}
+        </div>
+        <settings-slider id="touchpadHapticClickSensitivity"
+            pref="{{hapticClickSensitivityPref}}"
+            ticks="[[hapticClickSensitivityValues_]]"
+            label-aria="$i18n{touchpadHapticClickSensitivityLabel}"
+            label-min="$i18n{touchpadHapticLightClickLabel}"
+            label-max="$i18n{touchpadHapticFirmClickLabel}">
+        </settings-slider>
+      </div>
+      <div class="settings-box two-line" id="touchpadHapticFeedbackRow"
+          on-click="onTouchpadHapticFeedbackRowClicked_">
+        <div class="start settings-box-text">
+          <div>$i18n{touchpadHapticFeedbackTitle}</div>
+          <div class="secondary">
+            <localized-link
+              on-click="onLearnMoreLinkClicked_"
+              id="touchpadHapticFeedbackSecondary"
+              localized-string="$i18n{touchpadHapticFeedbackSecondaryText}"
+              link-url="$i18n{hapticFeedbackLearnMoreLink}">
+            </localized-link>
+          </div>
+        </div>
+        <cr-toggle id="touchpadHapticFeedbackToggle"
+            checked="[[hapticFeedbackValue]]"
+            aria-labelledby="touchpadHapticFeedbackRow">
+        </cr-toggle>
+      </div>
+    </template>
+    <div class="settings-box" id="reverseScrollRow"
+          on-click="onTouchpadReverseScrollRowClicked_">
+      <div class="start settings-box-text">
+        <localized-link
+            on-click="onLearnMoreLinkClicked_"
+            id="enableReverseScrollingLabel"
+            localized-string="$i18n{touchPadScrollLabel}"
+            link-url="$i18n{naturalScrollLearnMoreLink}">
+        </localized-link>
+      </div>
+      <cr-toggle id="enableReverseScrollingToggle"
+          checked="[[reverseScrollValue]]"
+          aria-labelledby="enableReverseScrollingLabel">
+      </cr-toggle>
+    </div>
+  </div>
+</div>

chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.ts

@@ -0,0 +1,226 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * 'per-device-touchpad-subsection' allow users to configure their
+ * per-device-touchpad subsection settings in system settings.
+ */
+
+import '../../icons.html.js';
+import '../../settings_shared.css.js';
+import 'chrome://resources/cr_components/localized_link/localized_link.js';
+import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.js';
+import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
+import '../../controls/settings_radio_group.js';
+import '../../controls/settings_slider.js';
+import '../../controls/settings_toggle_button.js';
+import '../../settings_shared.css.js';
+import 'chrome://resources/cr_elements/cr_slider/cr_slider.js';
+
+import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
+import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './per_device_touchpad_subsection.html.js';
+
+export class SettingsPerDeviceTouchpadSubsectionElement extends PolymerElement {
+  static get is(): string {
+    return 'settings-per-device-touchpad-subsection';
+  }
+
+  static get template(): HTMLTemplateElement {
+    return getTemplate();
+  }
+
+  static get properties(): PolymerElementProperties {
+    return {
+      enableTapToClickPref: {
+        type: Object,
+        value() {
+          return {
+            key: 'fakeEnableTapToClickPref',
+            type: chrome.settingsPrivate.PrefType.BOOLEAN,
+            value: true,
+          };
+        },
+      },
+
+      enableTapDraggingPref: {
+        type: Object,
+        value() {
+          return {
+            key: 'fakeEnableTapDraggingPref',
+            type: chrome.settingsPrivate.PrefType.BOOLEAN,
+            value: false,
+          };
+        },
+      },
+
+      accelerationPref: {
+        type: Object,
+        value() {
+          return {
+            key: 'fakeAccelerationPref',
+            type: chrome.settingsPrivate.PrefType.BOOLEAN,
+            value: true,
+          };
+        },
+      },
+
+      sensitivityPref: {
+        type: Object,
+        value() {
+          return {
+            key: 'fakeSensitivityPref',
+            type: chrome.settingsPrivate.PrefType.NUMBER,
+            value: 3,
+          };
+        },
+      },
+
+      scrollAccelerationPref: {
+        type: Object,
+        value() {
+          return {
+            key: 'fakeScrollAccelerationPref',
+            type: chrome.settingsPrivate.PrefType.BOOLEAN,
+            value: true,
+          };
+        },
+      },
+
+      scrollSensitivityPref: {
+        type: Object,
+        value() {
+          return {
+            key: 'fakeScrollSensitivityPref',
+            type: chrome.settingsPrivate.PrefType.NUMBER,
+            value: 3,
+          };
+        },
+      },
+
+      hapticClickSensitivityPref: {
+        type: Object,
+        value() {
+          return {
+            key: 'fakeHapticClickSensitivityPref',
+            type: chrome.settingsPrivate.PrefType.NUMBER,
+            value: 3,
+          };
+        },
+      },
+
+      /**
+       * TODO(khorimoto): Remove this conditional once the feature is launched.
+       */
+      allowScrollSettings_: {
+        type: Boolean,
+        value() {
+          return loadTimeData.getBoolean('allowScrollSettings');
+        },
+      },
+
+      /**
+       * TODO(michaelpg): settings-slider should optionally take a min and max
+       * so we don't have to generate a simple range of natural numbers
+       * ourselves. These values match the TouchpadSensitivity enum in
+       * enums.xml.
+       */
+      sensitivityValues_: {
+        type: Array,
+        value: [1, 2, 3, 4, 5],
+        readOnly: true,
+      },
+
+      /**
+       * The click sensitivity values from prefs are [1,3,5] but ChromeVox needs
+       * to announce them as [1,2,3].
+       */
+      hapticClickSensitivityValues_: {
+        type: Array,
+        value() {
+          return [
+            {value: 1, ariaValue: 1},
+            {value: 3, ariaValue: 2},
+            {value: 5, ariaValue: 3},
+          ];
+        },
+        readOnly: true,
+      },
+
+      reverseScrollValue: {
+        type: Boolean,
+        value: false,
+      },
+
+      hapticFeedbackValue: {
+        type: Boolean,
+        value: true,
+      },
+
+      touchpad: {type: Object},
+    };
+  }
+
+  static get observers(): string[] {
+    return [
+      'onSettingsChanged(enableTapToClickPref.value,' +
+          'enableTapDraggingPref.value,' +
+          'accelerationPref.value,' +
+          'sensitivityPref.value,' +
+          'scrollAccelerationPref.value,' +
+          'scrollSensitivityPref.value,' +
+          'hapticClickSensitivityPref.value,' +
+          'reverseScrollValue)',
+    ];
+  }
+
+  private touchpad: Object;
+  private enableTapToClickPref: chrome.settingsPrivate.PrefObject;
+  private enableTapDraggingPref: chrome.settingsPrivate.PrefObject;
+  private accelerationPref: chrome.settingsPrivate.PrefObject;
+  private sensitivityPref: chrome.settingsPrivate.PrefObject;
+  private scrollAccelerationPref: chrome.settingsPrivate.PrefObject;
+  private scrollSensitivityPref: chrome.settingsPrivate.PrefObject;
+  private hapticClickSensitivityPref: chrome.settingsPrivate.PrefObject;
+  private reverseScrollValue: boolean;
+  private hapticFeedbackValue: boolean;
+
+  private onLearnMoreLinkClicked_(event: Event): void {
+    const path = event.composedPath();
+    if (!Array.isArray(path) || !path.length) {
+      return;
+    }
+
+    if ((path[0] as HTMLElement).tagName === 'A') {
+      // Do not toggle reverse scrolling if the contained link is clicked.
+      event.stopPropagation();
+    }
+  }
+
+  private onTouchpadReverseScrollRowClicked_(): void {
+    this.reverseScrollValue = !this.reverseScrollValue;
+  }
+
+  private onTouchpadHapticFeedbackRowClicked_(): void {
+    this.hapticFeedbackValue = !this.hapticFeedbackValue;
+  }
+
+  private onSettingsChanged(): void {
+    // TODO(wangdanny): Implement onSettingsChanged.
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'settings-per-device-touchpad-subsection':
+        SettingsPerDeviceTouchpadSubsectionElement;
+  }
+}
+
+customElements.define(
+    SettingsPerDeviceTouchpadSubsectionElement.is,
+    SettingsPerDeviceTouchpadSubsectionElement);