DOMUI: Implement the new Fonts and Encoding page.

Also removed console spam while I'm here.

BUG=63842
TEST=none

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

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

14 files changed, 282 insertions, 151 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index e8df9bb..d55b71e 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -6505,14 +6505,17 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SUB_DIALOG_FONT_TITLE" desc="Title that appears in the sub-dialogue for Font within Fonts and Encoding tab">
         Font
       </message>
+      <message name="IDS_FONT_LANGUAGE_SETTING_FONT_STANDARD_LABEL" desc="Label of the standard fonts section of the Fonts and Encoding tab">
+        Standard font
+      </message>
       <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_SERIF_LABEL" desc="Dialog label for Serif font selection">
         Serif Font:
       </message>
       <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_SANS_SERIF_LABEL" desc="Dialog label for Sans Serif font selection">
         Sans-Serif Font:
       </message>
-      <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_FIXED_WIDTH_LABEL" desc="Dialog label for Fixed-Width font selection">
-        Fixed-width Font:
+      <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_FIXED_WIDTH_LABEL" desc="Label of the fixed-width fonts section of the Fonts and Encoding tab">
+        Fixed-width font:
       </message>
       <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_BUTTON_LABEL" desc="Button label for font selection">
         Change...
@@ -6551,11 +6554,20 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Size:
       </message>
       <message name="IDS_FONT_LANGUAGE_SETTING_MINIMUM_FONT_SIZE_TITLE" desc="Section title for minimum font size selection">
-        Minimum Font Size
+        Minimum font size
       </message>
       <message name="IDS_FONT_LANGUAGE_SETTING_NO_MINIMUM_FONT_SIZE_LABEL" desc="Label for the 'None' minimum font size selection">
         None
       </message>
+      <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SIZE_TINY" desc="Label for the 'Tiny' side of the font size range selector">
+        Tiny
+      </message>
+      <message name="IDS_FONT_LANGUAGE_SETTING_FONT_SIZE_HUGE" desc="Label for the 'Huge' side of the font size range selector">
+        Huge
+      </message>
+      <message name="IDS_FONT_LANGUAGE_SETTING_LOREM_IPSUM" desc="Sample text of 'Lorem ipsum' used to show the selected font/size">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </message>
 
       <!-- HTTP POST Warning -->
       <message name="IDS_HTTP_POST_WARNING_TITLE" desc="Title for dialog that warns users about a navigation that results in a repost">
diff --git a/chrome/browser/dom_ui/options/font_settings_handler.cc b/chrome/browser/dom_ui/options/font_settings_handler.cc
index 64eef14..85eb24b 100644
--- a/chrome/browser/dom_ui/options/font_settings_handler.cc
+++ b/chrome/browser/dom_ui/options/font_settings_handler.cc
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -12,6 +12,7 @@
 #include "base/string_util.h"
 #include "base/values.h"
 #include "chrome/browser/character_encoding.h"
+#include "chrome/browser/dom_ui/options/dom_options_util.h"
 #include "chrome/browser/dom_ui/options/font_settings_utils.h"
 #include "chrome/browser/prefs/pref_service.h"
 #include "chrome/browser/profiles/profile.h"
