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

1 files changed, 60 insertions, 8 deletions

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