Font Settings API: Sample Extension minor UI improvements

Use input type=number and let font size settings affect only the sample texts.

BUG=114805
TBR=mpcomplete


Review URL: https://chromiumcodereview.appspot.com/10908166

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

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);