[CrOS Settings] Add 'Add input methods' button for input_page

Spec: http://go/cros-lang-settings-ux slide 23.
Current view: http://screen/f9bbb539-b983-4ac7-aa9f-cb0886bd2f9f

Note: All strings are not finalised so they are translateable false
and no screenshots required.

Bug: 1113439
Change-Id: Ic1ab01755fe86c28b89468aba54cc5dff010ced5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2354113Reviewed-by: Kinuko Yasuda <kinuko@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Commit-Queue: My Nguyen <myy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#798527}

chrome/app/os_settings_search_tag_strings.grdp

@@ -874,6 +874,9 @@
   <message name="IDS_OS_SETTINGS_TAG_LANGUAGES_INPUT_ADD_LANGUAGE" desc="Text for search result item which, when clicked, navigates the user to languages and input settings, with an option to add a new language.">
     Add languages
   </message>
+  <message name="IDS_OS_SETTINGS_TAG_LANGUAGES_ADD_INPUT_METHOD" translateable="false" desc="Text for search result item which, when clicked, navigates the user to input settings, with the option to add input methods (keyboard layouts and input method editors).">
+    Add input methods
+  </message>
   <message name="IDS_OS_SETTINGS_TAG_LANGUAGES_INPUT_METHODS" desc="Text for search result item which, when clicked, navigates the user to input settings, with the option to enable/disable input in supported languages.">
     Manage input methods
   </message>

chrome/app/os_settings_strings.grdp

@@ -277,6 +277,9 @@
   <message name="IDS_OS_SETTINGS_LANGUAGES_OPEN_OPTIONS_PAGE_LABEL" translateable="false" desc="Title for the button to open the options page for a input method (keyboard layout and input method editor).">
       Open options page for <ph name="INPUT_METHOD_NAME">$1<ex>US keyboard</ex></ph>
   </message>
+  <message name="IDS_OS_SETTINGS_LANGUAGES_ADD_INPUT_METHOD_LABEL" translateable="false" desc="Button under the list of input methods which opens a dialog that lets the user add keyboard layouts and input method editors.">
+    Add input methods
+  </message>
   <message name="IDS_OS_SETTINGS_LANGUAGES_LIST_TITLE" desc="Title for the list of the user's preferred written languages.">
     Languages
   </message>

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="input_method_util.html">
 <link rel="import" href="languages_metrics_proxy.html">
 <link rel="import" href="../os_route.html">
@@ -39,6 +41,12 @@
       .external-wrapper {
         display: flex;
       }
+
+      #addInputMethod {
+        --iron-icon-fill-color: var(--cr-link-color);
+        margin-inline-end: 4px;
+        margin-top: 16px;
+      }
     </style>
 
     <div route-path="default">
@@ -88,6 +96,12 @@
               </template>
             </div>
           </template>
+          <div class="list-item">
+            <cr-button id="addInputMethod" on-click="onAddInputMethodClick_">
+              <iron-icon icon="cr:add"></iron-icon>
+              $i18n{addInputMethodLabel}
+            </cr-button>
+          </div>
         </div>
       </div>
     </div>

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

@@ -159,4 +159,10 @@ Polymer({
   getOpenOptionsPageLabel_(inputMethodName) {
     return this.i18n('openOptionsPage', inputMethodName);
   },
+
+  /** @private */
+  onAddInputMethodClick_() {
+    this.languagesMetricsProxy_.recordAddInputMethod();
+    // TODO(crbug/1113439): Add input methods dialog.
+  },
 });

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

