Use drop-down UI for "add language".

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 OptionsPage = options.OptionsPage;
   /** @const */ var LanguageList = options.LanguageList;
@@ skipping 107 matching lines @@
         // Set up the button for editing custom spelling dictionary.
         $('edit-dictionary-button').onclick = function(e) {
           OptionsPage.navigateToPage('editDictionary');
         };
         $('dictionary-download-retry-button').onclick = function(e) {
           chrome.send('retryDictionaryDownload');
         };
       }
 
       if (cr.isChromeOS) {
-        // Listen to user clicks on the add language list.
-        var addLanguageList = $('add-language-overlay-language-list');
-        addLanguageList.addEventListener(
-            'click',
-            this.handleAddLanguageListClick_.bind(this));
+        // Listen to user click on the extension ime button.
         $('language-options-extension-ime-button').addEventListener(
             'click',
             this.handleExtensionImeButtonClick_.bind(this));
 
         // Check if there is an Extension IME.
         var hasExtensionIme = false;
         var inputMethods = ($('language-options-input-method-list')
             .querySelectorAll('.input-method'));
         for (var i = 0, inputMethod; inputMethod = inputMethods[i]; ++i) {
           if (inputMethod.querySelector('input')
               .inputMethodId.match(/^_ext_ime_/)) {
             hasExtensionIme = true;
             break;
           }
         }
         // Show the Extension IME button only if available.
         $('language-options-extension-ime-button').hidden = !hasExtensionIme;
-      } else {
-        // Listen to add language dialog ok button.
-        var addLanguageOkButton = $('add-language-overlay-ok-button');
-        addLanguageOkButton.addEventListener(
-            'click',
-            this.handleAddLanguageOkButtonClick_.bind(this));
+      }
 
+      // Listen to add language dialog ok button.
+      $('add-language-overlay-ok-button').addEventListener(
+          'click', this.handleAddLanguageOkButtonClick_.bind(this));
+
+      if (!cr.isChromeOS) {
         // Show experimental features if enabled.
         if (loadTimeData.getBoolean('enableSpellingAutoCorrect'))
           $('auto-spell-correction-option').hidden = false;
 
         // Handle spell check enable/disable.
         if (!cr.isMac) {
           Preferences.getInstance().addEventListener(
               this.enableSpellCheckPref,
               this.updateEnableSpellCheck_.bind(this));
         }
@@ skipping 502 matching lines @@
      * @param {Event} e Click event.
      * @private
      */
     handleExtensionCheckboxClick_: function(e) {
       var checkbox = e.target;
       this.updateFilteredExtensionsFromCheckboxes_();
       this.saveFilteredExtensionPref_();
     },
 
     /**
-     * Handles add language list's click event.
-     * @param {Event} e Click event.
-     */
-    handleAddLanguageListClick_: function(e) {
-      var languageOptionsList = $('language-options-list');
-      var languageCode = e.target.languageCode;
-      // languageCode can be undefined, if click was made on some random
-      // place in the overlay, rather than a button. Ignore it.
-      if (!languageCode) {
-        return;
-      }
-      languageOptionsList.addLanguage(languageCode);
-      var inputMethodIds = this.languageCodeToInputMethodIdsMap_[languageCode];
-      // Enable the first input method for the language added.
-      if (inputMethodIds && inputMethodIds[0] &&
-          // Don't add the input method it's already present. This can
-          // happen if the same input method is shared among multiple
-          // languages (ex. English US keyboard is used for English US and
-          // Filipino).
-          this.preloadEngines_.indexOf(inputMethodIds[0]) == -1) {
-        this.preloadEngines_.push(inputMethodIds[0]);
-        this.updateCheckboxesFromPreloadEngines_();
-        this.savePreloadEnginesPref_();
-      }
-      OptionsPage.closeOverlay();
-    },
-
-    /**
      * Handles extension IME button.
      */
     handleExtensionImeButtonClick_: function() {
       $('language-options-list').clearSelection();
 
       var languageName = $('language-options-language-name');
       languageName.textContent = loadTimeData.getString('extension_ime_label');
 
       var uiLanguageMessage = $('language-options-ui-language-message');
       uiLanguageMessage.textContent =
@@ skipping 18 matching lines @@
           method.hidden = true;
       }
     },
 
     handleAddLanguageOkButtonClick_: function() {
       var languagesSelect = $('add-language-overlay-language-list');
       var selectedIndex = languagesSelect.selectedIndex;
       if (selectedIndex >= 0) {
         var selection = languagesSelect.options[selectedIndex];
         $('language-options-list').addLanguage(String(selection.value));
+        if (cr.isChromeOS) {
+          var inputMethodIds =
+              this.languageCodeToInputMethodIdsMap_[selection.value];
+          // Enable the first input method for the language added.
+          if (inputMethodIds && inputMethodIds[0] &&
+              // Don't add the input method it's already present. This can
+              // happen if the same input method is shared among multiple
+              // languages (ex. English US keyboard is used for English US and
+              // Filipino).
+              this.preloadEngines_.indexOf(inputMethodIds[0]) == -1) {
+            this.preloadEngines_.push(inputMethodIds[0]);
+            this.updateCheckboxesFromPreloadEngines_();
+            this.savePreloadEnginesPref_();
+          }
+        }
         OptionsPage.closeOverlay();
       }
     },
 
     /**
      * Checks if languageCode is deletable or not.
      * @param {string} languageCode the languageCode to check for deletability.
      */
     languageIsDeletable: function(languageCode) {
       // Don't allow removing the language if it's a UI language.
@@ skipping 350 matching lines @@
 
   LanguageOptions.onDictionaryDownloadFailure = function(languageCode) {
     LanguageOptions.getInstance().onDictionaryDownloadFailure_(languageCode);
   };
 
   // Export
   return {
     LanguageOptions: LanguageOptions
   };
 });