Reorganize accessibility settings.

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

Index: chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
diff --git a/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..0549ada671ae155bf67e1269f56481efd838d05c
--- /dev/null
+++ b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
@@ -0,0 +1,157 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="/controls/settings_checkbox.html">
+<link rel="import" href="/route.html">

[michaelpg, 2016/07/29 22:14:20]

import /i18n_setup.html for load_time_data.js (include-what-you-use helps with
testing)

[dmazzoni, 2016/08/01 18:45:23]

Done

+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-manage-a11y-page">
+  <template>
+    <style include="settings-shared">
+      div.indented {
+        -webkit-margin-start: 20px;
+      }
+      h3 {

[michaelpg, 2016/07/29 22:14:20]

nit: blank line between rules

[dmazzoni, 2016/08/01 18:45:23]

Done

+        color: rgb(90, 90, 90);

[michaelpg, 2016/07/29 22:14:21]

Note: I asked in the bug whether this <h3> should be a common style.

[dmazzoni, 2016/08/01 18:45:23]

This definitely seems like it ought to be a heading. We should be
using more semantic HTML tags where possible.

+        font-weight: 500;
+      }
+      .settings-box iron-icon {
+        -webkit-margin-end: var(--iron-icon-spacing);
+      }
+      .settings-box settings-checkbox {
+        flex-grow: 1;
+      }
+    </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">
+      <h3>Text-to-Speech</h3>
+      <div class="settings-box first indented">
+        <settings-checkbox pref="{{prefs.settings.accessibility}}"
+          label="$i18n{chromeVoxLabel}">

[michaelpg, 2016/07/29 22:14:21]

4-space indents, throughout

[dmazzoni, 2016/08/01 18:45:23]

Done

+        </settings-checkbox>
+        <paper-icon-button icon="settings:settings" on-tap="onChromeVoxSettingsTap_">

[michaelpg, 2016/07/29 22:14:21]

wrap long lines, throughout

[dmazzoni, 2016/08/01 18:45:23]

Done

+        </paper-icon-button>
+      </div>
+      <template is="dom-if" if="[[showExperimentalFeatures_]]">
+        <div class="settings-box first indented">
+          <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}"
+            label="Select-to-speak"
+            sub-label="Hold down Search and click or drag to speak anything">
+          </settings-checkbox>
+        </div>
+      </template>
+
+      <h3>Display</h3>
+      <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="start">
+          <div>Open display device settings</div>
+          <div class="secondary">Allows you to adjust your screen resolution</div>
+        </div>
+      </div>
+      <div class="settings-box two-line indented" on-tap="onAppearanceTap_"
+          actionable>
+        <iron-icon icon="settings:text-format"></iron-icon>
+        <div class="start">
+          <div>Open appearance settings</div>
+          <div class="secondary">Customize your text size</div>
+        </div>
+      </div>
+
+      <h3>Keyboard</h3>
+      <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="start">
+          <div>Open keyboard device settings</div>
+          <div class="secondary">Allows you to adjust your keyboard repeat rate, word prediction, and more</div>
+        </div>
+      </div>
+
+      <h3>Mouse and touchpad</h3>
+      <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>
+          <select value="{{prefs.settings.a11y.autoclick_delay_ms::change}}">

[michaelpg, 2016/07/29 22:14:20]

feel like upgrading this to a settings-dropdown-menu? :-D

[dmazzoni, 2016/08/01 18:45:23]

Looks like that was done in parallel. :)

[michaelpg, 2016/08/02 17:38:29]

Oh... I reviewed that, too!

+          <option value="600">$i18n{delayBeforeClickExtremelyShort}</option>
+          <option value="800">$i18n{delayBeforeClickVeryShort}</option>
+          <option value="1000">$i18n{delayBeforeClickShort}</option>
+          <option value="2000">$i18n{delayBeforeClickLong}</option>
+          <option value="4000">$i18n{delayBeforeClickVeryLong}</option>
+          </select>
+        </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="start">
+          <div>Open mouse and touchpad device settings</div>
+          <div class="secondary">Allows you to enable/disable tap-to-click</div>
+        </div>
+      </div>
+
+      <h3>Audio</h3>
+      <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>Add additional features</div>
+        <div class="secondary">Choose from the Chrome Web Store</div>
+      </div>
+    </div>
+

[michaelpg, 2016/07/29 22:14:21]

nit: remove blank line

[dmazzoni, 2016/08/01 18:45:23]

Done

+  </template>
+

[michaelpg, 2016/07/29 22:14:20]

nit: remove blank line

[dmazzoni, 2016/08/01 18:45:23]

Done

+  <script src="manage_a11y_page.js"></script>
+</dom-module>