UI refresh of Advanced Font Settings Extension

chrome/common/extensions/docs/examples/api/fontSettings/options.js

 // Copyright (c) 2012 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.
 

[hirono, 2013/08/28 08:47:30]

Could you add a line 'use strict'; ?
It lets the JavaScript engine warn for unsafe codes.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_a...

[falken, 2013/08/29 09:35:44]

Done.

+var COMMON_SCRIPT = 'Zyyy';
+
 // The scripts supported by the Font Settings Extension API.
 var scripts = [
-  { scriptCode: 'Zyyy', scriptName: 'Default'},
+  { scriptCode: COMMON_SCRIPT, scriptName: 'Default'},
   { scriptCode: 'Afak', scriptName: 'Afaka'},
   { scriptCode: 'Arab', scriptName: 'Arabic'},
   { scriptCode: 'Armi', scriptName: 'Imperial Aramaic'},
   { scriptCode: 'Armn', scriptName: 'Armenian'},
   { scriptCode: 'Avst', scriptName: 'Avestan'},
   { scriptCode: 'Bali', scriptName: 'Balinese'},
   { scriptCode: 'Bamu', scriptName: 'Bamum'},
   { scriptCode: 'Bass', scriptName: 'Bassa Vah'},
   { scriptCode: 'Batk', scriptName: 'Batak'},
   { scriptCode: 'Beng', scriptName: 'Bengali'},
@@ skipping 134 matching lines @@
   { scriptCode: 'Wara', scriptName: 'Varang Kshiti'},
   { scriptCode: 'Wole', scriptName: 'Woleai'},
   { scriptCode: 'Xpeo', scriptName: 'Old Persian'},
   { scriptCode: 'Xsux', scriptName: 'Sumero-Akkadian Cuneiform'},
   { scriptCode: 'Yiii', scriptName: 'Yi'},
   { scriptCode: 'Zmth', scriptName: 'Mathematical Notation'},
   { scriptCode: 'Zsym', scriptName: 'Symbols'}
 ];
 
 // The generic font families supported by the Font Settings Extension API.
-var families =
-    ["standard", "sansserif", "serif", "fixed", "cursive", "fantasy"];
-
-// Mapping between font list ids and the generic family setting they
-// represent.
-var fontPickers = [
-  { fontList: 'standardFontList', name: 'standard' },
-  { fontList: 'serifFontList', name: 'serif' },
-  { fontList: 'sansSerifFontList', name: 'sansserif' },
-  { fontList: 'fixedFontList', name: 'fixed' }
-];
-
-// Ids of elements to contain the sample text.
-var sampleTextDivIds = [
-  'standardFontSample',
-  'serifFontSample',
-  'sansSerifFontSample',
-  'fixedFontSample',
-  'minFontSample'
-];
+var FAMILIES =
+    ['standard', 'sansserif', 'serif', 'fixed', 'cursive', 'fantasy'];
 
 // Sample texts.
