DOMUI: Implement the i18n-options attribute that allows the client to load

select options directly from the C++ handler.

BUG=none
TEST=none

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

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

16 files changed, 57 insertions, 95 deletions

diff --git a/chrome/browser/resources/options/chromeos_language_chewing_options.html b/chrome/browser/resources/options/chromeos_language_chewing_options.html
index e71838b..dd11a85 100644
--- a/chrome/browser/resources/options/chromeos_language_chewing_options.html
+++ b/chrome/browser/resources/options/chromeos_language_chewing_options.html
@@ -97,7 +97,7 @@
          <td class="option-value">
            <select id="chewing-cand-per-page" class="control"
                 pref="settings.language.chewing_cand_per_page"
-                data-values="Chewing_candPerPageValue"></select>
+                i18n-options="Chewing_candPerPageValue"></select>
          </td>
        </tr>
        <tr>
@@ -105,7 +105,7 @@
          <td class="option-value">
            <select id="chewing-keyboard-type" class="control"
                 pref="settings.language.chewing_keyboard_type"
-                data-values="Chewing_KBTypeValue"></select>
+                i18n-options="Chewing_KBTypeValue"></select>
          </td>
        </tr>
        <tr>
@@ -113,7 +113,7 @@
          <td class="option-value">
            <select id="chewing-sel-keys" class="control"
                 pref="settings.language.chewing_sel_keys"
-                data-values="Chewing_selKeysValue"></select>
+                i18n-options="Chewing_selKeysValue"></select>
          </td>
        </tr>
        <tr>
@@ -121,7 +121,7 @@
          <td class="option-value">
            <select id="chewing-sel-key-type" class="control"
                 pref="settings.language.chewing_hsu_sel_key_type"
-                data-values="Chewing_hsuSelKeyTypeValue"></select>
+                i18n-options="Chewing_hsuSelKeyTypeValue"></select>
          </td>
        </tr>
      </table>
diff --git a/chrome/browser/resources/options/chromeos_language_customize_modifier_keys_overlay.html b/chrome/browser/resources/options/chromeos_language_customize_modifier_keys_overlay.html
index 2d20806..af29a3a9 100644
--- a/chrome/browser/resources/options/chromeos_language_customize_modifier_keys_overlay.html
+++ b/chrome/browser/resources/options/chromeos_language_customize_modifier_keys_overlay.html
@@ -6,7 +6,7 @@
          <td class="option-value">
            <select id="xkb-remap-search-key-to" class="control"
                 pref="settings.language.xkb_remap_search_key_to"
-                data-values="xkbRemapSearchKeyToValue"></select>
+                i18n-options="xkbRemapSearchKeyToValue"></select>
          </td>
        </tr>
        <tr>
@@ -15,7 +15,7 @@
          <td class="option-value">
            <select id="xkb-remap-control-key-to" class="control"
                 pref="settings.language.xkb_remap_control_key_to"
-                data-values="xkbRemapControlKeyToValue"></select>
+                i18n-options="xkbRemapControlKeyToValue"></select>
          </td>
        </tr>
        <tr>
@@ -23,7 +23,7 @@
          <td class="option-value">
            <select id="xkb-remap-alt-key-to" class="control"
                 pref="settings.language.xkb_remap_alt_key_to"
-                data-values="xkbRemapAltKeyToValue"></select>
+                i18n-options="xkbRemapAltKeyToValue"></select>
          </td>
        </tr>
     </table>
diff --git a/chrome/browser/resources/options/chromeos_language_hangul_options.html b/chrome/browser/resources/options/chromeos_language_hangul_options.html
index 140e40f..7746a7b 100644
--- a/chrome/browser/resources/options/chromeos_language_hangul_options.html
+++ b/chrome/browser/resources/options/chromeos_language_hangul_options.html
@@ -8,7 +8,7 @@
          <td class="option-value">
            <select id="keyboard-layout-select" class="control"
                 pref="settings.language.hangul_keyboard"
-                data-values="HangulkeyboardLayoutList"></select>
+                i18n-options="HangulkeyboardLayoutList"></select>
          </td>
        </tr>
        </table>