@@ -170,6 +170,7 @@ enum Setting {
   kShowEmojiSuggestions = 1203,
   kChangeSystemLanguage = 1204,
   kOfferTranslation = 1205,
+  kAddInputMethod = 1206,
 
   // Files section.
   kGoogleDriveConnection = 1300,

chrome/browser/ui/webui/settings/chromeos/languages_section.cc

@@ -103,6 +103,12 @@ const std::vector<SearchConcept>& GetInputPageSearchConceptsV2() {
        {.setting = mojom::Setting::kShowInputOptionsInShelf},
        {IDS_OS_SETTINGS_TAG_LANGUAGES_INPUT_INPUT_OPTIONS_SHELF_ALT1,
         SearchConcept::kAltTagEnd}},
+      {IDS_OS_SETTINGS_TAG_LANGUAGES_ADD_INPUT_METHOD,
+       mojom::kInputSubpagePath,
+       mojom::SearchResultIcon::kGlobe,
+       mojom::SearchResultDefaultRank::kMedium,
+       mojom::SearchResultType::kSetting,
+       {.setting = mojom::Setting::kAddInputMethod}},
   });
   return *tags;
 }
@@ -264,6 +270,7 @@ void AddInputPageStringsV2(content::WebUIDataSource* html_source) {
       {"inputMethodListTitle",
        IDS_OS_SETTINGS_LANGUAGES_INPUT_METHOD_LIST_TITLE},
       {"openOptionsPage", IDS_OS_SETTINGS_LANGUAGES_OPEN_OPTIONS_PAGE_LABEL},
+      {"addInputMethodLabel", IDS_OS_SETTINGS_LANGUAGES_ADD_INPUT_METHOD_LABEL},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 }
@@ -389,6 +396,11 @@ void LanguagesSection::RegisterHierarchy(HierarchyGenerator* generator) const {
       IDS_OS_SETTINGS_LANGUAGES_INPUT_PAGE_TITLE, mojom::Subpage::kInput,
       mojom::SearchResultIcon::kGlobe, mojom::SearchResultDefaultRank::kMedium,
       mojom::kInputSubpagePath);
+  static constexpr mojom::Setting kInputPageSettings[] = {
+      mojom::Setting::kAddInputMethod,
+  };
+  RegisterNestedSettingBulk(mojom::Subpage::kInput, kInputPageSettings,
+                            generator);
 
   // Languages and input details.
   generator->RegisterTopLevelSubpage(

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

@@ -71,7 +71,8 @@ suite('input page', () => {
 
       // The test input methods should appear.
       const items = inputMethodsList.querySelectorAll('.list-item');
-      assertEquals(2, items.length);  // Two items for input methods
+      // Two items for input methods and one item for add input methods.
+      assertEquals(3, items.length);
       assertEquals(
           'US keyboard',
           items[0].querySelector('.display-name').textContent.trim());
@@ -116,5 +117,12 @@ suite('input page', () => {
       assertTrue(
           await metricsProxy.whenCalled('recordToggleShowInputOptionsOnShelf'));
     });
+
+    test('when adding input methods', async () => {
+      inputPage.$$('#addInputMethod').click();
+      Polymer.dom.flush();
+
+      await metricsProxy.whenCalled('recordAddInputMethod');
+    });
   });
 });

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

@@ -20,6 +20,7 @@ cr.define('settings', function() {
         'recordManageInputMethods',
         'recordToggleShowInputOptionsOnShelf',
         'recordToggleTranslate',
+        'recordAddInputMethod',
       ]);
     }
 
@@ -47,6 +48,11 @@ cr.define('settings', function() {
     recordToggleTranslate(value) {
       this.methodCalled('recordToggleTranslate', value);
     }
+
+    /** @override */
+    recordAddInputMethod(value) {
+      this.methodCalled('recordAddInputMethod', value);
+    }
   }
   // #cr_define_end
   return {

tools/metrics/histograms/enums.xml

@@ -52697,6 +52697,7 @@ Called by update_net_trust_anchors.py.-->
   <int value="1203" label="Show Emoji Suggestions"/>
   <int value="1204" label="Change System Language"/>
   <int value="1205" label="Offer Translation"/>
+  <int value="1206" label="Add Input Method"/>
   <int value="1300" label="Google Drive Connection"/>
   <int value="1400" label="Add Printer"/>
   <int value="1401" label="Saved Printers"/>