Enables the user to select multiple languages for spellchecking (UI)

chrome/browser/resources/options/language_options.js

Index: chrome/browser/resources/options/language_options.js
diff --git a/chrome/browser/resources/options/language_options.js b/chrome/browser/resources/options/language_options.js
index 996a324f87c33fb1cf3e1ec895cb9efcc92c7fb7..11bf4c397c06128cad73d7e74248668b7d145980 100644
--- a/chrome/browser/resources/options/language_options.js
+++ b/chrome/browser/resources/options/language_options.js
@@ -52,8 +52,8 @@ cr.define('options', function() {
   var TRANSLATE_BLOCKED_LANGUAGES_PREF = 'translate_blocked_languages';
 
   /**
-   * The preference key that is a string that describes the spell check
-   * dictionary language, like "en-US".
+   * The preference key that is a list of strings that describes the spellcheck
+   * dictionary language, like ["en-US", "fr"].
    * @type {string}
    * @const
    */
@@ -136,12 +136,12 @@ cr.define('options', function() {
     translateSupportedLanguages_: [],
 
     /**
-     * The preference is a string that describes the spell check dictionary
-     * language, like "en-US".
-     * @type {string}
+     * The dictionary of currently selected spell check dictionary languages,
+     * like {"en-US": true, "sl-SI": true}.
+     * @type {Object}
      * @private
      */
-    spellCheckDictionary_: '',
+    spellCheckLanguages_: {},
 
     /**
      * The map of language code to input method IDs, like:
@@ -188,7 +188,8 @@ cr.define('options', function() {
           TRANSLATE_BLOCKED_LANGUAGES_PREF,
           this.handleTranslateBlockedLanguagesPrefChange_.bind(this));
       Preferences.getInstance().addEventListener(SPELL_CHECK_DICTIONARIES_PREF,
-          this.handleSpellCheckDictionaryPrefChange_.bind(this));
+          this.handleSpellCheckDictionariesPrefChange_.bind(this));
+
       Preferences.getInstance().addEventListener(ENABLE_TRANSLATE,
           this.handleEnableTranslatePrefChange_.bind(this));
       this.translateSupportedLanguages_ =
@@ -240,11 +241,15 @@ cr.define('options', function() {
 
       // Handle clicks on "Use this language for spell checking" button.
       if (!cr.isMac) {
-        var spellCheckLanguageButton = getRequiredElement(
-            'language-options-spell-check-language-button');
-        spellCheckLanguageButton.addEventListener(
-            'click',
-            this.handleSpellCheckLanguageButtonClick_.bind(this));
+        if (loadTimeData.getBoolean('enableMultilingualSpellChecker')) {
+          $('spellcheck-language-checkbox').addEventListener(
+              'change',
+              this.handleSpellCheckLanguageCheckboxClick_.bind(this));
+        } else {
+          $('spellcheck-language-button').addEventListener(
+              'click',
+              this.handleSpellCheckLanguageButtonClick_.bind(this));
+        }
       }
 
       if (cr.isChromeOS) {
@@ -427,7 +432,7 @@ cr.define('options', function() {
       this.updateSelectedLanguageName_(languageCode);
 
       if (!cr.isMac)
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
 
       if (cr.isChromeOS)
         this.updateInputMethodList_(languageCode);
@@ -604,56 +609,67 @@ cr.define('options', function() {
      * @param {string} languageCode Language code (ex. "fr").
      * @private
      */
-    updateSpellCheckLanguageButton_: function(languageCode) {
+    updateSpellCheckLanguageControls_: function(languageCode) {
+      assert(languageCode);
       var spellCheckLanguageSection = $('language-options-spellcheck');
       var spellCheckLanguageButton =
-          $('language-options-spell-check-language-button');
+          $('spellcheck-language-button');

[Dan Beam, 2015/07/06 23:30:28]

fits on one line

[Julius, 2015/07/07 01:14:21]

Done.

+      var spellCheckLanguageCheckboxDiv =
+          $('spellcheck-language-checkbox-container');
+      var spellCheckLanguageCheckbox =
+          $('spellcheck-language-checkbox');
       var spellCheckLanguageMessage =
-          $('language-options-spell-check-language-message');
+          $('spellcheck-language-message');
       var dictionaryDownloadInProgress =
           $('language-options-dictionary-downloading-message');
       var dictionaryDownloadFailed =
           $('language-options-dictionary-download-failed-message');
       var dictionaryDownloadFailHelp =
           $('language-options-dictionary-download-fail-help-message');
+
       spellCheckLanguageSection.hidden = false;
       spellCheckLanguageMessage.hidden = true;
       spellCheckLanguageButton.hidden = true;
+      spellCheckLanguageCheckboxDiv.hidden = true;
       dictionaryDownloadInProgress.hidden = true;
       dictionaryDownloadFailed.hidden = true;
       dictionaryDownloadFailHelp.hidden = true;
+      spellCheckLanguageCheckbox.checked = false;
+
+      if (languageCode in loadTimeData.getValue('spellCheckLanguageCodeSet')) {

[Dan Beam, 2015/07/06 23:30:28]

if (!(languageCode in loadTimeData.getValue('spellCheckLanguageCodeSet'))) {
  spellCheckLanguageMessage.textContent =
      loadTimeData.getString('cannotBeUsedForSpellChecking');
  spellCheckLanguageMessage.hidden = false;
  return;
}

[Julius, 2015/07/07 01:14:21]

Done.

+        if (loadTimeData.getBoolean('enableMultilingualSpellChecker')) {
+          spellCheckLanguageCheckbox.languageCode = languageCode;
+          spellCheckLanguageCheckbox.checked =
+              this.spellCheckLanguages_.hasOwnProperty(languageCode);

[Dan Beam, 2015/07/06 23:30:28]

use "key in obj" or "obj.hasOwnProperty(key)", don't mix them

[Julius, 2015/07/07 01:14:21]

I'll use "key in obj" because that's what's used throughout the file.

+          spellCheckLanguageCheckboxDiv.hidden = false;
+        } else if (this.spellCheckLanguages_.hasOwnProperty(languageCode)) {
+          if (!(languageCode in this.spellcheckDictionaryDownloadStatus_)) {

[Dan Beam, 2015/07/06 23:30:28]

nit: this code would really benefit from things like:

  var tempVariable = languageCode in this.oneOfManyDictionaries_;

where |tempVariable| is something like |isDownloading| or whatever the hell all
these if()'s mean

[Julius, 2015/07/07 01:14:21]

Done.

+            spellCheckLanguageMessage.textContent =
+                loadTimeData.getString('isUsedForSpellChecking');
+            spellCheckLanguageMessage.hidden = false;
+          }
+        } else {
+          spellCheckLanguageButton.textContent =
+              loadTimeData.getString('useThisForSpellChecking');
+          spellCheckLanguageButton.hidden = false;
+          spellCheckLanguageButton.languageCode = languageCode;
+        }
 
-      if (languageCode == this.spellCheckDictionary_) {
-        if (!(languageCode in this.spellcheckDictionaryDownloadStatus_)) {
-          spellCheckLanguageMessage.textContent =
-              loadTimeData.getString('isUsedForSpellChecking');
-          showMutuallyExclusiveNodes(
-              [spellCheckLanguageButton, spellCheckLanguageMessage], 1);
-        } else if (this.spellcheckDictionaryDownloadStatus_[languageCode] ==
-                       DOWNLOAD_STATUS.IN_PROGRESS) {
-          dictionaryDownloadInProgress.hidden = false;
-        } else if (this.spellcheckDictionaryDownloadStatus_[languageCode] ==
-                       DOWNLOAD_STATUS.FAILED) {
-          spellCheckLanguageSection.hidden = true;
-          dictionaryDownloadFailed.hidden = false;
-          if (this.spellcheckDictionaryDownloadFailures_ > 1)
-            dictionaryDownloadFailHelp.hidden = false;
+        switch (this.spellcheckDictionaryDownloadStatus_[languageCode]) {
+          case DOWNLOAD_STATUS.IN_PROGRESS:
+            dictionaryDownloadInProgress.hidden = false;
+            break;
+          case DOWNLOAD_STATUS.FAILED:
+            showMutuallyExclusiveNodes(
+                [spellCheckLanguageSection, dictionaryDownloadFailed], 1);
+            if (this.spellcheckDictionaryDownloadFailures_ > 1)
+              dictionaryDownloadFailHelp.hidden = false;
+            break;
         }
-      } else if (languageCode in
-          loadTimeData.getValue('spellCheckLanguageCodeSet')) {
-        spellCheckLanguageButton.textContent =
-            loadTimeData.getString('useThisForSpellChecking');
-        showMutuallyExclusiveNodes(
-            [spellCheckLanguageButton, spellCheckLanguageMessage], 0);
-        spellCheckLanguageButton.languageCode = languageCode;
-      } else if (!languageCode) {
-        spellCheckLanguageButton.hidden = true;
-        spellCheckLanguageMessage.hidden = true;
       } else {
         spellCheckLanguageMessage.textContent =
             loadTimeData.getString('cannotBeUsedForSpellChecking');
-        showMutuallyExclusiveNodes(
-            [spellCheckLanguageButton, spellCheckLanguageMessage], 1);
+        spellCheckLanguageMessage.hidden = false;
       }
     },
 
@@ -919,8 +935,8 @@ cr.define('options', function() {
      * @private
      */
     updateEnableSpellCheck_: function(e) {
-       var value = !$('enable-spell-check').checked;
-       $('language-options-spell-check-language-button').disabled = value;
+       var value = !$('enable-spellcheck').checked;
+       $('spellcheck-language-button').disabled = value;
        if (!cr.isMac)
          $('edit-dictionary-button').hidden = value;
      },
@@ -937,17 +953,22 @@ cr.define('options', function() {
     },
 
     /**
-     * Handles spellCheckDictionaryPref change.
-     * @param {Event} e Change event.
+     * Updates spellcheck dictionary UI (checkboxes, buttons, and labels) when
+     * preferences change.
+     * @param {Event} e Preference change event where e.value.value is the list
+     * of languages currently used for spellchecking.
      * @private
      */
-    handleSpellCheckDictionaryPrefChange_: function(e) {
-      var languageCode = e.value.value;
-      this.spellCheckDictionary_ = languageCode;
-      if (!cr.isMac) {
-        this.updateSpellCheckLanguageButton_(
-            $('language-options-list').getSelectedLanguageCode());
-      }
+    handleSpellCheckDictionariesPrefChange_: function(e) {
+      if (cr.isMac)
+        return;
+
+      var languages = e.value.value;
+      this.spellCheckLanguages_ = {};
+      for (var i = 0; i < languages.length; i++)
+        this.spellCheckLanguages_[languages[i]] = true;

[Dan Beam, 2015/07/06 23:30:28]

curlies

[Julius, 2015/07/07 01:14:20]

Done.

+      this.updateSpellCheckLanguageControls_(
+          $('language-options-list').getSelectedLanguageCode());
     },
 
     /**
@@ -968,10 +989,36 @@ cr.define('options', function() {
      * @private
      */
     handleSpellCheckLanguageButtonClick_: function(e) {
-      var languageCodes = [e.target.languageCode];
+      var languageCode = e.target.languageCode;
       // Save the preference.
       Preferences.setListPref(SPELL_CHECK_DICTIONARIES_PREF,
+                              [languageCode], true);
+
+      // The spellCheckLanguageChange argument is only used for logging.
+      chrome.send('spellCheckLanguageChange', [languageCode]);
+      chrome.send('coreOptionsUserMetricsAction',
+                  ['Options_Languages_SpellCheck']);
+    },
+
+    /**
+     * Updates the spellcheck.dictionaries preference with the currently
+     * selected language codes.
+     * @param {Event} e Click event. e.target represents the "Use this language
+     * for spellchecking"
+     * @private
+     */
+    handleSpellCheckLanguageCheckboxClick_: function(e) {
+      var languageCode = e.target.languageCode;

[Dan Beam, 2015/07/06 23:30:28]

target -> currentTarget

[Julius, 2015/07/07 01:14:20]

Done.

+
+      if (e.target.checked)
+        this.spellCheckLanguages_[languageCode] = true;
+      else
+        delete this.spellCheckLanguages_[languageCode];
+
+      var languageCodes = Object.keys(this.spellCheckLanguages_);
+      Preferences.setListPref(SPELL_CHECK_DICTIONARIES_PREF,
                               languageCodes, true);
+
       // The spellCheckLanguageChange argument is only used for logging.
       chrome.send('spellCheckLanguageChange', [languageCodes.join(',')]);
       chrome.send('coreOptionsUserMetricsAction',
@@ -1277,7 +1324,7 @@ cr.define('options', function() {
       if (!cr.isMac &&
           languageCode ==
               $('language-options-list').getSelectedLanguageCode()) {
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
       }
     },
 
@@ -1293,7 +1340,7 @@ cr.define('options', function() {
       if (!cr.isMac &&
           languageCode ==
               $('language-options-list').getSelectedLanguageCode()) {
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
       }
     },
 
@@ -1310,7 +1357,7 @@ cr.define('options', function() {
       if (!cr.isMac &&
           languageCode ==
               $('language-options-list').getSelectedLanguageCode()) {
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
       }
     },
 
@@ -1377,6 +1424,10 @@ cr.define('options', function() {
     LanguageOptions.getInstance().onDictionaryDownloadFailure_(languageCode);
   };
 
+  LanguageOptions.updateSpellCheckLanguageControls = function(languageCode) {
+    var instance = LanguageOptions.getInstance();
+    instance.updateSpellCheckLanguageControls_(languageCode);
+  };
   // Export
   return {
     LanguageOptions: LanguageOptions