WebUI[MD-refresh]: migrate from paper-checkbox to cr-checkbox

Bug: 836391
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9a62435e04983cbd28df474c20162423ac75df54
Reviewed-on: https://chromium-review.googlesource.com/1036785
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Tatsuhisa Yamaguchi <yamaguchi@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#556948}

chrome/browser/resources/chromeos/arc_support/main.html

@@ -8,9 +8,9 @@
   <link rel="stylesheet" href="chrome://resources/css/controlled_indicator.css">
   <link rel="stylesheet" href="chrome://resources/css/overlay.css">
   <link rel="import" href="chrome://resources/html/polymer.html">
+  <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.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-checkbox/paper-checkbox.html">
   <style is="custom-style" include="iron-flex iron-flex-alignment">
     paper-button {
       border-radius: 4px;
@@ -49,13 +49,6 @@
       background-color: rgb(66, 133, 244); /* #4285f4 */
       color: white;
     }
-    paper-checkbox {
-      --paper-checkbox-size: 12px;
-      --paper-checkbox-checked-color: rgb(66, 133, 244); /* #4285f4 */
-      --paper-checkbox-ink-size: 36px;
-      --paper-checkbox-label-spacing: 20px;
-      --paper-checkbox-vertical-align: top;
-    }
   </style>
   <link rel="stylesheet" href="main.css">
   <link rel="stylesheet" href="progressbar.css">
@@ -108,26 +101,26 @@
           </div>
           <div id="metrics-preference">
             <label class="layout horizontal section-checkbox-container">
-              <paper-checkbox class="checkbox-option">
+              <cr-checkbox class="checkbox-option">
                 <p class="checkbox-text"></p>
-              </paper-checkbox>
+              </cr-checkbox>
               <p class="content-text"></p>
             </label>
           </div>
           <div id="backup-restore-preference">
             <label class="layout horizontal section-checkbox-container">
-              <paper-checkbox class="checkbox-option">
+              <cr-checkbox class="checkbox-option">
                 <p class="checkbox-text"
                     i18n-values=".innerHTML:textBackupRestore"></p>
-              </paper-checkbox>
+              </cr-checkbox>
             </label>
           </div>
           <div id="location-service-preference">
             <label class="layout horizontal section-checkbox-container">
-              <paper-checkbox class="checkbox-option">
+              <cr-checkbox class="checkbox-option">
                 <p class="checkbox-text"
                     i18n-values=".innerHTML:textLocationService"></p>
-              </paper-checkbox>
+              </cr-checkbox>
             </label>
           </div>
           <div id="pai-service-descirption">

chrome/browser/resources/chromeos/emulator/audio_settings.html

 <link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.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-behavior.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-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/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
@@ -32,13 +33,13 @@
           </div>
           <div class="form-field-section">
             <span class="toggle-button-label">Is Input</span>
-            <paper-checkbox
-                checked="{{currentEditableObject.isInput}}"></paper-checkbox>
+            <cr-checkbox
+                checked="{{currentEditableObject.isInput}}"></cr-checkbox>
           </div>
           <div class="form-field-section">
             <span class="toggle-button-label">Active</span>
-            <paper-checkbox
-                checked="{{currentEditableObject.active}}"></paper-checkbox>
+            <cr-checkbox
+                checked="{{currentEditableObject.active}}"></cr-checkbox>
           </div>
           <div class="form-field-section">
             <div class="form-label">Audio Type</div>
@@ -88,12 +89,12 @@
                 </paper-icon-button>
               </td>
               <td class="control-cell">
-                <paper-checkbox checked="{{item.isInput}}"
-                    on-change="insertAudioNode"></paper-checkbox>
+                <cr-checkbox checked="{{item.isInput}}"
+                    on-change="insertAudioNode"></cr-checkbox>
               </td>
               <td class="control-cell">
-                <paper-checkbox checked="{{item.active}}"
-                    on-change="insertAudioNode"></paper-checkbox>
+                <cr-checkbox checked="{{item.active}}"
+                    on-change="insertAudioNode"></cr-checkbox>
               </td>
             </tr>
           </template>

chrome/browser/resources/chromeos/emulator/battery_settings.html

 <link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/html/md_select_css.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-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.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/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
@@ -60,7 +61,7 @@
             <tr>
               <td class="alias-cell">[[item.name]]</td>
               <td class="control-cell">
-                <paper-checkbox checked="{{item.connected}}"></paper-checkbox>
+                <cr-checkbox checked="{{item.connected}}"></cr-checkbox>
               </td>
               <td class="control-cell">
                 <paper-button on-tap="onSetAsSourceTap"

chrome/browser/resources/chromeos/emulator/bluetooth_settings.html

 <link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.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-behavior.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-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/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
@@ -38,13 +39,13 @@
           </div>
           <div class="form-field-section">
             <span class="toggle-button-label">Trusted</span>
-            <paper-checkbox
-                checked="{{currentEditableObject.isTrusted}}"></paper-checkbox>
+            <cr-checkbox
+                checked="{{currentEditableObject.isTrusted}}"></cr-checkbox>
           </div>
           <div class="form-field-section">
             <span class="toggle-button-label">Incoming Connnection</span>
-            <paper-checkbox
-                checked="{{currentEditableObject.incoming}}"></paper-checkbox>
+            <cr-checkbox
+                checked="{{currentEditableObject.incoming}}"></cr-checkbox>
           </div>
           <div class="form-field-section">
             <div class="form-label">Class</div>
@@ -126,13 +127,13 @@
                 </paper-icon-button>
               </td>
               <td class="control-cell">
-                <paper-checkbox checked="{{item.discoverable}}"
+                <cr-checkbox checked="{{item.discoverable}}"
                     data-predefined="true"
-                    on-change="discoverDevice"></paper-checkbox>
+                    on-change="discoverDevice"></cr-checkbox>
               </td>
               <td class="control-cell">
