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

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

 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.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-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
@@ skipping 48 matching lines @@
       }
 
       paper-checkbox.dropdown-item {
         --checkbox-margin-start: 0;
       }
 
       #uiLanguageItem:focus,
       #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}}">
     </settings-languages>
     <settings-animated-pages id="pages" section="languages">
       <neon-animatable route-path="default">
         <div class$="settings-box first [[getLanguageListTwoLine_()]]"
             actionable on-tap="toggleExpandButton_">
           <div class="start">
             <div>$i18n{languagesListTitle}</div>
@@ skipping 116 matching lines @@
             <div>$i18n{spellCheckListTitle}</div>
             <div class="secondary">[[spellCheckSecondaryText_]]</div>
           </div>
           <cr-expand-button expanded="{{spellCheckOpened_}}"
               alt="$i18n{spellCheckExpandA11yLabel}">
           </cr-expand-button>
         </div>
         <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"
                   on-tap="onEditDictionaryTap_">
                 $i18n{manageSpellCheck}
               </a>
             </div>
           </div>
         </iron-collapse>
 </if>
@@ skipping 67 matching lines @@
 </if>
     </settings-animated-pages>
     <template is="dom-if" if="[[showAddLanguagesDialog_]]" restamp>
       <settings-add-languages-dialog languages="{{languages}}"
           language-helper="[[languageHelper]]">
       </settings-add-languages-dialog>
     </template>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>