Settings Split: Use DeepLinkingMixin on per device pages

Set auto focus on the element when directed from existing search tags. Tested on VM, and browser_tests Bug: b/241965700 Change-Id: I0a9997f7c6778b57ea4470ae3e0035f9f3a4c8f0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4335985 Commit-Queue: Yuhan Yang <yyhyyh@google.com> Reviewed-by: David Padlipsky <dpad@google.com> Cr-Commit-Position: refs/heads/main@{#1118810}
chromium · Mar 17, 2023 · 7b2e860 · 7b2e860
1 parent ea8ef54
commit 7b2e860
Show file tree

Hide file tree

Showing 13 changed files with 319 additions and 34 deletions.
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_keyboard_subsection.ts b/chrome/browser/resources/settings/chromeos/device_page/per_device_keyboard_subsection.ts
@@ -174,7 +174,7 @@ export class SettingsPerDeviceKeyboardSubsectionElement extends
       return;
     }
 
-    // If there is more than one keyboard, focus on the first one.
+    // If multiple keyboards are available, focus on the first one.
     if (this.keyboardIndex === 0) {
       this.attemptDeepLink();
     }

diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse.html
@@ -1,4 +1,6 @@
-<template is="dom-repeat" items="[[mice]]" as="mouse" restamp>
-  <settings-per-device-mouse-subsection mouse="[[mouse]]">
+<template is="dom-repeat" items="[[mice]]"
+    as="mouse" index-as="index" restamp>
+  <settings-per-device-mouse-subsection mouse="[[mouse]]"
+      mouse-index="[[index]]">
   </settings-per-device-mouse-subsection>
 </template>
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.html
@@ -24,13 +24,15 @@ <h2>[[mouse.name]]</h2>
       <settings-dropdown-menu id="mouseSwapButtonDropdown"
           aria-labeledby="mouseSwapButtonLabel"
           pref="{{primaryRightPref}}"
-          menu-options="[[swapPrimaryOptions]]">
+          menu-options="[[swapPrimaryOptions]]"
+          deep-link-focus-id$="[[Setting.kMouseSwapPrimaryButtons]]">
       </settings-dropdown-menu>
     </div>
     <settings-toggle-button id="mouseAcceleration"
         class="hr"
         pref="{{accelerationPref}}"
-        label="$i18n{mouseAccelerationLabel}">
+        label="$i18n{mouseAccelerationLabel}"
+        deep-link-focus-id$="[[Setting.kMouseAcceleration]]">
     </settings-toggle-button>
     <div class="settings-box">
       <div class="start" id="mouseSpeedLabel" aria-hidden="true">
@@ -41,14 +43,16 @@ <h2>[[mouse.name]]</h2>
           ticks="[[sensitivityValues_]]"
           label-aria="$i18n{mouseSpeed}"
           label-min="$i18n{pointerSlow}"
-          label-max="$i18n{pointerFast}">
+          label-max="$i18n{pointerFast}"
+          deep-link-focus-id$="[[Setting.kMouseSpeed]]">
       </settings-slider>
     </div>
     <template is="dom-if" if="[[allowScrollSettings_]]" restamp>
       <settings-toggle-button id="mouseScrollAcceleration"
           class="hr"
           pref="{{scrollAccelerationPref}}"
-          label="$i18n{mouseScrollAccelerationLabel}">
+          label="$i18n{mouseScrollAccelerationLabel}"
+          deep-link-focus-id$="[[Setting.kMouseScrollAcceleration]]">
       </settings-toggle-button>
       <div class="settings-box">
         <div class="start" id="mouseScrollSpeedLabel" aria-hidden="true">
@@ -75,7 +79,8 @@ <h2>[[mouse.name]]</h2>
       </div>
       <cr-toggle id="mouseReverseScroll"
           checked="{{reverseScrollValue}}"
