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));
-      } else {
-        // Listen to add language dialog ok button.
-        var addLanguageOkButton = $('add-language-overlay-ok-button');
-        addLanguageOkButton.addEventListener(
-            'click',
-            this.handleAddLanguageOkButtonClick_.bind(this));
+      }
 

[Dan Beam, 2013/02/01 19:38:10]

so this is available on CrOS now? seems like it wasn't before...

[Seigo Nonaka, 2013/02/04 06:10:45]

Yes. Before UI didn't have OK button because all items were listed and
clickable. After this patch, all items are in "select" tag and user can proceed
with "OK" button.
On 2013/02/01 19:38:10, Dan Beam wrote:

+      // Listen to add language dialog ok button.
+      var addLanguageOkButton = $('add-language-overlay-ok-button');

[Dan Beam, 2013/02/01 19:38:11]

nit: inline `addLanguageOkButton` IMO

[Seigo Nonaka, 2013/02/04 06:10:45]

Done.

+      addLanguageOkButton.addEventListener(
+          'click',
+          this.handleAddLanguageOkButtonClick_.bind(this));

[Dan Beam, 2013/02/01 19:38:11]

nit: 'click', this.handleAddLanguageOkButtonClick_.bind(this));

if it fits

[Seigo Nonaka, 2013/02/04 06:10:45]

Done.

+
+      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
   };
 });