chrome/browser/resources/settings/a11y_page/captions_subpage.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.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="../controls/settings_slider.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-captions">
  <template>
    <style include="cr-shared-style settings-shared">
      .preview-box {
        all: initial;
        align-items: center;
        background-image:
          url(chrome://theme/IDR_ACCESSIBILITY_CAPTIONS_PREVIEW_BACKGROUND);
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        margin: 0 var(--cr-section-padding) var(--cr-section-padding);
        min-height: 112px;
        padding: 20px;
        text-align: center;
      }
    </style>
    <div class="cr-row first">
      <h2>$i18n{captionsPreview}</h2>
    </div>
    <div class="preview-box">
      <span style="
          font-size:[[prefs.accessibility.captions.text_size.value]];
          font-family:[[getFontFamily_(
              prefs.accessibility.captions.text_font.value)]];
          background-color: [[computeBackgroundColor_(
              prefs.accessibility.captions.background_opacity.value,
              prefs.accessibility.captions.background_color.value)]];
          color: [[computeTextColor_(
              prefs.accessibility.captions.text_opacity.value,
              prefs.accessibility.captions.text_color.value)]];
          text-shadow: [[prefs.accessibility.captions.text_shadow.value]];
          padding: [[computePadding_(
              prefs.accessibility.captions.text_size.value)]]">
        $i18n{quickBrownFox}
      </span>
    </div>
    <div class="cr-row continuation">
      <h2 class="start">$i18n{captionsSettings}</h2>
    </div>
    <div class="list-frame">
      <div class="list-item underbar first">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextSize}
        </div>
        <settings-dropdown-menu id="captionsTextSize"
            label="$i18n{captionsTextSize}"
            pref="{{prefs.accessibility.captions.text_size}}"
            menu-options="[[textSizeOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextFont}
        </div>
        <settings-dropdown-menu id="captionsTextFont"
            label="$i18n{captionsTextFont}"
            pref="{{prefs.accessibility.captions.text_font}}"
            menu-options="[[textFontOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextColor}
        </div>
        <settings-dropdown-menu id="captionsTextColor"
            label="$i18n{captionsTextColor}"
            pref="{{prefs.accessibility.captions.text_color}}"
            menu-options="[[colorOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextOpacity}
        </div>
        <settings-dropdown-menu id="captionsTextOpacity"
            label="$i18n{captionsTextOpacity}"
            pref="{{prefs.accessibility.captions.text_opacity}}"
            menu-options="[[textOpacityOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsTextShadow}
        </div>
        <settings-dropdown-menu id="captionsTextShadow"
            label="$i18n{captionsTextShadow}"
            pref="{{prefs.accessibility.captions.text_shadow}}"
            menu-options="[[textShadowOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item underbar">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsBackgroundColor}
        </div>
        <settings-dropdown-menu id="captionsBackgroundColor"
            label="$i18n{captionsBackgroundColor}"
            pref="{{prefs.accessibility.captions.background_color}}"
            menu-options="[[colorOptions_]]">
        </settings-dropdown-menu>
      </div>
      <div class="list-item">
        <div class="start cr-padded-text" aria-hidden="true">
          $i18n{captionsBackgroundOpacity}
        </div>
        <settings-dropdown-menu id="captionsBackgroundOpacity"
            label="$i18n{captionsBackgroundOpacity}"
            pref="{{prefs.accessibility.captions.background_opacity}}"
            menu-options="[[backgroundOpacityOptions_]]">
        </settings-dropdown-menu>
      </div>
    </div>
  </template>
  <script src="captions_subpage.js"></script>
</dom-module>