Material WebUI: cr-slider element for intelligent range mapping

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-slider/paper-slider.html">
 <link rel="import" href="chrome://md-settings/appearance_page/fonts_browser_proxy.html">
 <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html">
 <link rel="import" href="chrome://md-settings/i18n_setup.html">
 <link rel="import" href="chrome://md-settings/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>
-      <paper-slider class="always-on" id="sizeSlider"
-          value="{{fontSizeIndex_}}"
-          max="[[fontSizeRangeLimit_]]" max-markers="5"
-          immediate-value="{{immediateSizeIndex_}}" snaps>
-      </paper-slider>
+      <cr-slider class="always-on" id="sizeSlider" snaps max-markers="5"
+          value="{{prefs.webkit.webprefs.default_font_size.value}}"
+          tick-values="[[fontSizeRange_]]">
+      </cr-slider>
     </div>
     <div class="settings-box">
       <div class="start">$i18n{minimumFont}</div>
-      <div class="list-item" style$="[[computeStyle_(minimumFontSize_, prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
-        <span>[[minimumFontSize_]]</span>:&nbsp;
+      <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>:&nbsp;
         $i18n{quickBrownFox}
       </div>
-      <paper-slider class="always-on" id="minimumSizeSlider"
-          value="{{minimumSizeIndex_}}"
-          max="[[minimumFontSizeRangeLimit_]]" max-markers="5"
-          immediate-value="{{immediateMinimumSizeIndex_}}" snaps>
-    </paper-slider>
+      <cr-slider class="always-on" id="minimumSizeSlider" snaps max-markers="5"
+          value="{{prefs.webkit.webprefs.minimum_font_size.value}}"
+          tick-values="[[minimumFontSizeRange_]]">
+      </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" id="standardFont"
                 pref="{{prefs.webkit.webprefs.fonts.standard.Zyyy}}"
                 menu-options="[[fontOptions_]]" no-label-float>
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="[[computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span><!--
+              no whitespace -->:&nbsp;$i18n{quickBrownFox}
           </div>
         </div>
         <h2>$i18n{serifFont}</h2>
         <div class="list-frame">
           <div class="list-item">
             <settings-dropdown-menu class="start" id="serifFont"
                 pref="{{prefs.webkit.webprefs.fonts.serif.Zyyy}}"
                 menu-options="[[fontOptions_]]" no-label-float>
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.serif.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="[[computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.serif.Zyyy.value)]]">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span><!--
+              no whitespace -->:&nbsp;$i18n{quickBrownFox}
           </div>
         </div>
         <h2>$i18n{sansSerifFont}</h2>
         <div class="list-frame">
           <div class="list-item">
             <settings-dropdown-menu class="start" id="sansSerifFont"
                 pref="{{prefs.webkit.webprefs.fonts.sansserif.Zyyy}}"
                 menu-options="[[fontOptions_]]" no-label-float>
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="{{computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.sansserif.Zyyy.value)}}">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="{{computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.sansserif.Zyyy.value)}}">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span><!--
+              no whitespace -->:&nbsp;$i18n{quickBrownFox}
           </div>
         </div>
         <h2>$i18n{fixedWidthFont}</h2>
         <div class="list-frame">
           <div class="list-item">
             <settings-dropdown-menu class="start" id="fixedFont"
                 pref="{{prefs.webkit.webprefs.fonts.fixed.Zyyy}}"
                 menu-options="[[fontOptions_]]" no-label-float>
             </settings-dropdown-menu>
            </div>
           <div class="list-item"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="[[computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span><!--
+              no whitespace -->:&nbsp;$i18n{quickBrownFox}
           </div>
         </div>
       </div>
     </div>
     <div class="settings-box">
       <div class="start">$i18n{encoding}</div>
       <settings-dropdown-menu id="encoding"
           pref="{{prefs.intl.charset_default}}"
           menu-options="[[encodingOptions_]]" no-label-float>
       </settings-dropdown-menu>
     </div>
     <div class="settings-box two-line" id="advancedButton"
         on-tap="openAdvancedExtension_">
       <div class="start">
         <div>$i18n{advancedFontSettings}</div>
         <div class="secondary" id="advancedButtonSublabel">
           [[advancedExtensionSublabel_]]
         </div>
       </div>
     </div>
   </template>
   <script src="appearance_fonts_page.js"></script>
 </dom-module>