[MD settings] content site list toggles

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

Index: chrome/browser/resources/settings/site_settings/site_settings_category.html
diff --git a/chrome/browser/resources/settings/site_settings/site_settings_category.html b/chrome/browser/resources/settings/site_settings/site_settings_category.html
index 3bd99ed61171bc6a665189ccace392d4e4e57afb..461d972856f57d24ac58bbfbf085e8d3f9a3d038 100644
--- a/chrome/browser/resources/settings/site_settings/site_settings_category.html
+++ b/chrome/browser/resources/settings/site_settings/site_settings_category.html
@@ -1,5 +1,4 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="/settings_shared_css.html">
@@ -13,15 +12,7 @@
   <template>
     <style include="settings-shared">
       :host {
-        display: block;
-      }
-
-      .toggle-icon {
-        -webkit-margin-start: 4px;
-      }
-
-      .toggle-text {
-        -webkit-margin-start: -11px;
+        sdisplay: block;

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

typo?

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

I was testing to see if it impacted the UI if I removed it.
(then forgot to remove it).

       }
 
       site-list {
@@ -46,22 +37,24 @@
 
     <template is="dom-if" if="[[isCookiesCategory_(category)]]">
       <div class="settings-box">
-        <paper-checkbox id="sessionOnlyCheckbox" disabled="[[!categoryEnabled]]"
-            checked="{{cookiesSessionOnly_}}"
+        <div class="start">$i18n{deleteDataPostSession}</div>
+        <paper-toggle-button checked="{{cookiesSessionOnly_}}"
+            disabled="[[!categoryEnabled]]" id="sessionOnlyCheckbox"

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

Nit (optional): Maybe put the |id| first? Not a strict rule, but I find it
helpful to visually parse HTML code when the IDs are always first (then
"class=", then anything else).

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

I'm on board with getting this in a style guide. My 
preference is to go by the style guide, or alphabetical
if the style guide isn't specific. E.g. we make exceptions
for is:, behavior:, and properties: in .js files.
Since this isn't yet in a guide (afaik) it's 'correct'
being alphabetical (imo).

Let's bring this up to others outside of this CL and
get it in a guide either way (and maybe add a presubmit
check) :)

             on-change="onChangePermissionControl_">
-          <div>$i18n{deleteDataPostSession}</div>
-        </paper-checkbox>
+        </paper-toggle-button>
       </div>
     </template>
 
     <template is="dom-if" if="[[isFlashCategory_(category)]]">
       <div class="settings-box two-line">
-        <paper-checkbox id="flashAskCheckbox" checked="{{flashAskFirst_}}"
-            on-change="onChangePermissionControl_"
-            disabled="[[!categoryEnabled]]">
-          <div>$i18n{siteSettingsFlashAskBefore}</div>
+        <div class="start">
+          $i18n{siteSettingsFlashAskBefore}
           <div class="secondary">$i18n{siteSettingsFlashAskBeforeSubtitle}</div>
-        </paper-checkbox>
+        </div>
+        <paper-toggle-button checked="{{flashAskFirst_}}"
+            disabled="[[!categoryEnabled]]" id="flashAskCheckbox"
+            on-change="onChangePermissionControl_">
+        </paper-toggle-button>
       </div>
     </template>