-          aria-labelledby="enableMouseReverseScrollingLabel">
+          aria-labelledby="enableMouseReverseScrollingLabel"
+          deep-link-focus-id$="[[Setting.kMouseReverseScrolling]]">
       </cr-toggle>
     </div>
   </div>

diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.ts b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.ts
@@ -23,11 +23,20 @@ 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 {DeepLinkingMixin} from '../deep_linking_mixin.js';
+import {Setting} from '../mojom-webui/setting.mojom-webui.js';
+import {routes} from '../os_settings_routes.js';
+import {RouteObserverMixin} from '../route_observer_mixin.js';
+import {Route} from '../router.js';
+
 import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_provider.js';
 import {InputDeviceSettingsProviderInterface, Mouse} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_mouse_subsection.html.js';
 
-export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
+const SettingsPerDeviceMouseSubsectionElementBase =
+    DeepLinkingMixin(RouteObserverMixin(PolymerElement));
+export class SettingsPerDeviceMouseSubsectionElement extends
+    SettingsPerDeviceMouseSubsectionElementBase {
   static get is(): string {
     return 'settings-per-device-mouse-subsection';
   }
@@ -140,6 +149,24 @@ export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
       mouse: {
         type: Object,
       },
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kMouseSwapPrimaryButtons,
+          Setting.kMouseReverseScrolling,
+          Setting.kMouseAcceleration,
+          Setting.kMouseScrollAcceleration,
+          Setting.kMouseSpeed,
+        ]),
+      },
+
+      mouseIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -155,6 +182,18 @@ export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
     ];
   }
 
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_MOUSE) {
+      return;
+    }
+
+    // If multiple mice are available, focus on the first one.
+    if (this.mouseIndex === 0) {
+      this.attemptDeepLink();
+    }
+  }
+
   private mouse: Mouse;
   private primaryRightPref: chrome.settingsPrivate.PrefObject;
   private accelerationPref: chrome.settingsPrivate.PrefObject;
@@ -165,6 +204,7 @@ export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
   private isInitialized: boolean = false;
   private inputDeviceSettingsProvider: InputDeviceSettingsProviderInterface =
       getInputDeviceSettingsProvider();
+  private mouseIndex: number;
 
   private updateSettingsToCurrentPrefs(): void {
     this.set('primaryRightPref.value', this.mouse.settings.swapRight);

diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick.html
@@ -1,5 +1,7 @@
-<template is="dom-repeat" items="[[pointingSticks]]" as="pointingStick" restamp>
+<template is="dom-repeat" items="[[pointingSticks]]"
+    as="pointingStick" index-as="index" restamp>
   <settings-per-device-pointing-stick-subsection
-      pointing-stick="[[pointingStick]]">
+      pointing-stick="[[pointingStick]]"
+      pointing-stick-index="[[index]]">
   </settings-per-device-pointing-stick-subsection>
 </template>
diff --git a/...e/browser/resources/settings/chromeos/device_page/per_device_pointing_stick_subsection.ts b/...e/browser/resources/settings/chromeos/device_page/per_device_pointing_stick_subsection.ts
@@ -24,13 +24,18 @@ 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 {DeepLinkingMixin} from '../deep_linking_mixin.js';
+import {Setting} from '../mojom-webui/setting.mojom-webui.js';
+import {routes} from '../os_settings_routes.js';
+import {RouteObserverMixin} from '../route_observer_mixin.js';
+import {Route} from '../router.js';
+
 import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_provider.js';
 import {InputDeviceSettingsProviderInterface, PointingStick} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_pointing_stick_subsection.html.js';
 
 const SettingsPerDevicePointingStickSubsectionElementBase =
-    I18nMixin(PolymerElement);
-
+    DeepLinkingMixin(RouteObserverMixin(I18nMixin(PolymerElement)));
 export class SettingsPerDevicePointingStickSubsectionElement extends
     SettingsPerDevicePointingStickSubsectionElementBase {
   static get is(): string {
@@ -106,6 +111,22 @@ export class SettingsPerDevicePointingStickSubsectionElement extends
       },
 
       pointingStick: {type: Object},
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kPointingStickAcceleration,
+          Setting.kPointingStickSpeed,
+          Setting.kPointingStickSwapPrimaryButtons,
+        ]),
+      },
+
+      pointingStickIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -118,6 +139,18 @@ export class SettingsPerDevicePointingStickSubsectionElement extends
     ];
   }
 
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_POINTING_STICK) {
+      return;
+    }
+
+    // If multiple pointing sticks are available, focus on the first one.
+    if (this.pointingStickIndex === 0) {
+      this.attemptDeepLink();
+    }
+  }
+
   private pointingStick: PointingStick;
   private sensitivityValues: number[];
   private swapPrimaryOptions: number[];
