[OsSettingsDeepLinking] Add deep links to the Devices page

Adds deep links to the Devices page, including the Pointers, Keyboard,
Display, Power, and Stylus subpages. Also adds focus() overrides to
the settings_dropdown_menu and settings_slider to assist with deep
linking.

Bug: 1084154
Change-Id: I8503a7cde63911f050c50a81b3dbba9ceaf0bc4a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2370083
Commit-Queue: Daniel Classon <dclasson@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801511}

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

@@ -39,6 +39,9 @@ js_library("device_page_browser_proxy") {
 js_library("pointers") {
   deps = [
     ":device_page_browser_proxy",
+    "..:deep_linking_behavior",
+    "..:os_route",
+    "../..:router",
     "../../controls:settings_toggle_button",
     "../localized_link:localized_link",
   ]
@@ -47,6 +50,7 @@ js_library("pointers") {
 js_library("keyboard") {
   deps = [
     ":device_page_browser_proxy",
+    "..:deep_linking_behavior",
     "..:os_route",
     "../..:router",
     "../../controls:settings_dropdown_menu",
@@ -61,6 +65,7 @@ js_library("keyboard") {
 js_library("stylus") {
   deps = [
     ":device_page_browser_proxy",
+    "..:deep_linking_behavior",
     "..:metrics_recorder",
     "../../prefs:prefs_types",
     "//ui/webui/resources/cr_elements/policy:cr_policy_indicator",
@@ -72,6 +77,7 @@ js_library("stylus") {
 js_library("display") {
   deps = [
     ":display_layout",
+    "..:deep_linking_behavior",
     "../..:router",
     "../../controls:settings_dropdown_menu",
     "../../controls:settings_slider",
@@ -129,6 +135,7 @@ js_library("night_light_slider") {
 js_library("power") {
   deps = [
     ":device_page_browser_proxy",
+    "..:deep_linking_behavior",
     "..:metrics_recorder",
     "../..:router",
     "../../prefs:prefs_types",

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

@@ -153,7 +153,7 @@ Polymer({
   },
 
   /**
-   * Handler for tapping the Keyboard settings menu item.
+   * Handler for tapping the Stylus settings menu item.
    * @private
    */
   onStylusTap_() {

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

@@ -13,6 +13,7 @@
 <link rel="import" href="display_layout.html">
 <link rel="import" href="display_overscan_dialog.html">
 <link rel="import" href="night_light_slider.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../../controls/settings_dropdown_menu.html">
 <link rel="import" href="../../controls/settings_slider.html">
 <link rel="import" href="../../prefs/prefs_behavior.html">
@@ -88,15 +89,18 @@
         </div>
         <display-layout id="displayLayout"
             selected-display="[[selectedDisplay]]"
-            on-select-display="onSelectDisplay_">
+            on-select-display="onSelectDisplay_"
+            deep-link-focus-id$="[[Setting.kDisplayArrangement]]">
         </display-layout>
 
         <template is="dom-if"
             if="[[showMirror_(unifiedDesktopMode_, displays)]]" restamp>
           <div class="secondary self-start">
-            <cr-checkbox checked="[[isMirrored_(displays)]]"
+            <cr-checkbox id="displayMirrorCheckbox"
+                checked="[[isMirrored_(displays)]]"
                 on-click="onMirroredTap_"
-                aria-label="[[getDisplayMirrorText_(displays)]]">
+                aria-label="[[getDisplayMirrorText_(displays)]]"
+                deep-link-focus-id$="[[Setting.kDisplayMirroring]]">
               <div class="text-area">[[getDisplayMirrorText_(displays)]]</div>
             </cr-checkbox>
           </div>
@@ -127,7 +131,8 @@
           </div>
           <cr-toggle checked="[[unifiedDesktopMode_]]"
               on-click="onUnifiedDesktopTap_"
-              aria-labelledby="displayUnifiedDesktopCheckboxLabel">
+              aria-labelledby="displayUnifiedDesktopCheckboxLabel"
+              deep-link-focus-id$="[[Setting.kAllowWindowsToSpanDisplays]]">
           </cr-toggle>
         </div>
       </template>
@@ -179,7 +184,8 @@
                 selectedDisplay,
                 prefs.cros.device_display_resolution)]]"
             on-cr-slider-value-changed="onDisplaySizeSliderDrag_"
-            aria-describedby="displayZoomSublabel logicalResolutionText">
+            aria-describedby="displayZoomSublabel logicalResolutionText"
+            deep-link-focus-id$="[[Setting.kDisplaySize]]">
         </settings-slider>
       </div>
 
@@ -206,7 +212,8 @@
                   prefs.cros.device_display_resolution)]]"
               label="$i18n{displayResolutionTitle}"
               aria-describedby="displayResolutionSublabel"
-              menu-options="[[displayModeList_]]">
+              menu-options="[[displayModeList_]]"
+              deep-link-focus-id$="[[Setting.kDisplayResolution]]">
           </settings-dropdown-menu>
         </div>
       </template>
@@ -234,7 +241,8 @@
                   prefs.cros.device_display_resolution)]]"
               label="Refresh Rate Menu"
               aria-describedby="displayRefreshRateSublabel"
-              menu-options="[[refreshRateList_]]">
+              menu-options="[[refreshRateList_]]"
+              deep-link-focus-id$="[[Setting.kDisplayRefreshRate]]">
           </settings-dropdown-menu>
         </div>
       </template>
@@ -256,7 +264,8 @@
           <select class="md-select"
               value="[[selectedDisplay.rotation]]"
               aria-labelledby="displayOrientation"
-              on-change="onOrientationChange_">
+              on-change="onOrientationChange_"
+              deep-link-focus-id$="[[Setting.kDisplayOrientation]]">
             <option value="-1"
                 hidden$="[[!showAutoRotateOption_(selectedDisplay)]]">
               $i18n{displayOrientationAutoRotate}
@@ -275,14 +284,16 @@
             class="indented hr"
             pref="{{prefs.ash.ambient_color.enabled}}"
             label="$i18n{displayAmbientColorTitle}"
-            sub-label="$i18n{displayAmbientColorSubtitle}">
+            sub-label="$i18n{displayAmbientColorSubtitle}"
+            deep-link-focus-id$="[[Setting.kAmbientColors]]">
         </settings-toggle-button>
       </template>
 
       <cr-link-row class="indented hr" id="overscan"
           label="$i18n{displayOverscanPageTitle}"
           sub-label="$i18n{displayOverscanPageText}" on-click="onOverscanTap_"
-          hidden$="[[!showOverscanSetting_(selectedDisplay)]]" embedded>
+          hidden$="[[!showOverscanSetting_(selectedDisplay)]]" embedded
+          deep-link-focus-id$="[[Setting.kDisplayOverscan]]">
       </cr-link-row>
 
       <settings-display-overscan-dialog id="displayOverscan"
@@ -295,7 +306,8 @@
           label="$i18n{displayTouchCalibrationTitle}"
           sub-label="$i18n{displayTouchCalibrationText}"
           on-click="onTouchCalibrationTap_"
-          hidden$="[[!showTouchCalibrationSetting_(selectedDisplay)]]" embedded>
+          hidden$="[[!showTouchCalibrationSetting_(selectedDisplay)]]" embedded
+          deep-link-focus-id$="[[Setting.kTouchscreenCalibration]]">
       </cr-link-row>
     </div>
 
@@ -305,7 +317,8 @@
         class="hr"
         label="$i18n{displayNightLightLabel}"
         pref="{{prefs.ash.night_light.enabled}}"
-        sub-label="$i18n{displayNightLightText}">
+        sub-label="$i18n{displayNightLightText}"
+        deep-link-focus-id$="[[Setting.kNightLight]]">
     </settings-toggle-button>
 
     <div id="nightLightSettingsDiv"
@@ -321,7 +334,8 @@
             aria-labelledby="colorTemperatureLabel" min="0" max="100"
             scale="100" label-min="$i18n{displayNightLightTempSliderMinLabel}"
             label-max="$i18n{displayNightLightTempSliderMaxLabel}"
-            pref="{{prefs.ash.night_light.color_temperature}}">
+            pref="{{prefs.ash.night_light.color_temperature}}"
+            deep-link-focus-id$="[[Setting.kNightLightColorTemperature]]">
         </settings-slider>
       </div>
       <!-- Schedule settings -->

chrome/browser/resources/settings/chromeos/device_page/display.js

@@ -39,6 +39,7 @@ cr.define('settings.display', function() {
     is: 'settings-display',
 
     behaviors: [
+      DeepLinkingBehavior,
       I18nBehavior,
       PrefsBehavior,
       settings.RouteObserverBehavior,
@@ -213,6 +214,38 @@ cr.define('settings.display', function() {
 
       /** @private */
       selectedTab_: Number,
+
+      /**
+       * Contains the settingId of any deep link that wasn't able to be shown,
+       * null otherwise.
+       * @private {?chromeos.settings.mojom.Setting}
+       */
+      pendingSettingId_: {
+        type: Number,
+        value: null,
+      },
+
+      /**
+       * Used by DeepLinkingBehavior to focus this page's deep links.
+       * @type {!Set<!chromeos.settings.mojom.Setting>}
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set([
+          chromeos.settings.mojom.Setting.kDisplaySize,
+          chromeos.settings.mojom.Setting.kNightLight,
+          chromeos.settings.mojom.Setting.kDisplayOrientation,
+          chromeos.settings.mojom.Setting.kDisplayArrangement,
+          chromeos.settings.mojom.Setting.kDisplayResolution,
+          chromeos.settings.mojom.Setting.kDisplayRefreshRate,
+          chromeos.settings.mojom.Setting.kDisplayMirroring,
+          chromeos.settings.mojom.Setting.kAllowWindowsToSpanDisplays,
+          chromeos.settings.mojom.Setting.kAmbientColors,
+          chromeos.settings.mojom.Setting.kTouchscreenCalibration,
+          chromeos.settings.mojom.Setting.kNightLightColorTemperature,
+          chromeos.settings.mojom.Setting.kDisplayOverscan,
+        ]),
+      },
     },
 
     observers: [
@@ -301,6 +334,23 @@ cr.define('settings.display', function() {
       this.currentSelectedParentModeIndex_ = -1;
     },
 
+    /**
+     * Overridden from DeepLinkingBehavior.
+     * @param {!chromeos.settings.mojom.Setting} settingId
+     * @return {boolean}
+     */
+    beforeDeepLinkAttempt(settingId) {
+      if (!this.displays) {
+        // On initial page load, displays will not be loaded and deep link
+        // attempt will fail. Suppress warnings by exiting early and try again
+        // in updateDisplayInfo_.
+        return false;
+      }
+
+      // Continue with deep link attempt.
+      return true;
+    },
+
     /**
      * @param {!settings.Route|undefined} opt_newRoute
      * @param {!settings.Route|undefined} opt_oldRoute
@@ -318,6 +368,20 @@ cr.define('settings.display', function() {
         this.browserProxy_.highlightDisplay(this.invalidDisplayId_);
         return;
       }
+
+      // Does not apply to this page.
+      if (opt_newRoute !== settings.routes.DISPLAY) {
+        this.pendingSettingId_ = null;
+        return;
+      }
+
+      this.attemptDeepLink().then(result => {
+        if (!result.deepLinkShown && result.pendingSettingId) {
+          // Store any deep link settingId that wasn't shown so we can try again
+          // in updateDisplayInfo_.
+          this.pendingSettingId_ = result.pendingSettingId;
+        }
+      });
     },
 
     /**
@@ -1339,6 +1403,17 @@ cr.define('settings.display', function() {
       this.setSelectedDisplay_(selectedDisplay);
 
       this.unifiedDesktopMode_ = !!primaryDisplay && primaryDisplay.isUnified;
+
+      // Check if we have yet to focus a deep-linked element.
+      if (!this.pendingSettingId_) {
+        return;
+      }
+
+      this.showDeepLink(this.pendingSettingId_).then(result => {
+        if (result.deepLinkShown) {
+          this.pendingSettingId_ = null;
+        }
+      });
     },
 
     /** @private */

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

@@ -7,8 +7,7 @@
 <link rel="import" href="../../controls/settings_slider.html">
 <link rel="import" href="../../controls/settings_toggle_button.html">
 <link rel="import" href="../../i18n_setup.html">
-<link rel="import" href="../os_route.html">
-<link rel="import" href="../../router.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../../settings_shared_css.html">
 
 <dom-module id="settings-keyboard">
@@ -97,12 +96,14 @@
         class="hr"
         pref="{{prefs.settings.language.send_function_keys}}"
         label="$i18n{keyboardSendFunctionKeys}"
-        sub-label="$i18n{keyboardSendFunctionKeysDescription}">
+        sub-label="$i18n{keyboardSendFunctionKeysDescription}"
+        deep-link-focus-id$="[[Setting.kKeyboardFunctionKeys]]">
     </settings-toggle-button>
     <settings-toggle-button
         class="hr"
         pref="{{prefs.settings.language.xkb_auto_repeat_enabled_r2}}"
-        label="$i18n{keyboardEnableAutoRepeat}">
+        label="$i18n{keyboardEnableAutoRepeat}"
+        deep-link-focus-id$="[[Setting.kKeyboardAutoRepeat]]">
     </settings-toggle-button>
     <iron-collapse
         opened="[[prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]">
@@ -138,7 +139,8 @@
     </iron-collapse>
     <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 class="hr" on-click="onShowLanguageInputTap_"
         label="$i18n{keyboardShowLanguageAndInput}"
         role-description="$i18n{subpageArrowRoleDescription}"></cr-link-row>

chrome/browser/resources/settings/chromeos/device_page/keyboard.js

@@ -23,6 +23,11 @@ cr.define('settings', function() {
   Polymer({
     is: 'settings-keyboard',
 
+    behaviors: [
+      DeepLinkingBehavior,
+      settings.RouteObserverBehavior,
+    ],
+
     properties: {
       /** Preferences state. */
       prefs: {
@@ -80,6 +85,19 @@ cr.define('settings', function() {
         value: [2000, 1000, 500, 300, 200, 100, 50, 30, 20],
         readOnly: true,
       },
+
+      /**
+       * Used by DeepLinkingBehavior to focus this page's deep links.
+       * @type {!Set<!chromeos.settings.mojom.Setting>}
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set([
+          chromeos.settings.mojom.Setting.kKeyboardFunctionKeys,
+          chromeos.settings.mojom.Setting.kKeyboardAutoRepeat,
+          chromeos.settings.mojom.Setting.kKeyboardShortcuts,
+        ]),
+      },
     },
 
     /** @override */
@@ -90,6 +108,19 @@ cr.define('settings', function() {
       this.setUpKeyMapTargets_();
     },
 
+    /**
+     * @param {!settings.Route} route
+     * @param {settings.Route} oldRoute
+     */
+    currentRouteChanged(route, oldRoute) {
+      // Does not apply to this page.
+      if (route !== settings.routes.KEYBOARD) {
+        return;
+      }
+
+      this.attemptDeepLink();
+    },
+
     /**
      * Initializes the dropdown menu options for remapping keys.
      * @private

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="../../controls/settings_radio_group.html">
 <link rel="import" href="../../controls/settings_slider.html">
@@ -44,13 +45,15 @@
             label="$i18n{mouseSwapButtons}"
             on-settings-boolean-control-change="onMouseSwapButtonsChange_"
             on-down="onMouseSwapButtonsDown_" on-up="onMouseSwapButtonsUp_"
+            deep-link-focus-id$="[[Setting.kMouseSwapPrimaryButtons]]"
             no-set-pref>
         </settings-toggle-button>
         <template is="dom-if" if="[[allowDisableAcceleration_]]">
           <settings-toggle-button id="mouseAcceleration"
               class="hr"
               pref="{{prefs.settings.mouse.acceleration}}"
-              label="$i18n{mouseAccelerationLabel}">
+              label="$i18n{mouseAccelerationLabel}"
+              deep-link-focus-id$="[[Setting.kMouseAcceleration]]">
           </settings-toggle-button>
         </template>
         <div class="settings-box">
@@ -61,14 +64,16 @@
               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_]]">
           <settings-toggle-button id="mouseScrollAcceleration"
               class="hr"
               pref="{{prefs.settings.mouse.scroll_acceleration}}"
-              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">
@@ -85,7 +90,8 @@
         <settings-toggle-button id="mouseReverseScroll"
             class="hr"
             pref="{{prefs.settings.mouse.reverse_scroll}}"
-            label="$i18n{mouseReverseScroll}">
+            label="$i18n{mouseReverseScroll}"
+            deep-link-focus-id$="[[Setting.kMouseReverseScrolling]]">
         </settings-toggle-button>
       </div>
     </div>
@@ -95,18 +101,21 @@
       <div class$="[[getSubsectionClass_(hasMouse, hasTouchpad)]]">
         <settings-toggle-button id="enableTapToClick"
             pref="{{prefs.settings.touchpad.enable_tap_to_click}}"
-            label="$i18n{touchpadTapToClickEnabledLabel}">
+            label="$i18n{touchpadTapToClickEnabledLabel}"
+            deep-link-focus-id$="[[Setting.kTouchpadTapToClick]]">
         </settings-toggle-button>
         <settings-toggle-button id="enableTapDragging"
             class="hr"
             pref="{{prefs.settings.touchpad.enable_tap_dragging}}"
-            label="$i18n{tapDraggingLabel}">
+            label="$i18n{tapDraggingLabel}"
+            deep-link-focus-id$="[[Setting.kTouchpadTapDragging]]">
         </settings-toggle-button>
         <template is="dom-if" if="[[allowDisableAcceleration_]]">
           <settings-toggle-button id="touchpadAcceleration"
               class="hr"
               pref="{{prefs.settings.touchpad.acceleration}}"
-              label="$i18n{touchpadAccelerationLabel}">
+              label="$i18n{touchpadAccelerationLabel}"
+              deep-link-focus-id$="[[Setting.kTouchpadAcceleration]]">
           </settings-toggle-button>
         </template>
         <div class="settings-box">
@@ -118,14 +127,16 @@
                 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_]]">
           <settings-toggle-button id="touchpadScrollAcceleration"
               class="hr"
               pref="{{prefs.settings.touchpad.scroll_acceleration}}"
-              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">
@@ -152,7 +163,8 @@
           </div>
           <cr-toggle id="enableReverseScrollingToggle"
               checked="{{prefs.settings.touchpad.natural_scroll.value}}"
-              aria-labelledby="enableReverseScrollingLabel">
+              aria-labelledby="enableReverseScrollingLabel"
+              deep-link-focus-id$="[[Setting.kTouchpadReverseScrolling]]">
           </cr-toggle>
         </div>
       </div>

chrome/browser/resources/settings/chromeos/device_page/pointers.js

@@ -10,7 +10,9 @@ Polymer({
   is: 'settings-pointers',
 
   behaviors: [
+    DeepLinkingBehavior,
     PrefsBehavior,
+    settings.RouteObserverBehavior,
   ],
 
   properties: {
@@ -56,12 +58,46 @@ Polymer({
         return loadTimeData.getBoolean('allowScrollSettings');
       },
     },
+
+    /**
+     * Used by DeepLinkingBehavior to focus this page's deep links.
+     * @type {!Set<!chromeos.settings.mojom.Setting>}
+     */
+    supportedSettingIds: {
+      type: Object,
+      value: () => new Set([
+        chromeos.settings.mojom.Setting.kTouchpadTapToClick,
+        chromeos.settings.mojom.Setting.kTouchpadTapDragging,
+        chromeos.settings.mojom.Setting.kTouchpadReverseScrolling,
+        chromeos.settings.mojom.Setting.kTouchpadAcceleration,
+        chromeos.settings.mojom.Setting.kTouchpadScrollAcceleration,
+        chromeos.settings.mojom.Setting.kTouchpadSpeed,
+        chromeos.settings.mojom.Setting.kMouseSwapPrimaryButtons,
+        chromeos.settings.mojom.Setting.kMouseReverseScrolling,
+        chromeos.settings.mojom.Setting.kMouseAcceleration,
+        chromeos.settings.mojom.Setting.kMouseScrollAcceleration,
+        chromeos.settings.mojom.Setting.kMouseSpeed,
+      ]),
+    },
   },
 
   // Used to correctly identify when the mouse button has been released.
   // crbug.com/686949.
   receivedMouseSwapButtonsDown_: false,
 
+  /**
+   * @param {!settings.Route} route
+   * @param {settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.POINTERS) {
+      return;
+    }
+
+    this.attemptDeepLink();
+  },
+
   /**
    * Mouse and touchpad sections are only subsections if they are both present.
    * @param {boolean} hasMouse

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

@@ -10,6 +10,7 @@
 <link rel="import" href="../../controls/settings_toggle_button.html">
 <link rel="import" href="../../router.html">
 <link rel="import" href="../../settings_shared_css.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../metrics_recorder.html">
 
 <dom-module id="settings-power">
@@ -29,7 +30,8 @@
       <select id="powerSource" class="md-select"
           hidden$="[[!showPowerSourceDropdown_]]"
           aria-labelledby="powerSourceLabelDiv"
-          on-change="onPowerSourceChange_">
+          on-change="onPowerSourceChange_"
+          deep-link-focus-id$="[[Setting.kPowerSource]]">
         <option value="" selected="[[isEqual_('', selectedPowerSourceId_)]]">
           $i18n{powerSourceBattery}
         </option>
@@ -63,7 +65,8 @@
       <select id="acIdleSelect" class="md-select"
           on-change="onAcIdleSelectChange_"
           disabled="[[shouldAcIdleSelectBeDisabled_]]"
-          aria-label="$i18n{powerIdleWhileChargingAriaLabel}">
+          aria-label="$i18n{powerIdleWhileChargingAriaLabel}"
+          deep-link-focus-id$="[[Setting.kPowerIdleBehaviorWhileCharging]]">
         <template is="dom-repeat" items="[[acIdleOptions_]]">
           <option value="[[item.value]]" selected="[[item.selected]]">
             [[item.name]]
@@ -86,7 +89,8 @@
         <select id="batteryIdleSelect" class="md-select"
             on-change="onBatteryIdleSelectChange_"
             disabled="[[shouldBatteryIdleSelectBeDisabled_]]"
-            aria-label="$i18n{powerIdleWhileOnBatteryAriaLabel}">
+            aria-label="$i18n{powerIdleWhileOnBatteryAriaLabel}"
+            deep-link-focus-id$="[[Setting.kPowerIdleBehaviorWhileOnBattery]]">
           <template is="dom-repeat" items="[[batteryIdleOptions_]]">
             <option value="[[item.value]]" selected="[[item.selected]]">
               [[item.name]]
@@ -98,7 +102,8 @@
 
     <settings-toggle-button hidden$="[[!hasLid_]]" id="lidClosedToggle"
       pref="[[lidClosedPref_]]" label="[[lidClosedLabel_]]"
-      on-settings-boolean-control-change="onLidClosedToggleChange_" no-set-pref>
+      on-settings-boolean-control-change="onLidClosedToggleChange_" no-set-pref
+      deep-link-focus-id$="[[Setting.kSleepWhenLaptopLidClosed]]">
     </settings-toggle-button>
   </template>
   <script src="power.js"></script>

chrome/browser/resources/settings/chromeos/device_page/power.js

@@ -11,7 +11,9 @@ Polymer({
   is: 'settings-power',
 
   behaviors: [
+    DeepLinkingBehavior,
     I18nBehavior,
+    settings.RouteObserverBehavior,
     WebUIListenerBehavior,
   ],
 
@@ -110,6 +112,20 @@ Polymer({
         return /** @type {!chrome.settingsPrivate.PrefObject} */ ({});
       },
     },
+
+    /**
+     * Used by DeepLinkingBehavior to focus this page's deep links.
+     * @type {!Set<!chromeos.settings.mojom.Setting>}
+     */
+    supportedSettingIds: {
+      type: Object,
+      value: () => new Set([
+        chromeos.settings.mojom.Setting.kPowerIdleBehaviorWhileCharging,
+        chromeos.settings.mojom.Setting.kPowerSource,
+        chromeos.settings.mojom.Setting.kSleepWhenLaptopLidClosed,
+        chromeos.settings.mojom.Setting.kPowerIdleBehaviorWhileOnBattery,
+      ]),
+    },
   },
 
   /** @private {?settings.DevicePageBrowserProxy} */
@@ -134,6 +150,36 @@ Polymer({
     this.browserProxy_.requestPowerManagementSettings();
   },
 
+  /**
+   * Overridden from DeepLinkingBehavior.
+   * @param {!chromeos.settings.mojom.Setting} settingId
+   * @return {boolean}
+   */
+  beforeDeepLinkAttempt(settingId) {
+    if (settingId === chromeos.settings.mojom.Setting.kPowerSource &&
+        this.$.powerSource.hidden) {
+      // If there is only 1 power source, there is no dropdown to focus.
+      // Stop the deep link attempt in this case.
+      return false;
+    }
+
+    // Continue with deep link attempt.
+    return true;
+  },
+
+  /**
+   * @param {!settings.Route} route
+   * @param {settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.POWER) {
+      return;
+    }
+
+    this.attemptDeepLink();
+  },
+
   /**
    * @param {!Array<!settings.PowerSource>|undefined} powerSources
    * @param {boolean} calculating

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

@@ -40,7 +40,8 @@
 
     <settings-toggle-button id="enableStylusToolsToggle"
         pref="{{prefs.settings.enable_stylus_tools}}"
-        label="$i18n{stylusEnableStylusTools}">
+        label="$i18n{stylusEnableStylusTools}"
+        deep-link-focus-id$="[[Setting.kStylusToolsInShelf]]">
     </settings-toggle-button>
 
     <template is="dom-if" if="[[hasInternalStylus_]]">
@@ -71,7 +72,8 @@
       <select id="selectApp" class="md-select"
           on-change="onSelectedAppChanged_"
           aria-labelledby="stylusNoteTakingAppLabel"
-          hidden$="[[!showApps_(appChoices_, waitingForAndroid_)]]">
+          hidden$="[[!showApps_(appChoices_, waitingForAndroid_)]]"
+          deep-link-focus-id$="[[Setting.kStylusNoteTakingApp]]">
         <template is="dom-repeat" items="[[appChoices_]]">
           <option value="[[item.value]]" selected="[[item.preferred]]">
             [[item.name]]
@@ -106,7 +108,8 @@
               aria-labelledby="lock-screen-toggle-label"
               disabled="[[disallowedOnLockScreenByPolicy_(selectedApp_)]]"
               checked="[[lockScreenSupportEnabled_(selectedApp_)]]"
-              on-change="toggleLockScreenSupport_">
+              on-change="toggleLockScreenSupport_"
+              deep-link-focus-id$="[[Setting.kStylusNoteTakingFromLockScreen]]">
           </cr-toggle>
         </div>
 
@@ -114,7 +117,8 @@
           <settings-toggle-button id="keep-last-note-on-lock-screen-toggle"
               class="hr"
               pref="{{prefs.settings.restore_last_lock_screen_note}}"
-              label="$i18n{stylusNoteTakingAppKeepsLastNoteOnLockScreen}">
+              label="$i18n{stylusNoteTakingAppKeepsLastNoteOnLockScreen}"
+              deep-link-focus-id$="[[Setting.kStylusLatestNoteOnLockScreen]]">
           </settings-toggle-button>
         </template>
       </div>

chrome/browser/resources/settings/chromeos/device_page/stylus.js

@@ -13,6 +13,11 @@ const FIND_MORE_APPS_URL = 'https://play.google.com/store/apps/' +
 Polymer({
   is: 'settings-stylus',
 
+  behaviors: [
+    DeepLinkingBehavior,
+    settings.RouteObserverBehavior,
+  ],
+
   properties: {
     /** Preferences state. */
     prefs: {
@@ -72,6 +77,33 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /**
+     * Used by DeepLinkingBehavior to focus this page's deep links.
+     * @type {!Set<!chromeos.settings.mojom.Setting>}
+     */
+    supportedSettingIds: {
+      type: Object,
+      value: () => new Set([
+        chromeos.settings.mojom.Setting.kStylusToolsInShelf,
+        chromeos.settings.mojom.Setting.kStylusNoteTakingApp,
+        chromeos.settings.mojom.Setting.kStylusNoteTakingFromLockScreen,
+        chromeos.settings.mojom.Setting.kStylusLatestNoteOnLockScreen,
+      ]),
+    },
+  },
+
+  /**
+   * @param {!settings.Route} route
+   * @param {settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.STYLUS) {
+      return;
+    }
+
+    this.attemptDeepLink();
   },
 
   /**

chrome/browser/resources/settings/controls/settings_dropdown_menu.js

@@ -72,6 +72,11 @@ Polymer({
     'updateSelected_(menuOptions, pref.value.*, prefKey)',
   ],
 
+  /** @override */
+  focus() {
+    this.$.dropdownMenu.focus();
+  },
+
   /**
    * Pass the selection change to the pref value.
    * @private

chrome/browser/resources/settings/controls/settings_slider.js

@@ -73,6 +73,11 @@ Polymer({
     this.loaded_ = true;
   },
 
+  /** @override */
+  focus() {
+    this.$.slider.focus();
+  },
+
   /**
    * @param {number|cr_slider.SliderTick} tick
    * @return {number|undefined}

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

@@ -692,6 +692,23 @@ cr.define('device_page_tests', function() {
         devicePage.set('prefs.settings.touchpad.natural_scroll.value', false);
         expectReverseScrollValue(pointersPage, false);
       });
+
+      test('Deep link to touchpad speed', async () => {
+        loadTimeData.overrideValues({isDeepLinkingEnabled: true});
+        assertTrue(loadTimeData.getBoolean('isDeepLinkingEnabled'));
+
+        const params = new URLSearchParams;
+        params.append('settingId', '405');
+        settings.Router.getInstance().navigateTo(
+            settings.routes.POINTERS, params);
+
+        const deepLinkElement =
+            pointersPage.$$('#touchpadSensitivity').$$('cr-slider');
+        await test_util.waitAfterNextRender(deepLinkElement);
+        assertEquals(
+            deepLinkElement, getDeepActiveElement(),
+            'Touchpad speed slider should be focused for settingId=405.');
+      });
     });
 
     suite(assert(TestNames.Keyboard), function() {
@@ -818,6 +835,23 @@ cr.define('device_page_tests', function() {
             settings.DevicePageBrowserProxyImpl.getInstance()
                 .keyboardShortcutViewerShown_);
       });
+
+      test('Deep link to keyboard shortcuts', async () => {
+        loadTimeData.overrideValues({isDeepLinkingEnabled: true});
+        assertTrue(loadTimeData.getBoolean('isDeepLinkingEnabled'));
+
+        const params = new URLSearchParams;
+        params.append('settingId', '413');
+        settings.Router.getInstance().navigateTo(
+            settings.routes.KEYBOARD, params);
+
+        const deepLinkElement =
+            keyboardPage.$$('#keyboardShortcutViewer').$$('cr-icon-button');
+        await test_util.waitAfterNextRender(deepLinkElement);
+        assertEquals(
+            deepLinkElement, getDeepActiveElement(),
+            'Keyboard shortcuts button should be focused for settingId=413.');
+      });
     });
 
     suite(assert(TestNames.Display), function() {
@@ -1039,6 +1073,37 @@ cr.define('device_page_tests', function() {
                   'display', settings.routes.DISPLAY);
             });
       });
+
+      test('Deep link to display mirroring', async () => {
+        loadTimeData.overrideValues({isDeepLinkingEnabled: true});
+        assertTrue(loadTimeData.getBoolean('isDeepLinkingEnabled'));
+
+        const params = new URLSearchParams;
+        params.append('settingId', '428');
+        settings.Router.getInstance().navigateTo(
+            settings.routes.DISPLAY, params);
+        // await fakeSystemDisplay.getInfoCalled.promise;
+
+        addDisplay(1);
+        addDisplay(1);
+        fakeSystemDisplay.onDisplayChanged.callListeners();
+        await fakeSystemDisplay.getInfoCalled.promise;
+        await fakeSystemDisplay.getLayoutCalled.promise;
+        expectEquals(2, displayPage.displays.length);
+
+        Polymer.dom.flush();
+        // await fakeSystemDisplay.getInfoCalled.promise;
+        assert(displayPage);
+        assertEquals(2, displayPage.displays.length);
+        assertTrue(displayPage.shouldShowArrangementSection_());
+
+        const deepLinkElement =
+            displayPage.$$('#displayMirrorCheckbox').$$('#checkbox');
+        await test_util.waitAfterNextRender(deepLinkElement);
+        assertEquals(
+            deepLinkElement, getDeepActiveElement(),
+            'Display mirroring checkbox should be focused for settingId=428.');
+      });
     });
 
     test(assert(TestNames.NightLight), async function() {
@@ -1525,6 +1590,21 @@ cr.define('device_page_tests', function() {
                     expectEquals(null, powerPage.$$('#batteryIdleSettingBox'));
                   });
             });
+        test('Deep link to sleep when laptop lid closed', async () => {
+          loadTimeData.overrideValues({isDeepLinkingEnabled: true});
+          assertTrue(loadTimeData.getBoolean('isDeepLinkingEnabled'));
+
+          const params = new URLSearchParams;
+          params.append('settingId', '424');
+          settings.Router.getInstance().navigateTo(
+              settings.routes.POWER, params);
+
+          const deepLinkElement = lidClosedToggle.$$('cr-toggle');
+          await test_util.waitAfterNextRender(deepLinkElement);
+          assertEquals(
+              deepLinkElement, getDeepActiveElement(),
+              'Sleep when closed toggle should be focused for settingId=424.');
+        });
       });
     });
 
@@ -1692,6 +1772,28 @@ cr.define('device_page_tests', function() {
         assertEquals('v2', browserProxy.getPreferredNoteTakingAppId());
       });
 
+      test('Deep link to preferred app', async () => {
+        loadTimeData.overrideValues({isDeepLinkingEnabled: true});
+        assertTrue(loadTimeData.getBoolean('isDeepLinkingEnabled'));
+
+        browserProxy.setNoteTakingApps([
+          entry('n1', 'v1', false, LockScreenSupport.NOT_SUPPORTED),
+          entry('n2', 'v2', false, LockScreenSupport.NOT_SUPPORTED)
+        ]);
+        browserProxy.setAndroidAppsReceived(true);
+
+        const params = new URLSearchParams;
+        params.append('settingId', '417');
+        settings.Router.getInstance().navigateTo(
+            settings.routes.STYLUS, params);
+
+        const deepLinkElement = stylusPage.$$('#selectApp');
+        await test_util.waitAfterNextRender(deepLinkElement);
+        assertEquals(
+            deepLinkElement, getDeepActiveElement(),
+            'Note-taking apps dropdown should be focused for settingId=417.');
+      });
+
       test('app-visibility', function() {
         // No apps available.
         browserProxy.setNoteTakingApps([]);