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

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

 <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">
 <link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-manage-a11y-page">
   <template>
     <style include="settings-shared">
       h2 {
         -webkit-padding-start: var(--settings-box-row-padding);
@@ skipping 15 matching lines @@
       <span>
         $i18n{a11yExplanation}
         <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank">
           $i18n{learnMore}
         </a>
       </span>
     </div>
 
     <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">
         $i18n{displaySettingsTitle}
         <div class="secondary">$i18n{displaySettingsDescription}</div>
       </div>
       <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
     <div class="settings-box two-line" on-tap="onAppearanceTap_" actionable>
       <div class="start">
         $i18n{appearanceSettingsTitle}
         <div class="secondary">$i18n{appearanceSettingsDescription}</div>
       </div>
       <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
 
     <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>
       <div class="start">
         $i18n{keyboardSettingsTitle}
         <div class="secondary">$i18n{keyboardSettingsDescription}</div>
       </div>
       <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
 
     <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}}"
             menu-options="[[autoClickDelayOptions_]]"
             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">
         $i18n{mouseSettingsTitle}
         <div class="secondary">$i18n{mouseSettingsDescription}</div>
       </div>
       <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
 
     <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>
       <div class="start">
         $i18n{additionalFeaturesTitle}
         <div class="secondary">$i18n{a11yWebStore}</div>
       </div>
       <button class="icon-external" is="paper-icon-button-light"></button>
     </div>
   </template>
   <script src="manage_a11y_page.js"></script>
 </dom-module>