| OLD | NEW |
| 1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
| 2 <link rel="import" href="/controls/settings_checkbox.html"> | 2 <link rel="import" href="/controls/settings_checkbox.html"> |
| 3 <link rel="import" href="/i18n_setup.html"> | 3 <link rel="import" href="/i18n_setup.html"> |
| 4 <link rel="import" href="/route.html"> | 4 <link rel="import" href="/route.html"> |
| 5 <link rel="import" href="/settings_shared_css.html"> | 5 <link rel="import" href="/settings_shared_css.html"> |
| 6 <link rel="import" href="/settings_vars_css.html"> | 6 <link rel="import" href="/settings_vars_css.html"> |
| 7 | 7 |
| 8 <dom-module id="settings-manage-a11y-page"> | 8 <dom-module id="settings-manage-a11y-page"> |
| 9 <template> | 9 <template> |
| 10 <style include="settings-shared"> | 10 <style include="settings-shared"> |
| 11 .indented { | 11 .indented { |
| 12 -webkit-margin-start: 20px; | 12 -webkit-margin-start: 20px; |
| 13 } | 13 } |
| 14 | 14 |
| 15 .no-top-border { | 15 .no-top-border { |
| 16 border-top: none; | 16 border-top: none; |
| 17 } | 17 } |
| 18 | 18 |
| 19 h3 { | |
| 20 color: var(--settings-nav-grey); | |
| 21 font-weight: 500; | |
| 22 } | |
| 23 | |
| 24 .settings-box iron-icon { | 19 .settings-box iron-icon { |
| 25 -webkit-margin-end: var(--iron-icon-spacing); | 20 -webkit-margin-end: var(--iron-icon-spacing); |
| 26 } | 21 } |
| 27 | 22 |
| 28 .settings-box settings-checkbox { | 23 .settings-box settings-checkbox { |
| 29 flex-grow: 1; | 24 flex-grow: 1; |
| 30 } | 25 } |
| 26 |
| 27 .list-item settings-dropdown-menu { |
| 28 -webkit-margin-start: 16px; |
| 29 } |
| 31 </style> | 30 </style> |
| 32 <div class="settings-box row first"> | 31 <div class="settings-box row first"> |
| 33 <span> | 32 <span> |
| 34 $i18n{a11yExplanation} | 33 $i18n{a11yExplanation} |
| 35 <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank"> | 34 <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank"> |
| 36 $i18n{learnMore} | 35 $i18n{learnMore} |
| 37 </a> | 36 </a> |
| 38 </span> | 37 </span> |
| 39 </div> | 38 </div> |
| 40 | 39 |
| 41 <div class="settings-box block"> | 40 <div class="settings-box block"> |
| 42 <h3>$i18n{textToSpeechHeading}</h3> | 41 <h2>$i18n{textToSpeechHeading}</h2> |
| 43 <div class="settings-box first indented"> | 42 <div class="settings-box first indented"> |
| 44 <settings-checkbox pref="{{prefs.settings.accessibility}}" | 43 <settings-checkbox pref="{{prefs.settings.accessibility}}" |
| 45 label="$i18n{chromeVoxLabel}"> | 44 label="$i18n{chromeVoxLabel}"> |
| 46 </settings-checkbox> | 45 </settings-checkbox> |
| 47 <paper-icon-button icon="cr:settings" on-tap="onChromeVoxSettingsTap_"> | 46 <paper-icon-button icon="cr:settings" on-tap="onChromeVoxSettingsTap_"> |
| 48 </paper-icon-button> | 47 </paper-icon-button> |
| 49 </div> | 48 </div> |
| 50 <template is="dom-if" if="[[showExperimentalFeatures_]]"> | 49 <template is="dom-if" if="[[showExperimentalFeatures_]]"> |
| 51 <div class="settings-box no-top-border indented"> | 50 <div class="settings-box no-top-border indented"> |
| 52 <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}" | 51 <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}" |
| 53 label="$i18n{selectToSpeakTitle}" | 52 label="$i18n{selectToSpeakTitle}" |
| 54 sub-label="$i18n{selectToSpeakDescription}"> | 53 sub-label="$i18n{selectToSpeakDescription}"> |
| 55 </settings-checkbox> | 54 </settings-checkbox> |
| 56 </div> | 55 </div> |
| 57 </template> | 56 </template> |
| 58 | 57 |
| 59 <h3>$i18n{displayHeading}</h3> | 58 <h2>$i18n{displayHeading}</h2> |
| 60 <div class="settings-box block first indented"> | 59 <div class="settings-box block first indented"> |
| 61 <settings-checkbox label="$i18n{highContrastLabel}" | 60 <settings-checkbox label="$i18n{highContrastLabel}" |
| 62 pref="{{prefs.settings.a11y.high_contrast_enabled}}"> | 61 pref="{{prefs.settings.a11y.high_contrast_enabled}}"> |
| 63 </settings-checkbox> | 62 </settings-checkbox> |
| 64 <settings-checkbox label="$i18n{screenMagnifierLabel}" | 63 <settings-checkbox label="$i18n{screenMagnifierLabel}" |
| 65 pref="{{prefs.settings.a11y.screen_magnifier}}"> | 64 pref="{{prefs.settings.a11y.screen_magnifier}}"> |
| 66 </settings-checkbox> | 65 </settings-checkbox> |
| 67 </div> | 66 </div> |
| 68 <div class="settings-box two-line indented" on-tap="onDisplayTap_" | 67 <div class="settings-box two-line indented" on-tap="onDisplayTap_" |
| 69 actionable> | 68 actionable> |
| 70 <iron-icon icon="settings:desktop-windows"></iron-icon> | 69 <iron-icon icon="settings:desktop-windows"></iron-icon> |
| 71 <div class="start"> | 70 <div class="start"> |
| 72 <div>$i18n{displaySettingsTitle}</div> | 71 <div>$i18n{displaySettingsTitle}</div> |
| 73 <div class="secondary">$i18n{displaySettingsDescription}</div> | 72 <div class="secondary">$i18n{displaySettingsDescription}</div> |
| 74 </div> | 73 </div> |
| 75 </div> | 74 </div> |
| 76 <div class="settings-box two-line indented" on-tap="onAppearanceTap_" | 75 <div class="settings-box two-line indented" on-tap="onAppearanceTap_" |
| 77 actionable> | 76 actionable> |
| 78 <iron-icon icon="settings:text-format"></iron-icon> | 77 <iron-icon icon="settings:text-format"></iron-icon> |
| 79 <div class="start"> | 78 <div class="start"> |
| 80 <div>$i18n{appearanceSettingsTitle}</div> | 79 <div>$i18n{appearanceSettingsTitle}</div> |
| 81 <div class="secondary">$i18n{appearanceSettingsDescription}</div> | 80 <div class="secondary">$i18n{appearanceSettingsDescription}</div> |
| 82 </div> | 81 </div> |
| 83 </div> | 82 </div> |
| 84 | 83 |
| 85 <h3>$i18n{keyboardHeading}</h3> | 84 <h2>$i18n{keyboardHeading}</h2> |
| 86 <div class="settings-box block first indented"> | 85 <div class="settings-box block first indented"> |
| 87 <settings-checkbox | 86 <settings-checkbox |
| 88 pref="{{prefs.settings.a11y.sticky_keys_enabled}}" | 87 pref="{{prefs.settings.a11y.sticky_keys_enabled}}" |
| 89 label="$i18n{stickyKeysLabel}"> | 88 label="$i18n{stickyKeysLabel}"> |
| 90 </settings-checkbox> | 89 </settings-checkbox> |
| 91 <settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}" | 90 <settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}" |
| 92 label="$i18n{onScreenKeyboardLabel}"> | 91 label="$i18n{onScreenKeyboardLabel}"> |
| 93 </settings-checkbox> | 92 </settings-checkbox> |
| 94 <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}" | 93 <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}" |
| 95 label="$i18n{focusHighlightLabel}"> | 94 label="$i18n{focusHighlightLabel}"> |
| 96 </settings-checkbox> | 95 </settings-checkbox> |
| 97 <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}" | 96 <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}" |
| 98 label="$i18n{caretHighlightLabel}"> | 97 label="$i18n{caretHighlightLabel}"> |
| 99 </settings-checkbox> | 98 </settings-checkbox> |
| 100 <template is="dom-if" if="[[showExperimentalFeatures_]]"> | 99 <template is="dom-if" if="[[showExperimentalFeatures_]]"> |
| 101 <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}" | 100 <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}" |
| 102 label="$i18n{switchAccessLabel}"> | 101 label="$i18n{switchAccessLabel}"> |
| 103 </settings-checkbox> | 102 </settings-checkbox> |
| 104 </template> | 103 </template> |
| 105 </div> | 104 </div> |
| 106 <div class="settings-box two-line indented" on-tap="onKeyboardTap_" | 105 <div class="settings-box two-line indented" on-tap="onKeyboardTap_" |
| 107 actionable> | 106 actionable> |
| 108 <iron-icon icon="settings:keyboard"></iron-icon> | 107 <iron-icon icon="settings:keyboard"></iron-icon> |
| 109 <div class="start"> | 108 <div class="start"> |
| 110 <div>$i18n{keyboardSettingsTitle}</div> | 109 <div>$i18n{keyboardSettingsTitle}</div> |
| 111 <div class="secondary">$i18n{keyboardSettingsDescription}</div> | 110 <div class="secondary">$i18n{keyboardSettingsDescription}</div> |
| 112 </div> | 111 </div> |
| 113 </div> | 112 </div> |
| 114 | 113 |
| 115 <h3>$i18n{mouseAndTouchpadHeading}</h3> | 114 <h2>$i18n{mouseAndTouchpadHeading}</h2> |
| 116 <div class="settings-box block first indented"> | 115 <div class="settings-box block first indented"> |
| 117 <settings-checkbox label="$i18n{clickOnStopLabel}" | 116 <settings-checkbox label="$i18n{clickOnStopLabel}" |
| 118 pref="{{prefs.settings.a11y.autoclick}}"> | 117 pref="{{prefs.settings.a11y.autoclick}}"> |
| 119 </settings-checkbox> | 118 </settings-checkbox> |
| 120 <div class="list-item settings-checkbox-spacer"> | 119 <div class="list-item settings-checkbox-spacer"> |
| 121 <div>$i18n{delayBeforeClickLabel}</div> | 120 <div>$i18n{delayBeforeClickLabel}</div> |
| 122 <settings-dropdown-menu | 121 <settings-dropdown-menu |
| 123 pref="{{prefs.settings.a11y.autoclick_delay_ms}}" | 122 pref="{{prefs.settings.a11y.autoclick_delay_ms}}" |
| 124 menu-options="[[autoClickDelayOptions_]]"> | 123 menu-options="[[autoClickDelayOptions_]]"> |
| 125 </settings-dropdown-menu> | 124 </settings-dropdown-menu> |
| (...skipping 10 matching lines...) Expand all Loading... |
| 136 </div> | 135 </div> |
| 137 <div class="settings-box two-line indented" on-tap="onMouseTap_" | 136 <div class="settings-box two-line indented" on-tap="onMouseTap_" |
| 138 actionable> | 137 actionable> |
| 139 <iron-icon icon="settings:mouse"></iron-icon> | 138 <iron-icon icon="settings:mouse"></iron-icon> |
| 140 <div class="start"> | 139 <div class="start"> |
| 141 <div>$i18n{mouseSettingsTitle}</div> | 140 <div>$i18n{mouseSettingsTitle}</div> |
| 142 <div class="secondary">$i18n{mouseSettingsDescription}</div> | 141 <div class="secondary">$i18n{mouseSettingsDescription}</div> |
| 143 </div> | 142 </div> |
| 144 </div> | 143 </div> |
| 145 | 144 |
| 146 <h3>$i18n{audioHeading}</h3> | 145 <h2>$i18n{audioHeading}</h2> |
| 147 <div class="settings-box block first indented"> | 146 <div class="settings-box block first indented"> |
| 148 <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}" | 147 <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}" |
| 149 label="$i18n{monoAudioLabel}"> | 148 label="$i18n{monoAudioLabel}"> |
| 150 </settings-checkbox> | 149 </settings-checkbox> |
| 151 </div> | 150 </div> |
| 152 </div> | 151 </div> |
| 153 | 152 |
| 154 <div class="settings-box two-line" on-tap="onMoreFeaturesTap_" actionable> | 153 <div class="settings-box two-line" on-tap="onMoreFeaturesTap_" actionable> |
| 155 <div class="start"> | 154 <div class="start"> |
| 156 <div>$i18n{additionalFeaturesTitle}</div> | 155 <div>$i18n{additionalFeaturesTitle}</div> |
| 157 <div class="secondary">$i18n{additionalFeaturesDescription}</div> | 156 <div class="secondary">$i18n{additionalFeaturesDescription}</div> |
| 158 </div> | 157 </div> |
| 159 </div> | 158 </div> |
| 160 </template> | 159 </template> |
| 161 <script src="manage_a11y_page.js"></script> | 160 <script src="manage_a11y_page.js"></script> |
| 162 </dom-module> | 161 </dom-module> |
| OLD | NEW |