-                <paper-checkbox on-change="pairDevice" data-predefined="true"
-                    checked="{{item.paired}}"></paper-checkbox>
+                <cr-checkbox on-change="pairDevice" data-predefined="true"
+                    checked="{{item.paired}}"></cr-checkbox>
               </td>
             </tr>
           </template>
@@ -156,14 +157,14 @@
                 </paper-icon-button>
               </td>
               <td class="control-cell">
-                <paper-checkbox checked="{{item.discoverable}}"
+                <cr-checkbox checked="{{item.discoverable}}"
                     data-predefined="false"
-                    on-change="discoverDevice"></paper-checkbox>
+                    on-change="discoverDevice"></cr-checkbox>
               </td>
               <td class="control-cell">
-                <paper-checkbox checked="{{item.paired}}"
+                <cr-checkbox checked="{{item.paired}}"
                     data-predefined="false"
-                    on-change="pairDevice"></paper-checkbox>
+                    on-change="pairDevice"></cr-checkbox>
               </td>
             </tr>
           </template>

chrome/browser/resources/chromeos/emulator/shared_styles.html

@@ -9,10 +9,6 @@
         width: 200px;
       }
 
-      #editModal paper-checkbox {
-        -webkit-margin-start: 15px;
-      }
-
       paper-radio-button {
         display: inline-block;
       }

chrome/browser/resources/chromeos/login/arc_terms_of_service.css

@@ -54,14 +54,6 @@ p {
   padding: 0 20px 16px 20px;
 }
 
-#arc-enable-backup-restore,
-#arc-enable-location-service {
-  --paper-checkbox-size: 12px;
-  --paper-checkbox-checked-color: rgb(66, 133, 244); /* #4285f4 */
-  --paper-checkbox-label-spacing: 20px;
-  --paper-checkbox-vertical-align: top;
-}
-
 #arc-policy-link {
   margin: 0;
   padding: 16px 0 16px 20px;
@@ -71,7 +63,6 @@ p {
   color: rgba(0, 0, 0, 0.54);
 }
 
-
 #google-service-confirmation-text {
   font-weight: 600;
 }

chrome/browser/resources/chromeos/login/arc_terms_of_service.html

@@ -2,11 +2,10 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.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-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
-
 <dom-module id="arc-tos-root">
   <template>
     <link rel="stylesheet" href="arc_terms_of_service.css">
@@ -31,15 +30,15 @@
           <p id="arc-text-metrics"></p>
         </div>
         <div class="parameter-section arc-tos-content">
-          <paper-checkbox id="arc-enable-backup-restore">
+          <cr-checkbox id="arc-enable-backup-restore">
             <p i18n-values=".innerHTML:arcTextBackupRestore"></p>
-          </paper-checkbox>
+          </cr-checkbox>
         </div>
         <div id= "arc-location-service"
             class="parameter-section arc-tos-content">
-          <paper-checkbox id="arc-enable-location-service">
+          <cr-checkbox id="arc-enable-location-service">
             <p i18n-values=".innerHTML:arcTextLocationService"></p>
-          </paper-checkbox>
+          </cr-checkbox>
         </div>
         <div id="arc-pai-service" class="parameter-section arc-tos-content">
           <p i18n-values=".innerHTML:arcTextPaiService"></p>

chrome/browser/resources/chromeos/login/oobe_eula.html

@@ -4,7 +4,6 @@
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.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-styles/color.html">
 
 <iron-iconset-svg name="oobe-eula-32" size="32">

chrome/browser/resources/chromeos/login/oobe_hid_detection.html

 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.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-styles/color.html">
 
 <iron-iconset-svg name="oobe-hid-detection" size="24">

chrome/browser/resources/chromeos/login/oobe_reset.css

@@ -36,8 +36,6 @@ a {
 }
 
 #tpmFirmwareUpdateCheckbox {
-  --paper-checkbox-size: 16px;
-  --paper-checkbox-checked-color: var(--google-blue-500);
   margin-top: 2px;
   size: 16px;
 }

chrome/browser/resources/chromeos/login/oobe_reset.html

@@ -2,9 +2,9 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 
 <iron-iconset-svg name="oobe-reset-32" size="32">
   <svg>
@@ -68,11 +68,11 @@
             i18n-values="alt:resetScreenIllustrationTitle">
         <div id="tpmFirmwareUpdate" class="layout horizontal"
             hidden="[[!tpmFirmwareUpdateAvailable_]]">
-          <paper-checkbox id="tpmFirmwareUpdateCheckbox"
+          <cr-checkbox id="tpmFirmwareUpdateCheckbox"
               checked="{{tpmFirmwareUpdateChecked_}}"
-              disabled="{{!tpmFirmwareUpdateEditable_}}"
+              disabled="[[!tpmFirmwareUpdateEditable_]]"
               on-change="onTPMFirmwareUpdateChanged_">
-          </paper-checkbox>
+          </cr-checkbox>
           <div id="tpmFirmwareUpdateContainer">
             <span i18n-content="resetTPMFirmwareUpdate"></span>
             <a href="#" hidden="[[isHelpLinkHidden_(uiState_, isOfficial_)]]"

chrome/browser/resources/chromeos/login/recommend_apps.html

@@ -3,8 +3,8 @@
      found in the LICENSE file. -->
 
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.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-checkbox/paper-checkbox.html">
 
 <dom-module id="recommend-apps">
   <template>
@@ -27,12 +27,12 @@
       <div id="recommend-apps-container" class="footer flex layout horizontal">
         <template is="dom-repeat" items="{{apps}}">
           <div class="column">
-            <paper-checkbox>
+            <cr-checkbox>
               <div class="checkbox-label">
                 <img class="app-icon" src="{{item.icon}}">
                 <span class="app-title">{{item.name}}</span>
               </div>
-            </paper-checkbox>
+            </cr-checkbox>
           </div>
         </template>
       </div>