diff --git a/chrome/browser/resources/options/chromeos_language_mozc_options.html b/chrome/browser/resources/options/chromeos_language_mozc_options.html
index 77a6898..0b40fc5 100644
--- a/chrome/browser/resources/options/chromeos_language_mozc_options.html
+++ b/chrome/browser/resources/options/chromeos_language_mozc_options.html
@@ -87,31 +87,31 @@
         <td class="option-value">
           <select id="mozc-preedit-method" class="control"
               pref="settings.language.mozc_preedit_method"
-              data-values="mozc_preedit_methodValue"></select>
+              i18n-options="mozc_preedit_methodValue"></select>
          </td>
        </tr>
        <tr>
          <td class="option-name" i18n-content="mozc_session_keymap"></td>
          <td class="option-value">
            <select id="mozc-session-keymap" class="control"
-                pref="settings.language.mozc_session_keymap"
-                data-values="mozc_session_keymapValue"></select>
+               pref="settings.language.mozc_session_keymap"
+               i18n-options="mozc_session_keymapValue"></select>
          </td>
        </tr>
        <tr>
          <td class="option-name" i18n-content="mozc_punctuation_method"></td>
          <td class="option-value">
            <select id="mozc-punctuation-method" class="control"
-                pref="settings.language.mozc_punctuation_method"
-                data-values="mozc_punctuation_methodValue"></select>
+               pref="settings.language.mozc_punctuation_method"
+               i18n-options="mozc_punctuation_methodValue"></select>
          </td>
        </tr>
        <tr>
          <td class="option-name" i18n-content="mozc_symbol_method"></td>
          <td class="option-value">
            <select id="mozc-symbol-method" class="control"
-                pref="settings.language.mozc_symbol_method"
-                data-values="mozc_symbol_methodValue"></select>
+               pref="settings.language.mozc_symbol_method"
+               i18n-options="mozc_symbol_methodValue"></select>
          </td>
        </tr>
        <tr>
@@ -119,8 +119,8 @@
          </td>
          <td class="option-value">
            <select id="mozc-space-character-form" class="control"
-                pref="settings.language.mozc_space_character_form"
-                data-values="mozc_space_character_formValue"></select>
+               pref="settings.language.mozc_space_character_form"
+               i18n-options="mozc_space_character_formValue"></select>
          </td>
        </tr>
        <tr>
@@ -128,8 +128,8 @@
          </td>
          <td class="option-value">
            <select id="mozc-history-learning-level" class="control"
-                pref="settings.language.mozc_history_learning_level"
-                data-values="mozc_history_learning_levelValue"></select>
+               pref="settings.language.mozc_history_learning_level"
+               i18n-options="mozc_history_learning_levelValue"></select>
          </td>
        </tr>
        <tr>
@@ -137,8 +137,8 @@
          </td>
          <td class="option-value">
            <select id="mozc-shift-key-mode-switch" class="control"
-                pref="settings.language.mozc_shift_key_mode_switch"
-                data-values="mozc_shift_key_mode_switchValue"></select>
+               pref="settings.language.mozc_shift_key_mode_switch"
+               i18n-options="mozc_shift_key_mode_switchValue"></select>
          </td>
        </tr>
        <tr>
@@ -146,8 +146,8 @@
          </td>
          <td class="option-value">
            <select id="mozc-numpad-character-form" class="control"
-                pref="settings.language.mozc_numpad_character_form"
-                data-values="mozc_numpad_character_formValue"></select>
+               pref="settings.language.mozc_numpad_character_form"
+               i18n-options="mozc_numpad_character_formValue"></select>
          </td>
        </tr>
        <tr>
@@ -155,8 +155,8 @@
          </td>
          <td class="option-value">
            <select id="mozc-suggestions-size" class="control"
-                pref="settings.language.mozc_suggestions_size"
-                data-values="mozc_suggestions_sizeValue"></select>
+               pref="settings.language.mozc_suggestions_size"
+               i18n-options="mozc_suggestions_sizeValue"></select>
          </td>
        </tr>
      </table>
