MD Settings: simplify spelling service toggle and make it respect policy

chrome/browser/resources/settings/privacy_page/privacy_page.html

 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_vars_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.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-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="/clear_browsing_data_dialog/clear_browsing_data_dialog.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/controls/settings_toggle_button.html">
@@ skipping 129 matching lines @@
               pref="{{prefs.cros.device.attestation_for_content_protection_enabled}}"
               label="$i18n{enableContentProtectionAttestation}">
           </settings-checkbox>
           <settings-checkbox
               pref="{{prefs.settings.internet.wake_on_wifi_darkconnect}}"
               label="$i18n{wakeOnWifi}">
           </settings-checkbox>
 </if>
         </div>
 <if expr="_google_chrome">
-        <div class="settings-box two-line" actionable
-            on-tap="onUseSpellingServiceTap_">
-          <div class="start">
-            $i18n{spellingPref}
-            <div class="secondary">$i18n{spellingDescription}</div>
-          </div>
-          <paper-toggle-button id="spellingServiceToggleButton">
-          </paper-toggle-button>
+        <div class="settings-box two-line">
+          <settings-toggle-button class="start"
+              pref="{{prefs.spellcheck.use_spelling_service}}"
+              label="$i18n{spellingPref}"
+              sub-label="$i18n{spellingDescription}">
+          </settings-toggle-button>

[dschuyler, 2016/12/02 02:38:53]

Is there a way to preserve the on-tap for the entire settings box?

I know that not all of the rows are entirely clickable, but that is the goal. So
I'm hesitant to lose one that is on the whole row now?

Or am I misunderstanding, does this get the whole row?

[Dan Beam, 2016/12/02 04:07:35]

yeah, do this:
https://codereview.chromium.org/2538373002/diff/40001/chrome/browser/resource...

         </div>
 </if>
 <if expr="use_nss_certs or is_win or is_macosx">
         <div id="manageCertificates" class="settings-box two-line"
             actionable on-tap="onManageCertificatesTap_">
           <div class="start">
             <div>$i18n{manageCertificates}</div>
             <div class="secondary">$i18n{manageCertificatesDescription}</div>
           </div>
           <button class="subpage-arrow" is="paper-icon-button-light"></button>
@@ skipping 216 matching lines @@
             $i18n{siteSettingsCookieRemoveAll}
           </paper-button>
           <site-data-details-subpage page-title="{{pageTitle}}">
           </site-data-details-subpage>
         </settings-subpage>
       </template>
     </settings-animated-pages>
   </template>
   <script src="privacy_page.js"></script>
 </dom-module>