web-ui settings: Load fonts list asyncronously and on-demand when the fonts dialog is opened.

BUG=56846
TEST=Verify that the font lists load properly in the font settings window.
Review URL: http://codereview.chromium.org/6575015

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

2 files changed, 69 insertions, 20 deletions

diff --git a/chrome/browser/resources/options/font_settings.html b/chrome/browser/resources/options/font_settings.html
index 55b88cb..398250a 100644
--- a/chrome/browser/resources/options/font_settings.html
+++ b/chrome/browser/resources/options/font_settings.html
@@ -5,9 +5,8 @@
     <div class="font-input-div">
       <div>
         <select id="serif-font-family" class="font-input" dataType="string"
-            i18n-options="fontSettingsFontList"
             pref="webkit.webprefs.serif_font_family"
-            metric="Options_ChangeSerifFont"></select>
+            metric="Options_ChangeSerifFont" disabled></select>
       </div>
       <div>
         <input id="serif-font-size" type="range" min="0" max="24"
@@ -15,7 +14,7 @@
         <div>
           <span i18n-content="fontSettingsSizeTiny"></span>
           <span i18n-content="fontSettingsSizeHuge" class="font-settings-huge">
-              </span>
+          </span>
         </div>
       </div>
     </div>
@@ -25,10 +24,9 @@
     <h3 i18n-content="fontSettingsFixedWidth"></h3>
     <div class="font-input-div">
       <div>
-        <select class="font-input" i18n-options="fontSettingsFontList"
+        <select id="fixed-font-family" class="font-input" dataType="string"
             pref="webkit.webprefs.fixed_font_family"
-            dataType="string"
-            metric="Options_ChangeFixedFont"></select>
+            metric="Options_ChangeFixedFont" disabled></select>
       </div>
       <div>
         <input id="fixed-font-size" type="range" min="0" max="24"
@@ -36,7 +34,7 @@
         <div>
           <span i18n-content="fontSettingsSizeTiny"></span>
           <span i18n-content="fontSettingsSizeHuge" class="font-settings-huge">
-              </span>
+          </span>
         </div>
       </div>
     </div>
@@ -51,7 +49,7 @@
         <div>
           <span i18n-content="fontSettingsSizeTiny"></span>
           <span i18n-content="fontSettingsSizeHuge" class="font-settings-huge">
-              </span>
+          </span>
         </div>
       </div>
     </div>
@@ -61,10 +59,9 @@
     <h3 i18n-content="fontSettingsEncoding"></h3>
     <div class="font-input-div">
       <div>
-        <select class="font-input" i18n-options="fontSettingsEncodingList"
-            pref="intl.charset_default"
-            dataType="string"
-            metric="Options_ChangeFontEncoding"></select>
+        <select id="font-encoding" class="font-input" dataType="string"
+            pref="intl.charset_default" metric="Options_ChangeFontEncoding"
+            disabled></select>
       </div>
     </div>
   </section>
diff --git a/chrome/browser/resources/options/font_settings.js b/chrome/browser/resources/options/font_settings.js
index f2e4ef5..b295324 100644
--- a/chrome/browser/resources/options/font_settings.js
+++ b/chrome/browser/resources/options/font_settings.js
@@ -46,6 +46,11 @@ cr.define('options', function() {
       minimumFontRange.notifyPrefChange =
           this.minimumFontSizeChanged_.bind(this);
 
+      var placeholder = localStrings.getString('fontSettingsPlaceholder');
+      $('serif-font-family').appendChild(new Option(placeholder));
+      $('fixed-font-family').appendChild(new Option(placeholder));
+      $('font-encoding').appendChild(new Option(placeholder));
+
       // Add an additional listener to the font select menu for the
       // 'sansserif_font_family' preference.
       $('serif-font-family').addEventListener('change',
@@ -56,6 +61,20 @@ cr.define('options', function() {
     },
 
     /**
+     * Called by the options page when this page has been shown.
+     */
+    didShowPage: function() {
+      // The fonts list may be large so we only load it when this page is
+      // loaded for the first time.  This makes opening the options window
+      // faster and consume less memory if the user never opens the fonts
+      // dialog.
+      if (!this.hasShown) {
+        chrome.send('fetchFontsData');
+        this.hasShown = true;
+      }
+    },
+
+    /**
      * Called as the user changes a non-continuous slider.  This allows for
      * reflecting the change in the UI before the preference has been changed.
      * @param {Element} el The slider input element.
@@ -63,8 +82,8 @@ cr.define('options', function() {
      * @private
      */
     rangeChanged_: function(el, value) {
-      this.setupFontSample_(
-          el.fontSampleEl, value, el.fontSampleEl.style.fontFamily);
+      this.setupFontSample_(el.fontSampleEl, value,
+                            el.fontSampleEl.style.fontFamily);
     },
 
     /**
@@ -93,22 +112,55 @@ cr.define('options', function() {
       if (font)
         el.style.fontFamily = font;
     },
+
+    /**
+     * Populates a select list and selects the specified item.
+     * @param {Element} element The select element to populate.
+     * @param {Array} items The array of items from which to populate.
+     * @param {string} selectedValue The selected item.
+     * @private
+     */
+    populateSelect_: function(element, items, selectedValue) {
+      // Remove any existing content.
+      element.textContent = '';
+
+      // Insert new child nodes into select element.
+      var value, text, selected, option;
+      for (var i = 0; i < items.length; i++) {
+        value = items[i][0];
+        text = items[i][1];
+        selected = value == selectedValue;
+        element.appendChild(new Option(text, value, false, selected));
+      }
+
+      // Enable if not a managed pref.
+      if (!element.managed)
+        element.disabled = false;
+    }
   };
 
   // Chrome callbacks
+  FontSettings.setFontsData = function(fonts, encodings, selectedValues) {
+    FontSettings.getInstance().populateSelect_($('serif-font-family'), fonts,
+                                               selectedValues[0]);
+    FontSettings.getInstance().populateSelect_($('fixed-font-family'), fonts,
+                                               selectedValues[1]);
+    FontSettings.getInstance().populateSelect_($('font-encoding'), encodings,
+                                               selectedValues[2]);
+  };
+
   FontSettings.setupSerifFontSample = function(font, size) {
-    FontSettings.getInstance().setupFontSample_(
-        $('serif-font-sample'), size, font);
+    FontSettings.getInstance().setupFontSample_($('serif-font-sample'), size,
+                                                font);
   };
 
   FontSettings.setupFixedFontSample = function(font, size) {
-    FontSettings.getInstance().setupFontSample_(
-        $('fixed-font-sample'), size, font);
+    FontSettings.getInstance().setupFontSample_($('fixed-font-sample'), size,
+                                                font);
   };
 
   FontSettings.setupMinimumFontSample = function(size) {
-    FontSettings.getInstance().setupFontSample_(
-        $('minimum-font-sample'), size);
+    FontSettings.getInstance().setupFontSample_($('minimum-font-sample'), size);
   };
 
   // Export