diff options
Diffstat (limited to 'chrome/common/extensions/docs/examples/api')
3 files changed, 43 insertions, 22 deletions
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css b/chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css index 1713df2..471e354a 100644 --- a/chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css +++ b/chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css @@ -88,6 +88,7 @@ input[type='password'], input[type='search'], input[type='text'], input[type='url'], +input[type='number'], input:not([type]), textarea { border: 1px solid #bfbfbf; diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/options.html b/chrome/common/extensions/docs/examples/api/fontSettings/options.html index 6e3c4b2..f2dcfc9 100644 --- a/chrome/common/extensions/docs/examples/api/fontSettings/options.html +++ b/chrome/common/extensions/docs/examples/api/fontSettings/options.html @@ -11,6 +11,11 @@ body.uber-frame { font-family: sans-serif; -webkit-margin-start: 30px; + font-size: 14px; + } + + body.uber-frame section { + max-width: none; } .font-setting-container { @@ -19,7 +24,7 @@ .font-input-div { -webkit-margin-end: 3em; - width: 12em; + min-width: 12em; } </style> </head> @@ -114,22 +119,26 @@ <section> <h3>Default Font Size</h3> <div class="font-setting-container"> - <div class="font-input-div"><input type="text" id="defaultFontSize"></div> + <div class="font-input-div"> + <input type="number" id="defaultFontSize" min="0" max="99"> + </div> </div> </section> <section> <h3>Default Fixed Font Size</h3> <div class="font-setting-container"> <div class="font-input-div"> - <input type="text" id="defaultFixedFontSize"> + <input type="number" id="defaultFixedFontSize" min="0" max="99"> </div> </div> </section> <section> <h3>Minimum Font Size</h3> <div class="font-setting-container"> - <div class="font-input-div"><input type="text" id="minFontSize"></div> - <div id="minFontSample" style="font-family: standard; font-size: 1px;"> + <div class="font-input-div"> + <input type="number" id="minFontSize" min="0" max="99"> + </div> + <div id="minFontSample" style="font-family: standard"> Lorem ipsum dolor sit amat. </div> </div> diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/options.js b/chrome/common/extensions/docs/examples/api/fontSettings/options.js index dd3af05..b93bc8f 100644 --- a/chrome/common/extensions/docs/examples/api/fontSettings/options.js +++ b/chrome/common/extensions/docs/examples/api/fontSettings/options.js @@ -154,26 +154,32 @@ function isControllableLevel(levelOfControl) { } // 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| to reflect the change. -function getFontSizeChangedOnBrowserFunc(elem) { +// 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) { return function(details) { - elem.value = details.pixelSize.toString(); + 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'; } } -// Maps the text input HTML element with |id| to the extension API accessor +// 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. -function initFontSizePref(id, getter, setter, 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) { - elem.value = details.pixelSize.toString(); + 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)); + apiEvent.addListener(getFontSizeChangedOnBrowserFunc(elem, sampleTexts)); } function clearAllSettings() { @@ -229,19 +235,24 @@ function init() { chrome.fontSettings.onFontChanged.addListener( updateFontListsForScript); - initFontSizePref('defaultFontSize', - chrome.fontSettings.getDefaultFontSize, - chrome.fontSettings.setDefaultFontSize, - chrome.fontSettings.onDefaultFontSizeChanged); + initFontSizePref( + 'defaultFontSize', + ['standardFontSample', 'serifFontSample', 'sansSerifFontSample'], + chrome.fontSettings.getDefaultFontSize, + chrome.fontSettings.setDefaultFontSize, + chrome.fontSettings.onDefaultFontSizeChanged); initFontSizePref( 'defaultFixedFontSize', + ['fixedFontSample'], chrome.fontSettings.getDefaultFixedFontSize, chrome.fontSettings.setDefaultFixedFontSize, chrome.fontSettings.onDefaultFixedFontSizeChanged); - initFontSizePref('minFontSize', - chrome.fontSettings.getMinimumFontSize, - chrome.fontSettings.setMinimumFontSize, - chrome.fontSettings.onMinimumFontSizeChanged); + initFontSizePref( + 'minFontSize', + ['minFontSample'], + chrome.fontSettings.getMinimumFontSize, + chrome.fontSettings.setMinimumFontSize, + chrome.fontSettings.onMinimumFontSizeChanged); var clearButton = document.getElementById('clearButton'); clearButton.addEventListener('click', clearAllSettings); |