Material WebUI: cr-slider element for intelligent range mapping

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

Index: chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
diff --git a/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html b/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
index 58365514b21b2146dbb13b4bf579e09453973af1..da61287222d255dc16db5070234d89827bc90197 100644
--- a/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
+++ b/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
@@ -1,7 +1,7 @@
+<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">
@@ -12,23 +12,24 @@
     <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">
@@ -41,8 +42,10 @@
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
+              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>:&nbsp;

[stevenjb, 2016/05/16 21:57:51]

wrapping on all these lines (also, how are these changes related to cr-slider?)

[michaelpg, 2016/05/17 19:18:43]

Done.
we don't need a proxy for the pref anymore, defaultFontSize_ is redundant.
previously we used the pref to update defaultFontSize_ to update the UI, then
fontSizeIndex_ to update the pref in response to the UI.

now we use the pref to update the UI, and the UI to update the pref.

Same argument for minimum font size.

             $i18n{quickBrownFox}
           </div>
         </div>
@@ -55,8 +58,10 @@
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.serif.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
+              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>:&nbsp;
             $i18n{quickBrownFox}
           </div>
         </div>
@@ -69,8 +74,10 @@
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="{{computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.sansserif.Zyyy.value)}}">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
+              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>:&nbsp;
             $i18n{quickBrownFox}
           </div>
         </div>
@@ -83,8 +90,10 @@
             </settings-dropdown-menu>
            </div>
           <div class="list-item"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
+              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>:&nbsp;
             $i18n{quickBrownFox}
           </div>
         </div>