Settings WebUI: Add text explaining why spell check may be disabled

https://i.imgur.com/cmvUEgk.png

Bug: 961387
Change-Id: Id82ad7e7411d6ac147984d9db87109873cc2f08f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1602449
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#658701}

chrome/app/settings_strings.grdp

@@ -2557,6 +2557,9 @@
     Uses the same spell checker that’s used in Google search. Text you type in the browser is sent to Google.
   </message>
   <if expr="not is_macosx">
+    <message name="IDS_SETTING_LANGUAGES_SPELL_CHECK_DISABLED_REASON" 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_SETTINGS_LANGUAGES_SPELL_CHECK_LANGUAGES_LIST_TITLE" desc="Title for the list of languages that support spell check, from which users can enable or disable spell check for.">
       Use spell check for
     </message>

chrome/browser/resources/settings/languages_page/BUILD.gn

@@ -38,6 +38,7 @@ js_library("languages") {
     "../prefs:prefs_types",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:promise_resolver",
   ]
   externs_list = [

chrome/browser/resources/settings/languages_page/languages_page.html

@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
@@ -293,6 +294,7 @@
         <settings-toggle-button
             id="enableSpellcheckingToggle"
             label="$i18n{spellCheckTitle}"
+            sub-label="[[getSpellCheckSubLabel_(spellCheckLanguages_)]]"
             pref="{{prefs.browser.enable_spellchecking}}"
             disabled="[[!spellCheckLanguages_.length]]">
         </settings-toggle-button>

chrome/browser/resources/settings/languages_page/languages_page.js

@@ -27,6 +27,7 @@ Polymer({
   is: 'settings-languages-page',
 
   behaviors: [
+    I18nBehavior,
     PrefsBehavior,
   ],
 
@@ -692,6 +693,20 @@ Polymer({
     return '';
   },
 
+  /**
+   * @return {string|undefined}
+   * @private
+   */
+  getSpellCheckSubLabel_: function() {
+    // <if expr="not is_macosx">
+    if (this.spellCheckLanguages_.length === 0) {
+      return this.i18n('spellCheckDisabledReason');
+    }
+    // </if>
+
+    return undefined;
+  },
+
   // <if expr="chromeos">
   /**
    * @param {string} id The input method ID.

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -1418,6 +1418,8 @@ void AddLanguagesStrings(content::WebUIDataSource* html_source) {
     {"spellCheckEnhancedDescription",
      IDS_SETTINGS_LANGUAGES_SPELL_CHECK_ENHANCED_DESCRIPTION},
 #if !defined(OS_MACOSX)
+    {"spellCheckDisabledReason",
+     IDS_SETTING_LANGUAGES_SPELL_CHECK_DISABLED_REASON},
     {"spellCheckLanguagesListTitle",
      IDS_SETTINGS_LANGUAGES_SPELL_CHECK_LANGUAGES_LIST_TITLE},
     {"manageSpellCheck", IDS_SETTINGS_LANGUAGES_SPELL_CHECK_MANAGE},

chrome/test/data/webui/settings/languages_page_tests.js

@@ -659,9 +659,15 @@ cr.define('languages_page_tests', function() {
           return;
         }
 
+        loadTimeData.overrideValues({
+          spellCheckDisabledReason: 'no languages!',
+        });
+
         assertFalse(languagesPage.$.enableSpellcheckingToggle.disabled);
         assertTrue(
             languageHelper.getPref('browser.enable_spellchecking').value);
+        assertEquals(
+            languagesPage.$.enableSpellcheckingToggle.subLabel, undefined);
 
         // Empty out supported languages
         languageHelper.setPrefValue('intl.accept_languages', '');
@@ -672,6 +678,9 @@ cr.define('languages_page_tests', function() {
         assertTrue(languagesPage.$.enableSpellcheckingToggle.disabled);
         assertFalse(
             languageHelper.getPref('browser.enable_spellchecking').value);
+        assertEquals(
+            languagesPage.$.enableSpellcheckingToggle.subLabel,
+            'no languages!');
       });
 
       test('error handling', function() {