@@ -33,32 +34,40 @@ void FontSettingsHandler::GetLocalizedValues(
 
   localized_strings->SetString("fontSettingsTitle",
       l10n_util::GetStringUTF16(IDS_FONT_LANGUAGE_SETTING_FONT_TAB_TITLE));
-  localized_strings->SetString("fontSettingsFontTitle",
+  localized_strings->SetString("fontSettingsStandard",
       l10n_util::GetStringUTF16(
           IDS_FONT_LANGUAGE_SETTING_FONT_SUB_DIALOG_FONT_TITLE));
+  localized_strings->SetString("fontSettingsFixedWidth",
+      dom_options_util::StripColon(
+          l10n_util::GetStringUTF16(
+              IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_FIXED_WIDTH_LABEL)));
+  localized_strings->SetString("fontSettingsMinimumSize",
+      l10n_util::GetStringUTF16(
+          IDS_FONT_LANGUAGE_SETTING_MINIMUM_FONT_SIZE_TITLE));
+  localized_strings->SetString("fontSettingsEncoding",
+      l10n_util::GetStringUTF16(
+          IDS_FONT_LANGUAGE_SETTING_FONT_SUB_DIALOG_ENCODING_TITLE));
   localized_strings->SetString("fontSettingsSerifLabel",
       l10n_util::GetStringUTF16(
           IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_SERIF_LABEL));
   localized_strings->SetString("fontSettingsSansSerifLabel",
       l10n_util::GetStringUTF16(
           IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_SANS_SERIF_LABEL));
-  localized_strings->SetString("fontSettingsFixedWidthLabel",
-      l10n_util::GetStringUTF16(
-          IDS_FONT_LANGUAGE_SETTING_FONT_SELECTOR_FIXED_WIDTH_LABEL));
   localized_strings->SetString("fontSettingsSizeLabel",
       l10n_util::GetStringUTF16(
           IDS_FONT_LANGUAGE_SETTING_FONT_SIZE_SELECTOR_LABEL));
-
-  localized_strings->SetString("fontSettingsMinimumSizeTitle",
+  localized_strings->SetString("fontSettingsSizeTiny",
       l10n_util::GetStringUTF16(
-          IDS_FONT_LANGUAGE_SETTING_MINIMUM_FONT_SIZE_TITLE));
-
-  localized_strings->SetString("fontSettingsEncodingTitle",
+          IDS_FONT_LANGUAGE_SETTING_FONT_SIZE_TINY));
+  localized_strings->SetString("fontSettingsSizeHuge",
       l10n_util::GetStringUTF16(
-          IDS_FONT_LANGUAGE_SETTING_FONT_SUB_DIALOG_ENCODING_TITLE));
+          IDS_FONT_LANGUAGE_SETTING_FONT_SIZE_HUGE));
   localized_strings->SetString("fontSettingsEncodingLabel",
       l10n_util::GetStringUTF16(
           IDS_FONT_LANGUAGE_SETTING_FONT_DEFAULT_ENCODING_SELECTOR_LABEL));
+  localized_strings->SetString("fontSettingsLoremIpsum",
+      l10n_util::GetStringUTF16(
+          IDS_FONT_LANGUAGE_SETTING_LOREM_IPSUM));
 
   // Fonts
   ListValue* font_list = FontSettingsUtilities::GetFontsList();
