[OsSettingsDeepLinking] Add deep links to the Languages Page

Adds deep links to the Languages Page, as well as the old Language
subpage, Language V2 subpage, Input subpage, and Smart Input subpage.

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

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

@@ -58,6 +58,7 @@ js_library("input_page") {
     ":add_input_methods_dialog",
     ":input_method_util",
     ":languages_metrics_proxy",
+    "..:deep_linking_behavior",
     "..:os_route",
     "../..:router",
     "//ui/webui/resources/js:i18n_behavior",
@@ -100,6 +101,7 @@ js_library("os_languages_page") {
   deps = [
     ":input_method_util",
     ":languages_metrics_proxy",
+    "..:deep_linking_behavior",
     "..:metrics_recorder",
     "..:os_route",
     "../..:lifetime_browser_proxy",
@@ -120,6 +122,7 @@ js_library("os_languages_page") {
 js_library("os_languages_page_v2") {
   deps = [
     ":languages_metrics_proxy",
+    "..:deep_linking_behavior",
     "..:metrics_recorder",
     "..:os_route",
     "../..:router",
@@ -150,6 +153,9 @@ js_library("remove_input_method_dialog") {
 
 js_library("smart_inputs_page") {
   deps = [
+    "..:deep_linking_behavior",
+    "..:os_route",
+    "../..:router",
     "../../prefs:prefs_behavior",
     "//ui/webui/resources/js:load_time_data",
   ]
@@ -213,6 +219,7 @@ js_library("input_page.m") {
     ":add_input_methods_dialog.m",
     ":input_method_util.m",
     ":languages_metrics_proxy.m",
+    "..:deep_linking_behavior.m",
     "..:os_route.m",
     "../..:i18n_setup",
     "../..:router.m",
@@ -254,6 +261,7 @@ js_library("os_languages_page.m") {
   deps = [
     ":input_method_util.m",
     ":languages_metrics_proxy.m",
+    "..:deep_linking_behavior.m",
     "..:metrics_recorder.m",
     "..:os_route.m",
     "../..:i18n_setup",
@@ -276,6 +284,7 @@ js_library("os_languages_page_v2.m") {
   deps = [
     ":input_method_util.m",
     ":languages_metrics_proxy.m",
+    "..:deep_linking_behavior.m",
     "..:metrics_recorder.m",
     "..:os_route.m",
     "../..:i18n_setup",
@@ -319,6 +328,9 @@ js_library("remove_input_method_dialog.m") {
 js_library("smart_inputs_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js" ]
   deps = [
+    "..:deep_linking_behavior.m",
+    "..:os_route.m",
+    "../..:router.m",
     "../../prefs:prefs_behavior.m",
     "//ui/webui/resources/js:load_time_data.m",
   ]

chrome/browser/resources/settings/chromeos/os_languages_page/input_page.html

@@ -10,6 +10,7 @@
 <link rel="import" href="input_method_util.html">
 <link rel="import" href="languages_metrics_proxy.html">
 <link rel="import" href="remove_input_method_dialog.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../os_route.html">
 <link rel="import" href="../../controls/settings_toggle_button.html">
 <link rel="import" href="../../prefs/prefs_behavior.html">
@@ -62,7 +63,8 @@
           class="first" id="showImeMenu"
           pref="{{prefs.settings.language.ime_menu_activated}}"
           label="$i18n{showImeMenu}"
-          on-settings-boolean-control-change="onShowImeMenuChange_">
+          on-settings-boolean-control-change="onShowImeMenuChange_"
+          deep-link-focus-id$="[[Setting.kShowInputOptionsInShelf]]">
       </settings-toggle-button>
 
       <div class="hr bottom-margin">
@@ -110,7 +112,8 @@
             </div>
           </template>
           <div class="list-item">
-            <cr-button id="addInputMethod" on-click="onAddInputMethodClick_">
+            <cr-button id="addInputMethod" on-click="onAddInputMethodClick_"
+                deep-link-focus-id$="[[Setting.kAddInputMethod]]">
               <iron-icon icon="cr:add"></iron-icon>
               $i18n{addInputMethodLabel}
             </cr-button>
@@ -122,7 +125,8 @@
           sub-label="[[getSpellCheckSubLabel_(spellCheckLanguages_)]]"
           pref="{{prefs.browser.enable_spellchecking}}"
           disabled="[[!spellCheckLanguages_.length]]"
-          on-settings-boolean-control-change="onSpellcheckToggleChange_">
+          on-settings-boolean-control-change="onSpellcheckToggleChange_"
+          deep-link-focus-id$="[[Setting.kSpellCheck]]">
       </settings-toggle-button>
     </div>
 

chrome/browser/resources/settings/chromeos/os_languages_page/input_page.js

@@ -10,8 +10,10 @@ Polymer({
   is: 'os-settings-input-page',
 
   behaviors: [
+    DeepLinkingBehavior,
     I18nBehavior,
     PrefsBehavior,
+    settings.RouteObserverBehavior,
   ],
 
   properties: {
@@ -59,6 +61,19 @@ 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.kShowInputOptionsInShelf,
+        chromeos.settings.mojom.Setting.kAddInputMethod,
+        chromeos.settings.mojom.Setting.kSpellCheck,
+      ]),
+    },
   },
 
   /** @private {?settings.LanguagesMetricsProxy} */
@@ -70,6 +85,19 @@ Polymer({
         settings.LanguagesMetricsProxyImpl.getInstance();
   },
 
+  /**
+   * @param {!settings.Route} route
+   * @param {!settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.OS_LANGUAGES_INPUT) {
+      return;
+    }
+
+    this.attemptDeepLink();
+  },
+
   /**
    * @param {!Event} e
    * @private

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

@@ -22,6 +22,7 @@
 <link rel="import" href="../../controls/settings_toggle_button.html">
 <link rel="import" href="../../lifetime_browser_proxy.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="../../i18n_setup.html">
 <link rel="import" href="../../router.html">
@@ -189,7 +190,8 @@
         <div class="list-item">
           <a is="action-link" class="list-button" id="addLanguages"
               disabled="[[!canEnableSomeSupportedLanguage_(languages)]]"
-              on-click="onAddLanguagesTap_">
+              on-click="onAddLanguagesTap_"
+              deep-link-focus-id$="[[Setting.kAddLanguage]]">
             $i18n{addLanguages}
           </a>
         </div>
@@ -240,7 +242,8 @@
           class="hr" id="showImeMenu"
           pref="{{prefs.settings.language.ime_menu_activated}}"
           label="$i18n{showImeMenu}"
-          on-settings-boolean-control-change="onShowImeMenuChange_">
+          on-settings-boolean-control-change="onShowImeMenuChange_"
+          deep-link-focus-id$="[[Setting.kShowInputOptionsInShelf]]">
       </settings-toggle-button>
 
       <cr-lazy-render id="menu">

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

@@ -17,8 +17,10 @@ cr.define('settings', function() {
     is: 'os-settings-languages-page',
 
     behaviors: [
+      DeepLinkingBehavior,
       I18nBehavior,
       PrefsBehavior,
+      settings.RouteObserverBehavior,
     ],
 
     properties: {
@@ -66,6 +68,18 @@ cr.define('settings', function() {
           return loadTimeData.getBoolean('isGuest');
         },
       },
+
+      /**
+       * 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.kAddLanguage,
+          chromeos.settings.mojom.Setting.kShowInputOptionsInShelf,
+        ]),
+      },
     },
 
     /** @private {?settings.LanguagesMetricsProxy} */
@@ -77,6 +91,19 @@ cr.define('settings', function() {
           settings.LanguagesMetricsProxyImpl.getInstance();
     },
 
+    /**
+     * @param {!settings.Route} route
+     * @param {!settings.Route} oldRoute
+     */
+    currentRouteChanged(route, oldRoute) {
+      // Does not apply to this page.
+      if (route !== settings.routes.OS_LANGUAGES_DETAILS) {
+        return;
+      }
+
+      this.attemptDeepLink();
+    },
+
     /** @private {boolean} */
     isChangeInProgress_: false,
 

chrome/browser/resources/settings/chromeos/os_languages_page/os_languages_page_v2.html

@@ -17,6 +17,7 @@
 <link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="../../controls/settings_toggle_button.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="../../i18n_setup.html">
 <link rel="import" href="../../router.html">
@@ -56,7 +57,8 @@
         <cr-button id="changeSystemLanguage"
             on-click="onChangeSystemLanguageClick_"
             aria-label="[[getChangeSystemLanguageButtonDescription_(
-              languages.prospectiveUILanguage)]]">
+              languages.prospectiveUILanguage)]]"
+            deep-link-focus-id$="[[Setting.kChangeSystemLanguage]]">
           $i18n{changeSystemLanguageLabel}
         </cr-button>
       </div>
@@ -86,7 +88,8 @@
           <div class="list-item">
             <cr-button id="addLanguages"
                 disabled="[[!canEnableSomeSupportedLanguage_(languages)]]"
-                on-click="onAddLanguagesClick_">
+                on-click="onAddLanguagesClick_"
+                deep-link-focus-id$="[[Setting.kAddLanguage]]">
               <iron-icon id="addLanguagesIcon" icon="cr:add"></iron-icon>
               $i18n{addLanguages}
             </cr-button>
@@ -98,7 +101,8 @@
           pref="{{prefs.translate.enabled}}"
           label="$i18n{offerTranslationLabel}"
           sub-label="$i18n{offerTranslationSublabel}"
-          on-settings-boolean-control-change="onTranslateToggleChange_">
+          on-settings-boolean-control-change="onTranslateToggleChange_"
+          deep-link-focus-id$="[[Setting.kOfferTranslation]]">
       </settings-toggle-button>
 
       <cr-lazy-render id="menu">

chrome/browser/resources/settings/chromeos/os_languages_page/os_languages_page_v2.js

@@ -11,8 +11,10 @@ Polymer({
   is: 'os-settings-languages-page-v2',
 
   behaviors: [
+    DeepLinkingBehavior,
     I18nBehavior,
     PrefsBehavior,
+    settings.RouteObserverBehavior,
   ],
 
   properties: {
@@ -52,6 +54,19 @@ 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.kAddLanguage,
+        chromeos.settings.mojom.Setting.kChangeSystemLanguage,
+        chromeos.settings.mojom.Setting.kOfferTranslation,
+      ]),
+    },
   },
 
   /** @private {?settings.LanguagesMetricsProxy} */
@@ -63,6 +78,19 @@ Polymer({
         settings.LanguagesMetricsProxyImpl.getInstance();
   },
 
+  /**
+   * @param {!settings.Route} route
+   * @param {!settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.OS_LANGUAGES_LANGUAGES) {
+      return;
+    }
+
+    this.attemptDeepLink();
+  },
+
   /**
    * @param {string} language
    * @return {string}

chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.html

@@ -5,6 +5,9 @@
 <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_shared_css.html">
 
 <dom-module id="os-settings-smart-inputs-page">
@@ -50,7 +53,9 @@
             <cr-toggle
                 checked="[[allowAssistivePersonalInfo_]]"
                 on-change="onPersonalInfoSuggestionToggled_"
-                aria-describedby="personalInfoSuggestionDescription">
+                aria-describedby="personalInfoSuggestionDescription"
+                deep-link-focus-id$=
+                    "[[Setting.kShowPersonalInformationSuggestions]]">
             </cr-toggle>
           </div>
           <cr-link-row class="hr list-item"
@@ -64,7 +69,8 @@
             pref="{{prefs.assistive_input.emoji_suggestion_enabled}}"
             label="$i18n{emojiSuggestionTitle}"
             sub-label="$i18n{emojiSuggestionDescription}"
-            aria-label="$i18n{emojiSuggestionTitle}">
+            aria-label="$i18n{emojiSuggestionTitle}"
+            deep-link-focus-id$="[[Setting.kShowEmojiSuggestions]]">
         </settings-toggle-button>
       </template>
     </div>

chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.js

@@ -11,8 +11,10 @@ Polymer({
   is: 'os-settings-smart-inputs-page',
 
   behaviors: [
+    DeepLinkingBehavior,
     I18nBehavior,
     PrefsBehavior,
+    settings.RouteObserverBehavior,
   ],
 
   properties: {
@@ -36,7 +38,32 @@ Polymer({
       value() {
         return loadTimeData.getBoolean('allowEmojiSuggestion');
       },
+    },
+
+    /**
+     * 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.kShowPersonalInformationSuggestions,
+        chromeos.settings.mojom.Setting.kShowEmojiSuggestions,
+      ]),
+    },
+  },
+
+  /**
+   * @param {!settings.Route} route
+   * @param {!settings.Route} oldRoute
+   */
+  currentRouteChanged(route, oldRoute) {
+    // Does not apply to this page.
+    if (route !== settings.routes.OS_LANGUAGES_SMART_INPUTS) {
+      return;
     }
+
+    this.attemptDeepLink();
   },
 
   /**

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

@@ -4,7 +4,7 @@
 
 // clang-format off
 // #import {LanguagesBrowserProxyImpl, LanguagesMetricsProxyImpl} from 'chrome://os-settings/chromeos/lazy_load.js';
-// #import {CrSettingsPrefs, Router} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {CrSettingsPrefs, Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {getFakeLanguagePrefs} from '../fake_language_settings_private.m.js'
 // #import {FakeSettingsPrivate} from '../fake_settings_private.m.js';
@@ -12,6 +12,8 @@
 // #import {TestLanguagesMetricsProxy} from './test_os_languages_metrics_proxy.m.js';
 // #import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 // #import {fakeDataBind} from '../../test_util.m.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
 // clang-format on
 
 suite('input page', () => {
@@ -64,6 +66,10 @@ suite('input page', () => {
     });
   });
 
+  teardown(function() {
+    settings.Router.getInstance().resetRouteForTesting();
+  });
+
   suite('input method list', () => {
     test('displays correctly', () => {
       const inputMethodsList = inputPage.$$('#inputMethodsList');
@@ -133,6 +139,28 @@ suite('input page', () => {
     });
   });
 
+  suite('input page', () => {
+    test('Deep link to spell check', async () => {
+      loadTimeData.overrideValues({
+        isDeepLinkingEnabled: true,
+      });
+
+      const params = new URLSearchParams;
+      params.append('settingId', '1207');
+      settings.Router.getInstance().navigateTo(
+          settings.routes.OS_LANGUAGES_INPUT, params);
+
+      Polymer.dom.flush();
+
+      const deepLinkElement =
+          inputPage.$$('#enableSpellcheckingToggle').$$('cr-toggle');
+      await test_util.waitAfterNextRender(deepLinkElement);
+      assertEquals(
+          deepLinkElement, getDeepActiveElement(),
+          'Spell check toggle should be focused for settingId=1207.');
+    });
+  });
+
   suite('add input methods dialog', () => {
     test('opens when clicking addInputMethod button', () => {
       assertFalse(!!inputPage.$$('os-settings-add-input-methods-dialog'));

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

@@ -4,7 +4,7 @@
 
 // clang-format off
 // #import {LanguagesBrowserProxyImpl, LanguagesMetricsProxyImpl, LanguagesPageInteraction} from 'chrome://os-settings/chromeos/lazy_load.js';
-// #import {CrSettingsPrefs, Router} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {CrSettingsPrefs, Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {assert} from 'chrome://resources/js/assert.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {getFakeLanguagePrefs} from '../fake_language_settings_private.m.js'
@@ -13,6 +13,8 @@
 // #import {TestLanguagesMetricsProxy} from './test_os_languages_metrics_proxy.m.js';
 // #import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 // #import {fakeDataBind} from '../../test_util.m.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
 // clang-format on
 
 cr.define('os_languages_page_tests', function() {
@@ -22,6 +24,7 @@ cr.define('os_languages_page_tests', function() {
     LanguageMenu: 'language menu',
     InputMethods: 'input methods',
     RecordMetrics: 'records metrics',
+    DetailsPage: 'details page',
   };
 
   suite('languages page', function() {
@@ -96,6 +99,7 @@ cr.define('os_languages_page_tests', function() {
 
     teardown(function() {
       PolymerTest.clearBody();
+      settings.Router.getInstance().resetRouteForTesting();
     });
 
     suite(TestNames.LanguageMenu, function() {
@@ -348,6 +352,28 @@ cr.define('os_languages_page_tests', function() {
       });
     });
 
+    suite(TestNames.DetailsPage, function() {
+      test('Deep link to show input options in shelf', async () => {
+        loadTimeData.overrideValues({
+          isDeepLinkingEnabled: true,
+        });
+
+        const params = new URLSearchParams;
+        params.append('settingId', '1201');
+        settings.Router.getInstance().navigateTo(
+            settings.routes.OS_LANGUAGES_DETAILS, params);
+
+        Polymer.dom.flush();
+
+        const deepLinkElement =
+            languagesPage.$$('#showImeMenu').$$('cr-toggle');
+        await test_util.waitAfterNextRender(deepLinkElement);
+        assertEquals(
+            deepLinkElement, getDeepActiveElement(),
+            'Show input options toggle should be focused for settingId=1201.');
+      });
+    });
+
     suite(TestNames.RecordMetrics, function() {
       test('when adding languages', async () => {
         languagesPage.$$('#addLanguages').click();

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

@@ -4,7 +4,7 @@
 
 // clang-format off
 // #import {LanguagesBrowserProxyImpl, LanguagesMetricsProxyImpl, LanguagesPageInteraction, LifetimeBrowserProxyImpl} from 'chrome://os-settings/chromeos/lazy_load.js';
-// #import {CrSettingsPrefs, Router} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {CrSettingsPrefs, Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {assert} from 'chrome://resources/js/assert.m.js';
 // #import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -15,6 +15,8 @@
 // #import {TestLifetimeBrowserProxy} from './test_os_lifetime_browser_proxy.m.js';
 // #import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 // #import {fakeDataBind} from '../../test_util.m.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
 // clang-format on
 
 suite('languages page', () => {
@@ -91,6 +93,10 @@ suite('languages page', () => {
     await languageHelper.whenReady();
   });
 
+  teardown(function() {
+    settings.Router.getInstance().resetRouteForTesting();
+  });
+
   suite('language menu', () => {
     /*
      * Finds, asserts and returns the menu item for the given i18n key.
@@ -217,6 +223,25 @@ suite('languages page', () => {
       });
       actionMenu.close();
     });
+
+    test('Deep link to add language', async () => {
+      loadTimeData.overrideValues({
+        isDeepLinkingEnabled: true,
+      });
+
+      const params = new URLSearchParams;
+      params.append('settingId', '1200');
+      settings.Router.getInstance().navigateTo(
+          settings.routes.OS_LANGUAGES_LANGUAGES, params);
+
+      Polymer.dom.flush();
+
+      const deepLinkElement = languagesPage.$$('#addLanguages');
+      await test_util.waitAfterNextRender(deepLinkElement);
+      assertEquals(
+          deepLinkElement, getDeepActiveElement(),
+          'Add language button should be focused for settingId=1200.');
+    });
   });
 
   suite('change device language dialog', () => {

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

@@ -1560,6 +1560,10 @@ TEST_F('OSSettingsLanguagesPageTest', 'RecordMetrics', function() {
   mocha.grep(assert(os_languages_page_tests.TestNames.RecordMetrics)).run();
 });
 
+TEST_F('OSSettingsLanguagesPageTest', 'DetailsPage', function() {
+  mocha.grep(assert(os_languages_page_tests.TestNames.DetailsPage)).run();
+});
+
 // eslint-disable-next-line no-var
 var OSSettingsLanguagesPageV2Test = class extends OSSettingsBrowserTest {
   /** @override */
@@ -1604,6 +1608,7 @@ var OSSettingsSmartInputsPageTest = class extends OSSettingsBrowserTest {
   /** @override */
   get extraLibraries() {
     return super.extraLibraries.concat([
+      BROWSER_SETTINGS_PATH + '../test_util.js',
       'smart_inputs_page_test.js',
     ]);
   }

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

@@ -5,6 +5,9 @@
 // clang-format off
 // #import 'chrome://os-settings/chromeos/lazy_load.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.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
 
 let smartInputsPage;
@@ -19,6 +22,7 @@ function createSmartInputsPage() {
 suite('SmartInputsPage', function() {
   teardown(function() {
     smartInputsPage.remove();
+    settings.Router.getInstance().resetRouteForTesting();
   });
 
   test(
@@ -48,4 +52,26 @@ suite('SmartInputsPage', function() {
     createSmartInputsPage();
     assertFalse(!!smartInputsPage.$$('#emojiSuggestion'));
   });
+
+  test('Deep link to emoji suggestion toggle', async () => {
+    loadTimeData.overrideValues({
+      isDeepLinkingEnabled: true,
+      allowEmojiSuggestion: true,
+    });
+    createSmartInputsPage();
+
+    const params = new URLSearchParams;
+    params.append('settingId', '1203');
+    settings.Router.getInstance().navigateTo(
+        settings.routes.OS_LANGUAGES_SMART_INPUTS, params);
+
+    Polymer.dom.flush();
+
+    const deepLinkElement =
+        smartInputsPage.$$('#emojiSuggestion').$$('cr-toggle');
+    await test_util.waitAfterNextRender(deepLinkElement);
+    assertEquals(
+        deepLinkElement, getDeepActiveElement(),
+        'Emoji suggestion toggle should be focused for settingId=1203.');
+  });
 });