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

chrome/browser/resources/settings/system_page/system_page.html

Index: chrome/browser/resources/settings/system_page/system_page.html
diff --git a/chrome/browser/resources/settings/system_page/system_page.html b/chrome/browser/resources/settings/system_page/system_page.html
index bbcbd7dab66239eb54ae163ab1994142790a7d9e..142eae1c09046b90d7c70f728fe4bcb35da2f6fd 100644
--- a/chrome/browser/resources/settings/system_page/system_page.html
+++ b/chrome/browser/resources/settings/system_page/system_page.html
@@ -1,8 +1,9 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="/controls/controlled_button.html">
 <link rel="import" href="/controls/extension_controlled_indicator.html">
-<link rel="import" href="/controls/settings_checkbox.html">
+<link rel="import" href="/controls/settings_toggle_button.html">
 <link rel="import" href="/lifetime_browser_proxy.html">
 <link rel="import" href="/prefs/prefs.html">
 <link rel="import" href="/settings_shared_css.html">
@@ -11,20 +12,7 @@
 <dom-module id="settings-system-page">
   <template>
     <style include="settings-shared">
-      /* TODO(dbeam): is it worth generalizing this style? Does something like
-       * this already exist (buttons after a checkbox in the same row)? */
-      #hardware-acceleration {
-        align-items: center;
-        display: flex;
-      }
-
-      #hardware-acceleration settings-checkbox {
-        flex: 1;
-      }
-
-      .proxy-wrapper {
-        align-items: center;
-        display: flex;
+      .inherit-min-height {
         min-height: inherit;
       }
 
@@ -34,29 +22,33 @@
     </style>
     <div class="settings-box block first">
 <if expr="not is_macosx">

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

After the div on line 30 is moved (mentioned in the next comment), this <if>
should go before line 23.
Then the "block" can be removed from <div class="settings-box block first"> on
line 23.

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

see: https://codereview.chromium.org/2615613007

-      <settings-checkbox label="$i18n{backgroundAppsLabel}"
-          pref="{{prefs.background_mode.enabled}}">
-      </settings-checkbox>
+      <settings-toggle-button
+          pref="{{prefs.background_mode.enabled}}"
+          label="$i18n{backgroundAppsLabel}">
+      </settings-toggle-button>
 </if>
-      <div id="hardware-acceleration">
-        <settings-checkbox label="$i18n{hardwareAccelerationLabel}"
-            pref="{{prefs.hardware_acceleration_mode.enabled}}">
-        </settings-checkbox>
-        <template is="dom-if" if="[[shouldShowRestart_(
-            prefs.hardware_acceleration_mode.enabled.value)]]">
-          <paper-button on-tap="onRestartTap_">$i18n{restart}</paper-button>
-        </template>
+      <div class="layout horizontal center">

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

This could be moved out of the div on line 23.
Then this div would change from 
<div class="layout horizontal center">
to <div class="settings-box continuation">
That will allow this div to get the proper height and layout from settings-box.

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

see: https://codereview.chromium.org/2615613007

+        <settings-toggle-button class="flex"
+            pref="{{prefs.hardware_acceleration_mode.enabled}}"
+            label="$i18n{hardwareAccelerationLabel}">
+          <template is="dom-if" if="[[shouldShowRestart_(
+              prefs.hardware_acceleration_mode.enabled.value)]]">
+            <paper-button class="more-actions" on-tap="onRestartTap_">
+              $i18n{restart}
+            </paper-button>
+          </template>
+        </settings-toggle-button>
       </div>
     </div>
     <div class="settings-box block">
-      <div class="proxy-wrapper">
+      <div class="layout horizontal center inherit-min-height">
         <controlled-button class="primary-button" pref="[[prefs.proxy]]"
             on-tap="onChangeProxySettingsTap_">
           $i18n{changeProxySettings}
         </controlled-button>
       </div>
       <template is="dom-if" if="[[prefs.proxy.extensionId]]">
-        <div class="proxy-wrapper">
+        <div class="layout horizontal center inherit-min-height">

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

It looks like the "block" should be removed on line 43 and a </div><div
class="settings-box continuation"> added around line 50. That would allow lines
44 and 51 to simply be class="start" and remove the need for
.inherit-min-height.

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

see: https://codereview.chromium.org/2615613007

           <extension-controlled-indicator
               extension-id="[[prefs.proxy.extensionId]]"
               extension-name="[[prefs.proxy.controlledByName]]"