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="/appearance_page/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 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_(
              prefs.webkit.webprefs.minimum_font_size.value,
              prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
        <span>[[prefs.webkit.webprefs.minimum_font_size.value]]</span>
        : $i18n{quickBrownFox}
      </div>
      <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"
                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)]]">
            <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)]]">
            <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)}}">
            <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 class="list-item"
              style$="[[computeStyle_(
                  prefs.webkit.webprefs.default_fixed_font_size.value,
                  prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]">
            <span>
              [[prefs.webkit.webprefs.default_font_size.value]]:
              $i18n{quickBrownFox}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="settings-box two-line" id="advancedButton"
        on-tap="openAdvancedExtension_" actionable>
      <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>