[OsSettingsDeepLinking] Add deep links to the About Page

Adds deep links to the About Page and Detailed Build Info subpage.

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

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

@@ -15,6 +15,7 @@ js_type_check("closure_compile") {
 
 js_library("os_about_page") {
   deps = [
+    "..:deep_linking_behavior",
     "..:metrics_recorder",
     "..:os_route",
     "../..:lifetime_browser_proxy",
@@ -32,6 +33,9 @@ js_library("os_about_page") {
 
 js_library("detailed_build_info") {
   deps = [
+    "..:deep_linking_behavior",
+    "..:os_route",
+    "../..:router",
     "../../about_page:about_page_browser_proxy",
     "../localized_link:localized_link",
     "//ui/webui/resources/cr_elements/policy:cr_policy_indicator_behavior",
@@ -72,6 +76,9 @@ js_library("channel_switcher_dialog.m") {
 js_library("detailed_build_info.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.m.js" ]
   deps = [
+    "..:deep_linking_behavior.m",
+    "..:os_route.m",
+    "../..:router.m",
     "../../about_page:about_page_browser_proxy.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/policy:cr_policy_indicator_behavior.m",
@@ -83,6 +90,7 @@ js_library("detailed_build_info.m") {
 js_library("os_about_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.m.js" ]
   deps = [
+    "..:deep_linking_behavior.m",
     "..:os_route.m",
     "../..:i18n_setup",
     "../..:lifetime_browser_proxy.m",

chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.html

@@ -4,6 +4,9 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="../../about_page/about_page_browser_proxy.html">
 <link rel="import" href="channel_switcher_dialog.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="../../i18n_setup.html">
 <link rel="import" href="../../settings_shared_css.html">
 <link rel="import" href="../localized_link/localized_link.html">
@@ -36,7 +39,8 @@
       <div class="separator"></div>
       <cr-button on-click="onChangeChannelTap_"
           aria-describedby="currentlyOnChannelText"
-          disabled="[[!canChangeChannel_]]">
+          disabled="[[!canChangeChannel_]]"
+          deep-link-focus-id$="[[Setting.kChangeChromeChannel]]">
         $i18n{aboutChangeChannel}
       </cr-button>
       <template is="dom-if" if="[[!canChangeChannel_]]">
@@ -68,7 +72,8 @@
       <cr-icon-button id="copyBuildDetailsButton" class="icon-copy-content"
           aria-labelledby="copyBuildDetailsButtonToolTip"
           on-click="onCopyBuildDetailsToClipBoardTap_"
-          disabled="[[!copyToClipBoardEnabled_(versionInfo_, channelInfo_)]]">
+          disabled="[[!copyToClipBoardEnabled_(versionInfo_, channelInfo_)]]"
+          deep-link-focus-id$="[[Setting.kCopyDetailedBuildInfo]]">
       </cr-icon-button>
       <paper-tooltip id="copyBuildDetailsButtonToolTip"
           for="copyBuildDetailsButton"

chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.js

@@ -10,7 +10,11 @@
 Polymer({
   is: 'settings-detailed-build-info',
 
-  behaviors: [I18nBehavior],
+  behaviors: [
+    DeepLinkingBehavior,
+    I18nBehavior,
+    settings.RouteObserverBehavior,
+  ],
 
   properties: {
     /** @private {!VersionInfo} */
@@ -32,6 +36,18 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /**
+     * 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.kChangeChromeChannel,
+        chromeos.settings.mojom.Setting.kCopyDetailedBuildInfo,
+      ]),
+    },
   },
 
   /** @override */
@@ -46,6 +62,19 @@ Polymer({
     this.updateChannelInfo_();
   },
 
+  /**
+   * @param {!settings.Route} route
+   * @param {!settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.DETAILED_BUILD_INFO) {
+      return;
+    }
+
+    this.attemptDeepLink();
+  },
+
   /** @private */
   updateChannelInfo_() {
     const browserProxy = settings.AboutPageBrowserProxyImpl.getInstance();

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

@@ -6,16 +6,17 @@
 <link rel="import" href="../../icons.html">
 <link rel="import" href="../../lifetime_browser_proxy.html">
 <link rel="import" href="../../prefs/prefs.html">
-<link rel="import" href="../os_route.html">
-<link rel="import" href="../../router.html">
 <link rel="import" href="../os_settings_page/main_page_behavior.html">
 <link rel="import" href="../../settings_page/settings_animated_pages.html">
 <link rel="import" href="../../settings_page/settings_section.html">
 <link rel="import" href="../../settings_page/settings_subpage.html">
 <link rel="import" href="../../settings_page_css.html">
 <link rel="import" href="../../settings_shared_css.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../metrics_recorder.html">
 <link rel="import" href="../os_icons.html">
+<link rel="import" href="../os_route.html">
+<link rel="import" href="../../router.html">
 <link rel="import" href="../os_reset_page/os_powerwash_dialog.html">
 <link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="detailed_build_info.html">
@@ -135,7 +136,8 @@
                                   currentUpdateStatusEvent_)]]
               </cr-button>
               <cr-button id="checkForUpdates" hidden="[[!showCheckUpdates_]]"
-                  on-click="onCheckUpdatesClick_">
+                  on-click="onCheckUpdatesClick_"
+                  deep-link-focus-id$="[[Setting.kCheckForOsUpdate]]">
                 $i18n{aboutCheckForUpdates}
               </cr-button>
             </span>
@@ -158,22 +160,30 @@
               hasInternetConnection_)]]">
             <cr-link-row class="hr" id="releaseNotesOnline"
                 on-click="onReleaseNotesTap_"
-                label="$i18n{aboutShowReleaseNotes}" external></cr-link-row>
+                label="$i18n{aboutShowReleaseNotes}" external
+                deep-link-focus-id$="[[Setting.kSeeWhatsNew]]">
+            </cr-link-row>
           </template>
           <template is="dom-if" if="[[showReleaseNotesOffline_(hasReleaseNotes_,
               hasInternetConnection_)]]">
             <cr-link-row class="hr" id="releaseNotesOffline"
                 on-click="onReleaseNotesTap_"
                 label="$i18n{aboutShowReleaseNotes}"
-                title="$i18n{aboutReleaseNotesOffline}" external></cr-link-row>
+                title="$i18n{aboutReleaseNotesOffline}" external
+                deep-link-focus-id$="[[Setting.kSeeWhatsNew]]"> 
+            </cr-link-row>
           </template>
           <cr-link-row class="hr" id="help" on-click="onHelpClick_"
-              label="$i18n{aboutGetHelpUsingChromeOs}" external></cr-link-row>
+              label="$i18n{aboutGetHelpUsingChromeOs}" external
+              deep-link-focus-id$="[[Setting.kGetHelpWithChromeOs]]">
+          </cr-link-row>
 <if expr="_google_chrome">
           <cr-link-row class="hr" id="reportIssue"
               on-click="onReportIssueClick_"
               hidden="[[!prefs.feedback_allowed.value]]"
-              label="$i18n{aboutReportAnIssue}" external></cr-link-row>
+              label="$i18n{aboutReportAnIssue}" external
+              deep-link-focus-id$="[[Setting.kReportAnIssue]]">
+          </cr-link-row>
 </if>
           <cr-link-row class="hr" id="detailed-build-info-trigger"
               on-click="onDetailedBuildInfoClick_"
@@ -182,7 +192,8 @@
           </cr-link-row>
           <cr-link-row class="hr" on-click="onManagementPageClick_"
               start-icon="cr:domain" label="$i18n{managementPage}"
-              hidden$="[[!isManaged_]]" external></cr-link-row>
+              hidden$="[[!isManaged_]]" external>
+          </cr-link-row>
         </div>
         <template is="dom-if" route-path="/help/details">
           <settings-subpage page-title="$i18n{aboutDetailedBuildInfo}">
@@ -211,7 +222,8 @@
         </div>
 <if expr="_google_chrome">
         <div class="secondary">
-          <a href="$i18n{aboutTermsURL}" target="_blank">
+          <a id="aboutProductTos" href="$i18n{aboutTermsURL}" target="_blank"
+              deep-link-focus-id$="[[Setting.kTermsOfService]]">
             $i18n{aboutProductTos}
           </a>
         </div>

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

@@ -11,6 +11,7 @@ Polymer({
   is: 'os-settings-about-page',
 
   behaviors: [
+    DeepLinkingBehavior,
     WebUIListenerBehavior,
     settings.MainPageBehavior,
     settings.RouteObserverBehavior,
@@ -150,6 +151,31 @@ Polymer({
 
     /** @private {!AboutPageUpdateInfo|undefined} */
     updateInfo_: Object,
+
+    /**
+     * Whether the deep link to the check for OS update setting was unable to
+     * be shown.
+     * @private
+     */
+    isPendingOsUpdateDeepLink_: {
+      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.kCheckForOsUpdate,
+        chromeos.settings.mojom.Setting.kSeeWhatsNew,
+        chromeos.settings.mojom.Setting.kGetHelpWithChromeOs,
+        chromeos.settings.mojom.Setting.kReportAnIssue,
+        chromeos.settings.mojom.Setting.kTermsOfService,
+      ]),
+    },
   },
 
   observers: [
@@ -216,6 +242,22 @@ Polymer({
   currentRouteChanged(newRoute, oldRoute) {
     settings.MainPageBehavior.currentRouteChanged.call(
         this, newRoute, oldRoute);
+
+    // Does not apply to this page.
+    if (newRoute !== settings.routes.ABOUT_ABOUT) {
+      return;
+    }
+
+    this.attemptDeepLink().then(result => {
+      if (!result.deepLinkShown && result.pendingSettingId) {
+        // Only the check for OS update is expected to fail deep link when
+        // awaiting the check for update.
+        assert(
+            result.pendingSettingId ===
+            chromeos.settings.mojom.Setting.kCheckForOsUpdate);
+        this.isPendingOsUpdateDeepLink_ = true;
+      }
+    });
   },
 
   // Override settings.MainPageBehavior method.
@@ -301,6 +343,18 @@ Polymer({
    */
   updateShowButtonContainer_() {
     this.showButtonContainer_ = this.showRelaunch_ || this.showCheckUpdates_;
+
+    // Check if we have yet to focus the check for update button.
+    if (!this.isPendingOsUpdateDeepLink_) {
+      return;
+    }
+
+    this.showDeepLink(chromeos.settings.mojom.Setting.kCheckForOsUpdate)
+        .then(result => {
+          if (result.deepLinkShown) {
+            this.isPendingOsUpdateDeepLink_ = false;
+          }
+        });
   },
 
   /** @private */

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

@@ -8,7 +8,8 @@
 // #import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {TestLifetimeBrowserProxy} from './test_os_lifetime_browser_proxy.m.js';
-// #import {eventToPromise,flushTasks} from 'chrome://test/test_util.m.js';
+// #import {eventToPromise,flushTasks,waitAfterNextRender} from 'chrome://test/test_util.m.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
 // clang-format on
 
 cr.define('settings_about_page', function() {
@@ -35,6 +36,7 @@ cr.define('settings_about_page', function() {
     teardown(function() {
       page.remove();
       page = null;
+      settings.Router.getInstance().resetRouteForTesting();
     });
 
     /**
@@ -353,6 +355,29 @@ cr.define('settings_about_page', function() {
       return aboutBrowserProxy.whenCalled('launchReleaseNotes');
     });
 
+    test('Deep link to release notes', async () => {
+      loadTimeData.overrideValues({
+        isDeepLinkingEnabled: true,
+      });
+      aboutBrowserProxy.setReleaseNotes(true);
+      aboutBrowserProxy.setInternetConnection(false);
+      await initNewPage();
+
+      const params = new URLSearchParams;
+      params.append('settingId', '1703');
+      settings.Router.getInstance().navigateTo(
+          settings.routes.ABOUT_ABOUT, params);
+
+      Polymer.dom.flush();
+
+      const deepLinkElement =
+          page.$$('#releaseNotesOffline').$$('cr-icon-button');
+      await test_util.waitAfterNextRender(deepLinkElement);
+      assertEquals(
+          deepLinkElement, getDeepActiveElement(),
+          'Release notes should be focused for settingId=1703.');
+    });
+
     test('RegulatoryInfo', async () => {
       const regulatoryInfo = {text: 'foo', url: 'bar'};
 
@@ -502,6 +527,7 @@ cr.define('settings_about_page', function() {
     teardown(function() {
       page.remove();
       page = null;
+      settings.Router.getInstance().resetRouteForTesting();
     });
 
     test('Initialization', async () => {
@@ -569,6 +595,27 @@ cr.define('settings_about_page', function() {
       return checkChangeChannelButtonWithDelayedChannelState(false);
     });
 
+    test('Deep link to change channel', async () => {
+      loadTimeData.overrideValues({
+        isDeepLinkingEnabled: true,
+      });
+      page = document.createElement('settings-detailed-build-info');
+      document.body.appendChild(page);
+
+      const params = new URLSearchParams;
+      params.append('settingId', '1700');
+      settings.Router.getInstance().navigateTo(
+          settings.routes.DETAILED_BUILD_INFO, params);
+
+      Polymer.dom.flush();
+
+      const deepLinkElement = page.$$('cr-button');
+      await test_util.waitAfterNextRender(deepLinkElement);
+      assertEquals(
+          deepLinkElement, getDeepActiveElement(),
+          'Change channel button should be focused for settingId=1700.');
+    });
+
     async function checkCopyBuildDetailsButton() {
       page = document.createElement('settings-detailed-build-info');
       document.body.appendChild(page);
@@ -695,17 +742,66 @@ cr.define('settings_about_page', function() {
   });
 
   suite('AboutPageTest_OfficialBuild', function() {
-    test('ReportAnIssue', function() {
-      const browserProxy = new TestAboutPageBrowserProxyChromeOS();
+    let page = null;
+    let browserProxy = null;
+
+    setup(function() {
+      browserProxy = new TestAboutPageBrowserProxyChromeOS();
       settings.AboutPageBrowserProxyImpl.instance_ = browserProxy;
       PolymerTest.clearBody();
-      const page = document.createElement('os-settings-about-page');
+      page = document.createElement('os-settings-about-page');
       document.body.appendChild(page);
+    });
 
+    teardown(function() {
+      page.remove();
+      page = null;
+      settings.Router.getInstance().resetRouteForTesting();
+    });
+
+    test('ReportAnIssue', function() {
       assertTrue(!!page.$.reportIssue);
       page.$.reportIssue.click();
       return browserProxy.whenCalled('openFeedbackDialog');
     });
+
+    test('Deep link to report an issue', async () => {
+      loadTimeData.overrideValues({
+        isDeepLinkingEnabled: true,
+      });
+
+      const params = new URLSearchParams;
+      params.append('settingId', '1705');
+      settings.Router.getInstance().navigateTo(
+          settings.routes.ABOUT_ABOUT, params);
+
+      Polymer.dom.flush();
+
+      const deepLinkElement = page.$$('#reportIssue').$$('cr-icon-button');
+      await test_util.waitAfterNextRender(deepLinkElement);
+      assertEquals(
+          deepLinkElement, getDeepActiveElement(),
+          'Report an issue button should be focused for settingId=1705.');
+    });
+
+    test('Deep link to terms of service', async () => {
+      loadTimeData.overrideValues({
+        isDeepLinkingEnabled: true,
+      });
+
+      const params = new URLSearchParams;
+      params.append('settingId', '1706');
+      settings.Router.getInstance().navigateTo(
+          settings.routes.ABOUT_ABOUT, params);
+
+      Polymer.dom.flush();
+
+      const deepLinkElement = page.$$('#aboutProductTos');
+      await test_util.waitAfterNextRender(deepLinkElement);
+      assertEquals(
+          deepLinkElement, getDeepActiveElement(),
+          'Terms of service link should be focused for settingId=1706.');
+    });
   });
 
   // #cr_define_end