[MD settings] content site list toggles

chrome/browser/resources/settings/controls/settings_toggle_button.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="/controls/settings_boolean_control_behavior.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-toggle-button">
+  <template>
+    <style include="settings-shared">
+      #outerRow {
+        align-items: center;
+        display: flex;
+        min-height: var(--settings-row-two-line-min-height);
+        width: 100%;
+      }
+
+      #outerRow[noSubLabel] {
+        min-height: var(--settings-row-min-height);
+      }
+
+      paper-toggle-button:not([checked]) .secondary {
+        @apply(--settings-secondary-unchecked);
+      }
+
+      cr-policy-pref-indicator {
+        -webkit-margin-end: var(--checkbox-spacing);
+      }
+    </style>
+    <div id="outerRow" noSubLabel$="[[!subLabel]]">
+      <div class="flex">
+        <div>[[label]]</div>
+        <div class="secondary">[[subLabel]]</div>

[dpapad, 2016/10/20 21:47:12]

Should this be hidden if subLabel does not exist? Per comment in the new
behavior file, this is an optional field.

[dschuyler, 2016/10/20 22:33:38]

I believe there is no need. I suspect, but haven't proven, that
there would be more overhead trying to hide this div based on a
bound variable than just having an empty div. 

e.g. is there enough runtime difference between these two to add
the second binding (specifically because it's the highly optimized
<div> as a special case - if it were a different tag, I'd have a 
different opinion):

<div class="secondary"></div>

vs.

<div class="secondary" hidden></div>

[dpapad, 2016/10/20 22:49:26]

SG, as long as it looks visually correct. My concern was that an empty div might
still take up some space (depneding on its styling, margin/border etc), but
probably not the case here.

+      </div>
+      <template is="dom-if" if="[[pref.policySource]]">
+        <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
+      </template>
+      <paper-toggle-button id="control" checked="{{checked}}"
+          disabled="[[controlDisabled_(disabled, pref)]]">
+      </paper-toggle-button>
+    </div>
+  </template>
+  <script src="settings_toggle_button.js"></script>
+</dom-module>