Settings Split: Use DeepLinkingMixin on new keyboard page

Set auto focus the on the element when directed from search tags.

Screenshot: http://screen/BMxZyU5EXw2TTnC

Tested on VM and DUT, and browser_tests

Bug: b/241965700
Change-Id: If6cc7ebbca8339a96a1a8b6fb96135ad83ff4bcb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4321932
Reviewed-by: Michael Checo <michaelcheco@google.com>
Reviewed-by: David Padlipsky <dpad@google.com>
Commit-Queue: Yuhan Yang <yyhyyh@google.com>
Cr-Commit-Position: refs/heads/main@{#1115863}

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

@@ -1,11 +1,14 @@
 <style include="settings-shared"></style>
-<template is="dom-repeat" items="[[keyboards]]" as="keyboard">
-  <settings-per-device-keyboard-subsection keyboard="[[keyboard]]">
+<template is="dom-repeat" items="[[keyboards]]"
+    as="keyboard" index-as="index">
+  <settings-per-device-keyboard-subsection
+      keyboard="[[keyboard]]" keyboard-index="[[index]]">
   </settings-per-device-keyboard-subsection>
 </template>
 <cr-link-row id="keyboardShortcutViewer" class="hr"
     on-click="onShowKeyboardShortcutViewerTap"
-    label="$i18n{showKeyboardShortcutViewer}" external></cr-link-row>
+    label="$i18n{showKeyboardShortcutViewer}" external
+    deep-link-focus-id$="[[Setting.kKeyboardShortcuts]]"></cr-link-row>
 <cr-link-row id="showLanguagesInput"
     class="hr" on-click="onShowInputSettingsTap"
     label="$i18n{keyboardShowInputSettings}"

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

@@ -22,6 +22,8 @@ import 'chrome://resources/cr_elements/cr_slider/cr_slider.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 {Setting} from '../../mojom-webui/setting.mojom-webui.js';
+import {DeepLinkingMixin} from '../deep_linking_mixin.js';
 import {routes} from '../os_settings_routes.js';
 import {RouteObserverMixin} from '../route_observer_mixin.js';
 import {Route, Router} from '../router.js';
@@ -31,7 +33,8 @@ import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_prov
 import {InputDeviceSettingsProviderInterface, Keyboard} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_keyboard.html.js';
 
-const SettingsPerDeviceKeyboardElementBase = RouteObserverMixin(PolymerElement);
+const SettingsPerDeviceKeyboardElementBase =
+    DeepLinkingMixin(RouteObserverMixin(PolymerElement));
 
 export class SettingsPerDeviceKeyboardElement extends
     SettingsPerDeviceKeyboardElementBase {
@@ -48,6 +51,16 @@ export class SettingsPerDeviceKeyboardElement extends
       keyboards: {
         type: Array,
       },
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kKeyboardShortcuts,
+        ]),
+      },
     };
   }
 
@@ -73,6 +86,8 @@ export class SettingsPerDeviceKeyboardElement extends
     if (route !== routes.PER_DEVICE_KEYBOARD) {
       return;
     }
