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

chrome/browser/resources/options/language_options.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // TODO(kochi): Generalize the notification as a component and put it
 // in js/cr/ui/notification.js .
 
 cr.define('options', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
@@ skipping 34 matching lines @@
   var ENABLED_EXTENSION_IME_PREF = 'settings.language.enabled_extension_imes';
 
   /**
    * The preference that lists the languages which are not translated.
    * @type {string}
    * @const
    */
   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
    */
   var SPELL_CHECK_DICTIONARIES_PREF = 'spellcheck.dictionaries';
 
   /**
    * The preference that indicates if the Translate feature is enabled.
    * @type {string}
    * @const
    */
@@ skipping 62 matching lines @@
     translateBlockedLanguages_: [],
 
     /**
      * The list of the languages supported by Translate server
      * @type {Array}
      * @private
      */
     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:
      * {'ja': ['mozc', 'mozc-jp'], 'zh-CN': ['pinyin'], ...}
      * @type {Object}
      * @private
      */
     languageCodeToInputMethodIdsMap_: {},
 
     /**
@@ skipping 26 matching lines @@
       }
 
       var checkbox = $('offer-to-translate-in-this-language');
       checkbox.addEventListener('click',
           this.handleOfferToTranslateCheckboxClick_.bind(this));
 
       Preferences.getInstance().addEventListener(
           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_ =
           loadTimeData.getValue('translateSupportedLanguages');
 
       // Set up add button.
       var onclick = function(e) {
         // Add the language without showing the overlay if it's specified in
         // the URL hash (ex. lang_add=ja).  Used for automated testing.
         var match = document.location.hash.match(/\blang_add=([\w-]+)/);
@@ skipping 31 matching lines @@
         // Handle spell check enable/disable.
         if (!cr.isMac) {
           Preferences.getInstance().addEventListener(
               ENABLE_SPELL_CHECK_PREF,
               this.updateEnableSpellCheck_.bind(this));
         }
       }
 
       // 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) {
         $('language-options-ui-restart-button').onclick = function() {
           chrome.send('uiLanguageRestart');
         };
       }
 
       $('language-confirm').onclick =
           PageManager.closeOverlay.bind(PageManager);
@@ skipping 162 matching lines @@
       }
 
       this.updateOfferToTranslateCheckbox_(languageCode);
 
       if (cr.isWindows || cr.isChromeOS)
         this.updateUiLanguageButton_(languageCode);
 
       this.updateSelectedLanguageName_(languageCode);
 
       if (!cr.isMac)
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
 
       if (cr.isChromeOS)
         this.updateInputMethodList_(languageCode);
 
       this.updateLanguageListInAddLanguageOverlay_();
     },
 
     /**
      * Handles languageOptionsList's save event.
      * @param {Event} e Save event.
@@ skipping 156 matching lines @@
         showMutuallyExclusiveNodes(
             [uiLanguageButton, uiLanguageMessage, uiLanguageNotification], 1);
       }
     },
 
     /**
      * Updates the spell check language button.
      * @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');
-      var spellCheckLanguageMessage =
-          $('language-options-spell-check-language-message');
+      var spellCheckLanguageButton = $('spellcheck-language-button');
+      var spellCheckLanguageCheckboxDiv =
+          $('spellcheck-language-checkbox-container');
+      var spellCheckLanguageCheckbox = $('spellcheck-language-checkbox');
+      var spellCheckLanguageMessage = $('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 == 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;
-        }
-      } 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 {
+      var isLanguageCodeInCodeSet =

[Dan Beam, 2015/07/08 01:13:10]

what does "InCodeSet" mean?

[Julius, 2015/07/08 01:33:46]

The language code set is the collection of all languages that are allowed to be
spellchecked with. So if you look at your languages in your settings menu one
might be English which is 'en'. That can't be spellchecked with so its code
isn't in the code set. But the different English dialects are in the code set
and can be spellchecked with, such as 'en-AU'.

This is basically just for if the language cannot be used for spellchecking.

[Dan Beam, 2015/07/08 18:41:52]

then why not |canBeUsedForSpellChecking| instead?

rinse+repeat for other vars

[Julius, 2015/07/08 20:38:48]

isLanguageCodeInCodeSet -> canBeUsedForSpellchecking
isLanguageCodeInLanguages -> isUsedForSpellchecking
isLanguageUsedForSpellchecking -> isLanguageDownloaded

+          languageCode in loadTimeData.getValue('spellCheckLanguageCodeSet');
+      var isLanguageCodeInLanguages = languageCode in this.spellCheckLanguages_;
+      var isLanguageUsedForSpellchecking =
+          !(languageCode in this.spellcheckDictionaryDownloadStatus_);
+
+      if (!isLanguageCodeInCodeSet) {
         spellCheckLanguageMessage.textContent =
             loadTimeData.getString('cannotBeUsedForSpellChecking');
-        showMutuallyExclusiveNodes(
-            [spellCheckLanguageButton, spellCheckLanguageMessage], 1);
+        spellCheckLanguageMessage.hidden = false;
+        return;
+      } else {

[Dan Beam, 2015/07/08 01:13:10]

no } else { after return

[Julius, 2015/07/08 01:33:46]

Done.

+        if (loadTimeData.getBoolean('enableMultilingualSpellChecker')) {
+          spellCheckLanguageCheckbox.languageCode = languageCode;
+          spellCheckLanguageCheckbox.checked = isLanguageCodeInLanguages;
+          spellCheckLanguageCheckboxDiv.hidden = false;
+        } else if (isLanguageCodeInLanguages) {
+          if (isLanguageUsedForSpellchecking) {
+            spellCheckLanguageMessage.textContent =
+                loadTimeData.getString('isUsedForSpellChecking');
+            spellCheckLanguageMessage.hidden = false;
+          }
+        } else {
+          spellCheckLanguageButton.textContent =
+              loadTimeData.getString('useThisForSpellChecking');
+          spellCheckLanguageButton.hidden = false;
+          spellCheckLanguageButton.languageCode = languageCode;
+        }
+
+        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;
+        }
       }
     },
 
     /**
      * Updates the checkbox for stopping translation.
      * @param {string} languageCode Language code (ex. "fr").
      * @private
      */
     updateOfferToTranslateCheckbox_: function(languageCode) {
       var div = $('language-options-offer-to-translate');
@@ skipping 245 matching lines @@
       return (!cr.isChromeOS ||
               this.canDeleteLanguage_(languageCode));
     },
 
     /**
      * Handles browse.enable_spellchecking change.
      * @param {Event} e Change event.
      * @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;
      },
 
     /**
      * Handles translateBlockedLanguagesPref change.
      * @param {Event} e Change event.
      * @private
      */
     handleTranslateBlockedLanguagesPrefChange_: function(e) {
       this.translateBlockedLanguages_ = e.value.value;
       this.updateOfferToTranslateCheckbox_(
           $('language-options-list').getSelectedLanguageCode());
     },
 
     /**
-     * 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;
       }
+      this.updateSpellCheckLanguageControls_(
+          $('language-options-list').getSelectedLanguageCode());
     },
 
     /**
      * Handles translate.enabled change.
      * @param {Event} e Change event.
      * @private
      */
     handleEnableTranslatePrefChange_: function(e) {
       var enabled = e.value.value;
       this.enableTranslate_ = enabled;
       this.updateOfferToTranslateCheckbox_(
           $('language-options-list').getSelectedLanguageCode());
     },
 
     /**
      * Handles spellCheckLanguageButton click.
      * @param {Event} e Click event.
      * @private
      */
     handleSpellCheckLanguageButtonClick_: function(e) {
-      var languageCodes = [e.target.languageCode];
+      var languageCode = e.currentTarget.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.currentTarget represents the "Use this
+     * language for spellchecking" checkbox.
+     * @private
+     */
+    handleSpellCheckLanguageCheckboxClick_: function(e) {
+      var languageCode = e.currentTarget.languageCode;
+
+      if (e.currentTarget.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',
                   ['Options_Languages_SpellCheck']);
     },
 
     /**
      * Checks whether it's possible to remove the language specified by
      * languageCode and returns true if possible. This function returns false
      * if the removal causes the number of preload engines to be zero.
@@ skipping 285 matching lines @@
      * @param {string} languageCode The language of the dictionary that just
      *     began downloading.
      * @private
      */
     onDictionaryDownloadBegin_: function(languageCode) {
       this.spellcheckDictionaryDownloadStatus_[languageCode] =
           DOWNLOAD_STATUS.IN_PROGRESS;
       if (!cr.isMac &&
           languageCode ==
               $('language-options-list').getSelectedLanguageCode()) {
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
       }
     },
 
     /**
      * A handler for when dictionary for |languageCode| successfully downloaded.
      * @param {string} languageCode The language of the dictionary that
      *     succeeded downloading.
      * @private
      */
     onDictionaryDownloadSuccess_: function(languageCode) {
       delete this.spellcheckDictionaryDownloadStatus_[languageCode];
       this.spellcheckDictionaryDownloadFailures_ = 0;
       if (!cr.isMac &&
           languageCode ==
               $('language-options-list').getSelectedLanguageCode()) {
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
       }
     },
 
     /**
      * A handler for when dictionary for |languageCode| fails to download.
      * @param {string} languageCode The language of the dictionary that failed
      *     to download.
      * @private
      */
     onDictionaryDownloadFailure_: function(languageCode) {
       this.spellcheckDictionaryDownloadStatus_[languageCode] =
           DOWNLOAD_STATUS.FAILED;
       this.spellcheckDictionaryDownloadFailures_++;
       if (!cr.isMac &&
           languageCode ==
               $('language-options-list').getSelectedLanguageCode()) {
-        this.updateSpellCheckLanguageButton_(languageCode);
+        this.updateSpellCheckLanguageControls_(languageCode);
       }
     },
 
     /**
      * Converts the language code for Translation. There are some differences
      * between the language set for Translation and that for Accept-Language.
      * @param {string} languageCode The language code like 'fr'.
      * @return {string} The converted language code.
      * @private
      */
@@ skipping 46 matching lines @@
   };
 
   LanguageOptions.onDictionaryDownloadSuccess = function(languageCode) {
     LanguageOptions.getInstance().onDictionaryDownloadSuccess_(languageCode);
   };
 
   LanguageOptions.onDictionaryDownloadFailure = function(languageCode) {
     LanguageOptions.getInstance().onDictionaryDownloadFailure_(languageCode);
   };
 
+  LanguageOptions.updateSpellCheckLanguageControls = function(languageCode) {
+    var instance = LanguageOptions.getInstance();
+    instance.updateSpellCheckLanguageControls_(languageCode);
+  };

[Dan Beam, 2015/07/08 01:13:10]

\n

[Julius, 2015/07/08 01:33:46]

Done.

   // Export
   return {
     LanguageOptions: LanguageOptions
   };
 });