[MD settings] set pref to valid slider value

chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html

 <link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="fonts_browser_proxy.html">
 <link rel="import" href="../controls/settings_dropdown_menu.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-appearance-fonts-page">
   <template>
     <style include="settings-shared"></style>
     <div class="settings-box first">
       <div class="start">$i18n{fontSize}</div>
       <cr-slider id="sizeSlider"
           pref="{{prefs.webkit.webprefs.default_font_size}}"
           tick-values="[[fontSizeRange_]]"
           label-min="$i18n{tiny}" label-max="$i18n{huge}">
       </cr-slider>
     </div>
     <div class="settings-box">
       <div class="start">$i18n{minimumFont}</div>
       <div class="list-item"
-          style$="[[computeStyle_(
-              prefs.webkit.webprefs.minimum_font_size.value,
-              prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
-        <span>[[prefs.webkit.webprefs.minimum_font_size.value]]</span>
+          style="
+              font-size:[[computeMinimumFontSize_(
+                  prefs.webkit.webprefs.minimum_font_size.value)]]px;
+              font-family:
+                  '[[prefs.webkit.webprefs.fonts.standard.Zyyy.value]];"

[Dan Beam, 2017/03/14 18:59:35]

only 1 single quote, does this handle font names with ' in them?

[dschuyler, 2017/03/14 19:13:12]

This is a typo, here and each font-family below. I added the closing quote. Iirc
the quotes address an issue for Windows fonts which may have a space in the name
(err, and the CSS spec calls for either quoting or escaping the font name;
quoting is simpler -- I meant that where we've seen an issue in the wild is with
Windows fonts).

Trivia: with just the leading quote, it doesn't recognize the font name and uses
the default font.

Done.

[Dan Beam, 2017/03/14 19:19:02]

i'm asking, what if the font name is

  Doesn't Work

it results in

  style="font-family: 'Doesn't Work';"

which... doesn't work ;) (I believe)

[dschuyler, 2017/03/14 20:39:33]

Good question. Since it's a change from what we were doing previously and I'd
like to separate the topics of the minimum font size and the font-family names,
I've made a new CL about the quoting at
https://codereview.chromium.org/2749873003/

+        <span>[[
+            computeMinimumFontSize_(
+                prefs.webkit.webprefs.minimum_font_size.value)]]</span>
         : $i18n{quickBrownFox}
       </div>
       <cr-slider id="minimumSizeSlider"
           pref="{{prefs.webkit.webprefs.minimum_font_size}}"
           tick-values="[[minimumFontSizeRange_]]"
           label-min="$i18n{tiny}" label-max="$i18n{huge}">
       </cr-slider>
     </div>
     <div class="settings-box">
       <div class="start">
         <h2>$i18n{standardFont}</h2>
         <div class="list-frame">
           <div class="list-item">
             <settings-dropdown-menu class="start"
                 pref="{{prefs.webkit.webprefs.fonts.standard.Zyyy}}"
                 menu-options="[[fontOptions_]]">
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(
-                  prefs.webkit.webprefs.default_font_size.value,
-                  prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
+              style="
+                  font-size:[[prefs.webkit.webprefs.default_font_size.value]]px;
+                  font-family:
+                      '[[prefs.webkit.webprefs.fonts.standard.Zyyy.value]];"
             <span>
               [[prefs.webkit.webprefs.default_font_size.value]]:
               $i18n{quickBrownFox}
             </span>
           </div>
         </div>
         <h2>$i18n{serifFont}</h2>
         <div class="list-frame">
           <div class="list-item">
             <settings-dropdown-menu class="start"
                 pref="{{prefs.webkit.webprefs.fonts.serif.Zyyy}}"
                 menu-options="[[fontOptions_]]">
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(
-                  prefs.webkit.webprefs.default_font_size.value,
-                  prefs.webkit.webprefs.fonts.serif.Zyyy.value)]]">
+              style="
+                  font-size:[[prefs.webkit.webprefs.default_font_size.value]]px;
+                  font-family:
+                      '[[prefs.webkit.webprefs.fonts.serif.Zyyy.value]];"
             <span>
               [[prefs.webkit.webprefs.default_font_size.value]]:
               $i18n{quickBrownFox}
             </span>
           </div>
         </div>
         <h2>$i18n{sansSerifFont}</h2>
         <div class="list-frame">
           <div class="list-item">
             <settings-dropdown-menu class="start"
                 pref="{{prefs.webkit.webprefs.fonts.sansserif.Zyyy}}"
                 menu-options="[[fontOptions_]]">
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="{{computeStyle_(
-                  prefs.webkit.webprefs.default_font_size.value,
-                  prefs.webkit.webprefs.fonts.sansserif.Zyyy.value)}}">
+              style="
+                  font-size:[[prefs.webkit.webprefs.default_font_size.value]]px;
+                  font-family:
+                      '[[prefs.webkit.webprefs.fonts.sansserif.Zyyy.value]];"
             <span>
               [[prefs.webkit.webprefs.default_font_size.value]]:
               $i18n{quickBrownFox}
             </span>
           </div>
         </div>
         <h2>$i18n{fixedWidthFont}</h2>
         <div class="list-frame">
           <div class="list-item">
             <settings-dropdown-menu class="start"
                 pref="{{prefs.webkit.webprefs.fonts.fixed.Zyyy}}"
                 menu-options="[[fontOptions_]]">
             </settings-dropdown-menu>
-           </div>
+          </div>
           <div class="list-item"
-              style$="[[computeStyle_(
-                  prefs.webkit.webprefs.default_fixed_font_size.value,
-                  prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]">
+              style="
+                  font-size:[[prefs.webkit.webprefs.default_font_size.value]]px;
+                  font-family:
+                      '[[prefs.webkit.webprefs.fonts.fixed.Zyyy.value]];"
             <span>
               [[prefs.webkit.webprefs.default_font_size.value]]:
               $i18n{quickBrownFox}
             </span>
           </div>
         </div>
       </div>
     </div>
     <template is="dom-if" if="[[!isGuest_]]">
       <div class="settings-box two-line" id="advancedButton"
           on-tap="openAdvancedExtension_" actionable>
         <div class="start">
           $i18n{advancedFontSettings}
           <div class="secondary" id="advancedButtonSublabel">
             [[advancedExtensionSublabel_]]
           </div>
         </div>
         <button class="icon-external" is="paper-icon-button-light"
             aria-label="$i18n{advancedFontSettings}"
             aria-describedby="advancedButtonSublabel"></button>
       </div>
     </template>
   </template>
   <script src="appearance_fonts_page.js"></script>
 </dom-module>