@@ -127,6 +160,7 @@ export class SettingsPerDevicePointingStickSubsectionElement extends
   private isInitialized: boolean = false;
   private inputDeviceSettingsProvider: InputDeviceSettingsProviderInterface =
       getInputDeviceSettingsProvider();
+  private pointingStickIndex: number;
 
   private updateSettingsToCurrentPrefs(): void {
     this.set('primaryRightPref.value', this.pointingStick.settings.swapRight);

diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.html
@@ -1,4 +1,6 @@
-<template is="dom-repeat" items="[[touchpads]]" as="touchpad" restamp>
-  <settings-per-device-touchpad-subsection touchpad="[[touchpad]]">
+<template is="dom-repeat" items="[[touchpads]]"
+    as="touchpad" index-as="index" restamp>
+  <settings-per-device-touchpad-subsection
+      touchpad="[[touchpad]]" touchpad-index="[[index]]">
   </settings-per-device-touchpad-subsection>
 </template>
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.html
@@ -19,17 +19,20 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
   <div class="subsection">
     <settings-toggle-button id="enableTapToClick"
         pref="{{enableTapToClickPref}}"
-        label="$i18n{touchpadTapToClickEnabledLabel}">
+        label="$i18n{touchpadTapToClickEnabledLabel}"
+        deep-link-focus-id$="[[Setting.kTouchpadTapToClick]]">
     </settings-toggle-button>
     <settings-toggle-button id="enableTapDragging"
         class="hr"
         pref="{{enableTapDraggingPref}}"
-        label="$i18n{tapDraggingLabel}">
+        label="$i18n{tapDraggingLabel}"
+        deep-link-focus-id$="[[Setting.kTouchpadTapDragging]]">
     </settings-toggle-button>
     <settings-toggle-button id="touchpadAcceleration"
         class="hr"
         pref="{{accelerationPref}}"
-        label="$i18n{touchpadAccelerationLabel}">
+        label="$i18n{touchpadAccelerationLabel}"
+        deep-link-focus-id$="[[Setting.kTouchpadAcceleration]]">
     </settings-toggle-button>
     <div class="settings-box">
       <div class="start" id="touchpadSpeedLabel" aria-hidden="true">
@@ -40,14 +43,16 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
             ticks="[[sensitivityValues_]]"
             label-aria="$i18n{touchpadSpeed}"
             label-min="$i18n{pointerSlow}"
-            label-max="$i18n{pointerFast}">
+            label-max="$i18n{pointerFast}"
+            deep-link-focus-id$="[[Setting.kTouchpadSpeed]]">
         </settings-slider>
     </div>
     <template is="dom-if" if="[[allowScrollSettings_]]" restamp>
       <settings-toggle-button id="touchpadScrollAcceleration"
           class="hr"
           pref="{{scrollAccelerationPref}}"
-          label="$i18n{touchpadScrollAccelerationLabel}">
+          label="$i18n{touchpadScrollAccelerationLabel}"
+          deep-link-focus-id$="[[Setting.kTouchpadScrollAcceleration]]">
       </settings-toggle-button>
       <div class="settings-box">
         <div class="start" id="touchpadScrollSpeedLabel" aria-hidden="true">
@@ -73,7 +78,9 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
             ticks="[[hapticClickSensitivityValues_]]"
             label-aria="$i18n{touchpadHapticClickSensitivityLabel}"
             label-min="$i18n{touchpadHapticLightClickLabel}"
-            label-max="$i18n{touchpadHapticFirmClickLabel}">
+            label-max="$i18n{touchpadHapticFirmClickLabel}"
+            deep-link-focus-id$=
+              "[[Setting.kTouchpadHapticClickSensitivity]]">
         </settings-slider>
       </div>
       <div class="settings-box two-line" id="touchpadHapticFeedbackRow"
@@ -91,7 +98,8 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
         </div>
         <cr-toggle id="touchpadHapticFeedbackToggle"
             checked="{{hapticFeedbackValue}}"
-            aria-labelledby="touchpadHapticFeedbackRow">
+            aria-labelledby="touchpadHapticFeedbackRow"
+            deep-link-focus-id$="[[Setting.kTouchpadHapticFeedback]]">
         </cr-toggle>
       </div>
     </template>
@@ -107,7 +115,8 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
       </div>
       <cr-toggle id="enableReverseScrollingToggle"
           checked="{{reverseScrollValue}}"
-          aria-labelledby="enableReverseScrollingLabel">
+          aria-labelledby="enableReverseScrollingLabel"
+          deep-link-focus-id$="[[Setting.kTouchpadReverseScrolling]]">
       </cr-toggle>
     </div>
   </div>

diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.ts b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.ts
@@ -24,13 +24,18 @@ 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 {DeepLinkingMixin} from '../deep_linking_mixin.js';
+import {Setting} from '../mojom-webui/setting.mojom-webui.js';
+import {routes} from '../os_settings_routes.js';
+import {RouteObserverMixin} from '../route_observer_mixin.js';
+import {Route} from '../router.js';
+
 import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_provider.js';
 import {InputDeviceSettingsProviderInterface, Touchpad} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_touchpad_subsection.html.js';
 
 const SettingsPerDeviceTouchpadSubsectionElementBase =
-    I18nMixin(PolymerElement);
-
+    DeepLinkingMixin(RouteObserverMixin(I18nMixin(PolymerElement)));
 export class SettingsPerDeviceTouchpadSubsectionElement extends
     SettingsPerDeviceTouchpadSubsectionElementBase {
   static get is(): string {
@@ -169,6 +174,27 @@ export class SettingsPerDeviceTouchpadSubsectionElement extends
       },
 
       touchpad: {type: Object},
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kTouchpadTapToClick,
+          Setting.kTouchpadTapDragging,
+          Setting.kTouchpadReverseScrolling,
+          Setting.kTouchpadAcceleration,
+          Setting.kTouchpadScrollAcceleration,
+          Setting.kTouchpadSpeed,
+          Setting.kTouchpadHapticFeedback,
+          Setting.kTouchpadHapticClickSensitivity,
+        ]),
+      },
+
+      touchpadIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -187,6 +213,18 @@ export class SettingsPerDeviceTouchpadSubsectionElement extends
     ];
   }
 
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_TOUCHPAD) {
+      return;
+    }
+
+    // If multiple touchpads are available, focus on the first one.
+    if (this.touchpadIndex === 0) {
+      this.attemptDeepLink();
+    }
+  }
+
   private touchpad: Touchpad;
   private enableTapToClickPref: chrome.settingsPrivate.PrefObject;
   private enableTapDraggingPref: chrome.settingsPrivate.PrefObject;
@@ -200,6 +238,7 @@ export class SettingsPerDeviceTouchpadSubsectionElement extends
   private isInitialized: boolean = false;
   private inputDeviceSettingsProvider: InputDeviceSettingsProviderInterface =
       getInputDeviceSettingsProvider();
+  private touchpadIndex: number;
 
   private updateSettingsToCurrentPrefs(): void {
     this.set(