customization: Add routes for graphics tablet subpage

- Add a blank subpage for the graphics tablet.
- Add the route for the subpage.

Screenshot: https://screenshot.googleplex.com/AyVz2ruMZf4gfoQ

Bug: b/241965717
Test: browser_tests --gtest_filter=*OSSettingsDevicePageTest*
Change-Id: I8dcbd7a66ba1c83f4d13740159099e1ddfc5a2ba
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4611687
Commit-Queue: Yuhan Yang <yyhyyh@google.com>
Reviewed-by: Wes Okuhara <wesokuhara@google.com>
Cr-Commit-Position: refs/heads/main@{#1158493}

ash/components/arc/mojom/intent_helper.mojom

@@ -178,8 +178,9 @@ enum ChromePage {
   PERDEVICEMOUSE = 86,
   PERDEVICETOUCHPAD = 87,
   PERDEVICEPOINTINGSTICK = 88,
+  GRAPHICSTABLET = 89,
 
-  // Next value to be used is 89.
+  // Next value to be used is 90.
 };
 
 // Describes an unique chrome app.

chrome/browser/resources/settings/chromeos/BUILD.gn

@@ -85,6 +85,7 @@ build_webui("build") {
     "device_page/display.ts",
     "device_page/display_layout.ts",
     "device_page/display_overscan_dialog.ts",
+    "device_page/graphics_tablet_subpage.ts",
     "device_page/keyboard.ts",
     "device_page/per_device_keyboard.ts",
     "device_page/per_device_keyboard_remap_keys.ts",

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

@@ -143,6 +143,11 @@
       <settings-stylus prefs="{{prefs}}"></settings-stylus>
     </os-settings-subpage>
   </template>
+  <template is="dom-if" route-path="/graphics-tablet">
+    <os-settings-subpage page-title="$i18n{tabletTitle}">
+      <settings-graphics-tablet-subpage></settings-graphics-tablet-subpage>
+    </os-settings-subpage>
+  </template>
   <template is="dom-if" route-path="/display">
     <os-settings-subpage page-title="$i18n{displayTitle}">
       <settings-display prefs="{{prefs}}"></settings-display>

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

@@ -13,6 +13,7 @@ import 'chrome://resources/cr_elements/icons.html.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './audio.js';
 import './display.js';
+import './graphics_tablet_subpage.js';
 import './keyboard.js';
 import './per_device_keyboard.js';
 import './per_device_keyboard_remap_keys.js';
@@ -189,6 +190,9 @@ class SettingsDevicePageElement extends SettingsDevicePageElementBase {
           if (routes.POWER) {
             map.set(routes.POWER.path, '#powerRow');
           }
+          if (routes.GRAPHICS_TABLET) {
+            map.set(routes.GRAPHICS_TABLET.path, '#tabletRow');
+          }
           return map;
         },
       },
@@ -446,8 +450,7 @@ class SettingsDevicePageElement extends SettingsDevicePageElementBase {
    * Handler for tapping the Graphics tablet settings menu item.
    */
   private onGraphicsTabletClick() {
-    // TODO(yyhyyh@): Add Graphics tablet route and subpage, then implement
-    // the click function.
+    Router.getInstance().navigateTo(routes.GRAPHICS_TABLET);
   }
 
   /**

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

@@ -0,0 +1 @@
+<div id="graphicsTabletSubpageTitle">$i18n{tabletTitle}</div>

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

@@ -0,0 +1,54 @@
+// 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
+ * 'settings-graphics-tablet-subpage' allow users to configure their graphics
+ * tablet settings for each device in system settings.
+ */
+
+import '../icons.html.js';
+import '../settings_shared.css.js';
+
+import {I18nMixin, I18nMixinInterface} from 'chrome://resources/cr_elements/i18n_mixin.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {RouteObserverMixin, RouteObserverMixinInterface} from '../route_observer_mixin.js';
+import {Route, routes} from '../router.js';
+
+import {getTemplate} from './graphics_tablet_subpage.html.js';
+
+const SettingsGraphicsTabletSubpageElementBase =
+    RouteObserverMixin(I18nMixin(PolymerElement)) as {
+      new (): PolymerElement & I18nMixinInterface & RouteObserverMixinInterface,
+    };
+
+export class SettingsGraphicsTabletSubpageElement extends
+    SettingsGraphicsTabletSubpageElementBase {
+  static get is() {
+    return 'settings-graphics-tablet-subpage' as const;
+  }
+
+  static get template(): HTMLTemplateElement {
+    return getTemplate();
+  }
+
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.GRAPHICS_TABLET) {
+      return;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [SettingsGraphicsTabletSubpageElement.is]:
+        SettingsGraphicsTabletSubpageElement;
+  }
+}
+
+customElements.define(
+    SettingsGraphicsTabletSubpageElement.is,
+    SettingsGraphicsTabletSubpageElement);

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

@@ -23,6 +23,7 @@ import './device_page/fake_input_device_data.js';
 import './device_page/fake_input_device_settings_provider.js';
 import './device_page/input_device_mojo_interface_provider.js';
 import './device_page/input_device_settings_types.js';
+import './device_page/graphics_tablet_subpage.js';
 import './device_page/keyboard.js';
 import './device_page/per_device_keyboard.js';
 import './device_page/per_device_keyboard_remap_keys.js';
@@ -101,6 +102,7 @@ export {DevicePageBrowserProxy, DevicePageBrowserProxyImpl, IdleBehavior, LidClo
 export * as fakeCrosAudioConfig from './device_page/fake_cros_audio_config.js';
 export {fakeKeyboards, fakeKeyboards2, fakeMice, fakeMice2, fakePointingSticks, fakePointingSticks2, fakeTouchpads, fakeTouchpads2} from './device_page/fake_input_device_data.js';
 export {FakeInputDeviceSettingsProvider} from './device_page/fake_input_device_settings_provider.js';
+export {SettingsGraphicsTabletSubpageElement} from './device_page/graphics_tablet_subpage.js';
 export {getInputDeviceSettingsProvider, setInputDeviceSettingsProviderForTesting, setupFakeInputDeviceSettingsProvider} from './device_page/input_device_mojo_interface_provider.js';
 export {InputDeviceSettingsPolicy, Keyboard, MetaKey, ModifierKey, Mouse, PolicyStatus} from './device_page/input_device_settings_types.js';
 export {KeyboardRemapModifierKeyRowElement} from './device_page/keyboard_remap_modifier_key_row.js';

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

@@ -159,6 +159,7 @@ export interface OsSettingsRoutes extends MinimumRoutes {
   FILES: Route;
   GOOGLE_ASSISTANT: Route;
   GOOGLE_DRIVE: Route;
+  GRAPHICS_TABLET: Route;
   HOTSPOT_DETAIL: Route;
   INTERNET: Route;
   INTERNET_NETWORKS: Route;
@@ -349,6 +350,11 @@ export function createRoutes(): OsSettingsRoutes {
         routesMojom.PER_DEVICE_KEYBOARD_REMAP_KEYS_SUBPAGE_PATH,
         Subpage.kPerDeviceKeyboardRemapKeys);
   }
+  if (loadTimeData.getBoolean('enablePeripheralCustomization')) {
+    r.GRAPHICS_TABLET = createSubpage(
+        r.DEVICE, routesMojom.GRAPHICS_TABLET_SUBPAGE_PATH,
+        Subpage.kGraphicsTablet);
+  }
   r.STORAGE = createSubpage(
       r.DEVICE, routesMojom.STORAGE_SUBPAGE_PATH, Subpage.kStorage);
   r.EXTERNAL_STORAGE_PREFERENCES = createSubpage(

chrome/browser/ui/ash/arc_open_url_delegate_impl.cc

@@ -83,6 +83,8 @@ constexpr auto kOSSettingsMap = base::MakeFixedFlatMap<ChromePage,
      chromeos::settings::mojom::kPrintingDetailsSubpagePath},
     {ChromePage::DATETIME, chromeos::settings::mojom::kDateAndTimeSectionPath},
     {ChromePage::DISPLAY, chromeos::settings::mojom::kDisplaySubpagePath},
+    {ChromePage::GRAPHICSTABLET,
+     chromeos::settings::mojom::kGraphicsTabletSubpagePath},
     {ChromePage::HELP, chromeos::settings::mojom::kAboutChromeOsSectionPath},
     {ChromePage::KEYBOARDOVERLAY,
      chromeos::settings::mojom::kKeyboardSubpagePath},

chrome/browser/ui/ash/arc_open_url_delegate_impl_browsertest.cc

@@ -359,6 +359,9 @@ void TestAllOSSettingPages(const GURL& base_url) {
       ChromePage::PERDEVICEKEYBOARD,
       base_url.Resolve(
           chromeos::settings::mojom::kPerDeviceKeyboardSubpagePath));
+  TestOpenOSSettingsChromePage(
+      ChromePage::GRAPHICSTABLET,
+      base_url.Resolve(chromeos::settings::mojom::kGraphicsTabletSubpagePath));
 }
 
 void TestAllBrowserSettingPages(const GURL& base_url) {

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

@@ -51,6 +51,7 @@ using ::chromeos::settings::mojom::kAudioSubpagePath;
 using ::chromeos::settings::mojom::kDeviceSectionPath;
 using ::chromeos::settings::mojom::kDisplaySubpagePath;
 using ::chromeos::settings::mojom::kExternalStorageSubpagePath;
+using ::chromeos::settings::mojom::kGraphicsTabletSubpagePath;
 using ::chromeos::settings::mojom::kKeyboardSubpagePath;
 using ::chromeos::settings::mojom::kPerDeviceKeyboardRemapKeysSubpagePath;
 using ::chromeos::settings::mojom::kPerDeviceKeyboardSubpagePath;
@@ -1326,6 +1327,16 @@ void DeviceSection::RegisterHierarchy(HierarchyGenerator* generator) const {
         mojom::kPerDevicePointingStickSubpagePath);
   }
 
+  if (base::FeatureList::IsEnabled(ash::features::kPeripheralCustomization)) {
+    // TODO(yyhyyh@): Add icon for graphics tablet to replace the temporary
+    // stylus icon.
+    generator->RegisterTopLevelSubpage(IDS_SETTINGS_GRAPHICS_TABLET_TITLE,
+                                       mojom::Subpage::kGraphicsTablet,
+                                       mojom::SearchResultIcon::kStylus,
+                                       mojom::SearchResultDefaultRank::kMedium,
+                                       mojom::kGraphicsTabletSubpagePath);
+  }
+
   // Keyboard.
   generator->RegisterTopLevelSubpage(
       IDS_SETTINGS_KEYBOARD_TITLE, mojom::Subpage::kKeyboard,

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

@@ -55,7 +55,8 @@ class OsSettingsManagerTest : public testing::Test {
     scoped_feature_list_.InitWithFeatures(
         {::features::kAccessibilityChromeVoxPageMigration,
          ::features::kAccessibilitySelectToSpeakPageMigration,
-         ash::features::kInputDeviceSettingsSplit},
+         ash::features::kInputDeviceSettingsSplit,
+         ash::features::kPeripheralCustomization},
         {});
     ASSERT_TRUE(profile_manager_.SetUp());
     TestingProfile* profile =

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

@@ -87,6 +87,7 @@ enum Subpage {
   kPerDeviceTouchpad = 411,
   kPerDevicePointingStick = 412,
   kPerDeviceKeyboardRemapKeys = 413,
+  kGraphicsTablet = 414,
 
   // Personalization section.
   // 500 was used for kChangePicture. Do not reuse.
@@ -228,6 +229,7 @@ const string kAudioSubpagePath = "audio";
 const string kStorageSubpagePath = "storage";
 const string kExternalStorageSubpagePath = "storage/externalStoragePreferences";
 const string kPowerSubpagePath = "power";
+const string kGraphicsTabletSubpagePath = "graphics-tablet";
 
 // Personalization section.
 const string kPersonalizationSectionPath = "personalization";

chrome/test/data/webui/settings/chromeos/device_page/device_page_tests.js

@@ -25,6 +25,7 @@ const TestNames = {
   DevicePage: 'device page',
   Audio: 'audio',
   Display: 'display',
+  GraphicsTablet: 'graphics tablet',
   Keyboard: 'keyboard',
   PerDeviceMouse: 'per-device mouse',
   PerDeviceTouchpad: 'per-device touchpad',
@@ -717,9 +718,7 @@ suite('SettingsDevicePage', function() {
       const page =
           devicePage.shadowRoot.querySelector('settings-per-device-keyboard');
       assert(page);
-      return Promise.resolve(page).then(function(page) {
-        perDeviceKeyboardPage = page;
-      });
+      perDeviceKeyboardPage = page;
     });
 
     test('per-device keyboard subpage visibility', function() {
@@ -2067,6 +2066,30 @@ suite('SettingsDevicePage', function() {
     });
   });
 
+  suite(assert(TestNames.GraphicsTablet), function() {
+    let graphicsTabletPage;
+    setup(async function() {
+      setPeripheralCustomizationEnabled(true);
+      await init();
+      const row =
+          assert(devicePage.shadowRoot.querySelector(`#main #tabletRow`));
+      row.click();
+      assertEquals(routes.GRAPHICS_TABLET, Router.getInstance().currentRoute);
+      const page = devicePage.shadowRoot.querySelector(
+          'settings-graphics-tablet-subpage');
+      assert(page);
+      return Promise.resolve(page).then(function(page) {
+        graphicsTabletPage = page;
+      });
+    });
+
+    test('graphics tablet subpage visibility', function() {
+      assertEquals(routes.GRAPHICS_TABLET, Router.getInstance().currentRoute);
+      assertTrue(isVisible(graphicsTabletPage.shadowRoot.querySelector(
+          '#graphicsTabletSubpageTitle')));
+    });
+  });
+
   suite(assert(TestNames.Display), function() {
     let displayPage;
     let browserProxy;

tools/metrics/histograms/enums.xml

@@ -78824,6 +78824,7 @@ Called by update_net_trust_anchors.py.-->
   <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="414" label="Graphics Tablet"/>
   <int value="500" label="Change Picture"/>
   <int value="501" label="Ambient Mode"/>
   <int value="502" label="Ambient Mode Photos (Deprecated)"/>