Settings Split: Add Routes for keyboard remapping page

- Add routes for keyboard remapping subpage.
- Implement remap keys button click function redirecting to a subpage.
- Pass keyboardId to the subpage using url query.

Screenshot:
click remap button under fake keyboard id 0:
https://screenshot.googleplex.com/8nRofHktb2MZusr
click remap button under fake keyboard id 8:
https://screenshot.googleplex.com/8xwHHvjmQHdgFgR

Bug: b/241965700
Test: browser_tests OSSettingsPerDeviceKeyboardSubsectionV3Test
Change-Id: Ia631ea21dc74a2e376ac12a2dd0991382bd46cb4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4230954
Commit-Queue: Yuhan Yang <yyhyyh@google.com>
Reviewed-by: Tom Sepez <tsepez@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: David Padlipsky <dpad@google.com>
Cr-Commit-Position: refs/heads/main@{#1104730}

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

@@ -143,6 +143,14 @@
       </os-settings-subpage>
     </template>
   </template>
+  <template is="dom-if"
+      route-path="/per-device-keyboard/remap-keys">
+    <os-settings-subpage
+        page-title="$i18n{remapKeyboardKeysRowLabel}">
+      <settings-per-device-keyboard-remap-keys>
+      </settings-per-device-keyboard-remap-keys>
+    </os-settings-subpage>
+  </template>
   <template is="dom-if" route-path="/power">
     <os-settings-subpage
         page-title="$i18n{powerTitle}">

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

@@ -11,6 +11,7 @@ import './audio.js';
 import './display.js';
 import './keyboard.js';
 import './per_device_keyboard.js';
+import './per_device_keyboard_remap_keys.js';
 import './per_device_mouse.js';
 import './per_device_pointing_stick.js';
 import './per_device_touchpad.js';
@@ -147,6 +148,11 @@ class SettingsDevicePageElement extends SettingsDevicePageElementBase {
           if (routes.PER_DEVICE_KEYBOARD) {
             map.set(routes.PER_DEVICE_KEYBOARD.path, '#perDeviceKeyboardRow');
           }
+          if (routes.PER_DEVICE_KEYBOARD_REMAP_KEYS) {
+            map.set(
+                routes.PER_DEVICE_KEYBOARD_REMAP_KEYS.path,
+                '#perDeviceKeyboardRemapKeys');
+          }
           if (routes.KEYBOARD) {
             map.set(routes.KEYBOARD.path, '#keyboardRow');
           }

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

@@ -0,0 +1 @@
+<h2>{{keyboardId}}</h2>

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

@@ -0,0 +1,84 @@
+// 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-keyboard-settings-remap-keys' displays the remapped keys and
+ * allow users to configure their keyboard remapped keys for each keyboard.
+ */
+
+import '../../icons.html.js';
+import '../../settings_shared.css.js';
+
+import {I18nMixin, I18nMixinInterface} from 'chrome://resources/cr_elements/i18n_mixin.js';
+import {assert} from 'chrome://resources/js/assert_ts.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';
+import {RouteObserverMixin, RouteObserverMixinInterface} from '../route_observer_mixin.js';
+import {Route, Router} from '../router.js';
+
+import {Keyboard} from './input_device_settings_types.js';
+import {getTemplate} from './per_device_keyboard_remap_keys.html.js';
+
+const SettingsPerDeviceKeyboardRemapKeysElementBase =
+    RouteObserverMixin(I18nMixin(PolymerElement)) as {
+      new (): PolymerElement & I18nMixinInterface & RouteObserverMixinInterface,
+    };
+
+export class SettingsPerDeviceKeyboardRemapKeysElement extends
+    SettingsPerDeviceKeyboardRemapKeysElementBase {
+  static get is(): string {
+    return 'settings-per-device-keyboard-remap-keys';
+  }
+
+  static get template(): HTMLTemplateElement {
+    return getTemplate();
+  }
+
+  static get properties(): PolymerElementProperties {
+    return {
+      keyboardId: String,
+
+      keyboard: {
+        type: Object,
+      },
+    };
+  }
+
+  protected keyboard: Keyboard;
+  // This variable is temporary and only to verify the remapping subpage has
+  // receive the correct keyboardId. Will remove it from properties after
+  // implementing getKeyboard() method.
+  private keyboardId: string;
+
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_KEYBOARD_REMAP_KEYS) {
+      return;
+    }
+    this.getKeyboard();
+  }
+
+  private getKeyboard(): void {
+    const keyboardId =
+        Router.getInstance().getQueryParameters().get('keyboardId');
+    assert(keyboardId);
+    this.keyboardId = keyboardId;
+    // TODO(yyhyyh@): Get the keyboard object using keyboardId and remove
+    // variable "this.keyboardId".
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'settings-per-device-keyboard-remap-keys':
+        SettingsPerDeviceKeyboardRemapKeysElement;
+  }
+}
+
+customElements.define(
+    SettingsPerDeviceKeyboardRemapKeysElement.is,
+    SettingsPerDeviceKeyboardRemapKeysElement);

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

