[OsSettingsLanguages] Add enhanced and customize spell check

Adding click handler for customize spell check in follow-up CL.

DisabledView: http://screen/BwJ7YNftynvYNVN
EnabledView: http://screen/5kcJNdQhrF8Foq5
Spec: http://go/cros-lang-settings-ux-slide/edit#slide=23

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

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

chrome/app/os_settings_strings.grdp

@@ -298,8 +298,8 @@
   <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 name="IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_ENHANCED_LABEL" translateable="false" desc="Label for enhanced spell check toggle, the type of spell check that sends the text the user types to Google spelling service. It is important that it is communicated that the text the user types will be sent to Google.">
+    Enhanced spell check in Chrome browser only (text is sent to Google)
   </message>
   <message name="IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_LANGUAGES_LIST_TITLE" translateable="false" desc="Title for the list of languages that support spell check, from which users can enable or disable spell check for.">
     Spell check languages
@@ -316,6 +316,9 @@
   <message name="IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_RETRY_DESCRIPTION" translateable="false" desc="Description read by screenreader for the button to retry spell check dictionary download.">
     Couldn’t download spell check dictionary for <ph name="LANGUAGE">$1<ex>English</ex></ph>. Try again.
   </message>
+  <message name="IDS_OS_SETTINGS_LANGUAGES_EDIT_DICTIONARY_LABEL" translateable="false" desc="Label for the section for users to add custom words for no spell check.">
+    Customize spell check
+  </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

@@ -76,6 +76,12 @@
         padding-inline-end: 0;
       }
 
+      .subsection > settings-toggle-button,
+      .subsection > cr-link-row {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+      }
+
       .internal-wrapper,
       .external-wrapper {
         display: flex;
@@ -214,6 +220,16 @@
             </template>
           </div>
         </div>
+        <settings-toggle-button id="enhancedSpellCheckToggle"
+            class="hr" label="$i18n{spellCheckEnhancedLabel}"
+            pref="{{prefs.spellcheck.use_spelling_service}}"
+            disabled="[[!prefs.browser.enable_spellchecking.value]]">
+        </settings-toggle-button>
+        <cr-link-row class="hr" label="$i18n{editDictionaryLabel}"
+            id="editDictionarySubpageTrigger"
+            disabled="[[!prefs.browser.enable_spellchecking.value]]"
+            role-description="$i18n{subpageArrowRoleDescription}">
+        </cr-link-row>
       </div>
     </div>
 

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

@@ -289,8 +289,8 @@ void AddInputPageStringsV2(content::WebUIDataSource* html_source) {
       {"removeInputMethodLabel",
        IDS_OS_SETTINGS_LANGUAGES_REMOVE_INPUT_METHOD_LABEL},
       {"spellCheckTitle", IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_TITLE},
-      {"spellCheckDisabledReason",
-       IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_DISABLED_REASON},
+      {"spellCheckEnhancedLabel",
+       IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_ENHANCED_LABEL},
       {"spellCheckLanguagesListTitle",
        IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_LANGUAGES_LIST_TITLE},
       {"spellCheckLanguagesListDescription",
@@ -301,6 +301,7 @@ void AddInputPageStringsV2(content::WebUIDataSource* html_source) {
        IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_RETRY_LABEL},
       {"languagesDictionaryDownloadRetryDescription",
        IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_RETRY_DESCRIPTION},
+      {"editDictionaryLabel", IDS_OS_SETTINGS_LANGUAGES_EDIT_DICTIONARY_LABEL},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 }

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

@@ -441,5 +441,23 @@ suite('input page', () => {
       assertTrue(errorDivs[0].hidden);
       assertTrue(retryButtons[0].hidden);
     });
+
+    test('toggle off disables enhanced spell check', () => {
+      const enhancedSpellCheckToggle =
+          inputPage.$$('#enhancedSpellCheckToggle');
+      assertFalse(enhancedSpellCheckToggle.disabled);
+      spellCheckToggle.click();
+
+      assertTrue(enhancedSpellCheckToggle.disabled);
+    });
+
+    test('toggle off disables edit dictionary', () => {
+      const editDictionarySubpageTrigger =
+          inputPage.$$('#editDictionarySubpageTrigger');
+      assertFalse(editDictionarySubpageTrigger.disabled);
+      spellCheckToggle.click();
+
+      assertTrue(editDictionarySubpageTrigger.disabled);
+    });
   });
 });