Implement "Add" and "Remove" buttons in Language and Input page.

chrome/browser/resources/options/chromeos_language_list.js

Index: chrome/browser/resources/options/chromeos_language_list.js
diff --git a/chrome/browser/resources/options/chromeos_language_list.js b/chrome/browser/resources/options/chromeos_language_list.js
index a4f7972c11495e2def62c9da3b7faecaefde685f..ac0c8b941b3e405826c9d4a2eb7c3844d9db6aaa 100644
--- a/chrome/browser/resources/options/chromeos_language_list.js
+++ b/chrome/browser/resources/options/chromeos_language_list.js
@@ -6,6 +6,7 @@ cr.define('options.language', function() {
   const List = cr.ui.List;
   const ListItem = cr.ui.ListItem;
   const ArrayDataModel = cr.ui.ArrayDataModel;
+  const LanguageOptions = options.LanguageOptions;
 
   /**
    * Creates a new language list.
@@ -15,6 +16,24 @@ cr.define('options.language', function() {
    */
   var LanguageList = cr.ui.define('list');
 
+  /**
+   * Gets display name from the given language code.
+   * @param {string} languageCode Language code (ex. "fr").
+   */
+  LanguageList.getDisplayNameFromLanguageCode = function(languageCode) {
+    // Build the language code to display name dictionary at first time.
+    if (!this.languageCodeToDisplayName_) {
+      this.languageCodeToDisplayName_ = {};
+      var languageList = templateData.languageList;
+      for (var i = 0; i < languageList.length; i++) {
+        var language = languageList[i];
+        this.languageCodeToDisplayName_[language.code] = language.displayName;
+      }
+    }
+
+    return this.languageCodeToDisplayName_[languageCode];
+  }
+
   LanguageList.prototype = {
     __proto__: List.prototype,
 
@@ -33,10 +52,61 @@ cr.define('options.language', function() {
     },
 
     createItem: function(languageCode) {
-      var languageDisplayName = localStrings.getString(languageCode);
+      var languageDisplayName =
+          LanguageList.getDisplayNameFromLanguageCode(languageCode);
       return new ListItem({label: languageDisplayName});
     },
 
+    /*
+     * Adds a language to the language list.
+     * @param {string} languageCode language code (ex. "fr").
+     */
+    addLanguage: function(languageCode) {
+      var dataModel = this.dataModel;
+      dataModel.push(languageCode);
+
+      this.updateBackend_();
+    },
+
+    /*
+     * Gets the language codes of the currently listed languages.
+     */
+    getLanguageCodes: function() {
+      return this.dataModel.slice();
+    },
+
+    /*
+     * Gets the language code of the selected language.
+     */
+    getSelectedLanguageCode: function() {
+      return this.selectedItem;
+    },
+
+    /*
+     * Removes the currently selected language.
+     */
+    removeSelectedLanguage: function() {
+      if (this.selectionModel.selectedIndex >= 0 &&
+          // Don't allow removing the last language.
+          this.dataModel.length > 1) {
+        // TODO(satorux): Until we switch to the single selection model,
+        // it's possible that multiple languages are selected, but we don't
+        // handle that case here.
+        var originalIndex = this.selectionModel.selectedIndex;
+        this.dataModel.splice(this.selectionModel.selectedIndex, 1);
+        // Select the item at the original index if possible. Otherwise,
+        // select the last item.
+        // TODO(satorux): This should be handled by the selection model
+        // See crbug.com/49893.
+        this.selectionModel.selectedIndex = Math.min(
+            originalIndex,
+            this.dataModel.length - 1);
+        var newLanguageCodes = this.dataModel.slice();
+        this.load_(newLanguageCodes);
+        this.updateBackend_();
+      }
+    },
+
     /**
      * Handles pref change.
      * @param {Event} e The change event object.
@@ -82,7 +152,7 @@ cr.define('options.language', function() {
       for (var i = 0; i < languageCodes.length; i++) {
         // Check if the translation for the language code is
         // present. Otherwise, skip it.
-        if (localStrings.getString(languageCodes[i])) {
+        if (LanguageList.getDisplayNameFromLanguageCode(languageCodes[i])) {
           filteredLanguageCodes.push(languageCodes[i]);
         }
       }