@@ -17,16 +17,27 @@ import '../../controls/settings_radio_group.js';
 import '../../controls/settings_slider.js';
 import '../../controls/settings_toggle_button.js';
 import '../../settings_shared.css.js';
+import '../os_settings_page/os_settings_animated_pages.js';
+import '../os_settings_page/os_settings_subpage.js';
+import './per_device_keyboard_remap_keys.js';
 import 'chrome://resources/cr_elements/cr_slider/cr_slider.js';
 
 import {PluralStringProxyImpl} from 'chrome://resources/js/plural_string_proxy.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';
+import {RouteOriginMixin} from '../route_origin_mixin.js';
+import {Route, Router} from '../router.js';
+
 import {Keyboard} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_keyboard_subsection.html.js';
 
-export class SettingsPerDeviceKeyboardSubsectionElement extends PolymerElement {
+const SettingsPerDeviceKeyboardSubsectionElementBase =
+    RouteOriginMixin(PolymerElement);
+
+export class SettingsPerDeviceKeyboardSubsectionElement extends
+    SettingsPerDeviceKeyboardSubsectionElementBase {
   static get is(): string {
     return 'settings-per-device-keyboard-subsection';
   }
@@ -140,6 +151,7 @@ export class SettingsPerDeviceKeyboardSubsectionElement extends PolymerElement {
   protected keyboard: Keyboard;
   private autoRepeatDelays: number[];
   private autoRepeatIntervals: number[];
+  private route_: Route = routes.PER_DEVICE_KEYBOARD;
   private topRowAreFunctionKeysPref: chrome.settingsPrivate.PrefObject;
   private blockMetaFunctionKeyRewritesPref: chrome.settingsPrivate.PrefObject;
   private enableAutoRepeatPref: chrome.settingsPrivate.PrefObject;
@@ -199,7 +211,12 @@ export class SettingsPerDeviceKeyboardSubsectionElement extends PolymerElement {
   }
 
   private onRemapKeyboardKeysTap(): void {
-    // TODO(yyhyyh@): Create keyboard remapping page and its route.
+    const url = new URLSearchParams(
+        'keyboardId=' + encodeURIComponent(this.keyboard.id));
+
+    Router.getInstance().navigateTo(
+        routes.PER_DEVICE_KEYBOARD_REMAP_KEYS,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
   }
 }
 

chrome/browser/resources/settings/chromeos/os_route.js

@@ -152,6 +152,10 @@ function createOSSettingsRoutes() {
     r.PER_DEVICE_TOUCHPAD = createSubpage(
         r.DEVICE, routesMojomWebui.PER_DEVICE_TOUCHPAD_SUBPAGE_PATH,
         Subpage.kPerDeviceTouchpad);
+    r.PER_DEVICE_KEYBOARD_REMAP_KEYS = createSubpage(
+        r.PER_DEVICE_KEYBOARD,
+        routesMojomWebui.PER_DEVICE_KEYBOARD_REMAP_KEYS_SUBPAGE_PATH,
+        Subpage.kPerDeviceKeyboardRemapKeys);
   }
   r.STORAGE = createSubpage(
       r.DEVICE, routesMojomWebui.STORAGE_SUBPAGE_PATH, Subpage.kStorage);

chrome/browser/resources/settings/chromeos/os_settings.gni

@@ -48,6 +48,7 @@ web_component_files = [
   "chromeos/device_page/display_overscan_dialog.ts",
   "chromeos/device_page/keyboard.ts",
   "chromeos/device_page/per_device_keyboard.ts",
+  "chromeos/device_page/per_device_keyboard_remap_keys.ts",
   "chromeos/device_page/per_device_keyboard_subsection.ts",
   "chromeos/device_page/per_device_mouse.ts",
   "chromeos/device_page/per_device_mouse_subsection.ts",

chrome/browser/resources/settings/chromeos/os_settings.js

@@ -21,6 +21,7 @@ import './device_page/input_device_mojo_interface_provider.js';
 import './device_page/input_device_settings_types.js';
 import './device_page/keyboard.js';
 import './device_page/per_device_keyboard.js';
+import './device_page/per_device_keyboard_remap_keys.js';
 import './device_page/per_device_keyboard_subsection.js';
 import './device_page/per_device_mouse.js';
 import './device_page/per_device_mouse_subsection.js';
@@ -160,6 +161,7 @@ export {FakeInputDeviceSettingsProvider} from './device_page/fake_input_device_s
 export {getInputDeviceSettingsProvider, setInputDeviceSettingsProviderForTesting, setupFakeInputDeviceSettingsProvider} from './device_page/input_device_mojo_interface_provider.js';
 export {MetaKey} from './device_page/input_device_settings_types.js';
 export {SettingsPerDeviceKeyboardElement} from './device_page/per_device_keyboard.js';
+export {SettingsPerDeviceKeyboardRemapKeysElement} from './device_page/per_device_keyboard_remap_keys.js';
 export {SettingsPerDeviceKeyboardSubsectionElement} from './device_page/per_device_keyboard_subsection.js';
 export {SettingsPerDeviceMouseSubsectionElement} from './device_page/per_device_mouse_subsection.js';
 export {SettingsPerDevicePointingStickSubsectionElement} from './device_page/per_device_pointing_stick_subsection.js';

chrome/browser/resources/settings/chromeos/os_settings_routes.js

@@ -91,6 +91,7 @@ import {Route} from './router.js';
  *   OS_SYNC: !Route,
  *   OS_PEOPLE: !Route,
  *   PER_DEVICE_KEYBOARD: !Route,
+ *   PER_DEVICE_KEYBOARD_REMAP_KEYS: !Route,
  *   PER_DEVICE_MOUSE: !Route,
  *   PER_DEVICE_POINTING_STICK: !Route,
  *   PER_DEVICE_TOUCHPAD: !Route,

chrome/browser/ui/webui/settings/ash/device_section.cc

@@ -48,6 +48,7 @@ using ::chromeos::settings::mojom::kDeviceSectionPath;
 using ::chromeos::settings::mojom::kDisplaySubpagePath;
 using ::chromeos::settings::mojom::kExternalStorageSubpagePath;
 using ::chromeos::settings::mojom::kKeyboardSubpagePath;
+using ::chromeos::settings::mojom::kPerDeviceKeyboardRemapKeysSubpagePath;
 using ::chromeos::settings::mojom::kPerDeviceKeyboardSubpagePath;
 using ::chromeos::settings::mojom::kPerDeviceMouseSubpagePath;
 using ::chromeos::settings::mojom::kPerDevicePointingStickSubpagePath;
@@ -1066,6 +1067,14 @@ void DeviceSection::RegisterHierarchy(HierarchyGenerator* generator) const {
                                        mojom::SearchResultIcon::kKeyboard,
                                        mojom::SearchResultDefaultRank::kMedium,
                                        mojom::kPerDeviceKeyboardSubpagePath);
+
+    generator->RegisterNestedSubpage(
+        IDS_SETTINGS_KEYBOARD_REMAP_KEYS_ROW_LABEL,
+        mojom::Subpage::kPerDeviceKeyboardRemapKeys,
+        mojom::Subpage::kPerDeviceKeyboard, mojom::SearchResultIcon::kKeyboard,
+        mojom::SearchResultDefaultRank::kMedium,
+        mojom::kPerDeviceKeyboardRemapKeysSubpagePath);
+
     // Per-device Mouse.
     generator->RegisterTopLevelSubpage(IDS_SETTINGS_MOUSE_TITLE,
                                        mojom::Subpage::kPerDeviceMouse,

chrome/browser/ui/webui/settings/chromeos/constants/routes.mojom

@@ -84,6 +84,7 @@ enum Subpage {
   kPerDeviceMouse = 410,
   kPerDeviceTouchpad = 411,
   kPerDevicePointingStick = 412,
+  kPerDeviceKeyboardRemapKeys = 413,
 
   // Personalization section.
   // 500 was used for kChangePicture. Do not reuse.
@@ -209,6 +210,8 @@ const string kSyncDeprecatedAdvancedSubpagePath = "syncSetup/advanced";
 const string kDeviceSectionPath = "device";
 const string kPointersSubpagePath = "pointer-overlay";
 const string kPerDeviceKeyboardSubpagePath = "per-device-keyboard";
+const string kPerDeviceKeyboardRemapKeysSubpagePath =
+    "per-device-keyboard/remap-keys";
 const string kPerDeviceMouseSubpagePath = "per-device-mouse";
 const string kPerDevicePointingStickSubpagePath = "per-device-pointing-stick";
 const string kPerDeviceTouchpadSubpagePath = "per-device-touchpad";

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

@@ -507,8 +507,15 @@ TEST_F('OSSettingsCrostiniExtraContainerPageV3Test', 'AllJsTests', () => {
  ['ParentalControlsPage', 'parental_controls_page_test.js'],
  ['PeoplePage', 'os_people_page_test.js'],
  ['PeoplePageQuickUnlock', 'quick_unlock_authenticate_browsertest_chromeos.js'],
- ['PerDeviceKeyboard', 'per_device_keyboard_test.js'],
- ['PerDeviceKeyboardSubsection', 'per_device_keyboard_subsection_test.js'],
+ [
+   'PerDeviceKeyboard', 'per_device_keyboard_test.js',
+   {enabled: ['ash::features::kInputDeviceSettingsSplit']}
+ ],
+ [
+   'PerDeviceKeyboardSubsection',
+   'per_device_keyboard_subsection_test.js',
+   {enabled: ['ash::features::kInputDeviceSettingsSplit']},
+ ],
  ['PerDeviceMouseSubsection', 'per_device_mouse_subsection_test.js'],
  [
    'PerDevicePointingStickSubsection',

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {fakeKeyboards, SettingsPerDeviceKeyboardSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
+import {fakeKeyboards, Router, routes, 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';
@@ -20,6 +20,7 @@ suite('PerDeviceKeyboardSubsection', function() {
 
   teardown(() => {
     subsection = null;
+    Router.getInstance().resetRouteForTesting();
   });
 
   /**
@@ -214,4 +215,29 @@ suite('PerDeviceKeyboardSubsection', function() {
     assertEquals(0, subsection.keyboard.settings.modifierRemappings.size);
     assertEquals('', remapKeysSubLabel.textContent.trim());
   });
+
+  /**
+   * Verify clicking the Keyboard remap keys button will be redirecting to the
+   * remapped keys subpage.
+   */
+  test('click remap keys button redirect to new subpage', async () => {
+    await initializePerDeviceKeyboardSubsection();
+    const remapKeysRow =
+        subsection.shadowRoot.querySelector('#remapKeyboardKeys');
+    assertTrue(!!remapKeysRow);
+    remapKeysRow.click();
+
+    await flushTasks();
+    assertEquals(
+        routes.PER_DEVICE_KEYBOARD_REMAP_KEYS,
+        Router.getInstance().getCurrentRoute());
+
+    const urlSearchQuery =
+        Router.getInstance().getQueryParameters().get('keyboardId');
+    assertTrue(!!urlSearchQuery);
+    assertFalse(isNaN(urlSearchQuery));
+    const keyboardId = Number(urlSearchQuery);
+    const expectedKeyboardId = subsection.keyboard.id;
+    assertEquals(expectedKeyboardId, keyboardId);
+  });
 });

tools/metrics/histograms/enums.xml

@@ -77005,6 +77005,7 @@ Called by update_net_trust_anchors.py.-->
   <int value="410" label="Per-device Mouse"/>
   <int value="411" label="Per-device Touchpad"/>
   <int value="412" label="Per-device Pointing Stick"/>
+  <int value="413" label="Per-device Keyboard Remap Keys"/>
   <int value="500" label="Change Picture"/>
   <int value="501" label="Ambient Mode"/>
   <int value="502" label="Ambient Mode Photos (Deprecated)"/>