MD Settings: Convert spell-check from checkbox to toggle.

chrome/browser/resources/settings/languages_page/languages_page.html

Index: chrome/browser/resources/settings/languages_page/languages_page.html
diff --git a/chrome/browser/resources/settings/languages_page/languages_page.html b/chrome/browser/resources/settings/languages_page/languages_page.html
index 762022299186c1f6742241615d5edbf08104afee..8c5152eb37bcea4db12cd0134a1441c8d9741b2b 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.html
+++ b/chrome/browser/resources/settings/languages_page/languages_page.html
@@ -66,6 +66,11 @@
       #offerTranslations:focus {
         background-color: transparent;
       }
+
+      .list-item[actionable][disabled] {

[Dan Beam, 2017/02/09 20:11:18]

i don't think this actually matches anything

did you actually test this code?

[scottchen, 2017/02/09 21:30:13]

Oops, this was left over from patch#1 where I tried to show the approach using
"disabled" attribute.

+        cursor: initial;
+        pointer-events: none;
+      }
     </style>
     <settings-languages languages="{{languages}}" prefs="{{prefs}}"
         language-helper="{{languageHelper}}">
@@ -202,14 +207,14 @@
         <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]">
           <div class="list-frame vertical-list">
             <template is="dom-repeat" items="[[languages.enabled]]">
-              <div class="list-item">
-                <paper-checkbox
-                    checked="[[item.spellCheckEnabled]]"
-                    on-change="onSpellCheckChange_"
-                    disabled$="[[!item.language.supportsSpellcheck]]">
-                  [[item.language.displayName]]
-                </paper-checkbox>
-              </label>
+              <div class="list-item" on-tap="onSpellCheckChange_"
+                  actionable$="[[item.language.supportsSpellcheck]]">
+                <div class="start">[[item.language.displayName]]</div>
+                <paper-toggle-button
+                    disabled="[[!item.language.supportsSpellcheck]]"
+                    checked="[[item.spellCheckEnabled]]">
+                </paper-toggle-button>
+              </div>
             </template>
             <div class="list-item">
               <a is="action-link" class="list-button"