[CrOS Settings] Add Spell check toggle for input_page

Spell check logic is from languages_page. It's currently disabled.
Further logic for spellcheck languages will be added later.

Spec: http://go/cros-lang-settings-ux slide 23.
Current view: http://screen/36a08c58-4057-46d7-a6ef-7f43d370cbdc

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

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

chrome/app/os_settings_search_tag_strings.grdp

@@ -877,6 +877,9 @@
   <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_SPELL_CHECK" translateable="false" desc="Text for search result item which, when clicked, navigates the user to input settings, with all the options for spell check settings">
+    Spell check
+  </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

@@ -280,6 +280,12 @@
   <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_SPELL_CHECK_TITLE" translateable="false" desc="Title for the section containing all the options for spell check settings. The options include picking between using the system's spell check or using Google's web service and a list of the enabled languages which support spell checking.">
+    Spell check
+  </message>
+  <message name="IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_DISABLED_REASON" translateable="false" desc="Text that indicates to the user that spell check options are disabled because none of the languages they have added have spell check support.">
+    Spell check isn’t supported for the languages you selected
+  </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

@@ -20,6 +20,10 @@
         padding-inline-start: var(--cr-section-padding);
       }
 
+      .bottom-margin {
+        margin-bottom: var(--cr-section-vertical-margin);
+      }
+
       .icon-external {
         margin-inline-end: 0;
       }
@@ -57,7 +61,7 @@
           on-settings-boolean-control-change="onShowImeMenuChange_">
       </settings-toggle-button>
 
-      <div class="hr">
+      <div class="hr bottom-margin">
         <h2>$i18n{inputMethodListTitle}</h2>
         <div class="list-frame vertical-list" id="inputMethodsList">
           <template is="dom-repeat"
@@ -104,6 +108,13 @@
           </div>
         </div>
       </div>
+      <settings-toggle-button id="enableSpellcheckingToggle" class="hr"
+          label="$i18n{spellCheckTitle}"
+          sub-label="[[getSpellCheckSubLabel_(spellCheckLanguages_)]]"
+          pref="{{prefs.browser.enable_spellchecking}}"
+          disabled="[[!spellCheckLanguages_.length]]"
+          on-settings-boolean-control-change="onSpellcheckToggleChange_">
+      </settings-toggle-button>
     </div>
   </template>
   <script src="input_page.js"></script>

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

@@ -34,6 +34,16 @@ Polymer({
 
     /** @type {!LanguageHelper} */
     languageHelper: Object,
+
+    /**
+     * @private {!Array<!LanguageState|!ForcedLanguageState>}
+     */
+    spellCheckLanguages_: {
+      type: Array,
+      value() {
+        return [];
+      },
+    },
   },
 
   /** @private {?settings.LanguagesMetricsProxy} */
@@ -165,4 +175,22 @@ Polymer({
     this.languagesMetricsProxy_.recordAddInputMethod();
     // TODO(crbug/1113439): Add input methods dialog.
   },
+
+  /**
+   * @return {string|undefined}
+   * @private
+   */
+  getSpellCheckSubLabel_() {
+    return this.spellCheckLanguages_.length ?
+        undefined :  // equivalent to not setting the sublabel in the HTML.
+        this.i18n('spellCheckDisabledReason');
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onSpellcheckToggleChange_(e) {
+    this.languagesMetricsProxy_.recordToggleSpellCheck(e.target.checked);
+  },
 });

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

@@ -171,6 +171,7 @@ enum Setting {
   kChangeSystemLanguage = 1204,
   kOfferTranslation = 1205,
   kAddInputMethod = 1206,
+  kSpellCheck = 1207,
 
   // Files section.
   kGoogleDriveConnection = 1300,

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

@@ -109,6 +109,12 @@ const std::vector<SearchConcept>& GetInputPageSearchConceptsV2() {
        mojom::SearchResultDefaultRank::kMedium,
        mojom::SearchResultType::kSetting,
        {.setting = mojom::Setting::kAddInputMethod}},
+      {IDS_OS_SETTINGS_TAG_LANGUAGES_SPELL_CHECK,
+       mojom::kInputSubpagePath,
+       mojom::SearchResultIcon::kGlobe,
+       mojom::SearchResultDefaultRank::kMedium,
+       mojom::SearchResultType::kSetting,
+       {.setting = mojom::Setting::kSpellCheck}},
   });
   return *tags;
 }
@@ -271,6 +277,9 @@ void AddInputPageStringsV2(content::WebUIDataSource* html_source) {
        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},
+      {"spellCheckTitle", IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_TITLE},
+      {"spellCheckDisabledReason",
+       IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_DISABLED_REASON},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 }
@@ -398,6 +407,7 @@ void LanguagesSection::RegisterHierarchy(HierarchyGenerator* generator) const {
       mojom::kInputSubpagePath);
   static constexpr mojom::Setting kInputPageSettings[] = {
       mojom::Setting::kAddInputMethod,
+      mojom::Setting::kSpellCheck,
   };
   RegisterNestedSettingBulk(mojom::Subpage::kInput, kInputPageSettings,
                             generator);

tools/metrics/histograms/enums.xml

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