diff --git a/chrome/browser/resources/options/chromeos_language_pinyin_options.html b/chrome/browser/resources/options/chromeos_language_pinyin_options.html
index e2cd757..8b0e68c 100644
--- a/chrome/browser/resources/options/chromeos_language_pinyin_options.html
+++ b/chrome/browser/resources/options/chromeos_language_pinyin_options.html
@@ -118,7 +118,7 @@
         <td class="option-value">
           <select id="pinyin-double-pinyin-schema" class="control"
               pref="settings.language.pinyin_double_pinyin_schema"
-              data-values="PinyinDoublePinyinSchemaValue"></select>
+              i18n-options="PinyinDoublePinyinSchemaValue"></select>
         </td>
       </tr>
     </table>
diff --git a/chrome/browser/resources/options/chromeos_system_options.html b/chrome/browser/resources/options/chromeos_system_options.html
index 0035341..e43b40a 100644
--- a/chrome/browser/resources/options/chromeos_system_options.html
+++ b/chrome/browser/resources/options/chromeos_system_options.html
@@ -7,6 +7,7 @@
         <td class="option-name" i18n-content="timezone"></td>
         <td class="option-value">
         <select id="timezone-select" class="control"
+             i18n-options="timezoneList"
              pref="cros.system.timezone"></select>
         </td>
       </tr>