chrome/browser/resources/chromeos/login/sync_consent.css

@@ -33,9 +33,10 @@
   margin-bottom: 4px;
 }
 
-paper-checkbox {
-  --paper-checkbox-label-spacing: 12px;
-  --paper-checkbox-size: 16px;
+cr-checkbox {
+  --cr-checkbox-label-container: {
+    -webkit-padding-start: 12px;
+  };
   -webkit-padding-start: 8px;
   padding-top: 28px; /* 40 to label base line => 40 - 16/2 - 13/3 = 28 */
 }

chrome/browser/resources/chromeos/login/sync_consent.html

@@ -2,6 +2,7 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
 
@@ -81,9 +82,9 @@
             </div>
           </div>
         </div>
-        <paper-checkbox id="reviewSettingsBox">
+        <cr-checkbox id="reviewSettingsBox">
           [[i18nDynamic(locale, 'syncConsentReviewSyncOptionsText')]]
-        </paper-checkbox>
+        </cr-checkbox>
       </div>
       <div class="bottom-buttons layout horizontal end-justified">
         <oobe-text-button id="acceptAndContinue"

chrome/browser/resources/chromeos/zip_archiver/css/passphrase-dialog.css

@@ -3,8 +3,7 @@
  * found in the LICENSE file. */
 
 input,
-paper-button,
-paper-checkbox {
+paper-button {
   -webkit-app-region: no-drag;
 }
 
@@ -29,11 +28,6 @@ paper-checkbox {
   line-height: inherit;
 }
 
-#remember {
-  --paper-checkbox-checked-color: rgb(51, 103, 214);
-  font-size: 13px;
-}
-
 #title {
   color: black;
   font-size: 14px;
@@ -61,10 +55,6 @@ paper-checkbox {
   box-shadow: 0 0 0 2px rgba(51, 103, 214, 0.5);
 }
 
-paper-checkbox {
-  --paper-checkbox-ink-size: 38px;
-}
-
 paper-input-container {
   --paper-input-container-focus-color: rgb(51, 103, 214);
   --paper-input-container-underline-focus: {

chrome/browser/resources/chromeos/zip_archiver/html/passphrase-dialog.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.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-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 
 <dom-module id="passphrase-dialog">

chrome/browser/resources/md_extensions/kiosk_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
@@ -9,7 +10,6 @@
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="item_behavior.html">
@@ -120,11 +120,11 @@
             $i18n{add}
           </paper-button>
         </div>
-        <paper-checkbox disabled="[[!canEditBailout_]]"
-            on-pointerdown="onBailoutTap_" checked="[[bailoutDisabled_]]"
+        <cr-checkbox disabled="[[!canEditBailout_]]" id="bailout"
+            on-change="onBailoutChanged_" checked="[[bailoutDisabled_]]"
             hidden="[[!canEditAutoLaunch_]]">
           $i18n{kioskDisableBailout}
-        </paper-checkbox>
+        </cr-checkbox>
       </div>
       <div slot="button-container">
         <paper-button class="action-button" on-click="onDoneTap_">

chrome/browser/resources/md_extensions/kiosk_dialog.js

@@ -123,26 +123,25 @@ cr.define('extensions', function() {
      * @param {!Event} event
      * @private
      */
-    onBailoutTap_: function(event) {
+    onBailoutChanged_: function(event) {
       event.preventDefault();
-      if (this.bailoutDisabled_) {
+      if (this.$.bailout.checked) {
+        this.$['confirm-dialog'].showModal();
+      } else {
         this.kioskBrowserProxy_.setDisableBailoutShortcut(false);
-        this.bailoutDisabled_ = false;
         this.$['confirm-dialog'].close();
-      } else {
-        this.$['confirm-dialog'].showModal();
       }
     },
 
     /** @private */
     onBailoutDialogCancelTap_: function() {
+      this.$.bailout.checked = false;
       this.$['confirm-dialog'].cancel();
     },
 
     /** @private */
     onBailoutDialogConfirmTap_: function() {
       this.kioskBrowserProxy_.setDisableBailoutShortcut(true);
-      this.bailoutDisabled_ = true;
       this.$['confirm-dialog'].close();
     },
 

chrome/browser/resources/md_user_manager/create_profile.html

@@ -2,9 +2,9 @@
 
 <link rel="import" href="/profile_browser_proxy.html">
 <link rel="import" href="/shared_styles.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_checkbox_style_css.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -13,14 +13,13 @@
 <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/paper-button/paper-button.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-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 
 <dom-module id="create-profile">
   <template>
     <style
-        include="shared-styles iron-positioning md-select paper-checkbox-style">
+        include="shared-styles iron-positioning md-select">
       :host {
         align-self: center;
       }
@@ -90,18 +89,10 @@
         width: 300px;
       }
 
-      paper-checkbox {
-        --paper-checkbox-checked-color: var(--google-blue-500);
-        --paper-checkbox-label-spacing: 16px;
-        --paper-checkbox-size: 16px;
-        --paper-checkbox-unchecked-color: var(--paper-grey-600);
+      cr-checkbox {
         margin-top: 24px;
       }
 
-      paper-checkbox + paper-checkbox {
-        margin-top: 16px;
-      }
-
       #actions {
         bottom: 16px;
         display: flex;
@@ -133,10 +124,10 @@
       <cr-profile-avatar-selector avatars="[[availableIcons_]]"
           selected-avatar="{{selectedAvatar_}}">
       </cr-profile-avatar-selector>
-      <paper-checkbox id="createShortcutCheckbox" checked="{{createShortcut_}}"
+      <cr-checkbox id="createShortcutCheckbox" checked="{{createShortcut_}}"
           hidden="[[!isProfileShortcutsEnabled_]]">
         $i18n{createDesktopShortcutLabel}
-      </paper-checkbox>
+      </cr-checkbox>
       <div id="actions">
         <paper-spinner-lite active="[[isSpinnerActive_(createInProgress_)]]">
         </paper-spinner-lite>

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css

@@ -117,11 +117,10 @@
   text-align: center;
 }
 
-paper-checkbox {
-  --paper-checkbox-checked-color: white;
-  --paper-checkbox-checkmark-color: var(--paper-blue-700);
-  --paper-checkbox-ink-size: 35px;
-  --paper-checkbox-unchecked-color: white;
+cr-checkbox {
+  --cr-checkbox-checked-box-color: white;
+  --cr-checkbox-unchecked-box-color: white;
+  --cr-checkbox-mark-color: var(--paper-blue-700);
 }
 
 paper-item {

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html

 <link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
@@ -28,8 +29,7 @@
         <div id="first-run-flow-cloud-pref"
             hidden$="[[!showFirstRunFlowCloudPref]]">
           <div>
-            <paper-checkbox checked id="first-run-cloud-checkbox">
-            </paper-checkbox>
+            <cr-checkbox checked id="first-run-cloud-checkbox"></cr-checkbox>
           </div>
           <div>
             <span>[[getFirstRunFlowCloudPrefText_()]]</span>

chrome/browser/resources/media_router/elements/route_controls/BUILD.gn

@@ -24,6 +24,5 @@ js_library("route_controls") {
 js_library("route_controls_interface") {
   deps = [
     "../..:media_router_data",
-    "//third_party/polymer/v1_0/components-chromium/paper-checkbox:paper-checkbox-extracted",
   ]
 }

chrome/browser/resources/media_router/elements/route_controls/route_controls.css

@@ -79,10 +79,6 @@
   padding: 0.3em 0;
 }
 
-paper-checkbox {
-  --paper-checkbox-checked-color: #1976D2;
-}
-
 #hangouts-local-present-controls {
   cursor: pointer;
   display: inline-block;
@@ -91,10 +87,6 @@ paper-checkbox {
   white-space: nowrap;
 }
 
-#hangouts-local-present-checkbox {
-  --paper-checkbox-vertical-align: top;
-};
-
 #hangouts-local-present-checkbox-subtitle {
   display: block;
   font-size: 0.8em;

chrome/browser/resources/media_router/elements/route_controls/route_controls.html

-<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.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-slider/paper-slider.html">
 <dom-module id="route-controls">
   <link rel="import" type="css" href="../../media_router_common.css">
@@ -70,7 +71,7 @@
           </span>
           <div id="hangouts-local-present-controls"
                hidden="[[!routeStatus.hangoutsExtraData]]">
-            <paper-checkbox
+            <cr-checkbox
                 checked="[[hangoutsLocalPresent_]]"
                 id="hangouts-local-present-checkbox"
                 on-change="onHangoutsLocalPresentChange_"
@@ -81,7 +82,7 @@
               <span id="hangouts-local-present-checkbox-subtitle">
                 [[i18n('hangoutsLocalPresentSubtitle')]]
               </span>
-            </paper-checkbox>
+            </cr-checkbox>
           </div>
         </div>
         <div id="mirroring-fullscreen-video-controls"

chrome/browser/resources/media_router/elements/route_controls/route_controls.js

@@ -336,7 +336,7 @@ Polymer({
 
   /**
    * Called when the "smooth motion" box for Hangouts is changed by the user.
-   * @param {!{target: !PaperCheckboxElement}} e
+   * @param {!{target: !HTMLElement}} e
    * @private
    */
   onHangoutsLocalPresentChange_: function(e) {

chrome/browser/resources/settings/controls/important_site_checkbox.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="settings_boolean_control_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 
@@ -15,24 +15,16 @@
         width: 100%;
       }
 
-      paper-checkbox {
+      cr-checkbox {
         width: 100%;
       }
 
-      paper-checkbox:not([checked]) .secondary {
-        @apply --settings-secondary-unchecked;
-      }
-
       .middot {
         padding: 0 4px;
       }
-
-      .label {
-        @apply --settings-checkbox-label;
-      }
     </style>
     <div id="outerRow">
-      <paper-checkbox id="checkbox" checked="{{site.isChecked}}"
+      <cr-checkbox id="checkbox" checked="{{site.isChecked}}"
           disabled="[[disabled]]">
         <div class="label">[[site.registerableDomain]]</div>
         <div class="secondary label">
@@ -45,7 +37,7 @@
               $i18n{notificationWarning}
             </span>
         </div>
-      </paper-checkbox>
+      </cr-checkbox>
     </div>
   </template>
   <script src="important_site_checkbox.js"></script>

chrome/browser/resources/settings/controls/settings_checkbox.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="settings_boolean_control_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 
@@ -19,30 +19,19 @@
         min-height: var(--settings-row-min-height);
       }
 
-      paper-checkbox {
-        /* Handle overflow of subLabel when it is larger than one line. */
-        align-items: center;
-        display: flex;
+      cr-checkbox {
         /* Additional margin in case subLabel needs more than one line. */
         margin-bottom: 4px;
         margin-top: var(--settings-checkbox-margin-top, 4px);
         width: 100%;
       }
 
-      paper-checkbox:not([checked]) .secondary {
-        @apply --settings-secondary-unchecked;
-      }
-
       cr-policy-pref-indicator {
         -webkit-margin-start: var(--settings-controlled-by-spacing);
       }
-
-      .label {
-        @apply --settings-checkbox-label;
-      }
     </style>
     <div id="outerRow" noSubLabel$="[[!hasSubLabel_(subLabel, subLabelHtml)]]">
-      <paper-checkbox id="checkbox" checked="{{checked}}"
+      <cr-checkbox id="checkbox" checked="{{checked}}"
           on-change="notifyChangedByUserInteraction"
           disabled="[[controlDisabled(disabled, pref.*)]]">
         <div class="label">[[label]] <slot></slot></div>
@@ -50,7 +39,7 @@
           <div inner-h-t-m-l="[[subLabelHtml]]"></div>
           [[subLabel]]
         </div>
-      </paper-checkbox>
+      </cr-checkbox>
       <template is="dom-if" if="[[pref.controlledBy]]">
         <cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
         </cr-policy-pref-indicator>

chrome/browser/resources/settings/device_page/display.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/html/assert.html">
@@ -82,11 +83,11 @@
     <template is="dom-if" if="[[showMirror_(unifiedDesktopMode_, displays)]]"
         restamp>
       <div class="secondary self-start">
-        <paper-checkbox checked="[[isMirrored_(displays)]]"
+        <cr-checkbox checked="[[isMirrored_(displays)]]"
             on-click="onMirroredTap_"
             aria-label="[[getDisplayMirrorText_(displays)]]">
           <div class="text-area">[[getDisplayMirrorText_(displays)]]</div>
-        </paper-checkbox>
+        </cr-checkbox>
       </div>
     </template>
 

chrome/browser/resources/settings/languages_page/BUILD.gn

@@ -57,7 +57,6 @@ js_library("languages_page") {
     "..:lifetime_browser_proxy",
     "..:route",
     "../settings_page:settings_animated_pages",
-    "//third_party/polymer/v1_0/components-chromium/paper-checkbox:paper-checkbox-extracted",
     "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu",
     "//ui/webui/resources/cr_elements/cr_expand_button:cr_expand_button",
     "//ui/webui/resources/cr_elements/cr_lazy_render:cr_lazy_render",
@@ -80,7 +79,6 @@ js_library("manage_input_methods_page") {
     ":languages",
     ":languages_types",
     "../prefs:prefs",
-    "//third_party/polymer/v1_0/components-chromium/paper-checkbox:paper-checkbox-extracted",
   ]
   externs_list = [ "$externs_path/language_settings_private.js" ]
 }
@@ -89,7 +87,6 @@ js_library("add_languages_dialog") {
   deps = [
     ":languages",
     ":languages_types",
-    "//third_party/polymer/v1_0/components-chromium/paper-checkbox:paper-checkbox-extracted",
     "//ui/webui/resources/cr_elements:cr_scrollable_behavior",
   ]
 }

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.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-button/paper-button.html">
 <link rel="import" href="languages.html">
 <link rel="import" href="../settings_page/settings_subpage_search.html">
@@ -33,10 +33,10 @@
         -webkit-padding-start: 20px;
       }
 
-      paper-checkbox {
-        --paper-checkbox-label: {
+      cr-checkbox {
+        --cr-checkbox-label-container: {
           white-space: nowrap;
-        }
+        };
       }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
@@ -49,12 +49,12 @@
             items="[[getLanguages_(
                 languages.supported, languages.enabled.*, filterValue_)]]">
           <template>
-            <paper-checkbox class="list-item no-outline"
+            <cr-checkbox class="list-item no-outline"
                 checked="[[willAdd_(item.code)]]" tabindex$="[[tabIndex]]"
                 title$="[[item.nativeDisplayName]]"
                 on-change="onLanguageCheckboxChange_">
               [[getDisplayText_(item)]]
-            </paper-checkbox>
+            </cr-checkbox>
           </template>
         </iron-list>
       </div>

chrome/browser/resources/settings/languages_page/add_languages_dialog.js

@@ -106,7 +106,7 @@ Polymer({
   /**
    * Handler for checking or unchecking a language item.
    * @param {!{model: !{item: !chrome.languageSettingsPrivate.Language},
-   *           target: !PaperCheckboxElement}} e
+   *           target: !Element}} e
    * @private
    */
   onLanguageCheckboxChange_: function(e) {

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.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">
@@ -9,7 +10,6 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.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-light.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
@@ -64,7 +64,8 @@
         margin: 6px 0 0 0;
       }
 
-      paper-checkbox.dropdown-item {
+      cr-checkbox.dropdown-item {
+        --cr-action-menu-disabled-item-opacity: 0.38;
         -webkit-margin-start: 0;
       }
 
@@ -318,7 +319,7 @@
             <cr-action-menu
                 class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
 <if expr="chromeos or is_win">
-              <paper-checkbox id="uiLanguageItem" slot="item"
+              <cr-checkbox id="uiLanguageItem" slot="item"
                   class="dropdown-item"
                   checked="[[isProspectiveUILanguage_(
                       detailLanguage_.language.code,
@@ -326,14 +327,14 @@
                   on-change="onUILanguageChange_"
                   disabled="[[disableUILanguageCheckbox_(
                       detailLanguage_, languages.prospectiveUILanguage)]]">
-                      <span>$i18n{displayInThisLanguage}</span>
-                      <cr-policy-indicator indicator-type="[[
-                      getPolicyIndicatorStatus_(
-                        detailLanguage_.language)]]">
-                      </cr-policy-indicator>
-              </paper-checkbox>
+                <span>$i18n{displayInThisLanguage}</span>
+                <cr-policy-indicator indicator-type="[[
+                getPolicyIndicatorStatus_(
+                  detailLanguage_.language)]]">
+                </cr-policy-indicator>
+              </cr-checkbox>
 </if>
-              <paper-checkbox id="offerTranslations" slot="item"
+              <cr-checkbox id="offerTranslations" slot="item"
                   class="dropdown-item"
                   checked="[[detailLanguage_.translateEnabled]]"
                   on-change="onTranslateCheckboxChange_"
@@ -341,7 +342,7 @@
                   disabled="[[disableTranslateCheckbox_(
                       detailLanguage_.language, languages.translateTarget)]]">
                 $i18n{offerToTranslateInThisLanguage}