-var defaultSampleText = 'The quick brown fox jumps over the lazy dog.';
-var scriptSpecificSampleText = {
+var SAMPLE_TEXTS = {
   // "Cyrllic script".
   'Cyrl': 'Кириллица',
   'Hang': '정 참판 양반댁 규수 큰 교자 타고 혼례 치른 날.',
   'Hans': '床前明月光，疑是地上霜。举头望明月，低头思故乡。',
   'Hant': '床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。',
   'Jpan': '吾輩は猫である。名前はまだ無い。',
   // "Khmer language".
   'Khmr': '\u1797\u17B6\u179F\u17B6\u1781\u17D2\u1798\u17C2\u179A',
+  'Zyyy': 'The quick brown fox jumps over the lazy dog.'
 };
 
-// Definition for ScriptList.
-cr.define('fontSettings.ui', function() {
-  const List = cr.ui.List;
-  const ListItem = cr.ui.ListItem;
-  const ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
+// Controller of pending changes.
+var pendingChanges = new PendingChanges();
 
-  function ScriptListItem(info) {
-    var el = cr.doc.createElement('li');
-    el.__proto__ = ScriptListItem.prototype;
-    el.info_ = info;
-    el.decorate();
-    return el;
+// Map of |genericFamily| to UI controls and data for its font setting.
+var fontSettings = null;
+
+// Map of |fontSizeKey| to UI contols and data for its font size setting.
+var fontSizeSettings = null;
+
+function $(id) {
+  return document.getElementById(id);
+}
+
+// Returns a function of form function(x, y, z) which calls callback(x, y, z)
+// where |y| and |z| are fixed to |font| and |controllable|, respectively.
+function getBoundCallback(callback, font, controllable) {
+  return function(effectiveFont) {
+    callback(effectiveFont, font, controllable)
   };
+}
 
-  ScriptListItem.prototype = {
-    __proto__: ListItem.prototype,
-
-    decorate: function() {
-      this.textContent = this.info_.scriptName;
-      if (this.info_.scriptCode == 'Zyyy') {
-        this.style.marginBottom = '1em';
+// Gets the font size used for |fontSizeKey|, including pending changes. Calls
+// |callback| which must be of the form func(size, controllable). |size| is the
+// effective setting, |controllable| is whether the setting can be set.
+function getEffectiveFontSize(fontSizeKey, callback) {
+  fontSizeSettings[fontSizeKey].getter({}, function(details) {
+    var controllable = isControllableLevel(details.levelOfControl);
+    var size = details.pixelSize;
+    var pendingFontSize = pendingChanges.getFontSize(fontSizeKey);
+    // If the setting is not controllable, we can have no pending change.
+    if (!controllable) {
+      if (pendingFontSize != null) {
+        pendingChanges.setFontSize(fontSizeKey, null);
+        refresh();
+        pendingFontSize = null;
       }
     }
-  };
 
-  var ScriptList = cr.ui.define('list');
-  ScriptList.prototype = {
-    __proto__: List.prototype,
-
-    decorate: function() {
-      List.prototype.decorate.call(this);
-      var sm = new ListSingleSelectionModel();
-      this.selectionModel = sm;
-      this.autoExpands = true;
-      this.dataModel = new cr.ui.ArrayDataModel(scripts);
-      this.style.height = '75vh';
-    },
-
-    createItem: function(info) {
-      return new ScriptListItem(info);
-    }
-  };
-
-  return {
-    ScriptList: ScriptList,
-    ScriptListItem: ScriptListItem
-  };
-});
-
-function getSelectedScript() {
-  var scriptList = document.getElementById('scriptList');
-  return scriptList.selectedItem.scriptCode;
+    // If we have a pending change, it overrides the current setting.
+    if (pendingFontSize != null)
+      size = pendingFontSize;
+    callback(size, controllable);
+  });
 }
 
+// Gets the font used for |script| and |genericFamily|, including pending
+// changes. Calls |callback| which must be of the form func(effectiveFont,
+// font, controllable). |effectiveFont| is the font used taking fallback into
+// consideration, |font| is the actual setting (pending or not), |controllable|
+// is whether the setting can be set.
+function getEffectiveFont(script, genericFamily, callback) {
+  var details = { script: script, genericFamily: genericFamily };
+  var pendingFont =
+      pendingChanges.getFont(details.script, details.genericFamily);
+  chrome.fontSettings.getFont(details, function(result) {
+    var setting = {};
+    setting.font = result.fontId;
+    setting.controllable = isControllableLevel(result.levelOfControl);
+    // If the setting is not controllable, we can have no pending change.
+    if (!setting.controllable) {
+      pendingFont = null;
+      if (pendingChanges.getFont[script])
+        pendingChanges.setFont([script][genericFamily], null);
+        refresh();
+    }
+
+    // If we have a pending change, it overrides the current setting.
+    if (pendingFont != null)
+      setting.font = pendingFont;
+
+    // If we have a font, we're done.
+    if (setting.font) {
+      callback(setting.font, setting.font, setting.controllable);
+      return;
+    }
+
+    // If we're still here, we have to fallback to common script, unless this
+    // already is common script.
+    if (script == COMMON_SCRIPT) {
+      callback('', '', setting.controllable);
+      return;
+    }
+    getEffectiveFont(
+        COMMON_SCRIPT,
+        genericFamily,
+        getBoundCallback(callback, setting.font, setting.controllable));
+  });
+}
+
+// Returns a function of form function(effectiveFont, font, controllable) that
+// refreshes the UI controls related to a font setting. |effectiveFont| is the
+// font used including fallback, |font| is the value of the font setting
+// (including pending changes), |controllable| is whether the setting can be
+// controlled.
+function getRefreshFontFunction(list, samples) {
+  return function(effectiveFont, font, controllable) {
+    for (var i = 0; i < samples.length; ++i)
+      samples[i].style.fontFamily = effectiveFont;
+    setSelectedFont(list, font);
+    list.disabled = !controllable;
+  }
+}
+
+// Returns a function of form function(size, controllable) that refreshes the
+// UI controls related to a font size setting. |size| is the value of the font
+// setting (including pending changes), |controllable| is whether the setting
+// can be controlled.
+function getRefreshFontSizeFunction(fontSizeKey) {
+  var fontSizeSetting = fontSizeSettings[fontSizeKey];
+  return function(size, controllable) {
+    fontSizeSetting.label.innerText = 'Size: ' + size + 'px';
+    setFontSizeSlider(fontSizeSetting.slider, size, controllable);
+    for (var i = 0; i < fontSizeSetting.samples.length; ++i)
+      fontSizeSetting.samples[i].style.fontSize = size + 'px';
+  };
+}
+
+// Refreshes all UI controls to reflect the current settings, including pending
+// changes.
+function refresh() {
+  var script = getSelectedScript();
+  var sample;
+  if (SAMPLE_TEXTS[script])
+    sample = SAMPLE_TEXTS[script];
+  else
+    sample = SAMPLE_TEXTS[COMMON_SCRIPT];
+  var sampleTexts = document.querySelectorAll('.sample-text-span');
+  for (var i = 0; i < sampleTexts.length; i++)
+    sampleTexts[i].textContent = sample;
+
+  for (var genericFamily in fontSettings) {
+    var setting = fontSettings[genericFamily];
+    getEffectiveFont(script, genericFamily,
+                     getRefreshFontFunction(setting.fontList, setting.samples));
+  }
+
+  for (var fontSizeKey in fontSizeSettings)
+    getEffectiveFontSize(fontSizeKey, getRefreshFontSizeFunction(fontSizeKey));
+
+  $('apply-settings').disabled = pendingChanges.isEmpty();
+}
+
+// Returns the currently selected script code.
+function getSelectedScript() {
+  return $('scriptList').options[scriptList.selectedIndex].value;
+}
+
+// Returns the currently selected value of |fontList|.
 function getSelectedFont(fontList) {
   return fontList.options[fontList.selectedIndex].value;
 }
 
-// Populates the font lists with the list of system fonts from |fonts|.
-function populateLists(fonts) {
-  for (var i = 0; i < fontPickers.length; i++) {
-    var list = document.getElementById(fontPickers[i].fontList);
+// Populates the font lists. |fonts| is the list of system fonts.
+function populateFontLists(fonts) {
+  for (var genericFamily in fontSettings) {
+    var list = fontSettings[genericFamily].fontList;
 
-    // Add special item to indicate fallback to the non-per-script
+    // Add a special item to indicate fallback to the non-per-script
     // font setting. The Font Settings API uses the empty string to indicate
     // fallback.
     var defaultItem = document.createElement('option');
     defaultItem.value = '';
     defaultItem.text = '(Use default)';
     list.add(defaultItem);
 
-    for (var j = 0; j < fonts.length; j++) {
+    for (var i = 0; i < fonts.length; ++i) {
       var item = document.createElement('option');
-      item.value = fonts[j].fontId;
-      item.text = fonts[j].displayName;
+      item.value = fonts[i].fontId;
+      item.text = fonts[i].displayName;
       list.add(item);
     }
   }
-
-  updateFontListsForScript();
+  refresh();
 }
 
-// Returns a function that updates the font setting for |genericFamily|
-// to match the selected value in |fontList|. It can be used as an event
-// handler for selection changes in |fontList|.
+// Returns a function to be called when the user changes the selected font
+// in |fontList|. The function updates the pending font change.
 function getFontChangeHandler(fontList, genericFamily) {
   return function() {
     var script = getSelectedScript();
     var font = getSelectedFont(fontList);
 
-    var details = {};
-    details.genericFamily = genericFamily;
-    details.fontId = font;
-    details.script = script;
-
-    chrome.fontSettings.setFont(details);
+    pendingChanges.setFont(script, genericFamily, font);
+    refresh();
   };
 }
 
 // Sets the selected value of |fontList| to |fontId|.
 function setSelectedFont(fontList, fontId) {
   var script = getSelectedScript();
   var i;
   for (i = 0; i < fontList.length; i++) {
     if (fontId == fontList.options[i].value) {
       fontList.selectedIndex = i;
       break;
     }
   }
   if (i == fontList.length) {
     console.warn("font '" + fontId + "' for " + fontList.id + ' for ' +
         script + ' is not on the system');
   }
 }
 
-// Returns a callback function that sets the selected value of |list| to the
-// font returned from |chrome.fontSettings.getFont|.
-function getFontHandler(list) {
-  return function(details) {
-    setSelectedFont(list, details.fontId);
-    list.disabled = !isControllableLevel(details.levelOfControl);
-  };
-}
-
-// Called when the script list selection changes. Sets the selected value of
-// each font list to the current font setting, and updates the samples' lang
-// so that they are shown in the current font setting.
-function updateFontListsForScript() {
-  var script = getSelectedScript();
-
-  for (var i = 0; i < fontPickers.length; i++) {
-    var list = document.getElementById(fontPickers[i].fontList);
-    var family = fontPickers[i].name;
-
-    var details = {};
-    details.genericFamily = family;
-    details.script = script;
-    chrome.fontSettings.getFont(details, getFontHandler(list));
-  }
-
-  if (typeof(scriptSpecificSampleText[script]) != 'undefined')
-    sample = scriptSpecificSampleText[script];
-  else
-    sample = defaultSampleText;
-  for (var i = 0; i < sampleTextDivIds.length; i++) {
-    var sampleTextDiv = document.getElementById(sampleTextDivIds[i]);
-    // For font selection it's the script code that matters, not language, so
-    // just use en for lang.
-    sampleTextDiv.lang = 'en-' + script;
-    sampleTextDiv.innerText = sample;
-  }
-}
-
-// Returns a function to be called when the user changes the font size
-// input element |elem|. The function calls the Font Settings Extension API
-// function |setter| to commit the change.
-function getFontSizeChangedFunc(elem, setter) {
-  return function() {
-    var pixelSize = parseInt(elem.value);
+// Returns a function to be called when the user changes the font size slider
+// |slider|. The function sets the pending font size change.
+function getFontSizeChangedFunc(label, fontSizeKey) {
+  return function(value) {
+    var pixelSize = parseInt(value);
     if (!isNaN(pixelSize)) {
-      setter({ pixelSize: pixelSize });
+      pendingChanges.setFontSize(fontSizeKey, pixelSize);
+      refresh();
     }
   }
 }
 
+// Returns true if |levelOfControl| signifies that the extension can
+// control the setting; otherwise, returns false.
 function isControllableLevel(levelOfControl) {
   return levelOfControl == 'controllable_by_this_extension' ||
       levelOfControl == 'controlled_by_this_extension';
 }
 
 // Returns a function to be used as a listener for font size setting changed
-// events from the Font Settings Extension API. The function updates the input
-// element |elem| and the elements in |sampleTexts| to reflect the change.
-function getFontSizeChangedOnBrowserFunc(elem, sampleTexts) {
+// events from the Font Settings Extension API. The function updates |slider|,
+// |label|, and |sampleTexts| related to the font size setting to reflect the
+// change.
+function getFontSizeChangedOnBrowserFunc(slider, label, sampleTexts) {
   return function(details) {
     var size = details.pixelSize.toString();
-    elem.value = size;
-    elem.disabled = !isControllableLevel(details.levelOfControl);
+    var controllable = isControllableLevel(details.levelOfControl);
+    setFontSizeSlider(slider, size, controllable);
+    label.disabled = !controllable;
     for (var i = 0; i < sampleTexts.length; i++)
-      document.getElementById(sampleTexts[i]).style.fontSize = size + 'px';
+      sampleTexts[i].style.fontSize = size + 'px';
+    label.innerText = 'Size: ' + size + 'px';
   }
 }
 
-// Maps the HTML <input> element with |id| to the extension API accessor
-// functions |getter| and |setter| for a setting and onChange event |apiEvent|
-// for the setting. Also, maps the element ids in |sampleTexts| to this setting.
-function initFontSizePref(id, sampleTexts, getter, setter, apiEvent) {
-  var elem = document.getElementById(id);
-  getter({}, function(details) {
-    var size = details.pixelSize.toString();
-    elem.value = size;
-    elem.disabled = !isControllableLevel(details.levelOfControl);
-    for (var i = 0; i < sampleTexts.length; i++)
-      document.getElementById(sampleTexts[i]).style.fontSize = size + 'px';
-  });
-  elem.addEventListener('change', getFontSizeChangedFunc(elem, setter));
-  apiEvent.addListener(getFontSizeChangedOnBrowserFunc(elem, sampleTexts));
+// Updates the font size slider to have value |size| and to be enabled iff
+// |enabled|.
+function setFontSizeSlider(slider, size, enabled) {
+  if (slider.getValue() != size)
+    slider.setValue(size);
+  var inputElement = slider.getInput();
+  if (enabled) {
+    inputElement.parentNode.classList.remove('disabled');
+    inputElement.disabled = false;
+  } else {
+    inputElement.parentNode.classList.add('disabled');
+    inputElement.disabled = true;
+  }
 }
 
+// Initializes the UI control elements related to the font size setting
+// |fontSizeKey| and registers listeners for the user adjusting its slider and
+// the setting changing on the browser-side.
+function initFontSizeSetting(fontSizeKey) {
+  var setting = fontSizeSettings[fontSizeKey];
+  var label = setting.label;
+  var samples = setting.samples;
+
+  setting.slider = new Slider(
+      setting.sliderContainer,
+      0,
+      setting.minValue,
+      setting.maxValue,
+      getFontSizeChangedFunc(label, fontSizeKey)
+  );
+
+  var slider = setting.slider;
+  setting.getter({}, function(details) {
+    var size = details.pixelSize.toString();
+    setFontSizeSlider(slider, size,
+                      isControllableLevel(details.levelOfControl));
+    for (var i = 0; i < samples.length; i++)
+      samples[i].style.fontSize = size + 'px';
+  });
+  var apiEvent = fontSizeSettings[fontSizeKey].onChanged;
+  apiEvent.addListener(getFontSizeChangedOnBrowserFunc(slider, label, samples));
+}
+
+// Clears the font settings for script code |script|.
 function clearSettingsForScript(script) {
-  for (var i = 0; i < families.length; i++) {
+  pendingChanges.clearOneScript(script);
+  for (var i = 0; i < FAMILIES.length; i++) {
     chrome.fontSettings.clearFont({
       script: script,
-      genericFamily: families[i]
+      genericFamily: FAMILIES[i]
     });
   }
 }
 
+// Clears all font and font size settings.
 function clearAllSettings() {
+  pendingChanges.clear();
   for (var i = 0; i < scripts.length; i++)
     clearSettingsForScript(scripts[i].scriptCode);
-
   chrome.fontSettings.clearDefaultFixedFontSize();
   chrome.fontSettings.clearDefaultFontSize();
   chrome.fontSettings.clearMinimumFontSize();
 }
 
 function closeOverlay() {
   $('overlay-container').hidden = true;
 }
 
-function initResetButtons() {
+// Initializes apply and reset buttons.
+function initApplyAndResetButtons() {
+  var applyButton = $('apply-settings');
+  applyButton.addEventListener('click', function() {
+    pendingChanges.apply();
+    refresh();
+  });
+
   var overlay = $('overlay-container');
   cr.ui.overlay.globalInitialization();
   cr.ui.overlay.setupOverlay(overlay);
   overlay.addEventListener('cancelOverlay', closeOverlay);
 
   $('reset-this-script-button').onclick = function(event) {
-    var scriptName = $('scriptList').selectedItem.scriptName;
+    var scriptList = $('scriptList');
+    var scriptName = scriptList.options[scriptList.selectedIndex].text;
     $('reset-this-script-overlay-dialog-content').innerText =
         'Are you sure you want to reset settings for ' + scriptName +
         ' script?';
 
     $('overlay-container').hidden = false;
     $('reset-this-script-overlay-dialog').hidden = false;
     $('reset-all-scripts-overlay-dialog').hidden = true;
-  }
+  };
   $('reset-this-script-ok').onclick = function(event) {
     clearSettingsForScript(getSelectedScript());
     closeOverlay();
+    refresh();
   };
   $('reset-this-script-cancel').onclick = closeOverlay;
 
   $('reset-all-button').onclick = function(event) {
     $('overlay-container').hidden = false;
     $('reset-all-scripts-overlay-dialog').hidden = false;
     $('reset-this-script-overlay-dialog').hidden = true;
-  }
+  };
   $('reset-all-ok').onclick = function(event) {
     clearAllSettings();
     closeOverlay();
-  }
+    refresh();
+  };
   $('reset-all-cancel').onclick = closeOverlay;
 }
 
+// Taken from the IDS_WEB_FONT_FAMILY strings in Chrome.
+// TODO: The font should be localized like Chrome does.
+var systemFonts = {
+  cros: 'Noto Sans UI, sans-serif',
+  linux: 'Ubuntu, sans-serif',
+  mac: 'Lucida Grande, sans-serif',
+  win: 'Segoe UI, Tahoma, sans-serif',
+  unknown: 'sans-serif'
+}
+
+function getPlatform() {
+  var ua = window.navigator.appVersion;
+  if (ua.indexOf('Win') != -1) return 'win';
+  if (ua.indexOf('Mac') != -1) return 'mac';
+  if (ua.indexOf('Linux') != -1) return 'linux';
+  if (ua.indexOf('CrOS') != -1) return 'cros';
+  return 'unknown';
+}
+
+// Chrome settings tries to use the system font. So does this extension.
+function useSystemFont() {
+  document.body.style.fontFamily = systemFonts[getPlatform()];
+}
+
+function sortScripts() {
+  var i;
+  for (i = 0; i < scripts; ++i) {
+    if (scripts[i].scriptCode == COMMON_SCRIPT)
+      break;
+  }
+  var defaultScript = scripts.splice(i, 1)[0];
+
+  scripts.sort(function(a, b) {
+    if (a.scriptName > b.scriptName)
+      return 1;
+    if (a.scriptName < b.scriptName)
+      return -1;
+    return 0;
+  });
+
+  scripts.unshift(defaultScript);
+}
+
+// Initializes UI controls for font settings.
+function initFontControls() {
+  fontSettings = {
+    'standard': {
+      fontList: $('standardFontList'),
+      samples: [$('standardFontSample'), $('minFontSample')]
+    },
+    'serif': {
+      fontList: $('serifFontList'),
+      samples: [$('serifFontSample')]
+    },
+    'sansserif': {
+      fontList: $('sansSerifFontList'),
+      samples: [$('sansSerifFontSample')]
+    },
+    'fixed': {
+      fontList: $('fixedFontList'),
+      samples: [$('fixedFontSample')]
+    }
+  };
+
+  for (var genericFamily in fontSettings) {
+    var list = fontSettings[genericFamily].fontList;
+    list.addEventListener('change', getFontChangeHandler(list, genericFamily));
+  }
+  chrome.fontSettings.onFontChanged.addListener(refresh);
+  chrome.fontSettings.getFontList(populateFontLists);
+}
+
+// Initializes UI controls for font size settings.
+function initFontSizeControls() {
+  fontSizeSettings = {
+    'defaultFontSize': {
+      sliderContainer: $('defaultFontSizeSliderContainer'),
+      minValue: 6,
+      maxValue: 50,
+      samples: [
+        $('standardFontSample'), $('serifFontSample'), $('sansSerifFontSample')
+      ],
+      label: $('defaultFontSizeLabel'),
+      getter: chrome.fontSettings.getDefaultFontSize,
+      onChanged: chrome.fontSettings.onDefaultFontSizeChanged
+    },
+    'defaultFixedFontSize': {
+      sliderContainer: $('defaultFixedFontSizeSliderContainer'),
+      minValue: 6,
+      maxValue: 50,
+      samples: [$('fixedFontSample')],
+      label: $('fixedFontSizeLabel'),
+      getter: chrome.fontSettings.getDefaultFixedFontSize,
+      onChanged: chrome.fontSettings.onDefaultFixedFontSizeChanged
+    },
+    'minFontSize': {
+      sliderContainer: $('minFontSizeSliderContainer'),
+      minValue: 6,
+      maxValue: 24,
+      samples: [$('minFontSample')],
+      label: $('minFontSizeLabel'),
+      getter: chrome.fontSettings.getMinimumFontSize,
+      onChanged: chrome.fontSettings.onMinimumFontSizeChanged
+    }
+  };
+
+  for (var fontSizeKey in fontSizeSettings)
+    initFontSizeSetting(fontSizeKey);
+}
+
+// Initializes the list of scripts.
+function initScriptList() {
+  var scriptList = $('scriptList');
+  sortScripts();
+  for (var i = 0; i < scripts.length; i++) {
+    var script = document.createElement('option');
+    script.value = scripts[i].scriptCode;
+    script.text = scripts[i].scriptName;
+    scriptList.add(script);
+  }
+  scriptList.selectedIndex = 0;
+  scriptList.addEventListener('change', refresh);
+}
+
 function init() {
-  var scriptList = document.getElementById('scriptList');
-  fontSettings.ui.ScriptList.decorate(scriptList);
-  scriptList.selectionModel.selectedIndex = 0;
-  scriptList.selectionModel.addEventListener('change',
-                                             updateFontListsForScript);
+  useSystemFont();
 
-  // Populate the font lists.
-  chrome.fontSettings.getFontList(populateLists);
+  initFontControls();
+  initFontSizeControls();
+  initScriptList();
 
-  // Add change handlers to the font lists.
-  for (var i = 0; i < fontPickers.length; i++) {
-    var list = document.getElementById(fontPickers[i].fontList);
-    var handler = getFontChangeHandler(list, fontPickers[i].name);
-    list.addEventListener('change', handler);
-  }
-
-  chrome.fontSettings.onFontChanged.addListener(
-      updateFontListsForScript);
-
-  initFontSizePref(
-      'defaultFontSizeRocker',
-      ['standardFontSample', 'serifFontSample', 'sansSerifFontSample'],
-      chrome.fontSettings.getDefaultFontSize,
-      chrome.fontSettings.setDefaultFontSize,
-      chrome.fontSettings.onDefaultFontSizeChanged);
-  initFontSizePref(
-      'defaultFontSizeRange',
-      ['standardFontSample', 'serifFontSample', 'sansSerifFontSample'],
-      chrome.fontSettings.getDefaultFontSize,
-      chrome.fontSettings.setDefaultFontSize,
-      chrome.fontSettings.onDefaultFontSizeChanged);
-  initFontSizePref(
-      'defaultFixedFontSizeRocker',
-      ['fixedFontSample'],
-      chrome.fontSettings.getDefaultFixedFontSize,
-      chrome.fontSettings.setDefaultFixedFontSize,
-      chrome.fontSettings.onDefaultFixedFontSizeChanged);
-  initFontSizePref(
-      'defaultFixedFontSizeRange',
-      ['fixedFontSample'],
-      chrome.fontSettings.getDefaultFixedFontSize,
-      chrome.fontSettings.setDefaultFixedFontSize,
-      chrome.fontSettings.onDefaultFixedFontSizeChanged);
-  initFontSizePref(
-      'minFontSizeRocker',
-      ['minFontSample'],
-      chrome.fontSettings.getMinimumFontSize,
-      chrome.fontSettings.setMinimumFontSize,
-      chrome.fontSettings.onMinimumFontSizeChanged);
-  initFontSizePref(
-      'minFontSizeRange',
-      ['minFontSample'],
-      chrome.fontSettings.getMinimumFontSize,
-      chrome.fontSettings.setMinimumFontSize,
-      chrome.fontSettings.onMinimumFontSizeChanged);
-
-  initResetButtons();
+  initApplyAndResetButtons();
 }
 
 document.addEventListener('DOMContentLoaded', init);