Reorganize accessibility settings.

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

Index: chrome/browser/resources/settings/a11y_page/a11y_page.html
diff --git a/chrome/browser/resources/settings/a11y_page/a11y_page.html b/chrome/browser/resources/settings/a11y_page/a11y_page.html
index 7e1e34778ad6dc79b6d13da7a0d225a357f00335..e9d2ddb991f1c27841757ef52b1d1513608dfb5c 100644
--- a/chrome/browser/resources/settings/a11y_page/a11y_page.html
+++ b/chrome/browser/resources/settings/a11y_page/a11y_page.html
@@ -1,97 +1,52 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <if expr="chromeos">

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

this <if> should be below the rest of the imports, separated by whitespace,
e.g.:
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/basic_...

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

Done

-<link rel="import" href="/controls/settings_checkbox.html">
+<link rel="import" href="/a11y_page/manage_a11y_page.html">
 </if>
+<link rel="import" href="/settings_page/settings_animated_pages.html">

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

this & settings_subpage.html should also be in the <if expr="chromeos">

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

Done

+<link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-a11y-page">
   <template>
     <style include="settings-shared"></style>
 <if expr="chromeos">
-    <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">
-      <settings-checkbox label="$i18n{optionsInMenuLabel}"
-          pref="{{prefs.settings.a11y.enable_menu}}">
-      </settings-checkbox>
-      <settings-checkbox label="$i18n{largeMouseCursorLabel}"
-          pref="{{prefs.settings.a11y.large_cursor_enabled}}">
-      </settings-checkbox>
-      <settings-checkbox label="$i18n{highContrastLabel}"
-          pref="{{prefs.settings.a11y.high_contrast_enabled}}">
-      </settings-checkbox>
-      <settings-checkbox
-          pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
-          label="$i18n{stickyKeysLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.accessibility}}"
-          label="$i18n{chromeVoxLabel}">
-      </settings-checkbox>
-      <settings-checkbox label="$i18n{screenMagnifierLabel}"
-          pref="{{prefs.settings.a11y.screen_magnifier}}">
-      </settings-checkbox>
-      <settings-checkbox label="$i18n{tapDraggingLabel}"
-          pref="{{prefs.settings.touchpad.enable_tap_dragging}}">
-      </settings-checkbox>
-      <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}}">
-          <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 pref="{{prefs.settings.a11y.virtual_keyboard}}"
-          label="$i18n{onScreenKeyboardLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}"
-          label="$i18n{monoAudioLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}"
-          label="$i18n{caretHighlightLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.a11y.cursor_highlight}}"
-          label="$i18n{cursorHighlightLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}"
-          label="$i18n{focusHighlightLabel}">
-      </settings-checkbox>
-      <template is="dom-if" if="[[showExperimentalFeatures_]]">
-        <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}"
-            label="$i18n{selectToSpeakLabel}">
-        </settings-checkbox>
-        <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}"
-            label="$i18n{switchAccessLabel}">
-        </settings-checkbox>
+    <settings-animated-pages id="pages" current-route="{{currentRoute}}"
+        section="a11y">
+      <neon-animatable id="main">
+        <div class="settings-box">
+          <div class="start">
+            $i18n{optionsInMenuLabel}
+          </div>
+          <paper-toggle-button id="optionsInMenuToggle"

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

import paper-toggle-button (cros only)

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

Done

+              checked="{{prefs.settings.a11y.enable_menu}}">

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

it looks like this can be controlled by policy:
https://cs.chromium.org/chromium/src/chrome/browser/policy/configuration_poli...

if that's the case, we'll need to support UI for that, and disabling the
control. Look at the stuff we have for settings-checkbox -- if we're going to
use paper-toggle-button for prefs, we should probably make a similar
settings-toggle-button. Dan, agree?

That's something we would do separately, either before this CL or after.

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

.value

<settings-checkbox> is a control that takes the pref object. here, you just want
to bind to the boolean value itself.

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

Done

+          </paper-toggle-button>
+        </div>
+        <div class="settings-box">
+          <paper-button class="primary-button"
+                        on-tap="onManageAccessibilityFeaturesTap_">

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

nit: 4-space indent from previous line, don't align

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

Done

+            Manage accessibility features
+          </paper-button>
+        </div>
+      </neon-animatable>
+      <template is="dom-if" name="manage-a11y">
+        <settings-subpage page-title="Manage Accessibility Features">
+          <settings-manage-a11y-page prefs="{{prefs}}">
+          </settings-manage-a11y-page>
+        </settings-subpage>
       </template>
-    </div>
+    </settings-animated-pages>
 </if>
 
-<if expr="chromeos">
-    <div class="settings-box">
-</if>
 <if expr="not chromeos">
     <div class="settings-box first">
-</if>
       <paper-button class="primary-button" on-tap="onMoreFeaturesTap_">
         $i18n{moreFeaturesLink}
       </paper-button>
     </div>
+</if>
+
   </template>
   <script src="a11y_page.js"></script>
 </dom-module>