-              </paper-checkbox>
+              </cr-checkbox>
               <hr slot="item">
               <button slot="item" class="dropdown-item" role="menuitem"
                   on-click="onMoveToTopTap_"

chrome/browser/resources/settings/languages_page/languages_page.js

@@ -323,7 +323,7 @@ Polymer({
 
   /**
    * Handler for changes to the UI language checkbox.
-   * @param {!{target: !PaperCheckboxElement}} e
+   * @param {!{target: !Element}} e
    * @private
    */
   onUILanguageChange_: function(e) {
@@ -353,7 +353,7 @@ Polymer({
 
   /**
    * Handler for changes to the translate checkbox.
-   * @param {!{target: !PaperCheckboxElement}} e
+   * @param {!{target: !Element}} e
    * @private
    */
   onTranslateCheckboxChange_: function(e) {

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.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/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="languages.html">
 
@@ -16,12 +16,12 @@
           <template is="dom-repeat" items="[[item.inputMethods]]">
             <div class="list-item">
               <div class="language-name">
-                <paper-checkbox checked="[[item.enabled]]"
+                <cr-checkbox checked="[[item.enabled]]"
                     on-change="onCheckboxChange_"
                     disabled="[[!enableInputMethodCheckbox_(
                         item, languages.inputMethods.enabled.*)]]">
                   <span>[[item.displayName]]</span>
-                </paper-checkbox>
+                </cr-checkbox>
               </div>
             </div>
           </template>

chrome/browser/resources/settings/languages_page/manage_input_methods_page.js

@@ -57,7 +57,7 @@ Polymer({
   /**
    * Handler for an input method checkbox.
    * @param {!{model: !{item: chrome.languageSettingsPrivate.InputMethod},
-   *           target: !PaperCheckboxElement}} e
+   *           target: !Element}} e
    * @private
    */
   onCheckboxChange_: function(e) {

chrome/browser/resources/settings/people_page/people_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.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">
@@ -13,7 +14,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/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-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="sync_page.html">
@@ -407,10 +407,10 @@
         <template is="dom-if" if="[[!syncStatus.domain]]">
           <div id="wideFooter" slot="footer">
             <div class="settings-box first">
-              <paper-checkbox id="deleteProfile" class="start"
+              <cr-checkbox id="deleteProfile" class="start"
                   checked="{{deleteProfile_}}">
                 $i18n{syncDisconnectDeleteProfile}
-              </paper-checkbox>
+              </cr-checkbox>
               <cr-expand-button expanded="{{deleteProfileWarningVisible_}}"
                   alt="$i18n{deleteProfileWarningExpandA11yLabel}">
               </cr-expand-button>

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_checkbox_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">
@@ -12,7 +11,7 @@
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
-    <style include="settings-icons paper-button-style paper-checkbox-style paper-input-style paper-toggle-style cr-shared-style search-highlight-style">
+    <style include="settings-icons paper-button-style paper-input-style paper-toggle-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] {

chrome/browser/resources/settings/site_settings/add_site_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
@@ -29,10 +30,10 @@
             value="{{site_}}" on-input="validate_"
             error-message="$i18n{notValidWebAddress}" spellcheck="false"
             autofocus></paper-input>
-        <paper-checkbox id="incognito"
+        <cr-checkbox id="incognito"
             invisible$="[[!showIncognitoSessionOnly_]]">
           $i18n{incognitoSiteOnly}
-        </paper-checkbox>
+        </cr-checkbox>
       </div>
       <div slot="button-container">
         <paper-button class="cancel-button" on-click="onCancelTap_">

chrome/test/data/webui/cr_elements/cr_lazy_render_tests.js

@@ -8,7 +8,7 @@ suite('cr-lazy-render', function() {
 
   suiteSetup(function() {
     return PolymerTest.importHtml(
-        'chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html');
+        'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html');
   });
 
   setup(function() {
@@ -18,7 +18,7 @@ suite('cr-lazy-render', function() {
           <cr-lazy-render id="lazy">
             <template>
               <h1>
-                <paper-checkbox checked="{{checked}}"></paper-checkbox>
+                <cr-checkbox checked="{{checked}}"></cr-checkbox>
                 {{name}}
               </h1>
             </template>
@@ -51,7 +51,7 @@ suite('cr-lazy-render', function() {
     bind.checked = true;
 
     const inner = lazy.get();
-    const checkbox = document.querySelector('paper-checkbox');
+    const checkbox = document.querySelector('cr-checkbox');
     assertTrue(checkbox.checked);
     MockInteractions.tap(checkbox);
     assertFalse(checkbox.checked);

chrome/test/data/webui/extensions/extension_kiosk_mode_test.js

@@ -104,7 +104,7 @@ cr.define('extension_kiosk_mode_tests', function() {
             expectTrue(items[1].querySelector('paper-button').hidden);
             // Bailout checkbox should be hidden when auto-launch editing
             // disabled.
-            expectTrue(dialog.$$('paper-checkbox').hidden);
+            expectTrue(dialog.$$('cr-checkbox').hidden);
 
             MockInteractions.tap(
                 items[0].querySelector('.icon-delete-gray button'));
@@ -156,14 +156,14 @@ cr.define('extension_kiosk_mode_tests', function() {
       let bailoutCheckbox;
       return initPage()
           .then(() => {
-            bailoutCheckbox = dialog.$$('paper-checkbox');
+            bailoutCheckbox = dialog.$$('cr-checkbox');
             // Bailout checkbox should be usable when auto-launching.
             expectFalse(bailoutCheckbox.hidden);
             expectFalse(bailoutCheckbox.disabled);
             expectFalse(bailoutCheckbox.checked);
 
             // Making sure canceling doesn't change anything.
-            bailoutCheckbox.dispatchEvent(new PointerEvent('pointerdown'));
+            bailoutCheckbox.click();
             Polymer.dom.flush();
             expectTrue(dialog.$['confirm-dialog'].open);
 
@@ -175,7 +175,7 @@ cr.define('extension_kiosk_mode_tests', function() {
             expectTrue(dialog.$.dialog.open);
 
             // Accepting confirmation dialog should trigger browserProxy call.
-            bailoutCheckbox.dispatchEvent(new PointerEvent('pointerdown'));
+            bailoutCheckbox.click();
             Polymer.dom.flush();
             expectTrue(dialog.$['confirm-dialog'].open);
 
@@ -192,7 +192,7 @@ cr.define('extension_kiosk_mode_tests', function() {
 
             // Test clicking on checkbox again should simply re-enable bailout.
             browserProxy.reset();
-            bailoutCheckbox.dispatchEvent(new PointerEvent('pointerdown'));
+            bailoutCheckbox.click();
             expectFalse(bailoutCheckbox.checked);
             expectFalse(dialog.$['confirm-dialog'].open);
             return browserProxy.whenCalled('setDisableBailoutShortcut');

ui/file_manager/gallery/gallery.html

@@ -15,8 +15,8 @@
   <script src="chrome://resources/js/polymer_config.js"></script>
   <script src="chrome://resources/js/util.js"></script>
 
+  <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.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-checkbox/paper-checkbox.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-progress/paper-progress.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
@@ -28,16 +28,18 @@
 
   <script src="js/gallery_scripts.js"></script>
   <style is="custom-style">
-    paper-checkbox {
-      --paper-checkbox-checked-color: white;
-      --paper-checkbox-checked-ink-color: white;
-      --paper-checkbox-checkmark-color: black;
-      --paper-checkbox-ink-size: 38px;
-      --paper-checkbox-label-color: white;
-      --paper-checkbox-label-spacing: 6px;
-      --paper-checkbox-size: 14px;
-      --paper-checkbox-unchecked-color: white;
-      --paper-checkbox-unchecked-ink-color: white;
+    cr-checkbox {
+      --cr-checkbox-checked-box-color: white;
+      --cr-checkbox-label-container: {
+        -webkit-padding-start: 6px;
+        color: white;
+      };
+      --cr-checkbox-mark-color: black;
+      --cr-checkbox-ripple-checked-color: white;
+      --cr-checkbox-ripple-size: 38px;
+      --cr-checkbox-ripple-unchecked-color: white;
+      --cr-checkbox-size: 14px;
+      --cr-checkbox-unchecked-box-color: white;
     }
     paper-input-container {
       --paper-input-container-color: rgba(255, 255, 255, 0.2);
@@ -156,9 +158,9 @@
       </div>
       <div class="edit-mode-toolbar">
         <div class="options">
-          <paper-checkbox class="overwrite-original"
+          <cr-checkbox class="overwrite-original"
                           i18n-content="GALLERY_OVERWRITE_ORIGINAL">
-          </paper-checkbox>
+          </cr-checkbox>
           <div class="saved" i18n-content="GALLERY_SAVED" hidden></div>
         </div>
         <div class="edit-bar-spacer"></div>

ui/file_manager/gallery/js/BUILD.gn

@@ -139,7 +139,6 @@ js_library("slide_mode") {
     "image_editor:image_util",
     "image_editor:image_view",
     "image_editor:viewport",
-    "//third_party/polymer/v1_0/components-chromium/paper-checkbox:paper-checkbox-extracted",
     "//third_party/polymer/v1_0/components-chromium/paper-progress:paper-progress-extracted",
   ]
   externs_list = [

ui/file_manager/gallery/js/slide_mode.js

@@ -259,10 +259,10 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
   this.savedLabel_ = queryRequiredElement('.saved', this.options_);
 
   /**
-   * @private {!PaperCheckboxElement}
+   * @private {!Element}
    * @const
    */
-  this.overwriteOriginalCheckbox_ = /** @type {!PaperCheckboxElement} */
+  this.overwriteOriginalCheckbox_ = /** @type {!Element} */
       (queryRequiredElement('.overwrite-original', this.options_));
   this.overwriteOriginalCheckbox_.addEventListener('change',
       this.onOverwriteOriginalCheckboxChanged_.bind(this));

ui/webui/resources/cr_components/certificate_manager/ca_trust_edit_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.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/paper_checkbox_style_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="certificate_shared_css.html">
 <link rel="import" href="certificates_browser_proxy.html">
 
 <dom-module id="ca-trust-edit-dialog">
   <template>
-    <style include="certificate-shared paper-button-style paper-checkbox-style">
-      paper-checkbox {
-        display: block;
-      }
-
-      paper-checkbox,
+    <style include="certificate-shared paper-button-style">
+      cr-checkbox,
       #description {
         margin: 15px 0;
       }
@@ -32,15 +27,15 @@
         <div id="description">
           [[i18n('certificateManagerCaTrustEditDialogDescription')]]
         </div>
-        <paper-checkbox id="ssl" checked="[[trustInfo_.ssl]]">
+        <cr-checkbox id="ssl" checked="[[trustInfo_.ssl]]">
           [[i18n('certificateManagerCaTrustEditDialogSsl')]]
-        </paper-checkbox>
-        <paper-checkbox id="email" checked="[[trustInfo_.email]]">
+        </cr-checkbox>
+        <cr-checkbox id="email" checked="[[trustInfo_.email]]">
           [[i18n('certificateManagerCaTrustEditDialogEmail')]]
-        </paper-checkbox>
-        <paper-checkbox id="objSign" checked="[[trustInfo_.objSign]]">
+        </cr-checkbox>
+        <cr-checkbox id="objSign" checked="[[trustInfo_.objSign]]">
           [[i18n('certificateManagerCaTrustEditDialogObjSign')]]
-        </paper-checkbox>
+        </cr-checkbox>
       </div>
       <div slot="button-container">
         <paper-spinner-lite id="spinner"></paper-spinner-lite>

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html

@@ -43,7 +43,7 @@
       }
 
       :host ::slotted(.dropdown-item[disabled]) {
-        opacity: 0.65;
+        opacity: var(--cr-action-menu-disabled-item-opacity, 0.65);
       }
 
       :host ::slotted(.dropdown-item:not([disabled])) {

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

@@ -3,7 +3,19 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<!--
+List of customizable styles:
 
+  --cr-checkbox-border-size
+  --cr-checkbox-checked-box-color
+  --cr-checkbox-label-container (CSS mixin)
+  --cr-checkbox-mark-color
+  --cr-checkbox-ripple-checked-color
+  --cr-checkbox-ripple-size
+  --cr-checkbox-ripple-unchecked-color
+  --cr-checkbox-size
+  --cr-checkbox-unchecked-box-color
+-->
 <dom-module id="cr-checkbox">
   <template>
     <style>
@@ -14,6 +26,12 @@
         display: flex;
         outline: none;
         user-select: none;
+
+        --cr-checkbox-size: 16px;
+        --cr-checkbox-border-size: 2px;
+        --cr-checkbox-ripple-size: 40px;
+        --cr-checkbox-ripple-offset: calc(var(--cr-checkbox-size)/2 -
+            var(--cr-checkbox-ripple-size)/2 - var(--cr-checkbox-border-size));
       }
 
       :host([disabled]) {
@@ -24,48 +42,46 @@
 
       #checkbox {
         background: none;
-        border: none;
+        border: var(--cr-checkbox-border-size) solid
+            var(--cr-checkbox-unchecked-box-color, var(--google-grey-700));
+        border-radius: 2px;
+        box-sizing: border-box;
         cursor: pointer;
-        height: 16px;
+        display: block;
+        flex-shrink: 0;
+        height: var(--cr-checkbox-size);
         margin: 0;
         outline: none;
         padding: 0;
         position: relative;
         transform: none;  /* Checkboxes shouldn't flip even in RTL. */
-        width: 16px;
+        width: var(--cr-checkbox-size);
       }
 
       #checkmark {
-        border: 2px solid var(--google-grey-700);
-        border-radius: 2px;
-        display: block;
-        height: 12px;
-        width: 12px;
-      }
-
-      #checkmark::after {
-        border-color: inherit;
+        border-color: var(--cr-checkbox-mark-color, white);
         border-style: solid;
         border-width: 0 2px 2px 0;
         content: '';
         display: block;
         height: 70%;
         transform: scale(0) rotate(45deg);
-        transform-origin: 97% 86%;
+        transform-origin: 100% 85%;
         width: 36%;
       }
 
-      :host-context([dir='rtl']) #checkmark::after {
+      :host-context([dir='rtl']) #checkmark {
         transform-origin: 50% 14%;
       }
 
-      :host([checked]) #checkmark {
-        background: var(--google-blue-600);
-        border-color: var(--google-blue-600);
+      :host([checked]) #checkbox {
+        background: var(--cr-checkbox-checked-box-color,
+            var(--google-blue-600));
+        border-color: var(--cr-checkbox-checked-box-color,
+            var(--google-blue-600));
       }
 
-      :host([checked]) #checkmark::after {
-        border-color: white;
+      :host([checked]) #checkmark {
         transform: scale(1) rotate(45deg);
         /* Only animate when showing checkmark. */
         transition: transform 140ms ease-out;
@@ -73,26 +89,29 @@
 
       paper-ripple {
         --paper-ripple-opacity: 0.1;
-        color: var(--google-grey-900);
-        height: 40px;
-        left: -12px;
+        color: var(--cr-checkbox-ripple-unchecked-color, var(--google-grey-900));
+        height: var(--cr-checkbox-ripple-size);
+        left: var(--cr-checkbox-ripple-offset);
         pointer-events: none;
-        top: -12px;
+        top: var(--cr-checkbox-ripple-offset);
         transition: color linear 80ms;
-        width: 40px;
+        width: var(--cr-checkbox-ripple-size);
       }
 
       :host([checked]) paper-ripple {
-        color: var(--google-blue-600);
+        color: var(--cr-checkbox-ripple-checked-color, var(--google-blue-600));
       }
 
       :host-context([dir=rtl]) paper-ripple {
         left: auto;
-        right: -12px;
+        right: var(--cr-checkbox-ripple-offset);
       }
 
       #label-container {
         -webkit-padding-start: 20px;
+        white-space: normal;
+
+        @apply --cr-checkbox-label-container;
       }
 
       :host(.no-label) #label-container {

ui/webui/resources/cr_elements/paper_checkbox_style_css.html

-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<!-- Common paper-checkbox styling for Material Design WebUI. -->
-<dom-module id="paper-checkbox-style">
-  <template>
-    <style>
-      paper-checkbox {
-        --paper-checkbox-checked-color: var(--google-blue-500);
-        --paper-checkbox-ink-size: 40px;
-        --paper-checkbox-label-color: inherit;
-        --paper-checkbox-label-spacing: 20px;
-        --paper-checkbox-size: 16px;
-        --paper-checkbox-unchecked-color: var(--paper-grey-600);
-        -webkit-margin-start: 2px;
-      }
-    </style>
-  </template>
-</dom-module>
-

ui/webui/resources/cr_elements/paper_input_style_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
-<!-- Common paper-checkbox styling for Material Design WebUI. -->
+<!-- Common paper-input styling for Material Design WebUI. -->
 <dom-module id="paper-input-style">
   <template>
     <style>

ui/webui/resources/cr_elements_resources.grdp

@@ -280,10 +280,6 @@
              file="../../webui/resources/cr_elements/paper_button_style_css.html"
              type="chrome_html"
              compress="gzip" />
-  <structure name="IDR_CR_ELEMENTS_PAPER_CHECKBOX_STYLE_CSS_HTML"
-             file="../../webui/resources/cr_elements/paper_checkbox_style_css.html"
-             type="chrome_html"
-             compress="gzip" />
   <structure name="IDR_CR_ELEMENTS_PAPER_INPUT_STYLE_CSS_HTML"
              file="../../webui/resources/cr_elements/paper_input_style_css.html"
              type="chrome_html"