Fix race condition in MD Settings Languages page causing inconsistent settings

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

 // Copyright 2015 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.
 
 /**
  * @fileoverview 'settings-languages' handles Chrome's language and input
  * method settings. The 'languages' property, which reflects the current
  * language settings, must not be changed directly. Instead, changes to
  * language settings should be made using the LanguageHelper APIs provided by
  * this class via languageHelper.
@@ skipping 120 matching lines @@
     },
   },
 
   observers: [
     'preferredLanguagesPrefChanged_(' +
         'prefs.' + preferredLanguagesPrefName + '.value, languages)',
     'spellCheckDictionariesPrefChanged_(' +
         'prefs.spellcheck.dictionaries.value.*, languages)',
     'translateLanguagesPrefChanged_(' +
         'prefs.translate_blocked_languages.value.*, languages)',
-    'prospectiveUILanguageChanged_(' +
-        'prefs.intl.app_locale.value, languages)',
+    'updateRemovableLanguages_(' +
+        'prefs.intl.app_locale.value, languages.enabled)',
     // Observe Chrome OS prefs (ignored for non-Chrome OS).
     'updateRemovableLanguages_(' +
         'prefs.settings.language.preload_engines.value, ' +
         'prefs.settings.language.enabled_extension_imes.value, ' +
         'languages)',
   ],
 
   /** @override */
   created: function() {
     this.languageSettingsPrivate =
@@ skipping 51 matching lines @@
   preferredLanguagesPrefChanged_: function() {
     var enabledLanguageStates =
         this.getEnabledLanguageStates_(this.languages.translateTarget);
 
     // Recreate the enabled language set before updating languages.enabled.
     this.enabledLanguageSet_.clear();
     for (var languageState of enabledLanguageStates)
       this.enabledLanguageSet_.add(languageState.language.code);
 
     this.set('languages.enabled', enabledLanguageStates);
-    this.updateRemovableLanguages_();
   },
 
   /**
    * Updates the spellCheckEnabled state of each enabled language.
    * @private
    */
   spellCheckDictionariesPrefChanged_: function() {
     var spellCheckSet = this.makeSetFromArray_(/** @type {!Array<string>} */(
         this.getPref('spellcheck.dictionaries').value));
     for (var i = 0; i < this.languages.enabled.length; i++) {
@@ skipping 11 matching lines @@
 
     for (var i = 0; i < this.languages.enabled.length; i++) {
       var translateCode = this.convertLanguageCodeForTranslate(
           this.languages.enabled[i].language.code);
       this.set(
           'languages.enabled.' + i + '.translateEnabled',
           !translateBlockedSet.has(translateCode));
     }
   },
 
-  /** @private */
-  prospectiveUILanguageChanged_: function() {
-    this.updateRemovableLanguages_();
-  },
-
   /**
    * Constructs the languages model.
    * @param {!Array<!chrome.languageSettingsPrivate.Language>}
    *     supportedLanguages
    * @param {string} translateTarget Language code of the default translate
    *     target language.
    * @param {!Array<!chrome.languageSettingsPrivate.InputMethod>|undefined}
    *     supportedInputMethods Input methods (Chrome OS only).
    * @param {string|undefined} currentInputMethodId ID of the currently used
    *     input method (Chrome OS only).
@@ skipping 207 matching lines @@
   },
 
   /**
    * Enables the language, making it available for spell check and input.
    * @param {string} languageCode
    */
   enableLanguage: function(languageCode) {
     if (!CrSettingsPrefs.isInitialized)
       return;
 
-    var languageCodes =
-        this.getPref(preferredLanguagesPrefName).value.split(',');
-    if (languageCodes.indexOf(languageCode) > -1)
-      return;
-    languageCodes.push(languageCode);
-    this.languageSettingsPrivate.setLanguageList(languageCodes);
+    this.languageSettingsPrivate.enableLanguage(languageCode);
     this.disableTranslateLanguage(languageCode);
   },
 
   /**
    * Disables the language.
    * @param {string} languageCode
    */
   disableLanguage: function(languageCode) {
     if (!CrSettingsPrefs.isInitialized)
       return;
@@ skipping 11 matching lines @@
             function(otherLanguageCode) {
               return otherLanguageCode != languageCode &&
                   this.isLanguageEnabled(otherLanguageCode);
             }.bind(this));
         if (!supportsOtherEnabledLanguages)
           this.removeInputMethod(inputMethod.id);
       }
     }
 
     // Remove the language from preferred languages.
-    var languageCodes =
-        this.getPref(preferredLanguagesPrefName).value.split(',');
-    var languageIndex = languageCodes.indexOf(languageCode);
-    if (languageIndex == -1)
-      return;
-    languageCodes.splice(languageIndex, 1);
-    this.languageSettingsPrivate.setLanguageList(languageCodes);
+    this.languageSettingsPrivate.disableLanguage(languageCode);
     this.enableTranslateLanguage(languageCode);
   },
 
   /**
    * @param {string} languageCode Language code for an enabled language.
    * @return {boolean}
    */
   canDisableLanguage: function(languageCode) {
     // Cannot disable the prospective UI language.
-    if ((cr.isChromeOS || cr.isWindows) &&
-        languageCode == this.getProspectiveUILanguage()) {
+    if (languageCode == this.getProspectiveUILanguage())
       return false;
-    }
 
     // Cannot disable the only enabled language.
     if (this.languages.enabled.length == 1)
       return false;
 
     if (!cr.isChromeOS)
       return true;
 
     // If this is the only enabled language that is supported by all enabled
     // component IMEs, it cannot be disabled because we need those IMEs.
@@ skipping 18 matching lines @@
    *     of the list. A Positive one moves the language toward the back.
    */
   moveLanguage: function(languageCode, offset) {
     if (!CrSettingsPrefs.isInitialized)
       return;
 
     var languageCodes =
         this.getPref(preferredLanguagesPrefName).value.split(',');
 
     var originalIndex = languageCodes.indexOf(languageCode);
-    var newIndex = originalIndex + offset;
-    if (originalIndex == -1 || newIndex < 0 || newIndex >= languageCodes.length)
-      return;
+    var newIndex = originalIndex;
+    var direction = Math.sign(offset);
+    var distance = Math.abs(offset);
 
-    languageCodes.splice(originalIndex, 1);
-    languageCodes.splice(newIndex, 0, languageCode);
-    this.languageSettingsPrivate.setLanguageList(languageCodes);
+    // Step over the distance to find the target index.
+    while (distance > 0) {
+      newIndex += direction;
+      if (newIndex < 0 || newIndex >= languageCodes.length)
+        return;
+
+      // Skip over non-enabled languages, since they don't appear in the list
+      // (but we don't want to remove them).
+      if (this.enabledLanguageSet_.has(languageCodes[newIndex]))
+        distance--;
+    }
+
+    languageCodes[originalIndex] = languageCodes[newIndex];
+    languageCodes[newIndex] = languageCode;
+    this.setPrefValue(preferredLanguagesPrefName, languageCodes.join(','));
   },
 
   /**
    * Enables translate for the given language by removing the translate
    * language from the blocked languages preference.
    * @param {string} languageCode
    */
   enableTranslateLanguage: function(languageCode) {
     languageCode = this.convertLanguageCodeForTranslate(languageCode);
     this.deletePrefListItem('translate_blocked_languages', languageCode);
@@ skipping 140 matching lines @@
     this.updateEnabledInputMethods_();
   },
 
   /** @param {string} id Removed input method ID. */
   onInputMethodRemoved_: function(id) {
     assert(cr.isChromeOS);
     this.updateEnabledInputMethods_();
   },
 });
 })();