Use drop-down UI for "add language".

This patch changes "add language" overlay page in chrome://settings/language
from listed links to drop-down menu.

This patch only affects Chrome OS settings page.

BUG=133346
TEST=try bots

Review URL: https://chromiumcodereview.appspot.com/12087105

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@182203 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/options/language_add_language_overlay.html

@@ -2,17 +2,6 @@
   <div class="close-button"></div>
   <!-- TODO(kevers): Fix format of i18n-content labels -->
   <h1 i18n-content="add_language_title"></h1>
-<if expr="pp_ifdef('chromeos')">
-  <div class="content-area">
-    <ul id="add-language-overlay-language-list">
-    </ul>
-  </div>
-  <div class="action-area button-strip">
-    <button id="add-language-overlay-cancel-button" i18n-content="cancel">
-    </button>
-  </div>
-</if>
-<if expr="not pp_ifdef('chromeos')">
   <div class="content-area">
     <span i18n-content="add_language_select_label"></span>
     <select id="add-language-overlay-language-list"></select>
@@ -22,5 +11,4 @@
     </button>
     <button id="add-language-overlay-ok-button" i18n-content="ok"></button>
   </div>
-</if>
 </div>

chrome/browser/resources/options/language_add_language_overlay.js

@@ -44,25 +44,13 @@ cr.define('options', function() {
         var language = languageListData[i];
         var displayText = language.displayName;
         // If the native name is different, add it.
-        if (language.displayName != language.nativeDisplayName) {
+        if (language.displayName != language.nativeDisplayName)
           displayText += ' - ' + language.nativeDisplayName;
-        }
 
-        if (cr.isChromeOS) {
-          var button = document.createElement('button');
-          button.className = 'link-button';
-          button.textContent = displayText;
-          button.languageCode = language.code;
-          var li = document.createElement('li');
-          li.languageCode = language.code;
-          li.appendChild(button);
-          addLanguageList.appendChild(li);
-        } else {
-          var option = document.createElement('option');
-          option.value = language.code;
-          option.textContent = displayText;
-          addLanguageList.appendChild(option);
-        }
+        var option = cr.doc.createElement('option');
+        option.value = language.code;
+        option.textContent = displayText;
+        addLanguageList.appendChild(option);
       }
     },
   };

chrome/browser/resources/options/language_options.css

@@ -127,34 +127,6 @@
   z-index: 10;
 }
 
-/* In ChromeOS we present the language choices as a big page of links. */
-<if expr="pp_ifdef('chromeos')">
-#add-language-overlay-language-list {
-  -webkit-column-count: 2;
-  -webkit-column-gap: 20px;
-}
-
-#add-language-overlay-language-list > li > button.link-button {
-  padding-bottom: 8px;
-  padding-top: 8px;
-}
-
-#add-language-overlay-page {
-  width: 800px;
-}
-
-#add-language-overlay-page button.link-button {
-  padding-left: 0;
-  padding-right: 0;
-  text-align: left;
-}
-
-#add-language-overlay-page ul {
-  margin: 0;
-  padding: 0;
-}
-</if>
-
 /* TODO(kochi): This is temporary copy from new_tab.css */
 /* Notification */
 

chrome/browser/resources/options/language_options.js

@@ -125,11 +125,7 @@ cr.define('options', function() {
       }
 
       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));
@@ -147,13 +143,13 @@ cr.define('options', function() {
         }
         // 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;
@@ -675,34 +671,6 @@ cr.define('options', function() {
       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.
      */
@@ -742,6 +710,21 @@ cr.define('options', function() {
       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();
       }
     },