Display the language name and the input method list dynamically.

Before this change, the language name and the input method list were
hard-coded in the HTML file. With this change, these values will be
displayed based on the underlying data from C++ world.

TEST=manually
BUG=chromium-os:4573

Review URL: http://codereview.chromium.org/3008016

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

5 files changed, 119 insertions, 17 deletions

diff --git a/chrome/browser/chromeos/dom_ui/language_options_handler.cc b/chrome/browser/chromeos/dom_ui/language_options_handler.cc
index 0a94285..cf3f971 100644
--- a/chrome/browser/chromeos/dom_ui/language_options_handler.cc
+++ b/chrome/browser/chromeos/dom_ui/language_options_handler.cc
@@ -8,6 +8,8 @@
 #include "app/resource_bundle.h"
 #include "base/values.h"
 #include "base/utf_string_conversions.h"
+#include "chrome/browser/chromeos/cros/cros_library.h"
+#include "chrome/browser/chromeos/cros/input_method_library.h"
 #include "chrome/browser/chromeos/input_method/input_method_util.h"
 #include "grit/chromium_strings.h"
 #include "grit/generated_resources.h"
@@ -51,4 +53,31 @@ void LanguageOptionsHandler::GetLocalizedValues(
     localized_strings->SetString(UTF8ToWide(locales[i]),
         chromeos::input_method::GetLanguageDisplayNameFromCode(locales[i]));
   }
+
+  localized_strings->Set(L"inputMethodList", GetInputMethodList());
+}
+
+ListValue* LanguageOptionsHandler::GetInputMethodList() {
+  using chromeos::CrosLibrary;
+
+  ListValue* input_method_list = new ListValue();
+
+  // GetSupportedLanguages() never return NULL.
+  scoped_ptr<chromeos::InputMethodDescriptors> descriptors(
+      CrosLibrary::Get()->GetInputMethodLibrary()->GetSupportedInputMethods());
+  for (size_t i = 0; i < descriptors->size(); ++i) {
+    const chromeos::InputMethodDescriptor& descriptor = descriptors->at(i);
+    const std::string language_code =
+        chromeos::input_method::GetLanguageCodeFromDescriptor(descriptor);
+    const std::string display_name =
+        chromeos::input_method::GetInputMethodDisplayNameFromId(descriptor.id);
+
+    DictionaryValue* dictionary = new DictionaryValue();
+    dictionary->SetString(L"id", UTF8ToWide(descriptor.id));
+    dictionary->SetString(L"displayName", UTF8ToWide(display_name));
+    dictionary->SetString(L"languageCode", UTF8ToWide(language_code));
+    input_method_list->Append(dictionary);
+  }
+
+  return input_method_list;
 }
diff --git a/chrome/browser/chromeos/dom_ui/language_options_handler.h b/chrome/browser/chromeos/dom_ui/language_options_handler.h
index c56e31d..5d8a02d 100644
--- a/chrome/browser/chromeos/dom_ui/language_options_handler.h
+++ b/chrome/browser/chromeos/dom_ui/language_options_handler.h
@@ -9,6 +9,7 @@
 #include "chrome/browser/dom_ui/options_ui.h"
 
 class DictionaryValue;
