CrOS Settings: Migrate remaining paper-toggle-button to cr-toggle.

This is effectively applying MD refresh toggle style, as well
as preparing for removing paper-toggle-button from third_party/polymer.

Bug: 768073
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I90c3eb4098304b3ca707665d52bb6b54e67bdce6
Reviewed-on: https://chromium-review.googlesource.com/1048167
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#557271}

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_input_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_toggle_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/search_highlight_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
@@ -11,7 +10,7 @@
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
-    <style include="settings-icons paper-button-style paper-input-style paper-toggle-style cr-shared-style search-highlight-style">
+    <style include="settings-icons paper-button-style paper-input-style cr-shared-style search-highlight-style">
       /* Prevent action-links from being selected to avoid accidental
        * selection when trying to click it. */
       a[is=action-link] {

ui/webui/resources/cr_components/chromeos/network/network_config.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.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/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="network_shared_css.html">
 <link rel="import" href="network_config_input.html">
 <link rel="import" href="network_config_select.html">
@@ -96,9 +96,9 @@
         <div id="vpnSaveCredentialsLabel" class="start">
           [[i18n('networkConfigSaveCredentials')]]
         </div>
-        <paper-toggle-button checked="{{vpnSaveCredentials_}}"
+        <cr-toggle checked="{{vpnSaveCredentials_}}"
             aria-labelledby="vpnSaveCredentialsLabel">
-        </paper-toggle-button>
+        </cr-toggle>
       </div>
     </template>
 
@@ -140,9 +140,9 @@
         <div id="eapSaveCredentialsLabel" class="start">
           [[i18n('networkConfigSaveCredentials')]]
         </div>
-        <paper-toggle-button checked="{{eapProperties_.SaveCredentials}}"
+        <cr-toggle checked="{{eapProperties_.SaveCredentials}}"
             aria-labelledby="eapSaveCredentialsLabel">
-        </paper-toggle-button>
+        </cr-toggle>
       </div>
     </template>
 
@@ -151,11 +151,11 @@
         if="[[shareIsVisible_(guid, type, networkProperties)]]" restamp>
       <div class="property-box">
         <div id="shareLabel" class="start">[[i18n('networkConfigShare')]]</div>
-        <paper-toggle-button id="share" checked="{{shareNetwork_}}"
+        <cr-toggle id="share" checked="{{shareNetwork_}}"
             disabled="[[!shareIsEnabled_(guid, configProperties_.*,
                       security_, eapProperties_.*, shareAllowEnable)]]"
             aria-label="[[i18n('networkConfigShare')]]">
-        </paper-toggle-button>
+        </cr-toggle>
       </div>
     </template>
 

ui/webui/resources/cr_components/chromeos/network/network_ip_config.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="network_property_list.html">
 <link rel="import" href="network_shared_css.html">
 
@@ -13,10 +13,10 @@
       <div id="autoIPConfigLabel" class="start">
         [[i18n('networkIPConfigAuto')]]
       </div>
-      <paper-toggle-button checked="{{automatic_}}" disabled="[[!editable]]"
+      <cr-toggle checked="{{automatic_}}" disabled="[[!editable]]"
           on-change="onAutomaticChange_"
           aria-labelledby="autoIPConfigLabel">
-      </paper-toggle-button>
+      </cr-toggle>
     </div>
     <template is="dom-if" if="[[hasIpConfigFields_(ipConfig_)]]">
       <div class="property-box single-column indented stretch">

ui/webui/resources/cr_components/chromeos/network/network_proxy.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/html/assert.html">
@@ -11,7 +12,6 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="network_proxy_exclusions.html">
 <link rel="import" href="network_proxy_input.html">
 <link rel="import" href="network_shared_css.html">
@@ -73,11 +73,11 @@
       <div id="networkProxyToggleLabel" class="flex">
         [[i18n('networkProxyUseSame')]]
       </div>
-      <paper-toggle-button checked="{{useSameProxy_}}"
+      <cr-toggle checked="{{useSameProxy_}}"
           disabled="[[!isEditable_('Type', networkProperties, editable,
               useSharedProxies)]]"
           aria-labelledby="networkProxyToggleLabel">
-      </paper-toggle-button>
+      </cr-toggle>
     </div>
 
     <div id="manualProxy" class="layout vertical start"

ui/webui/resources/cr_components/chromeos/network/network_siminfo.html

@@ -2,8 +2,9 @@
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -11,7 +12,6 @@
 <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/iron-icon/iron-icon.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-toggle-button/paper-toggle-button.html">
 <link rel="import" href="network_config_input.html">
 <link rel="import" href="network_shared_css.html">
 
@@ -46,9 +46,8 @@
         height: calc(var(--cr-section-min-height) - 9px);
       }
 
-      paper-toggle-button {
+      cr-toggle {
         -webkit-margin-start: var(--cr-button-edge-spacing);
-        @apply --cr-actionable;
       }
     </style>
 
@@ -84,10 +83,10 @@
           hidden$="[[!networkProperties.Cellular.SIMLockStatus.LockEnabled]]">
         [[i18n('networkSimChangePin')]]
       </paper-button>
-      <paper-toggle-button id="simLockButton"
+      <cr-toggle id="simLockButton"
           on-change="onSimLockEnabledChange_" checked="{{lockEnabled_}}"
           aria-labelledby="simLockToggleLabel">
-      </paper-toggle-button>
+      </cr-toggle>
     </div>
 
     <!-- Enter PIN dialog -->

ui/webui/resources/cr_elements/paper_toggle_style_css.html

-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-
-<!-- Common paper-button styling for Material Design WebUI. -->
-<dom-module id="paper-toggle-style">
-  <template>
-    <style>
-      :root {
-        --cr-toggle-bar-size: {
-          height: 12px;
-          left: 4px;
-          width: 28px;
-        };
-        --cr-toggle-button-size: {
-          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-          height: 16px;
-          top: -2px;
-          width: 16px;
-        };
-        --cr-toggle-ink-size: {
-          height: 40px;
-          top: -12px;
-          left: -12px;
-          width: 40px;
-        };
-
-        --paper-toggle-button-checked-bar: var(--cr-toggle-bar-size);
-        --paper-toggle-button-checked-bar-color: var(--cr-toggle-color);
-        --paper-toggle-button-checked-button: {
-          @apply --cr-toggle-button-size;
-          transform: translate(18px, 0);
-        };
-        --paper-toggle-button-checked-button-color: var(--cr-toggle-color);
-        --paper-toggle-button-label-spacing: 0;
-        --paper-toggle-button-unchecked-bar: var(--cr-toggle-bar-size);
-        --paper-toggle-button-unchecked-button: var(--cr-toggle-button-size);
-        --paper-toggle-button-unchecked-ink: var(--cr-toggle-ink-size);
-      };
-    </style>
-  </template>
-</dom-module>

ui/webui/resources/cr_elements_resources.grdp

@@ -284,10 +284,6 @@
              file="../../webui/resources/cr_elements/paper_input_style_css.html"
              type="chrome_html"
              compress="gzip" />
-  <structure name="IDR_CR_ELEMENTS_PAPER_TOGGLE_STYLE_CSS_HTML"
-             file="../../webui/resources/cr_elements/paper_toggle_style_css.html"
-             type="chrome_html"
-             compress="gzip" />
   <structure name="IDR_CR_ELEMENTS_SEARCH_HIGHLIGHT_STYLE_CSS_HTML"
              file="../../webui/resources/cr_elements/search_highlight_style_css.html"
              type="chrome_html"