[OsSettingsLanguages] Add spell check downloard error

Code and tests are mostly carried over from settings/languages_page,
with small change to Retry button aria-label.
Will add other components in following CLs.
Current view: http://screen/35HsGe5kNDds66q
View when spell check is disabled: http://screen/3maPBnjn24GPJaj

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

Bug: 1113439
Change-Id: I998e65f02c2452c41fddb75ca6ade74de0c3e049
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2359972
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@{#805645}

chrome/app/os_settings_strings.grdp

@@ -307,6 +307,15 @@
   <message name="IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_LANGUAGES_LIST_DESCRIPTION" translateable="false" desc="Description for the list of languages that support spell check, from which users can enable or disable spell check for.">
     Languages available for spell check is based on your languages settings
   </message>
+  <message name="IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_FAILED" translateable="false" desc="Error message when spell check dictionary download fails.">
+    Couldn’t download spell check dictionary
+  </message>
+  <message name="IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_RETRY_LABEL" translateable="false" desc="Label for the button to retry spell check dictionary download.">
+    Try again
+  </message>
+  <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_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

@@ -42,6 +42,18 @@
         pointer-events: none;
       }
 
+      .name-with-error div {
+        color: var(--settings-error-color);
+        margin-top: 8px;
+      }
+
+      iron-icon[icon='cr:error'] {
+        --iron-icon-fill-color: var(--settings-error-color);
+        height: var(--cr-icon-size);
+        margin-inline-end: 8px;
+        width: var(--cr-icon-size);
+      }
+
       /* The default implementation of the actionable list item makes the
        * entire list item row a button such that clicking anywhere will
        * activate the action of the list item. The input method list behaves
@@ -165,7 +177,19 @@
                     disabled$="[[isSpellCheckNameClickDisabled_(item, item.*,
                         prefs.browser.enable_spellchecking.*)]]">
                   [[item.language.displayName]]
+                  <div hidden="[[!item.downloadDictionaryFailureCount]]"
+                      aria-hidden="true">
+                    <iron-icon icon="cr:error"></iron-icon>
+                    $i18n{languagesDictionaryDownloadError}
+                  </div>
                 </div>
+                <cr-button on-click="onRetryDictionaryDownloadClick_"
+                    hidden="[[!item.downloadDictionaryFailureCount]]"
+                    disabled="[[!prefs.browser.enable_spellchecking.value]]"
+                    aria-label$="[[getDictionaryDownloadRetryAriaLabel_(
+                        item)]]">
+                  $i18n{languagesDictionaryDownloadRetryLabel}
+                </cr-button>
                 <template is="dom-if" if="[[!
                     item.downloadDictionaryFailureCount]]">
                   <template is="dom-if" if="[[!item.isManaged]]">

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

@@ -344,4 +344,26 @@ Polymer({
     return item.isManaged || item.downloadDictionaryFailureCount > 0 ||
         !this.getPref('browser.enable_spellchecking').value;
   },
+
+  /**
+   * Handler to initiate another attempt at downloading the spell check
+   * dictionary for a specified language.
+   * @param {!{target: Element, model: !{item: !LanguageState}}} e
+   * @private
+   */
+  onRetryDictionaryDownloadClick_(e) {
+    assert(e.model.item.downloadDictionaryFailureCount > 0);
+    this.languageHelper.retryDownloadDictionary(e.model.item.language.code);
+  },
+
+  /**
+   * @param {!LanguageState} item
+   * @return {!string}
+   * @private
+   */
+  getDictionaryDownloadRetryAriaLabel_(item) {
+    return this.i18n(
+        'languagesDictionaryDownloadRetryDescription',
+        item.language.displayName);
+  }
 });

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

@@ -295,6 +295,12 @@ void AddInputPageStringsV2(content::WebUIDataSource* html_source) {
        IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_LANGUAGES_LIST_TITLE},
       {"spellCheckLanguagesListDescription",
        IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_LANGUAGES_LIST_DESCRIPTION},
+      {"languagesDictionaryDownloadError",
+       IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_FAILED},
+      {"languagesDictionaryDownloadRetryLabel",
+       IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_RETRY_LABEL},
+      {"languagesDictionaryDownloadRetryDescription",
+       IDS_OS_SETTINGS_LANGUAGES_DICTIONARY_DOWNLOAD_RETRY_DESCRIPTION},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 }

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

@@ -401,5 +401,45 @@ suite('input page', () => {
       assertTrue(spellCheckToggle.disabled);
       assertFalse(spellCheckToggle.checked);
     });
+
+    test('error handling', () => {
+      const checkAllHidden = nodes => {
+        assertTrue(nodes.every(node => node.hidden));
+      };
+
+      const languageSettingsPrivate = browserProxy.getLanguageSettingsPrivate();
+      const errorDivs = Array.from(
+          spellCheckListContainer.querySelectorAll('.name-with-error div'));
+      assertEquals(2, errorDivs.length);
+      checkAllHidden(errorDivs);
+
+      const retryButtons =
+          Array.from(spellCheckListContainer.querySelectorAll('cr-button'));
+      assertEquals(2, retryButtons.length);
+
+      const languageCode = inputPage.get('languages.enabled.0.language.code');
+      languageSettingsPrivate.onSpellcheckDictionariesChanged.callListeners([
+        {languageCode, isReady: false, downloadFailed: true},
+      ]);
+
+      Polymer.dom.flush();
+      assertFalse(errorDivs[0].hidden);
+      assertFalse(retryButtons[0].hidden);
+      assertFalse(retryButtons[0].disabled);
+
+      // turns off spell check disable retry button.
+      spellCheckToggle.click();
+      assertTrue(retryButtons[0].disabled);
+
+      // turns spell check back on and enable download.
+      spellCheckToggle.click();
+      languageSettingsPrivate.onSpellcheckDictionariesChanged.callListeners([
+        {languageCode, isReady: true, downloadFailed: false},
+      ]);
+
+      Polymer.dom.flush();
+      assertTrue(errorDivs[0].hidden);
+      assertTrue(retryButtons[0].hidden);
+    });
   });
 });