diff --git a/chrome/browser/resources/options/chromeos_system_options.js b/chrome/browser/resources/options/chromeos_system_options.js
index fa69ad4..52ffd70 100644
--- a/chrome/browser/resources/options/chromeos_system_options.js
+++ b/chrome/browser/resources/options/chromeos_system_options.js
@@ -31,8 +31,6 @@ cr.define('options', function() {
       OptionsPage.prototype.initializePage.call(this);
       var timezone = $('timezone-select');
       if (timezone) {
-        timezone.initializeValues(templateData.timezoneList);
-
         // Disable the timezone setting for non-owners, as this is a
         // system wide setting.
         if (!AccountsOptions.currentUserIsOwner())
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.html b/chrome/browser/resources/options/clear_browser_data_overlay.html
index 7bf216a..66d3739 100644
--- a/chrome/browser/resources/options/clear_browser_data_overlay.html
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.html
@@ -42,6 +42,7 @@
   <div>
     <label for="" i18n-content="clearBrowsingDataTimeLabel"></label>
     <select id="clearBrowsingDataTimePeriod"
+        i18n-options="clearBrowsingDataTimeList"
         pref="browser.clear_data.time_period"></select>
   </div>
   <div class="action-area">
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.js b/chrome/browser/resources/options/clear_browser_data_overlay.js
index 501e462..6b1cf05 100644
--- a/chrome/browser/resources/options/clear_browser_data_overlay.js
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.js
@@ -32,10 +32,6 @@ cr.define('options', function() {
       // Call base class implementation to starts preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
-      // Setup option values for the time period select control.
-      $('clearBrowsingDataTimePeriod').initializeValues(
-          templateData.clearBrowsingDataTimeList);
-
       var f = this.updateCommitButtonState_.bind(this);
       var types = ['browser.clear_data.browsing_history',
                    'browser.clear_data.download_history',
diff --git a/chrome/browser/resources/options/font_settings.html b/chrome/browser/resources/options/font_settings.html
index 24b080f2..97ba0f7 100644
--- a/chrome/browser/resources/options/font_settings.html
+++ b/chrome/browser/resources/options/font_settings.html
@@ -1,4 +1,4 @@
-<div class="page hidden" id="fontSettings">
+<div id="font-settings" class="page hidden">
   <h1 i18n-content="fontSettingsTitle"></h1>
   <section>
     <h3 i18n-content="fontSettingsFontTitle"></h3>
@@ -7,12 +7,14 @@
         <label style="display:inline;">
           <span i18n-content="fontSettingsSerifLabel"></span>
           <select id="fontSettingsSerifSelector"
+              i18n-options="fontSettingsFontList"
               pref="webkit.webprefs.serif_font_family"
               metric="Options_ChangeSerifFont"></select>
         </label>
         <label style="display:inline;">
           <span i18n-content="fontSettingsSizeLabel"></span>
           <select id="fontSettingsSerifSizeSelector"
+              i18n-options="fontSettingsFontSizeList"
               pref="webkit.webprefs.default_font_size"
               metric="Options_ChangeSerifFontSize"></select>
         </label>
@@ -22,12 +24,14 @@
         <label style="display:inline;">
           <span i18n-content="fontSettingsSansSerifLabel"></span>
           <select id="fontSettingsSansSerifSelector"
+              i18n-options="fontSettingsFontList"
               pref="webkit.webprefs.sansserif_font_family"
               metric="Options_ChangeSansSerifFont"></select>
         </label>
         <label style="display:inline;">
           <span i18n-content="fontSettingsSizeLabel"></span>
           <select id="fontSettingsSansSerifSizeSelector"
+              18n-options="fontSettingsFontSizeList"
               pref="webkit.webprefs.default_font_size"
               metric="Options_ChangeSansSerifFontSize"></select>
         </label>
@@ -37,12 +41,14 @@
         <label style="display:inline;">
           <span i18n-content="fontSettingsFixedWidthLabel"></span>
           <select id="fontSettingsFixedWidthSelector"
+              i18n-options="fontSettingsFontList"
               pref="webkit.webprefs.fixed_font_family"
               metric="Options_ChangeFixedFont"></select>
         </label>
         <label style="display:inline;">
           <span i18n-content="fontSettingsSizeLabel"></span>
           <select id="fontSettingsFixedWidthSizeSelector"
+              i18n-options="fontSettingsFontSizeList"
               pref="webkit.webprefs.default_fixed_font_size"
               metric="Options_ChangeFixedFontSize"></select>
         </label>
@@ -53,13 +59,16 @@
   <section>
     <h3 i18n-content="fontSettingsMinimumSizeTitle"></h3>
     <div>
-      <select id="fontSettingsMinimumSizeSelector"></select>
+      <select id="fontSettingsMinimumSizeSelector"
+          i18n-options="fontSettingsMinimumFontSizeList"></select>
     </div>
   </section>
   <section>
     <h3 i18n-content="fontSettingsEncodingTitle"></h3>
     <div>
-      <select id="fontSettingsEncodingSelector" pref="intl.charset_default"
+      <select id="fontSettingsEncodingSelector"
+          i18n-options="fontSettingsEncodingList"
+          pref="intl.charset_default"
           metric="Options_ChangeFontEncoding"></select>
     </div>
   </section>
diff --git a/chrome/browser/resources/options/font_settings.js b/chrome/browser/resources/options/font_settings.js
index 50445ce..e828635 100644
--- a/chrome/browser/resources/options/font_settings.js
+++ b/chrome/browser/resources/options/font_settings.js
@@ -12,15 +12,15 @@ cr.define('options', function() {
    * @class
    */
   function FontSettings() {
-    OptionsPage.call(this, 'fontSettings',
+    OptionsPage.call(this,
+                     'fontSettings',
                      templateData.fontSettingsTitle,
-                     'fontSettings');
+                     'font-settings');
   }
 
   cr.addSingletonGetter(FontSettings);
 
   FontSettings.prototype = {
-    // Inherit FontSettings from OptionsPage.
     __proto__: OptionsPage.prototype,
 
     /**
@@ -29,24 +29,6 @@ cr.define('options', function() {
     initializePage: function() {
       // Call base class implementation to starts preference initialization.
       OptionsPage.prototype.initializePage.call(this);
-
-      // Initialize values for selector controls.
-      $('fontSettingsSerifSelector').initializeValues(
-          templateData.fontSettingsFontList)
-      $('fontSettingsSerifSizeSelector').initializeValues(
-          templateData.fontSettingsFontSizeList)
-      $('fontSettingsSansSerifSelector').initializeValues(
-          templateData.fontSettingsFontList)
-      $('fontSettingsSansSerifSizeSelector').initializeValues(
-          templateData.fontSettingsFontSizeList)
-      $('fontSettingsFixedWidthSelector').initializeValues(
-          templateData.fontSettingsFontList)
-      $('fontSettingsFixedWidthSizeSelector').initializeValues(
-          templateData.fontSettingsFontSizeList)
-      $('fontSettingsMinimumSizeSelector').initializeValues(
-          templateData.fontSettingsMinimumFontSizeList)
-      $('fontSettingsEncodingSelector').initializeValues(
-          templateData.fontSettingsEncodingList)
     }
   };
 
diff --git a/chrome/browser/resources/options/font_settings_ui.js b/chrome/browser/resources/options/font_settings_ui.js
index d53557a..4af8141 100644
--- a/chrome/browser/resources/options/font_settings_ui.js
+++ b/chrome/browser/resources/options/font_settings_ui.js
@@ -58,20 +58,6 @@ cr.define('options', function() {
             }
           });
     },
-
-    /**
-     * Sets up options in select element.
-     * @param {Array} options List of option and their display text.
-     * Each element in the array is an array of length 2 which contains options
-     * value in the first element and display text in the second element.
-     *
-     * TODO(zelidrag): move this to that i18n template classes.
-     */
-    initializeValues: function(options) {
-      options.forEach(function(values) {
-        this.appendChild(new Option(values[1], values[0]));
-      }, this);
-    }
   };
 
   // Export
diff --git a/chrome/browser/resources/options/personal_options.html b/chrome/browser/resources/options/personal_options.html
index 3fba146..a028945 100644
--- a/chrome/browser/resources/options/personal_options.html
+++ b/chrome/browser/resources/options/personal_options.html
@@ -26,7 +26,8 @@
   <section id="sync-section">
     <h3 i18n-content="syncSection"></h3>
     <div>
-      <select id="sync-select" pref="sync.keep_everything_synced"></select>
+      <select id="sync-select" pref="sync.keep_everything_synced"
+          i18n-options="syncSelectList"></select>
       <table id="sync-table">
         <tr>
           <td class="option-name">
diff --git a/chrome/browser/resources/options/personal_options.js b/chrome/browser/resources/options/personal_options.js
index 3600f07..7a92a94 100644
--- a/chrome/browser/resources/options/personal_options.js
+++ b/chrome/browser/resources/options/personal_options.js
@@ -59,7 +59,6 @@ cr.define('options', function() {
       };
 
       // Initialize sync select control.
-      $('sync-select').initializeValues(templateData.syncSelectList);
       $('sync-select').onchange = function(event) {
         self.updateSyncSelection_();
       }
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 6372776..0734b6b 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -293,11 +293,6 @@ cr.define('options', function() {
     decorate: function() {
       var self = this;
 
-      var values = self.getAttribute('data-values');
-      if (values) {
-        self.initializeValues(templateData[values]);
-      }
-
       // Listen to pref changes.
       Preferences.getInstance().addEventListener(this.pref,
           function(event) {
@@ -353,24 +348,6 @@ cr.define('options', function() {
             }
           });
     },
-
-    /**
-     * Sets up options in select element.
-     * @param {Array} options List of option and their display text.
-     *     Each element in the array is an array of length 2 which contains
-     *     options value in the first element and display text in the second
-     *     element. May be undefined.
-     *
-     * TODO(zelidrag): move this to that i18n template classes.
-     */
-    initializeValues: function(options) {
-      options.forEach(function (values) {
-        if (this.dataType == undefined)
-          this.dataType = typeof values[0];
-
-        this.appendChild(new Option(values[1], values[0]));
-      }, this);
-    }
   };
 
   /**
diff --git a/chrome/browser/resources/shared/js/i18n_template.js b/chrome/browser/resources/shared/js/i18n_template.js
index 2645bdb..c646c17 100644
--- a/chrome/browser/resources/shared/js/i18n_template.js
+++ b/chrome/browser/resources/shared/js/i18n_template.js
@@ -39,6 +39,18 @@ var i18nTemplate = (function() {
     },
 
     /**
+     * This handler adds options to a select element.
+     */
+    'i18n-options': function(element, attributeValue, obj) {
+      var options = obj[attributeValue];
+      options.forEach(function(values) {
+        var option = typeof values == 'string' ? new Option(values) :
+            new Option(values[1], values[0]);
+        element.appendChild(option);
+      });
+    },
+
+    /**
      * This is used to set HTML attributes and DOM properties,. The syntax is:
      *   attributename:key;
      *   .domProperty:key;