Index: chrome/browser/resources/options/font_settings.js |
=================================================================== |
--- chrome/browser/resources/options/font_settings.js (revision 78298) |
+++ chrome/browser/resources/options/font_settings.js (working copy) |
@@ -30,24 +30,23 @@ |
OptionsPage.prototype.initializePage.call(this); |
var standardFontRange = $('standard-font-size'); |
- standardFontRange.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]; |
+ standardFontRange.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]; |
standardFontRange.continuous = false; |
- standardFontRange.fontSampleEl = $('standard-font-sample'); |
- standardFontRange.notifyChange = this.rangeChanged_.bind(this); |
+ standardFontRange.notifyChange = this.standardRangeChanged_.bind(this); |
var minimumFontRange = $('minimum-font-size'); |
minimumFontRange.valueMap = [6, 7, 8, 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); |
+ minimumFontRange.notifyChange = this.minimumRangeChanged_.bind(this); |
minimumFontRange.notifyPrefChange = |
this.minimumFontSizeChanged_.bind(this); |
var placeholder = localStrings.getString('fontSettingsPlaceholder'); |
$('standard-font-family').appendChild(new Option(placeholder)); |
+ $('serif-font-family').appendChild(new Option(placeholder)); |
+ $('sans-serif-font-family').appendChild(new Option(placeholder)); |
$('fixed-font-family').appendChild(new Option(placeholder)); |
$('font-encoding').appendChild(new Option(placeholder)); |
}, |
@@ -67,18 +66,40 @@ |
}, |
/** |
- * Called as the user changes a non-continuous slider. This allows for |
+ * Called as the user changes the standard font size. This allows for |
* reflecting the change in the UI before the preference has been changed. |
* @param {Element} el The slider input element. |
* @param {number} value The mapped value currently set by the slider. |
* @private |
*/ |
- rangeChanged_: function(el, value) { |
- this.setupFontSample_(el.fontSampleEl, value, |
- el.fontSampleEl.style.fontFamily); |
+ standardRangeChanged_: function(el, value) { |
+ var fontSampleEl = $('standard-font-sample'); |
+ this.setupFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, |
+ true); |
+ |
+ fontSampleEl = $('serif-font-sample'); |
+ this.setupFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, |
+ true); |
+ |
+ fontSampleEl = $('sans-serif-font-sample'); |
+ this.setupFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, |
+ true); |
}, |
/** |
+ * Called as the user changes the miniumum font size. This allows for |
+ * reflecting the change in the UI before the preference has been changed. |
+ * @param {Element} el The slider input element. |
+ * @param {number} value The mapped value currently set by the slider. |
+ * @private |
+ */ |
+ minimumRangeChanged_: function(el, value) { |
+ var fontSampleEl = $('minimum-font-sample'); |
+ this.setupFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, |
+ true); |
+ }, |
+ |
+ /** |
* Sets the 'minimum_logical_font_size' preference when the minimum font |
* size has been changed by the user. |
* @param {Element} el The slider input element. |
@@ -95,12 +116,14 @@ |
* @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. |
+ * @param {bool} showSize True if the font size should appear in the sample. |
* @private |
*/ |
- setupFontSample_: function(el, size, font) { |
- el.textContent = |
- size + ": " + localStrings.getString('fontSettingsLoremIpsum'); |
- el.style.fontSize = size + "px"; |
+ setupFontSample_: function(el, size, font, showSize) { |
+ var prefix = showSize ? (size + ': ') : ''; |
+ el.textContent = prefix + |
+ localStrings.getString('fontSettingsLoremIpsum'); |
+ el.style.fontSize = size + 'px'; |
if (font) |
el.style.fontFamily = font; |
}, |
@@ -139,24 +162,43 @@ |
FontSettings.setFontsData = function(fonts, encodings, selectedValues) { |
FontSettings.getInstance().populateSelect_($('standard-font-family'), fonts, |
selectedValues[0]); |
+ FontSettings.getInstance().populateSelect_($('serif-font-family'), fonts, |
+ selectedValues[1]); |
+ FontSettings.getInstance().populateSelect_($('sans-serif-font-family'), |
+ fonts, selectedValues[2]); |
FontSettings.getInstance().populateSelect_($('fixed-font-family'), fonts, |
- selectedValues[1]); |
+ selectedValues[3]); |
FontSettings.getInstance().populateSelect_($('font-encoding'), encodings, |
- selectedValues[2]); |
+ selectedValues[4]); |
}; |
FontSettings.setupStandardFontSample = function(font, size) { |
FontSettings.getInstance().setupFontSample_($('standard-font-sample'), size, |
- font); |
+ font, true); |
}; |
+ FontSettings.setupSerifFontSample = function(font, size) { |
+ FontSettings.getInstance().setupFontSample_($('serif-font-sample'), size, |
+ font, true); |
+ }; |
+ |
+ FontSettings.setupSansSerifFontSample = function(font, size) { |
+ FontSettings.getInstance().setupFontSample_($('sans-serif-font-sample'), |
+ size, font, true); |
+ }; |
+ |
FontSettings.setupFixedFontSample = function(font, size) { |
- FontSettings.getInstance().setupFontSample_($('fixed-font-sample'), size, |
- font); |
+ FontSettings.getInstance().setupFontSample_($('fixed-font-sample'), |
+ size, font, false); |
}; |
FontSettings.setupMinimumFontSample = function(size) { |
- FontSettings.getInstance().setupFontSample_($('minimum-font-sample'), size); |
+ // If size is less than 6, represent it as six in the sample to account |
+ // for the minimum logical font size. |
+ if (size < 6) |
+ size = 6; |
+ FontSettings.getInstance().setupFontSample_($('minimum-font-sample'), size, |
+ true); |
}; |
// Export |