[OsSettingsDeepLinking] Add deep links to the Date Time Page

Adds deep links to the Date Time page and Time Zone subpage. Also
adds a focus method to settings-radio-group to help with deep linking.

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

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

@@ -19,6 +19,7 @@ js_library("date_time_page") {
   deps = [
     ":date_time_types",
     ":timezone_selector",
+    "..:deep_linking_behavior",
     "..:os_route",
     "../..:router",
     "../../prefs:prefs_behavior",
@@ -50,6 +51,7 @@ js_library("timezone_subpage") {
     ":date_time_types",
     ":timezone_browser_proxy",
     ":timezone_selector",
+    "..:deep_linking_behavior",
     "../../prefs:prefs_behavior",
     "//ui/webui/resources/js:cr",
   ]
@@ -69,6 +71,7 @@ js_type_check("closure_compile_module") {
 js_library("date_time_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/date_time_page/date_time_page.m.js" ]
   deps = [
+    "..:deep_linking_behavior.m",
     "..:os_settings_routes.m",
     "../../prefs:prefs_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -115,9 +118,10 @@ js_library("timezone_subpage.m") {
   deps = [
     ":date_time_types.m",
     ":timezone_browser_proxy.m",
+    "..:deep_linking_behavior.m",
     "..:os_settings_routes.m",
-    "../../prefs:prefs_behavior.m",
     "../..:router.m",
+    "../../prefs:prefs_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",

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

@@ -9,6 +9,7 @@
 <link rel="import" href="../../controls/settings_toggle_button.html">
 <link rel="import" href="../../i18n_setup.html">
 <link rel="import" href="../../prefs/prefs_behavior.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../os_route.html">
 <link rel="import" href="../../router.html">
 <link rel="import" href="../../settings_page/settings_subpage.html">
@@ -33,7 +34,8 @@
             restamp>
           <settings-toggle-button id="timeZoneAutoDetect"
               label="$i18n{timeZoneGeolocation}"
-              pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}">
+              pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}"
+              deep-link-focus-id$="[[Setting.kChangeTimeZone]]">
           </settings-toggle-button>
         </template>
         <template is="dom-if"
@@ -58,7 +60,8 @@
         <settings-toggle-button
             class="hr"
             pref="{{prefs.settings.clock.use_24hour_clock}}"
-            label="$i18n{use24HourClock}">
+            label="$i18n{use24HourClock}"
+            deep-link-focus-id$="[[Setting.k24HourClock]]">
         </settings-toggle-button>
         <cr-link-row class="hr" id="setDateTime"
             on-click="onSetDateTimeTap_" hidden$="[[!canSetDateTime_]]"

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

@@ -11,7 +11,13 @@
 Polymer({
   is: 'settings-date-time-page',
 
-  behaviors: [I18nBehavior, PrefsBehavior, WebUIListenerBehavior],
+  behaviors: [
+    DeepLinkingBehavior,
+    I18nBehavior,
+    PrefsBehavior,
+    settings.RouteObserverBehavior,
+    WebUIListenerBehavior,
+  ],
 
   properties: {
     /**
@@ -66,6 +72,18 @@ Polymer({
       value: loadTimeData.getBoolean('isChild') &&
           loadTimeData.getBoolean('timeActionsProtectedForChild')
     },
+
+    /**
+     * 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.k24HourClock,
+        chromeos.settings.mojom.Setting.kChangeTimeZone,
+      ]),
+    },
   },
 
   /** @override */
@@ -75,6 +93,19 @@ Polymer({
     chrome.send('dateTimePageReady');
   },
 
+  /**
+   * @param {!settings.Route} route
+   * @param {!settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.DATETIME) {
+      return;
+    }
+
+    this.attemptDeepLink();
+  },
+
   /**
    * @param {boolean} canSetDateTime Whether date and time are settable.
    * @private

chrome/browser/resources/settings/chromeos/date_time_page/timezone_subpage.html

@@ -9,6 +9,7 @@
 <link rel="import" href="../../prefs/prefs_behavior.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="../os_route.html">
 <link rel="import" href="date_time_types.html">
 <link rel="import" href="timezone_browser_proxy.html">
@@ -31,7 +32,8 @@
     </style>
     <div class="settings-box block first">
       <settings-radio-group id="timeZoneRadioGroup"
-          pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}">
+          pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}"
+          deep-link-focus-id$="[[Setting.kChangeTimeZone]]">
         <controlled-radio-button
             id="timeZoneAutoDetectOn"
             name="true"

chrome/browser/resources/settings/chromeos/date_time_page/timezone_subpage.js

@@ -9,8 +9,12 @@
 Polymer({
   is: 'timezone-subpage',
 
-  behaviors:
-      [PrefsBehavior, WebUIListenerBehavior, settings.RouteObserverBehavior],
+  behaviors: [
+    DeepLinkingBehavior,
+    PrefsBehavior,
+    settings.RouteObserverBehavior,
+    WebUIListenerBehavior,
+  ],
 
   properties: {
     /**
@@ -20,6 +24,15 @@ Polymer({
       type: String,
       notify: 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.kChangeTimeZone]),
+    },
   },
 
   /** @private {?settings.TimeZoneBrowserProxy} */
@@ -41,13 +54,20 @@ Polymer({
    * @protected
    */
   currentRouteChanged(newRoute) {
-    if (this.shouldAskForParentAccessCode_(newRoute)) {
+    if (newRoute !== settings.routes.DATETIME_TIMEZONE_SUBPAGE) {
+      return;
+    }
+
+    // Check if should ask for parent access code.
+    if (loadTimeData.getBoolean('isChild')) {
       this.disableTimeZoneSetting_();
       this.addWebUIListener(
           'access-code-validation-complete',
           this.enableTimeZoneSetting_.bind(this));
       this.browserProxy_.showParentAccessForTimeZone();
     }
+
+    this.attemptDeepLink();
   },
 
   /**
@@ -91,15 +111,6 @@ Polymer({
     return result;
   },
 
-  /**
-   * @param {!settings.Route} route
-   * @private
-   */
-  shouldAskForParentAccessCode_(route) {
-    return route === settings.routes.DATETIME_TIMEZONE_SUBPAGE &&
-        loadTimeData.getBoolean('isChild');
-  },
-
   /**
    * Enables all dropdowns and radio buttons.
    * @private

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

@@ -46,6 +46,11 @@ Polymer({
     'resetToPrefValue(pref.*)',
   ],
 
+  /** @override */
+  focus() {
+    this.$$('cr-radio-group').focus();
+  },
+
   /** Reset the selected value to match the current pref value. */
   resetToPrefValue() {
     const pref = /** @type {!chrome.settingsPrivate.PrefObject} */ (this.pref);

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

@@ -10,6 +10,8 @@
 // #import {Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
 // #import {TimeZoneAutoDetectMethod, TimeZoneBrowserProxyImpl} from 'chrome://os-settings/chromeos/lazy_load.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
 // clang-format on
 
 /** @implements {settings.TimeZoneBrowserProxy} */
@@ -237,6 +239,10 @@ suite('settings-date-time-page', function() {
     });
   });
 
+  teardown(function() {
+    settings.Router.getInstance().resetRouteForTesting();
+  });
+
   function checkDateTimePageReadyCalled() {
     if (dateTime.prefs.cros.flags.fine_grained_time_zone_detection_enabled
             .value) {
@@ -339,6 +345,28 @@ suite('settings-date-time-page', function() {
     });
   });
 
+  test('Deep link to auto set time zone on main page', async () => {
+    loadTimeData.overrideValues({
+      isDeepLinkingEnabled: true,
+    });
+    const prefs = getFakePrefs();
+    // Set fine grained time zone off so that toggle appears on this page.
+    prefs.cros.flags.fine_grained_time_zone_detection_enabled.value = false;
+    dateTime = initializeDateTime(prefs, false);
+
+    const params = new URLSearchParams;
+    params.append('settingId', '1001');
+    settings.Router.getInstance().navigateTo(settings.routes.DATETIME, params);
+
+    Polymer.dom.flush();
+
+    const deepLinkElement = dateTime.$$('#timeZoneAutoDetect').$$('cr-toggle');
+    await test_util.waitAfterNextRender(deepLinkElement);
+    assertEquals(
+        deepLinkElement, getDeepActiveElement(),
+        'Auto set time zone toggle should be focused for settingId=1001.');
+  });
+
   test('auto-detect forced on', function(done) {
     const prefs = getFakePrefs();
     dateTime = initializeDateTime(prefs, true, true);

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

@@ -592,6 +592,7 @@ var OSSettingsDateTimePageTest = class extends OSSettingsBrowserTest {
   get extraLibraries() {
     return super.extraLibraries.concat([
       BROWSER_SETTINGS_PATH + '../test_browser_proxy.js',
+      BROWSER_SETTINGS_PATH + '../test_util.js',
       'date_time_page_tests.js',
     ]);
   }
@@ -1764,7 +1765,10 @@ var OSSettingsTimezoneSubpageTest = class extends OSSettingsBrowserTest {
 
   /** @override */
   get extraLibraries() {
-    return super.extraLibraries.concat(['timezone_subpage_test.js']);
+    return super.extraLibraries.concat([
+      BROWSER_SETTINGS_PATH + '../test_util.js',
+      'timezone_subpage_test.js',
+    ]);
   }
 };
 

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

@@ -9,6 +9,9 @@
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {assertEquals} from '../../chai_assert.js';
 // #import {assert} from 'chrome://resources/js/assert.m.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
 // clang-format on
 
 suite('TimezoneSubpageTests', function() {
@@ -31,6 +34,7 @@ suite('TimezoneSubpageTests', function() {
   teardown(function() {
     timezoneSubpage.remove();
     CrSettingsPrefs.resetForTesting();
+    settings.Router.getInstance().resetRouteForTesting();
   });
 
   test('Timezone autodetect by geolocation radio', async () => {
@@ -65,4 +69,26 @@ suite('TimezoneSubpageTests', function() {
                     .getPref('generated.resolve_timezone_by_geolocation_on_off')
                     .value);
   });
+
+  test('Deep link to time zone setter on subpage', async () => {
+    loadTimeData.overrideValues({
+      isDeepLinkingEnabled: true,
+    });
+
+    // Resolve timezone by geolocation is on.
+    timezoneSubpage.setPrefValue(
+        'generated.resolve_timezone_by_geolocation_on_off', true);
+
+    const params = new URLSearchParams;
+    params.append('settingId', '1001');
+    settings.Router.getInstance().navigateTo(
+        settings.routes.DATETIME_TIMEZONE_SUBPAGE, params);
+
+    const deepLinkElement =
+        timezoneSubpage.$$('#timeZoneAutoDetectOn').$$('#button');
+    await test_util.waitAfterNextRender(deepLinkElement);
+    assertEquals(
+        deepLinkElement, getDeepActiveElement(),
+        'Auto set time zone toggle should be focused for settingId=1001.');
+  });
 });