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

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="/controls/settings_checkbox.html">
<link rel="import" href="/i18n_setup.html">
<link rel="import" href="/route.html">
<link rel="import" href="/settings_shared_css.html">
<link rel="import" href="/settings_vars_css.html">

<dom-module id="settings-manage-a11y-page">
  <template>
    <style include="settings-shared">
      .indented {
        -webkit-margin-start: 20px;
      }

      .no-top-border {
        border-top: none;
      }

      .settings-box settings-checkbox {
        flex-grow: 1;
      }

      .list-item settings-dropdown-menu {
        -webkit-margin-start: 16px;
      }
    </style>
    <div class="settings-box row first">
      <span>
        $i18n{a11yExplanation}
        <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank">
          $i18n{learnMore}
        </a>
      </span>
    </div>

    <div class="settings-box block">
      <h2>$i18n{textToSpeechHeading}</h2>
      <div class="settings-box first indented">
        <settings-checkbox pref="{{prefs.settings.accessibility}}"
            label="$i18n{chromeVoxLabel}">
        </settings-checkbox>
        <paper-icon-button icon="cr:settings" on-tap="onChromeVoxSettingsTap_">
        </paper-icon-button>
      </div>
      <template is="dom-if" if="[[showExperimentalFeatures_]]">
        <div class="settings-box no-top-border indented">
          <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}"
              label="$i18n{selectToSpeakTitle}"
              sub-label="$i18n{selectToSpeakDescription}">
          </settings-checkbox>
        </div>
      </template>

      <h2>$i18n{displayHeading}</h2>
      <div class="settings-box block first indented">
        <settings-checkbox label="$i18n{highContrastLabel}"
            pref="{{prefs.settings.a11y.high_contrast_enabled}}">
        </settings-checkbox>
        <settings-checkbox label="$i18n{screenMagnifierLabel}"
            pref="{{prefs.settings.a11y.screen_magnifier}}">
        </settings-checkbox>
      </div>
      <div class="settings-box two-line indented" on-tap="onDisplayTap_"
          actionable>
        <iron-icon icon="settings:desktop-windows"></iron-icon>
        <div class="middle">
          <div>$i18n{displaySettingsTitle}</div>
          <div class="secondary">$i18n{displaySettingsDescription}</div>
        </div>
      </div>
      <div class="settings-box two-line indented" on-tap="onAppearanceTap_"
          actionable>
        <iron-icon icon="settings:text-format"></iron-icon>
        <div class="middle">
          <div>$i18n{appearanceSettingsTitle}</div>
          <div class="secondary">$i18n{appearanceSettingsDescription}</div>
        </div>
      </div>

      <h2>$i18n{keyboardHeading}</h2>
      <div class="settings-box block first indented">
        <settings-checkbox
            pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
            label="$i18n{stickyKeysLabel}">
        </settings-checkbox>
        <settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}"
            label="$i18n{onScreenKeyboardLabel}">
        </settings-checkbox>
        <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}"
            label="$i18n{focusHighlightLabel}">
        </settings-checkbox>
        <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}"
            label="$i18n{caretHighlightLabel}">
        </settings-checkbox>
        <template is="dom-if" if="[[showExperimentalFeatures_]]">
          <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}"
              label="$i18n{switchAccessLabel}">
          </settings-checkbox>
        </template>
      </div>
      <div class="settings-box two-line indented" on-tap="onKeyboardTap_"
          actionable>
        <iron-icon icon="settings:keyboard"></iron-icon>
        <div class="middle">
          <div>$i18n{keyboardSettingsTitle}</div>
          <div class="secondary">$i18n{keyboardSettingsDescription}</div>
        </div>
      </div>

      <h2>$i18n{mouseAndTouchpadHeading}</h2>
      <div class="settings-box block first indented">
        <settings-checkbox label="$i18n{clickOnStopLabel}"
            pref="{{prefs.settings.a11y.autoclick}}">
        </settings-checkbox>
        <div class="list-item settings-checkbox-spacer">
          <div>$i18n{delayBeforeClickLabel}</div>
          <settings-dropdown-menu
              pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
              menu-options="[[autoClickDelayOptions_]]"
              disabled="[[!prefs.settings.a11y.autoclick.value]]">
          </settings-dropdown-menu>
        </div>
        <settings-checkbox label="$i18n{tapDraggingLabel}"
            pref="{{prefs.settings.touchpad.enable_tap_dragging}}">
        </settings-checkbox>
        <settings-checkbox label="$i18n{largeMouseCursorLabel}"
            pref="{{prefs.settings.a11y.large_cursor_enabled}}">
        </settings-checkbox>
        <settings-checkbox pref="{{prefs.settings.a11y.cursor_highlight}}"
            label="$i18n{cursorHighlightLabel}">
        </settings-checkbox>
      </div>
      <div class="settings-box two-line indented" on-tap="onMouseTap_"
          actionable>
        <iron-icon icon="settings:mouse"></iron-icon>
        <div class="middle">
          <div>$i18n{mouseSettingsTitle}</div>
          <div class="secondary">$i18n{mouseSettingsDescription}</div>
          <button class="subpage-arrow" is="paper-icon-button-light"></button>
        </div>
      </div>

      <h2>$i18n{audioHeading}</h2>
      <div class="settings-box block first indented">
        <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}"
            label="$i18n{monoAudioLabel}">
        </settings-checkbox>
      </div>
    </div>

    <div class="settings-box two-line" on-tap="onMoreFeaturesTap_" actionable>
      <div class="start">
        <div>$i18n{additionalFeaturesTitle}</div>
        <div class="secondary">$i18n{a11yWebStore}</div>
      </div>
      <button class="icon-external" is="paper-icon-button-light"></button>
    </div>
  </template>
  <script src="manage_a11y_page.js"></script>
</dom-module>