+class ListValue;
 
 // ChromeOS language options page UI handler.
 class LanguageOptionsHandler : public OptionsPageUIHandler {
@@ -20,6 +21,9 @@ class LanguageOptionsHandler : public OptionsPageUIHandler {
   virtual void GetLocalizedValues(DictionaryValue* localized_strings);
 
  private:
+  // Get the list of input methods.
+  ListValue* GetInputMethodList();
+
   DISALLOW_COPY_AND_ASSIGN(LanguageOptionsHandler);
 };
 
diff --git a/chrome/browser/resources/options/chromeos_language_list.js b/chrome/browser/resources/options/chromeos_language_list.js
index cb4bc50..e78e029 100644
--- a/chrome/browser/resources/options/chromeos_language_list.js
+++ b/chrome/browser/resources/options/chromeos_language_list.js
@@ -27,7 +27,7 @@ cr.define('options.language', function() {
       // HACK(arv): http://crbug.com/40902
       window.addEventListener('resize', cr.bind(this.redraw, this));
 
-      // Listens to pref change.
+      // Listen to pref change.
       Preferences.getInstance().addEventListener(this.pref,
           cr.bind(this.handlePrefChange_, this));
     },
@@ -39,11 +39,11 @@ cr.define('options.language', function() {
 
     /**
      * Handles pref change.
-     * @param {Event} event The change event object.
+     * @param {Event} e The change event object.
      * @private
      */
-    handlePrefChange_: function(event) {
-      this.load_(event.value);
+    handlePrefChange_: function(e) {
+      this.load_(e.value);
     },
 
     /**
@@ -54,6 +54,11 @@ cr.define('options.language', function() {
     load_: function(languageCodesInCsv) {
       var languageCodes = languageCodesInCsv.split(',');
       this.dataModel = new ArrayDataModel(languageCodes);
+      // Select the first item if it's not empty.
+      // TODO(satorux): Switch to a single item selection model that does
+      // not allow no selection, one it's ready: crbug.com/49893
+      if (this.dataModel.length > 0)
+        this.selectionModel.selectedIndex = 0;
     },
 
     /**
diff --git a/chrome/browser/resources/options/chromeos_language_options.html b/chrome/browser/resources/options/chromeos_language_options.html
index a69f004..887859e 100644
--- a/chrome/browser/resources/options/chromeos_language_options.html
+++ b/chrome/browser/resources/options/chromeos_language_options.html
@@ -7,24 +7,20 @@
       <h3 i18n-content="languages"></h3>
       <list id="language-options-list"></list>
       <div class="language-options-lower-left">
-        <button id="add-button" i18n-content="add_button"></button>
-        <button id="remove-button" i18n-content="remove_button"></button>
+        <button id="language-options-add-button"
+                i18n-content="add_button"></button>
+        <button id="language-options-remove-button"
+                i18n-content="remove_button"></button>
       </div>
     </div>
     <div class="language-options-right">
-      <!-- TODO: The contents should be dynamically changed. -->
-      <h3>English (United States)</h3>
+      <h3 id="language-options-language-name"></h3>
       <div class="language-options-contents">
-        <button id="ui-language-button"
-                i18n-content="display_in_this_language"></button>
+        <button id="language-options-ui-language-button"></button>
       </div>
       <h3 i18n-content="input_method"></h3>
-      <div class="language-options-contents">
-        <!-- TODO: The contents should be dynamically changed. -->
-        <label><input type="checkbox">US English</label>
-        <label><input type="checkbox">Dvorak</label>
-        <label><input type="checkbox">Dvorak - Left</label>
-        <label><input type="checkbox">Dvorak - Right</label>
+      <div id="language-options-input-method-list"
+           class="language-options-contents">
       </div>
     </div>
   </div>
diff --git a/chrome/browser/resources/options/chromeos_language_options.js b/chrome/browser/resources/options/chromeos_language_options.js
index 99fed77..a746ffe 100644
--- a/chrome/browser/resources/options/chromeos_language_options.js
+++ b/chrome/browser/resources/options/chromeos_language_options.js
@@ -27,22 +27,90 @@ LanguageOptions.prototype = {
   initializePage: function() {
     OptionsPage.prototype.initializePage.call(this);
 
-    options.language.LanguageList.decorate($('language-options-list'));
+    var languageOptionsList = $('language-options-list');
+    options.language.LanguageList.decorate(languageOptionsList);
+
+    languageOptionsList.addEventListener('change',
+        cr.bind(this.handleLanguageOptionsListChange_, this));
 
     this.addEventListener('visibleChange',
                           cr.bind(this.handleVisibleChange_, this));
+
+    this.initializeInputMethodList_();
   },
 
   languageListInitalized_: false,
 
   /**
+   * Initializes the input method list.
+   */
+  initializeInputMethodList_: function() {
+    var inputMethodList = $('language-options-input-method-list');
+    var inputMethodListData = templateData.inputMethodList;
+
+    // Add all input methods, but make all of them invisible here. We'll
+    // change the visibility in handleLanguageOptionsListChange_() based
+    // on the selected language. Note that we only have less than 100
+    // input methods, so creating DOM nodes at once here should be ok.
+    for (var i = 0; i < inputMethodListData.length; i++) {
+      var inputMethod = inputMethodListData[i];
+      var input = document.createElement('input');
+      input.type = 'checkbox';
+      input.inputMethodId = inputMethod.id;
+
+      var label = document.createElement('label');
+      label.appendChild(input);
+      label.appendChild(document.createTextNode(inputMethod.displayName));
+      label.style.display = 'none';
+      label.languageCode = inputMethod.languageCode;
+
+      inputMethodList.appendChild(label);
+    }
+  },
+
+  /**
    * Handler for OptionsPage's visible property change event.
    * @param {Event} e Property change event.
+   * @private
    */
   handleVisibleChange_ : function(e) {
     if (!this.languageListInitalized_ && this.visible) {
       this.languageListInitalized_ = true;
       $('language-options-list').redraw();
     }
+  },
+
+  /**
+   * Handler for languageOptionsList's change event.
+   * @param {Event} e Change event.
+   * @private
+   */
+  handleLanguageOptionsListChange_: function(e) {
+    var languageOptionsList = $('language-options-list');
+    var index = languageOptionsList.selectionModel.selectedIndex;
+    if (index == -1)
+      return;
+
+    var languageCode = languageOptionsList.dataModel.item(index);
+    var languageDisplayName = localStrings.getString(languageCode);
+
+    $('language-options-language-name').textContent = languageDisplayName;
+    // TODO(satorux): The button text should be changed to
+    // 'is_displayed_in_this_language', depending on the current UI
+    // language.
+    $('language-options-ui-language-button').textContent = (
+        localStrings.getString('display_in_this_language'));
+
+    // Change the visibility of the input method list. Input methods that
+    // matches |languageCode| will become visible.
+    var inputMethodList = $('language-options-input-method-list');
+    var labels = inputMethodList.querySelectorAll('label');
+    for (var i = 0; i < labels.length; i++) {
+      if (labels[i].languageCode == languageCode) {
+        labels[i].style.display = 'block';
+      } else {
+        labels[i].style.display = 'none';
+      }
+    }
   }
 };