MD Settings: Update spell check section to spec

chrome/browser/resources/settings/languages_page/languages_page.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/iron-icon/iron-icon.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-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="language_detail_page.html">
 <link rel="import" href="languages.html">
 <link rel="import" href="manage_languages_page.html">
 
@@ skipping 99 matching lines @@
             <div>$i18n{spellCheckListTitle}</div>
             <div class="secondary">
               [[getSpellCheckSecondaryText_(languages.enabled.*)]]
             </div>
           </div>
           <cr-expand-button expanded="{{spellCheckOpened_}}">
           </cr-expand-button>
         </div>
         <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]">
           <div class="list-frame vertical-list">
-            <template is="dom-repeat"
-                items="[[spellCheckLanguages_(languages.enabled.*)]]">
+            <template is="dom-repeat" items="[[languages.enabled]]">
               <div class="list-item">
-                <div class="start">
-                  <paper-checkbox
+                <label class="start">
+                  <span disabled$="[[!item.language.supportsSpellcheck]]">
+                    [[item.language.displayName]]
+                  </span>
+                  <paper-toggle-button
                       checked="[[item.spellCheckEnabled]]"
-                      on-change="onSpellCheckChange_">
-                    [[item.language.displayName]]
-                  </paper-checkbox>
-                </div>
-                <paper-icon-button icon="cr:settings"
-                    on-tap="onShowLanguageDetailTap_"></paper-icon-button>
+                      on-change="onSpellCheckChange_"
+                      disabled$="[[!item.language.supportsSpellcheck]]">
+                  </paper-toggle-button>
+                </label>

[dschuyler, 2016/06/10 21:49:46]

.start in the .settings-box is referring to the 
'stuff on the left' in LTR (or on the right in RTL).
I'm hoping to keep that in the lists.

To be more consistent with the settings-box .start
Please make the .start be expanding flex part and move
the toggle button outside of start. e.g.
<label class="start">
  <span ...
  </span>
</label>
<paper-toggle-button ...
</paper-toggle-button>

[michaelpg, 2016/06/20 19:55:37]

alright, i moved the paper-toggle-button outside the <label>. that required
dynamically setting the label ID.

               </div>
             </template>
             <div class="list-item list-button" on-tap="onEditDictionaryTap_">
               $i18n{manageSpellCheck}
             </div>
           </div>
         </iron-collapse>
 </if>
       </neon-animatable>
       <template is="dom-if" name="manage-languages">
@@ skipping 22 matching lines @@
       <template is="dom-if" name="edit-dictionary">
         <settings-subpage page-title="$i18n{editDictionaryPageTitle}">
           <settings-edit-dictionary-page></settings-edit-dictionary-page>
         </settings-subpage>
       </template>
 </if>
     </settings-animated-pages>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>