[MD settings] clickable toggle labels on category default toggles

chrome/browser/resources/settings/site_settings/category_default_setting.html

Index: chrome/browser/resources/settings/site_settings/category_default_setting.html
diff --git a/chrome/browser/resources/settings/site_settings/category_default_setting.html b/chrome/browser/resources/settings/site_settings/category_default_setting.html
index 19cb12a1d0497f630c4fabdad94e19128ab609ff..647979afa692cb6bac3c30b9bdf83b72f32a23d0 100644
--- a/chrome/browser/resources/settings/site_settings/category_default_setting.html
+++ b/chrome/browser/resources/settings/site_settings/category_default_setting.html
@@ -9,24 +9,19 @@
 <dom-module id="category-default-setting">
   <template>
     <style include="settings-shared"></style>
-    <div class="settings-box first">
-      <settings-toggle-button id="toggle" pref="{{controlParams_}}"
-          class="start" label="[[sliderDescription_]]"
-          disabled$="[[isToggleDisabled_(category)]]">
-      </settings-toggle-button>
-    </div>
+    <settings-toggle-button id="toggle"
+        class="settings-box first"

[stevenjb, 2017/03/31 23:28:14]

Interesting. I guess since settings-toggle-button is kind of an uber control,
designed to span an entire row, putting the layout here instead of in a
surrounding div makes sense (and obviously saves a div, for what that's worth).
It hurts my brain a little, but seems fine?

[dschuyler, 2017/04/01 00:09:38]

It should be good. You're right, the whole row is a toggle.

+        pref="{{controlParams_}}" label="[[optionLabel_]]"
+        sub-label="[[optionDescription]]"
+        disabled$="[[isToggleDisabled_(category)]]">

[stevenjb, 2017/03/31 23:28:14]

I forget, do we need to explicitly set a11y properties for
settings-toggle-button?

[dschuyler, 2017/04/01 00:09:38]

Iiuc, it's implicit, handled by settings_toggle_button.html internally.

+    </settings-toggle-button>
     <template is="dom-if" if="[[subOptionLabel]]">
-      <div class$="settings-box [[subOptionClass_(subOptionSecondary)]]">
-        <div class="start">
-          [[subOptionLabel]]
-          <div class="secondary" hidden$="[[!subOptionSecondary]]">
-            [[subOptionSecondary]]
-          </div>
-        </div>
-        <settings-toggle-button disabled$="[[!controlParams_.value]]"
-            id="subOptionToggle" pref="{{subControlParams_}}">
-        </settings-toggle-button>
-      </div>
+      <settings-toggle-button id="subOptionToggle"
+          class="settings-box continuation"
+          pref="{{subControlParams_}}"
+          label="[[subOptionLabel]]" sub-label="[[subOptionDescription]]"
+          disabled$="[[!controlParams_.value]]">
+      </settings-toggle-button>
     </template>
   </template>
   <script src="category_default_setting.js"></script>