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 5fce820d42a7a67db4f087bbe76b2bb353bff352..543fd0f8d81179a7728d2f251c9ddd319488ef54 100644
--- a/chrome/browser/resources/settings/a11y_page/a11y_page.html
+++ b/chrome/browser/resources/settings/a11y_page/a11y_page.html
@@ -1,95 +1,55 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="/i18n_setup.html">
+<link rel="import" href="/settings_shared_css.html">
+
 <if expr="chromeos">
-<link rel="import" href="/controls/settings_checkbox.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-toggle-button/paper-toggle-button.html">
+<link rel="import" href="/a11y_page/manage_a11y_page.html">
+<link rel="import" href="/settings_page/settings_animated_pages.html">
+<link rel="import" href="/settings_page/settings_subpage.html">
 </if>
-<link rel="import" href="/settings_shared_css.html">
-<link rel="import" href="/i18n_setup.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>
-        <settings-dropdown-menu
-            pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
-            menu-options="[[autoClickDelayOptions_]]" no-label-float>
-        </settings-dropdown-menu>
-      </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 first">
+          <div class="start">
+            $i18n{optionsInMenuLabel}
+          </div>
+          <paper-toggle-button id="optionsInMenuToggle"
+              checked="{{prefs.settings.a11y.enable_menu.value}}">
+          </paper-toggle-button>
+        </div>
+        <div class="settings-box">
+          <paper-button class="primary-button"
+              on-tap="onManageAccessibilityFeaturesTap_">
+            $i18n{manageAccessibilityFeatures}
+          </paper-button>
+        </div>
+      </neon-animatable>
+      <template is="dom-if" name="manage-a11y">
+        <settings-subpage page-title="$i18n{manageAccessibilityFeatures}">
+          <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>