MD Settings: change most checkboxes to toggles (leave dialogs alone)

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
index 3032f242c18743857e53ed0ae5a6acc350a58869..3ae34bf48c0bc4748e816d0b4bfb2963a70c8958 100644
--- a/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
+++ b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
@@ -1,6 +1,6 @@
 <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="/controls/settings_toggle_button.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
@@ -36,30 +36,34 @@
 
     <h2>$i18n{textToSpeechHeading}</h2>
     <div class="settings-box first" actionable>
-      <settings-checkbox class="start" pref="{{prefs.settings.accessibility}}"
+      <settings-toggle-button class="start"
+          pref="{{prefs.settings.accessibility}}"
           label="$i18n{chromeVoxLabel}">
-      </settings-checkbox>
-      <button class="icon-external" is="paper-icon-button-light"
-          on-tap="onChromeVoxSettingsTap_"
-          hidden="[[!prefs.settings.accessibility.value]]"></button>
+        <button class="more-actions icon-external" is="paper-icon-button-light"
+            on-tap="onChromeVoxSettingsTap_"
+            hidden="[[!prefs.settings.accessibility.value]]"></button>

[dschuyler, 2017/01/05 20:25:05]

How well does this work, having a button in a toggle? (and how does it look)?

[Dan Beam, 2017/01/06 02:45:29]

I added a specific <content selector=".more-actions"> to position this in
<settings-toggle-button>.  note that I'm also adding that class here.

http://i.imgur.com/XaBPZKM.png (the RELAUNCH button)

+      </settings-toggle-button>
     </div>
     <template is="dom-if" if="[[showExperimentalFeatures_]]">
       <div class="settings-box block">
-        <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}"
+        <settings-toggle-button
+            pref="{{prefs.settings.a11y.select_to_speak}}"
             label="$i18n{selectToSpeakTitle}"
             sub-label="$i18n{selectToSpeakDescription}">
-        </settings-checkbox>
+        </settings-toggle-button>
       </div>
     </template>
 
     <h2>$i18n{displayHeading}</h2>
     <div class="settings-box block first">
-      <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>
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.high_contrast_enabled}}"
+          label="$i18n{highContrastLabel}">
+      </settings-toggle-button>
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.screen_magnifier}}"
+          label="$i18n{screenMagnifierLabel}">
+      </settings-toggle-button>
     </div>
     <div class="settings-box two-line" on-tap="onDisplayTap_" actionable>
       <div class="start">
@@ -78,23 +82,27 @@
 
     <h2>$i18n{keyboardHeading}</h2>
     <div class="settings-box block first">
-      <settings-checkbox
+      <settings-toggle-button
           pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
           label="$i18n{stickyKeysLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}"
+      </settings-toggle-button>
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.virtual_keyboard}}"
           label="$i18n{onScreenKeyboardLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}"
+      </settings-toggle-button>
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.focus_highlight}}"
           label="$i18n{focusHighlightLabel}">
-      </settings-checkbox>
-      <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}"
+      </settings-toggle-button>
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.caret_highlight}}"
           label="$i18n{caretHighlightLabel}">
-      </settings-checkbox>
+      </settings-toggle-button>
       <template is="dom-if" if="[[showExperimentalFeatures_]]">
-        <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}"
+        <settings-toggle-button
+            pref="{{prefs.settings.a11y.switch_access}}"
             label="$i18n{switchAccessLabel}">
-        </settings-checkbox>
+        </settings-toggle-button>
       </template>
     </div>
     <div class="settings-box two-line" on-tap="onKeyboardTap_" actionable>
@@ -107,10 +115,11 @@
 
     <h2>$i18n{mouseAndTouchpadHeading}</h2>
     <div class="settings-box block first">
-      <settings-checkbox label="$i18n{clickOnStopLabel}"
-          pref="{{prefs.settings.a11y.autoclick}}">
-      </settings-checkbox>
-      <div class="list-item settings-checkbox-spacer">
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.autoclick}}"
+          label="$i18n{clickOnStopLabel}">
+      </settings-toggle-button>
+      <div class="list-item settings-toggle-button-spacer">
         <div>$i18n{delayBeforeClickLabel}</div>
         <settings-dropdown-menu
             pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
@@ -118,15 +127,18 @@
             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}}"
+      <settings-toggle-button
+          pref="{{prefs.settings.touchpad.enable_tap_dragging}}"
+          label="$i18n{tapDraggingLabel}">
+      </settings-toggle-button>
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.large_cursor_enabled}}"
+          label="$i18n{largeMouseCursorLabel}">
+      </settings-toggle-button>
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.cursor_highlight}}"
           label="$i18n{cursorHighlightLabel}">
-      </settings-checkbox>
+      </settings-toggle-button>
     </div>
     <div class="settings-box two-line" on-tap="onMouseTap_" actionable>
       <div class="start">
@@ -138,9 +150,10 @@
 
     <h2>$i18n{audioHeading}</h2>
     <div class="settings-box block first">
-      <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}"
+      <settings-toggle-button
+          pref="{{prefs.settings.a11y.mono_audio}}"
           label="$i18n{monoAudioLabel}">
-      </settings-checkbox>
+      </settings-toggle-button>
     </div>
 
     <div class="settings-box two-line" on-tap="onMoreFeaturesTap_" actionable>