@@ -117,9 +126,9 @@ void FontSettingsHandler::GetLocalizedValues(
 }
 
 void FontSettingsHandler::Initialize() {
-  SetupSerifFontPreview();
-  SetupSansSerifFontPreview();
-  SetupFixedFontPreview();
+  SetupSerifFontSample();
+  SetupMinimumFontSample();
+  SetupFixedFontSample();
 }
 
 DOMMessageHandler* FontSettingsHandler::Attach(DOMUI* dom_ui) {
@@ -133,11 +142,11 @@ DOMMessageHandler* FontSettingsHandler::Attach(DOMUI* dom_ui) {
 
   // Register for preferences that we need to observe manually.
   serif_font_.Init(prefs::kWebKitSerifFontFamily, pref_service, this);
-  sans_serif_font_.Init(prefs::kWebKitSansSerifFontFamily, pref_service, this);
   fixed_font_.Init(prefs::kWebKitFixedFontFamily, pref_service, this);
   default_font_size_.Init(prefs::kWebKitDefaultFontSize, pref_service, this);
   default_fixed_font_size_.Init(prefs::kWebKitDefaultFixedFontSize,
                                 pref_service, this);
+  minimum_font_size_.Init(prefs::kWebKitMinimumFontSize, pref_service, this);
 
   // Return result from the superclass.
   return handler;
@@ -150,37 +159,35 @@ void FontSettingsHandler::Observe(NotificationType type,
     std::string* pref_name = Details<std::string>(details).ptr();
     if (*pref_name == prefs::kWebKitSerifFontFamily ||
         *pref_name == prefs::kWebKitDefaultFontSize) {
-      SetupSerifFontPreview();
-    } else if (*pref_name == prefs::kWebKitSansSerifFontFamily ||
-               *pref_name == prefs::kWebKitDefaultFontSize) {
-      SetupSansSerifFontPreview();
+      SetupSerifFontSample();
     } else if (*pref_name == prefs::kWebKitFixedFontFamily ||
                *pref_name == prefs::kWebKitDefaultFixedFontSize) {
-      SetupFixedFontPreview();
+      SetupFixedFontSample();
+    } else if (*pref_name == prefs::kWebKitMinimumFontSize) {
+      SetupMinimumFontSample();
     }
   }
 }
 
-void FontSettingsHandler::SetupSerifFontPreview() {
+void FontSettingsHandler::SetupSerifFontSample() {
   DCHECK(dom_ui_);
   StringValue font_value(serif_font_.GetValue());
   FundamentalValue size_value(default_font_size_.GetValue());
   dom_ui_->CallJavascriptFunction(
-      L"FontSettings.setupSerifFontPreview", font_value, size_value);
+      L"FontSettings.setupSerifFontSample", font_value, size_value);
 }
 
-void FontSettingsHandler::SetupSansSerifFontPreview() {
+void FontSettingsHandler::SetupFixedFontSample() {
   DCHECK(dom_ui_);
-  StringValue font_value(sans_serif_font_.GetValue());
-  FundamentalValue size_value(default_font_size_.GetValue());
+  StringValue font_value(fixed_font_.GetValue());
+  FundamentalValue size_value(default_fixed_font_size_.GetValue());
   dom_ui_->CallJavascriptFunction(
-      L"FontSettings.setupSansSerifFontPreview", font_value, size_value);
+      L"FontSettings.setupFixedFontSample", font_value, size_value);
 }
 
-void FontSettingsHandler::SetupFixedFontPreview() {
+void FontSettingsHandler::SetupMinimumFontSample() {
   DCHECK(dom_ui_);
-  StringValue font_value(fixed_font_.GetValue());
-  FundamentalValue size_value(default_fixed_font_size_.GetValue());
+  FundamentalValue size_value(minimum_font_size_.GetValue());
   dom_ui_->CallJavascriptFunction(
-      L"FontSettings.setupFixedFontPreview", font_value, size_value);
+      L"FontSettings.setupMinimumFontSample", size_value);
 }
diff --git a/chrome/browser/dom_ui/options/font_settings_handler.h b/chrome/browser/dom_ui/options/font_settings_handler.h
index c3e72c8..23806db 100644
--- a/chrome/browser/dom_ui/options/font_settings_handler.h
+++ b/chrome/browser/dom_ui/options/font_settings_handler.h
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -28,15 +28,15 @@ class FontSettingsHandler : public OptionsPageUIHandler {
                        const NotificationDetails& details);
 
  private:
-  void SetupSerifFontPreview();
-  void SetupSansSerifFontPreview();
-  void SetupFixedFontPreview();
+  void SetupSerifFontSample();
+  void SetupFixedFontSample();
+  void SetupMinimumFontSample();
 
   StringPrefMember serif_font_;
-  StringPrefMember sans_serif_font_;
   StringPrefMember fixed_font_;
   IntegerPrefMember default_font_size_;
   IntegerPrefMember default_fixed_font_size_;
+  IntegerPrefMember minimum_font_size_;
 
   DISALLOW_COPY_AND_ASSIGN(FontSettingsHandler);
 };
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index 369ffb3..3b41984 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -133,7 +133,7 @@ cr.define('options', function() {
     /**
      * Updates the search engine popup with the given entries.
      * @param {Array} engines List of available search engines.
-     * @param {Integer} defaultValue The value of the current default engine.
+     * @param {number} defaultValue The value of the current default engine.
      */
     updateSearchEngines_: function(engines, defaultValue) {
       this.clearSearchEngines_();
diff --git a/chrome/browser/resources/options/certificate_manager.js b/chrome/browser/resources/options/certificate_manager.js
index 02090530..a225d43 100644
--- a/chrome/browser/resources/options/certificate_manager.js
+++ b/chrome/browser/resources/options/certificate_manager.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -40,8 +40,6 @@ cr.define('options', function() {
           var data = tree.selectedItem.data;
           CertificateEditCaTrustOverlay.show(data.id, data.name);
         }
-      } else {
-        console.log('unknown edit button for: ' + id);
       }
     }
 
@@ -74,8 +72,6 @@ cr.define('options', function() {
         this.importButton.onclick = function(e) {
           chrome.send('importCaCertificate', []);
         }
-      } else {
-        console.log('unknown import button for: ' + id);
       }
     }
 
diff --git a/chrome/browser/resources/options/chromeos_proxy_rules_list.js b/chrome/browser/resources/options/chromeos_proxy_rules_list.js
index 063b5e2..1c1d885 100644
--- a/chrome/browser/resources/options/chromeos_proxy_rules_list.js
+++ b/chrome/browser/resources/options/chromeos_proxy_rules_list.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -124,7 +124,6 @@ cr.define('options.proxyexceptions', function() {
     /** @inheritDoc */
     decorate: function() {
       ListItem.prototype.decorate.call(this);
-      console.log('in exceptions decorate');
       this.className = 'exception-list-item';
 
       var labelException = this.ownerDocument.createElement('span');
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.js b/chrome/browser/resources/options/content_settings_exceptions_area.js
index da67d01..5a0e788 100644
--- a/chrome/browser/resources/options/content_settings_exceptions_area.js
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -513,10 +513,8 @@ cr.define('options.contentSettings', function() {
     /** @inheritDoc */
     deleteItemAtIndex: function(index) {
       var listItem = this.getListItemByIndex(index);
-      if (listItem.undeletable) {
-        console.log('Tried to delete an undeletable row.');
+      if (listItem.undeletable)
         return;
-      }
 
       var dataItem = listItem.dataItem;
       var args = [listItem.contentType];
diff --git a/chrome/browser/resources/options/font_settings.css b/chrome/browser/resources/options/font_settings.css
new file mode 100644
index 0000000..4e1a81f
--- /dev/null
+++ b/chrome/browser/resources/options/font_settings.css
@@ -0,0 +1,19 @@
+#font-settings > section > .font-input-div {
+  -webkit-margin-end: 5em;
+}
+
+.font-input-div > div > select {
+  margin-bottom: 10px;
+}
+
+.font-input-div > div > .font-input {
+  width: 12em;
+}
+
+#font-settings > section > .font-sample-div {
+  position: absolute;
+}
+
+.font-settings-huge {
+  float: right;
+}
diff --git a/chrome/browser/resources/options/font_settings.html b/chrome/browser/resources/options/font_settings.html
index 97ba0f7..0967b1e 100644
--- a/chrome/browser/resources/options/font_settings.html
+++ b/chrome/browser/resources/options/font_settings.html
@@ -1,75 +1,68 @@
 <div id="font-settings" class="page hidden">
   <h1 i18n-content="fontSettingsTitle"></h1>
   <section>
-    <h3 i18n-content="fontSettingsFontTitle"></h3>
-    <div>
+    <h3 i18n-content="fontSettingsStandard"></h3>
+    <div class="font-input-div">
       <div>
-        <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>
-        <div id="fontSettingsSerifPreview"></div>
+        <select class="font-input" i18n-options="fontSettingsFontList"
+            pref="webkit.webprefs.serif_font_family"
+            metric="Options_ChangeSerifFont"></select>
       </div>
       <div>
-        <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>
-        <div id="fontSettingsSansSerifPreview"></div>
+        <input id="serif-font-size" type="range" min="0" max="24"
+            pref="webkit.webprefs.default_font_size" class="font-input">
+        <div>
+          <span i18n-content="fontSettingsSizeTiny"></span>
+          <span i18n-content="fontSettingsSizeHuge" class="font-settings-huge">
+              </span>
+        </div>
+      </div>
+    </div>
+    <div id="serif-font-sample" class="font-sample-div"></div>
+  </section>
+  <section>
+    <h3 i18n-content="fontSettingsFixedWidth"></h3>
+    <div class="font-input-div">
+      <div>
+        <select class="font-input" i18n-options="fontSettingsFontList"
+            pref="webkit.webprefs.fixed_font_family"
+            metric="Options_ChangeFixedFont"></select>
       </div>
       <div>
-        <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>
-        <div id="fontSettingsFixedWidthPreview"></div>
+        <input id="fixed-font-size" type="range" min="0" max="24"
+            pref="webkit.webprefs.default_fixed_font_size" class="font-input">
+        <div>
+          <span i18n-content="fontSettingsSizeTiny"></span>
+          <span i18n-content="fontSettingsSizeHuge" class="font-settings-huge">
+              </span>
+        </div>
       </div>
     </div>
+    <div id="fixed-font-sample" class="font-sample-div"></div>
   </section>
   <section>
-    <h3 i18n-content="fontSettingsMinimumSizeTitle"></h3>
-    <div>
-      <select id="fontSettingsMinimumSizeSelector"
-          i18n-options="fontSettingsMinimumFontSizeList"></select>
+    <h3 i18n-content="fontSettingsMinimumSize"></h3>
+    <div class="font-input-div">
+      <div>
+        <input id="minimum-font-size" type="range" min="0" max="12"
+            pref="webkit.webprefs.minimum_font_size" class="font-input">
+        <div>
+          <span i18n-content="fontSettingsSizeTiny"></span>
+          <span i18n-content="fontSettingsSizeHuge" class="font-settings-huge">
+              </span>
+        </div>
+      </div>
     </div>
+    <div id="minimum-font-sample" class="font-sample-div"></div>
   </section>
   <section>
-    <h3 i18n-content="fontSettingsEncodingTitle"></h3>
-    <div>
-      <select id="fontSettingsEncodingSelector"
-          i18n-options="fontSettingsEncodingList"
-          pref="intl.charset_default"
-          metric="Options_ChangeFontEncoding"></select>
+    <h3 i18n-content="fontSettingsEncoding"></h3>
+    <div class="font-input-div">
+      <div>
+        <select class="font-input" i18n-options="fontSettingsEncodingList"
+            pref="intl.charset_default" metric="Options_ChangeFontEncoding">
+        </select>
+      </div>
     </div>
   </section>
 </div>
diff --git a/chrome/browser/resources/options/font_settings.js b/chrome/browser/resources/options/font_settings.js
index e828635..99bde5a 100644
--- a/chrome/browser/resources/options/font_settings.js
+++ b/chrome/browser/resources/options/font_settings.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -8,7 +8,7 @@ cr.define('options', function() {
 
   /**
    * FontSettings class
-   * Encapsulated handling of the 'Font Settings' page.
+   * Encapsulated handling of the 'Fonts and Encoding' page.
    * @class
    */
   function FontSettings() {
@@ -27,34 +27,67 @@ cr.define('options', function() {
      * Initialize the page.
      */
     initializePage: function() {
-      // Call base class implementation to starts preference initialization.
       OptionsPage.prototype.initializePage.call(this);
-    }
-  };
 
-  FontSettings.setupFontPreview = function(id, font, size) {
-    $(id).textContent = font + " " + size;
-    $(id).style.fontFamily = font;
-    $(id).style.fontSize = size + "pt";
-  }
+      var serifFontRange = $('serif-font-size');
+      serifFontRange.valueMap = $('fixed-font-size').valueMap = [9, 10, 11, 12,
+          13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 40, 44,
+          48, 56, 64, 72];
+      serifFontRange.continuous = false;
+      serifFontRange.fontSampleEl = $('serif-font-sample');
+      serifFontRange.notifyChange = this.rangeChanged_.bind(this);
+
+      var minimumFontRange = $('minimum-font-size');
+      minimumFontRange.valueMap = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20,
+          22, 24];
+      minimumFontRange.continuous = false;
+      minimumFontRange.fontSampleEl = $('minimum-font-sample');
+      minimumFontRange.notifyChange = this.rangeChanged_.bind(this);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    rangeChanged_: function(el, value) {
+      this.setupFontSample_(
+          el.fontSampleEl, value, el.fontSampleEl.style.fontFamily);
+    },
+
+    /**
+     * Sets the text, font size and font family of the sample text.
+     * @param {Element} el The div containing the sample text.
+     * @param {number} size The font size of the sample text.
+     * @param {string} font The font family of the sample text.
+     * @private
+     */
+    setupFontSample_: function(el, size, font) {
+      el.textContent =
+          size + "pt: " + localStrings.getString('fontSettingsLoremIpsum');
+      el.style.fontSize = size + "pt";
+      if (font)
+        el.style.fontFamily = font;
+    },
+  };
 
   // Chrome callbacks
-  FontSettings.setupSerifFontPreview = function(text, size) {
-    this.setupFontPreview('fontSettingsSerifPreview', text, size);
-  }
+  FontSettings.setupSerifFontSample = function(font, size) {
+    FontSettings.getInstance().setupFontSample_(
+        $('serif-font-sample'), size, font);
+  };
 
-  FontSettings.setupSansSerifFontPreview = function(text, size) {
-    this.setupFontPreview('fontSettingsSansSerifPreview', text, size);
-  }
+  FontSettings.setupFixedFontSample = function(font, size) {
+    FontSettings.getInstance().setupFontSample_(
+        $('fixed-font-sample'), size, font);
+  };
 
-  FontSettings.setupFixedFontPreview = function(text, size) {
-    this.setupFontPreview('fontSettingsFixedWidthPreview', text, size);
-  }
+  FontSettings.setupMinimumFontSample = function(size) {
+    FontSettings.getInstance().setupFontSample_(
+        $('minimum-font-sample'), size);
+  };
 
   // Export
   return {
     FontSettings: FontSettings
   };
-
 });
 
diff --git a/chrome/browser/resources/options/font_settings_ui.js b/chrome/browser/resources/options/font_settings_ui.js
index 4af8141..8a0b7b6 100644
--- a/chrome/browser/resources/options/font_settings_ui.js
+++ b/chrome/browser/resources/options/font_settings_ui.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -11,12 +11,9 @@ cr.define('options', function() {
   var MinimumFontSizeSelect = cr.ui.define('select');
 
   MinimumFontSizeSelect.prototype = {
-    // Set up the prototype chain
     __proto__: HTMLSelectElement.prototype,
 
-    /**
-    * Initialization function for the cr.ui framework.
-    */
+    /** @inheritDoc */
     decorate: function() {
       var self = this;
 
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 2a17cc2..ef6af0f 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -22,6 +22,7 @@
 <link rel="stylesheet" href="clear_browser_data.css">
 <link rel="stylesheet" href="content_settings.css">
 <link rel="stylesheet" href="cookies_view.css">
+<link rel="stylesheet" href="font_settings.css">
 <link rel="stylesheet" href="password_manager.css">
 <link rel="stylesheet" href="password_manager_list.css">
 <link rel="stylesheet" href="personal_options.css">
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index c5fdf07..d1efac5 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -40,8 +40,6 @@ function load() {
   cr.ui.decorate('input[pref][type=url]', options.PrefTextField);
   cr.ui.decorate('#content-settings-page input[type=radio]',
       options.ContentSettingsRadio);
-  cr.ui.decorate('#fontSettingsMinimumSizeSelector',
-      options.MinimumFontSizeSelect);
 
   var menuOffPattern = /(^\?|&)menu=off($|&)/;
   var menuDisabled = menuOffPattern.test(window.location.search);
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 6879770..af87318 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -247,36 +247,113 @@ cr.define('options', function() {
 
   PrefRange.prototype = {
     // Set up the prototype chain
-    __proto__: PrefNumeric.prototype,
+    __proto__: HTMLInputElement.prototype,
+
+    /**
+     * The map from input range value to the corresponding preference value.
+     */
+    valueMap: undefined,
+
+    /**
+     * If true, the associated pref will be modified on each onchange event;
+     * otherwise, the pref will only be modified on the onmouseup event after
+     * the drag.
+     */
+    continuous: true,
 
     /**
      * Initialization function for the cr.ui framework.
      */
     decorate: function() {
       this.type = 'range';
-      PrefNumeric.prototype.decorate.call(this);
-      var self = this;
 
-      // Additionally change the indicator as well.
-      Preferences.getInstance().addEventListener(this.pref,
-          function(event) {
-            self.updateIndicator();
-          });
+      // Update the UI when the pref changes.
+      Preferences.getInstance().addEventListener(
+          this.pref, this.onPrefChange_.bind(this));
 
       // Listen to user events.
-      this.addEventListener('input',
-          function(e) {
-            this.updateIndicator();
-          });
+      // TODO(jhawkins): Add onmousewheel handling once the associated WK bug is
+      // fixed.
+      // https://bugs.webkit.org/show_bug.cgi?id=52256
+      this.onchange = this.onChange_.bind(this);
+      this.onkeyup = this.onmouseup = this.onInputUp_.bind(this);
     },
 
-    updateIndicator: function() {
-      if ($(this.id + '-value')) {
-        $(this.id + '-value').textContent = this.value;
-      }
-    }
+    /**
+     * Event listener that updates the UI when the underlying pref changes.
+     * @param {Event} event The event that details the pref change.
+     * @private
+     */
+    onPrefChange_: function(event) {
+      var value = event.value && event.value['value'] != undefined ?
+          event.value['value'] : event.value;
+      if (value != undefined)
+        this.value = this.valueMap ? this.valueMap.indexOf(value) : value;
+    },
+
+    /**
+     * onchange handler that sets the pref when the user changes the value of
+     * the input element.
+     * @private
+     */
+    onChange_: function(event) {
+      if (this.continuous)
+        this.setRangePref_();
+
+      this.notifyChange(this, this.mapValueToRange_(this.value));
+    },
+
+    /**
+     * Sets the integer value of |pref| to the value of this element.
+     * @private
+     */
+    setRangePref_: function() {
+      Preferences.setIntegerPref(
+          this.pref, this.mapValueToRange_(this.value), this.metric);
+    },
+
+    /**
+     * onkeyup/onmouseup handler that modifies the pref if |continuous| is
+     * false.
+     * @private
+     */
+    onInputUp_: function(event) {
+      if (!this.continuous)
+        this.setRangePref_();
+    },
+
+    /**
+     * Maps the value of this element into the range provided by the client,
+     * represented by |valueMap|.
+     * @param {number} value The value to map.
+     * @private
+     */
+    mapValueToRange_: function(value) {
+      return this.valueMap ? this.valueMap[value] : value;
+    },
+
+    /**
+     * Called when the client has specified non-continuous mode and the value of
+     * the range control changes.
+     * @param {Element} el This element.
+     * @param {number} value The value of this element.
+     */
+    notifyChange: function(el, value) {
+    },
   };
 
+  /**
+   * The preference name.
+   * @type {string}
+   */
+  cr.defineProperty(PrefRange, 'pref', cr.PropertyKind.ATTR);
+
+  /**
+   * The user metric string.
+   * @type {string}
+   */
+  cr.defineProperty(PrefRange, 'metric', cr.PropertyKind.ATTR);
+
   /////////////////////////////////////////////////////////////////////////////
   // PrefSelect class:
 
@@ -345,6 +422,7 @@ cr.define('options', function() {
                 Preferences.setBooleanPref(self.pref, value, self.metric);
                 break;
               case 'string':
+              case undefined:  // Assume the pref is a string.
                 Preferences.setStringPref(self.pref,
                     self.options[self.selectedIndex].value, self.metric);
                 break;