+
+    this.attemptDeepLink();
   }
 
   private async fetchConnectedKeyboards(): Promise<void> {

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

@@ -22,7 +22,8 @@ <h2>[[keyboard.name]]</h2>
         id="externalTopRowAreFunctionKeysButton"
         pref="{{topRowAreFunctionKeysPref}}"
         label="$i18n{keyboardSendInvertedFunctionKeys}"
-        sub-label="$i18n{keyboardSendInvertedFunctionKeysDescription}">
+        sub-label="$i18n{keyboardSendInvertedFunctionKeysDescription}"
+        deep-link-focus-id$="[[Setting.kKeyboardFunctionKeys]]">
     </settings-toggle-button>
     <settings-toggle-button
         class="hr" id="blockMetaFunctionKeyRewritesButton"
@@ -43,7 +44,8 @@ <h2>[[keyboard.name]]</h2>
       id="enableAutoRepeatButton"
       class="hr"
       pref="{{enableAutoRepeatPref}}"
-      label="$i18n{keyboardEnableAutoRepeat}">
+      label="$i18n{keyboardEnableAutoRepeat}"
+      deep-link-focus-id$="[[Setting.kKeyboardAutoRepeat]]">
   </settings-toggle-button>
   <iron-collapse
       opened="[[enableAutoRepeatPref.value]]">

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

@@ -26,6 +26,8 @@ import {PluralStringProxyImpl} from 'chrome://resources/js/plural_string_proxy.j
 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 {Setting} from '../../mojom-webui/setting.mojom-webui.js';
+import {DeepLinkingMixin} from '../deep_linking_mixin.js';
 import {routes} from '../os_settings_routes.js';
 import {RouteOriginMixin} from '../route_origin_mixin.js';
 import {Route, Router} from '../router.js';
@@ -36,7 +38,7 @@ import {InputDeviceSettingsProviderInterface, Keyboard} from './input_device_set
 import {getTemplate} from './per_device_keyboard_subsection.html.js';
 
 const SettingsPerDeviceKeyboardSubsectionElementBase =
-    RouteOriginMixin(PolymerElement);
+    DeepLinkingMixin(RouteOriginMixin(PolymerElement));
 
 export class SettingsPerDeviceKeyboardSubsectionElement extends
     SettingsPerDeviceKeyboardSubsectionElementBase {
@@ -135,6 +137,21 @@ export class SettingsPerDeviceKeyboardSubsectionElement extends
         type: String,
         value: '',
       },
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kKeyboardFunctionKeys,
+          Setting.kKeyboardAutoRepeat,
+        ]),
+      },
+
+      keyboardIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -150,6 +167,18 @@ export class SettingsPerDeviceKeyboardSubsectionElement extends
     ];
   }
 
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_KEYBOARD) {
+      return;
+    }
+
+    // If there is more than one keyboard, focus on the first one.
+    if (this.keyboardIndex === 0) {
+      this.attemptDeepLink();
+    }
+  }
+
   protected keyboard: Keyboard;
   private autoRepeatDelays: number[];
   private autoRepeatIntervals: number[];
@@ -163,6 +192,7 @@ export class SettingsPerDeviceKeyboardSubsectionElement extends
   private isInitialized: boolean = false;
   private inputDeviceSettingsProvider: InputDeviceSettingsProviderInterface =
       getInputDeviceSettingsProvider();
+  private keyboardIndex: number;
 
   private updateSettingsToCurrentPrefs(): void {
     this.set(

chrome/test/data/webui/settings/chromeos/per_device_keyboard_subsection_test.js

@@ -7,9 +7,11 @@ import 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {FakeInputDeviceSettingsProvider, fakeKeyboards, Router, routes, setInputDeviceSettingsProviderForTesting, SettingsPerDeviceKeyboardSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
 import {assert} from 'chrome://resources/ash/common/assert.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
-import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
+import {flushTasks, waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
 import {isVisible} from 'chrome://webui-test/test_util.js';
 
+const KEYBOARD_AUTO_REPEAT_SETTING_ID = 412;
+
 suite('PerDeviceKeyboardSubsection', function() {
   /**
    * @type {?SettingsPerDeviceKeyboardSubsectionElement}
@@ -327,4 +329,50 @@ suite('PerDeviceKeyboardSubsection', function() {
     const expectedKeyboardId = subsection.keyboard.id;
     assertEquals(expectedKeyboardId, keyboardId);
   });
+
+  /**
+   * Verify entering the page with search tags matched will auto focus the
+   * searched element.
+   */
+  test('deep linking mixin focus on the first searched element', async () => {
+    await initializePerDeviceKeyboardSubsection();
+    const autoRepeatToggle =
+        subsection.shadowRoot.querySelector('#enableAutoRepeatButton');
+    subsection.keyboardIndex = 0;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=keyboard&settingId=' +
+        encodeURIComponent(KEYBOARD_AUTO_REPEAT_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_KEYBOARD,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+
+    await waitAfterNextRender(autoRepeatToggle);
+    assertTrue(!!autoRepeatToggle);
+    assertEquals(subsection.shadowRoot.activeElement, autoRepeatToggle);
+  });
+
+  /**
+   * Verify entering the page with search tags matched wll not auto focus the
+   * searched element if it's not the first keyboard displayed.
+   */
+  test('deep linkng mixin does not focus on second element', async () => {
+    await initializePerDeviceKeyboardSubsection();
+    const autoRepeatToggle =
+        subsection.shadowRoot.querySelector('#enableAutoRepeatButton');
+    subsection.keyboardIndex = 1;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=keyboard&settingId=' +
+        encodeURIComponent(KEYBOARD_AUTO_REPEAT_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_KEYBOARD,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+    await flushTasks();
+
+    assertTrue(!!autoRepeatToggle);
+    assertFalse(!!subsection.shadowRoot.activeElement);
+  });
 });