Revert "WebUI[MD-refresh]: replace most paper-input with cr-inputs"

This reverts commit 9a7643de.

Reason for revert: 

MediaRouterElementsBrowserTest.MediaRouterContainerFilterPart1 became
flaky in Mac10.11, 10.12, and 10.13 after this landed.

https://test-results.appspot.com/dashboards/flakiness_dashboard.html#tests=MediaRouterElementsBrowserTest.MediaRouterContainerFilterPart1

https://ci.chromium.org/p/chromium/builders/luci.chromium.ci/Mac10.12%20Tests/13846

[ RUN      ] MediaRouterElementsBrowserTest.MediaRouterContainerFilterPart1
[35158:6151:0618/184304.560701:WARNING:notification_platform_bridge_mac.mm(510)] AlertNotificationService: XPC connection invalidated.
[35158:775:0618/184305.696851:WARNING:CONSOLE(0)] "Styling master document from stylesheets defined in HTML Imports is deprecated. Please refer to https://goo.gl/EGXzpw for possible migration paths.", source:  (0)
[35158:775:0618/184306.249427:INFO:CONSOLE(1236)] "Running TestCase MediaRouterElementsBrowserTest.MAYBE_MediaRouterContainerFilterPart1", source: file:///b/s/w/ir/chrome/test/data/webui/test_api.js (1236)
[35158:775:0618/184306.545042:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184306.545170:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184306.602655:ERROR:CONSOLE(48)] "Mocha test failed: MediaRouterContainerFilterPart1 focus sink search input
Error: Script error. (:0)
", source: file:///b/s/w/ir/chrome/test/data/webui/mocha_adapter.js (48)
[35158:775:0618/184306.602796:ERROR:CONSOLE(206)] "Uncaught AssertionError: expected 'sink-list' to equal 'filter'", source: file:///b/s/w/ir/third_party/chaijs/chai.js (206)
[35158:775:0618/184306.688827:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184306.688978:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184306.878527:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184306.878646:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184307.420478:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184307.420605:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184308.705393:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184308.705526:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184308.710999:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184308.711145:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184308.845267:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184308.845353:WARNING:CONSOLE(16)] "Invalid keyframe value for property marginBottom: 44", source: chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js (16)
[35158:775:0618/184308.850290:ERROR:web_ui_test_handler.cc(100)] Test Errors: 1/12 tests had failed assertions.

Original change's description:
> WebUI[MD-refresh]: replace most paper-input with cr-inputs
> 
> This CL replaces most paper-inputs with cr-inputs within the code-base.
> After this CL, the 3 places that still has paper-input remaining are:
> - chrome/browser/resources/chromeos/login/
> - chrome/browser/resources/pdf/
> - ui/file_manager/
> 
> There are planned follow-up CLs to replace paper-input in the above 3
> areas as well.
> 
> Bug: 832177
> Cq-Include-Trybots: luci.chromium.try:closure_compilation
> Change-Id: I7acc7e0a26a6bd3d40ec6828608717fd97bd0c73
> Reviewed-on: https://chromium-review.googlesource.com/1086357
> Commit-Queue: Scott Chen <scottchen@chromium.org>
> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#568241}

TBR=dpapad@chromium.org,scottchen@chromium.org

Change-Id: I1dd101893378c8354c48e72d9f56231ec1ee9850
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 832177
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Reviewed-on: https://chromium-review.googlesource.com/1105207Reviewed-by: Giovanni Ortuño Urquidi <ortuno@chromium.org>
Commit-Queue: Giovanni Ortuño Urquidi <ortuno@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568320}

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

@@ -2,13 +2,13 @@
 
 <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_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.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-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-group/paper-radio-group.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="shared_styles.html">
@@ -24,12 +24,12 @@
       <div slot="body">
         <form>
           <div class="form-field-section">
-            <cr-input value="{{currentEditableObject.deviceName}}"
-                label="Device Name"></cr-input>
-            <cr-input value="{{currentEditableObject.name}}"
-                label="Tray Name"></cr-input>
-            <cr-input value="{{currentEditableObject.id}}"
-                label="ID" disabled></cr-input>
+            <paper-input value="{{currentEditableObject.deviceName}}"
+                label="Device Name"></paper-input>
+            <paper-input value="{{currentEditableObject.name}}"
+                label="Tray Name"></paper-input>
+            <paper-input value="{{currentEditableObject.id}}"
+                label="ID" disabled></paper-input>
           </div>
           <div class="form-field-section">
             <span class="toggle-button-label">Is Input</span>

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/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
-<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.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-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-group/paper-radio-group.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="shared_styles.html">
@@ -19,10 +18,6 @@
          See https://github.com/Polymer/polymer/pull/3668. -->
     <style include="device-emulator-shared-styles iron-flex iron-flex-alignment
         iron-positioning md-select">
-      cr-input {
-        --cr-input-error-display: none;
-        margin-bottom: var(--cr-form-field-bottom-spacing);
-      }
     </style>
     <div class="layout vertical">
       <div class="element-label">
@@ -41,15 +36,17 @@
       </label>
       <iron-collapse opened="[[isBatteryPresent(batteryState)]]">
         <div class="layout vertical">
-          <cr-input label="Battery percentage" value="[[batteryPercent]]"
+          <paper-input label="Battery percentage" value="[[batteryPercent]]"
               on-change="onBatteryPercentChange" type="number">
-          </cr-input>
-          <cr-input label="Seconds until empty" value="[[timeUntilEmpty]]"
+          </paper-input>
+
+          <paper-input label="Seconds until empty" value="[[timeUntilEmpty]]"
               on-change="onTimeUntilEmptyChange" type="number">
-          </cr-input>
-          <cr-input label="Seconds until full" value="[[timeUntilFull]]"
+          </paper-input>
+
+          <paper-input label="Seconds until full" value="[[timeUntilFull]]"
               on-change="onTimeUntilFullChange" type="number">
-          </cr-input>
+          </paper-input>
         </div>
       </iron-collapse>
 

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

@@ -2,13 +2,13 @@
 
 <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_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.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-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-group/paper-radio-group.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="shared_styles.html">
@@ -24,18 +24,18 @@
       <div slot="body">
         <form>
           <div class="form-field-section">
-            <cr-input value="{{currentEditableObject.alias}}"
-                label="Alias"></cr-input>
-            <cr-input on-input="validatePath"
+            <paper-input value="{{currentEditableObject.alias}}"
+                label="Alias"></paper-input>
+            <paper-input on-input="validatePath"
                 id="devicePathInput"
                 value="{{currentEditableObject.path}}"
-                label="Path"></cr-input>
-            <cr-input value="{{currentEditableObject.name}}"
-                label="Name"></cr-input>
-            <cr-input id="deviceAddressInput" on-input="handleAddressInput"
+                label="Path" on-input="validatePath"></paper-input>
+            <paper-input value="{{currentEditableObject.name}}"
+                label="Name"></paper-input>
+            <paper-input id="deviceAddressInput" on-input="handleAddressInput"
                 value="{{currentEditableObject.address}}"
                 label="Address (xx:xx:xx:xx:xx:xx)"
-                maxlength="17"></cr-input>
+                maxlength="17"></paper-input>
           </div>
           <div class="form-field-section">
             <span class="toggle-button-label">Trusted</span>
@@ -78,8 +78,8 @@
                   hidden$=
                       "[[!showAuthToken(currentEditableObject.pairingMethod)]]"
                       >
-                <cr-input value="{{currentEditableObject.pairingAuthToken}}"
-                    label="Code"></cr-input>
+                <paper-input value="{{currentEditableObject.pairingAuthToken}}"
+                    label="Code"></paper-input>
               </div>
             <div class="form-field-section">
               <label>

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

@@ -3,10 +3,9 @@
 <dom-module id="device-emulator-shared-styles">
   <template>
     <style>
-      cr-input {
+      paper-input {
         display: inline-block;
         margin: 0 15px;
-        vertical-align: top;
         width: 200px;
       }
 

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

@@ -2,7 +2,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-cr-input,
+input,
 paper-button {
   -webkit-app-region: no-drag;
 }
@@ -22,7 +22,6 @@ paper-button {
 }
 
 #input {
-  --cr-input-error-display: none;
   font-family: inherit;
   font-size: 13px;
   font-weight: inherit;
@@ -56,6 +55,13 @@ paper-button {
   box-shadow: 0 0 0 2px rgba(51, 103, 214, 0.5);
 }
 
+paper-input-container {
+  --paper-input-container-focus-color: rgb(51, 103, 214);
+  --paper-input-container-underline-focus: {
+    height: 1px;
+  }
+}
+
 #acceptButton {
   background: rgb(51, 103, 214);
   color: white;

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/cr_elements/cr_input/cr_input.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-input/paper-input-container.html">
 
 <dom-module id="passphrase-dialog">
   <template>
     <link rel="stylesheet" href="../css/passphrase-dialog.css">
     <span id="title" i18n-content="ZIP_ARCHIVER_PASSPHRASE_TITLE"></span>
-    <cr-input type="password"
-              id="input"
-              autofocus
-              i18n-values="placeholder:ZIP_ARCHIVER_PASSPHRASE_INPUT_LABEL;aria-label:ZIP_ARCHIVER_PASSPHRASE_INPUT_LABEL">
-    </cr-input>
+    <paper-input-container>
+      <input is="core-input"
+             type="password"
+             id="input"
+             slot="input"
+             autofocus
+             i18n-values="placeholder:ZIP_ARCHIVER_PASSPHRASE_INPUT_LABEL;aria-label:ZIP_ARCHIVER_PASSPHRASE_INPUT_LABEL">
+    </paper-input-container>
     <div id="buttons">
       <paper-button noink
                     on-click="accept"

chrome/browser/resources/md_bookmarks/BUILD.gn

@@ -139,7 +139,7 @@ js_library("edit_dialog") {
     ":api_listener",
     ":dialog_focus_manager",
     ":types",
-    "//ui/webui/resources/cr_elements/cr_input:cr_input",
+    "//third_party/polymer/v1_0/components-chromium/paper-input:paper-input-extracted",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:load_time_data",

chrome/browser/resources/md_bookmarks/edit_dialog.html

@@ -2,28 +2,35 @@
 
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.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/shared_style_css.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-input/paper-input.html">
 <link rel="import" href="chrome://bookmarks/dialog_focus_manager.html">
 
 <dom-module id="bookmarks-edit-dialog">
   <template>
-    <style include="cr-shared-style paper-button-style">
+    <style include="cr-shared-style paper-input-style paper-button-style">
     </style>
     <cr-dialog id="dialog">
       <div slot="title">
         [[getDialogTitle_(isFolder_, isEdit_)]]
       </div>
       <div slot="body">
-        <cr-input id="name" label="$i18n{editDialogNameInput}"
-            value="{{titleValue_}}" autofocus>
-        </cr-input>
-        <cr-input id="url" type="url" label="$i18n{editDialogUrlInput}"
-            error-message="$i18n{editDialogInvalidUrl}" value="{{urlValue_}}"
-            hidden$="[[isFolder_]]" required>
-        </cr-input>
+        <paper-input always-float-label id="name"
+            label="$i18n{editDialogNameInput}"
+            value="{{titleValue_}}"
+            autofocus>
+        </paper-input>
+        <paper-input always-float-label id="url"
+            type="url"
+            label="$i18n{editDialogUrlInput}"
+            error-message="$i18n{editDialogInvalidUrl}"
+            value="{{urlValue_}}"
+            hidden$="[[isFolder_]]"
+            required>
+        </paper-input>
       </div>
       <div slot="button-container">
         <paper-button class="cancel-button" on-click="onCancelButtonTap_">

chrome/browser/resources/md_bookmarks/edit_dialog.js

@@ -98,7 +98,7 @@ Polymer({
    * @private
    */
   validateUrl_: function() {
-    const urlInput = /** @type {CrInputElement} */ (this.$.url);
+    const urlInput = /** @type {PaperInputElement} */ (this.$.url);
     const originalValue = this.urlValue_;
 
     if (urlInput.validate())

chrome/browser/resources/md_extensions/keyboard_shortcuts.html

@@ -38,22 +38,18 @@
       }
 
       .command-entry {
-        align-items: start;
+        align-items: center;
         display: flex;
-        /* Makes top/bottom spacing of each row more even, while leaving
-           space for cr-input error message in between rows. */
-        margin-bottom: -8px;
-        padding-top: 16px;
+        height: var(--cr-section-min-height);
       }
 
       .command-name {
-        /* Align with cr-input by matching the field's top padding. */
         flex: 1;
-        margin-top: 6px;
       }
 
       .command-entry .md-select {
-        /* TODO(scottchen): line-height needs adjustment to fix large fonts. */
+        /* TODO(scottchen): line-height needs adjustment to fix large fonts,
+         * same for paper-input. */
         -webkit-margin-start: var(--cr-section-padding);
         line-height: 22px;
       }

chrome/browser/resources/md_extensions/kiosk_dialog.html

@@ -2,7 +2,6 @@
 
 <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_input/cr_input.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">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
@@ -12,6 +11,7 @@
 <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-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">
 <link rel="import" href="kiosk_browser_proxy.html">
 
@@ -19,18 +19,28 @@
   <template>
     <style include="cr-shared-style paper-button-style cr-icons">
       #add-kiosk-app {
+        --paper-input-container-input: {
+          font-size: inherit;
+        };
+        align-items: center;
+        display: flex;
         margin-bottom: 10px;
         margin-top: 20px;
+        width: 350px;
       }
 
-      #add-kiosk-app cr-input {
-        width: 350px;
+      #add-kiosk-app paper-input {
+        flex: 1;
       }
 
       #add-kiosk-app paper-button {
         -webkit-margin-start: 10px;
       }
 
+      paper-button {
+        color: var(--google-blue-500);
+      }
+
       #kiosk-apps-list {
         border: 1px solid var(--paper-grey-300);
         padding: 10px;
@@ -98,16 +108,17 @@
           </template>
         </div>
         <div id="add-kiosk-app">
-          <cr-input id="add-input" label="$i18n{kioskAddApp}"
+          <paper-input id="add-input" label="$i18n{kioskAddApp}"
               placeholder="$i18n{kioskAddAppHint}" value="{{addAppInput_}}"
-              invalid="[[errorAppId_]]" on-keydown="clearInputInvalid_"
+              always-float-label invalid="[[errorAppId_]]"
               error-message="[[getErrorMessage_(
-                  '$i18nPolymer{kioskInvalidApp}', errorAppId_)]]">
-            <paper-button id="add-button" on-click="onAddAppTap_"
-                disabled="[[!addAppInput_]]" slot="suffix">
-              $i18n{add}
-            </paper-button>
-          </cr-input>
+                  '$i18nPolymer{kioskInvalidApp}', errorAppId_)]]"
+              on-keydown="clearInputInvalid_">
+          </paper-input>
+          <paper-button id="add-button" on-click="onAddAppTap_"
+              disabled="[[!addAppInput_]]">
+            $i18n{add}
+          </paper-button>
         </div>
         <cr-checkbox disabled="[[!canEditBailout_]]" id="bailout"
             on-change="onBailoutChanged_" checked="[[bailoutDisabled_]]"

chrome/browser/resources/md_extensions/pack_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.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/shared_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/shared_vars_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/util.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-input/paper-input.html">
 <link rel="import" href="pack_dialog_alert.html">
 
 <dom-module id="extensions-pack-dialog">
   <template>
-    <style include="cr-shared-style paper-button-style">
-      cr-input {
-        margin-top: var(--cr-form-field-bottom-spacing);
-        --cr-input-error-display: none;
+    <style include="cr-shared-style paper-button-style paper-input-style">
+      .file-input {
+        align-items: center;
+        display: flex;
       }
 
-      paper-button[slot='suffix'] {
+      .file-input paper-input {
+        flex: 1;
+      }
+
+      .file-input paper-button {
         -webkit-margin-start: 10px;
+        color: var(--google-blue-500);
       }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">$i18n{packDialogTitle}</div>
       <div slot="body">
         <div>$i18n{packDialogContent}</div>
-        <cr-input id="root-dir" label="$i18n{packDialogExtensionRoot}"
-            value="{{packDirectory_}}">
-          <paper-button id="root-dir-browse" on-click="onRootBrowse_"
-              slot="suffix">
+        <div class="file-input">
+          <paper-input id="root-dir" label="$i18n{packDialogExtensionRoot}"
+              always-float-label value="{{packDirectory_}}">
+          </paper-input>
+          <paper-button id="root-dir-browse" on-click="onRootBrowse_">
             $i18n{packDialogBrowse}
           </paper-button>
-        </cr-input>
-        <cr-input id="key-file" label="$i18n{packDialogKeyFile}"
-            value="{{keyFile_}}">
-          <paper-button id="key-file-browse" on-click="onKeyBrowse_"
-              slot="suffix">
+        </div>
+        <div class="file-input">
+          <paper-input id="key-file" label="$i18n{packDialogKeyFile}"
+              always-float-label value="{{keyFile_}}">
+          </paper-input>
+          <paper-button id="key-file-browse" on-click="onKeyBrowse_">
             $i18n{packDialogBrowse}
           </paper-button>
-        </cr-input>
+        </div>
       </div>
       <div slot="button-container">
         <paper-button class="cancel-button" on-click="onCancelTap_">

chrome/browser/resources/md_extensions/shortcut_input.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_input_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_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/i18n_behavior.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="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="shortcut_util.html">
 
 <dom-module id="extensions-shortcut-input">
   <template>
-    <style include="cr-icons cr-hidden-style">
+    <style include="cr-icons cr-hidden-style paper-input-style">
       #main {
         position: relative;
         width: 200px;
       }
 
+      #input {
+        --paper-input-container: {
+          margin-bottom: 0px;
+          margin-top: 2px;  /* Offset underline spacing. */
+          padding: 0;
+          @apply --cr-primary-text;
+        };
+      }
+
       #clearContainer {
-        --cr-icon-ripple-size: 28px;
+        bottom: -4px;
         position: absolute;
-        right: 2px;
+        right: -8px;
       }
 
       :host-context([dir='rtl']) #clearContainer {
-        left: -2px;
+        left: -8px;
         right: inherit;
       }
     </style>
     <div id="main">
-      <cr-input id="input" placeholder="$i18n{shortcutTypeAShortcut}"
+      <paper-input id="input" placeholder="$i18n{shortcutTypeAShortcut}"
           error-message="[[getErrorString_(error_,
               '$i18nPolymer{shortcutIncludeStartModifier}',
               '$i18nPolymer{shortcutTooManyModifiers}',
               '$i18nPolymer{shortcutNeedCharacter}')]]"
-          value="[[computeText_(capturing_, shortcut, pendingShortcut_)]]">
-        <paper-icon-button-light id="clearContainer" slot="suffix"
-            class="icon-cancel no-overlap"
-            hidden$="[[computeClearHidden_(capturing_, shortcut)]]">
-          <button id="clear" on-click="onClearTap_"></button>
-        </paper-icon-button-light>
-      </cr-input>
+          value="[[computeText_(capturing_, shortcut, pendingShortcut_)]]"
+          no-label-float>
+      </paper-input>
+      <paper-icon-button-light class="icon-clear no-overlap" id="clearContainer"
+          hidden$="[[computeClearHidden_(capturing_, shortcut)]]">
+        <button id="clear" on-click="onClearTap_"></button>
+      </paper-icon-button-light>
     </div>
   </template>
   <script src="shortcut_input.js"></script>

chrome/browser/resources/md_extensions/shortcut_input.js

@@ -57,7 +57,7 @@ cr.define('extensions', function() {
 
     /** @override */
     ready: function() {
-      const node = this.$.input;
+      const node = this.$['input'];
       node.addEventListener('mouseup', this.startCapture_.bind(this));
       node.addEventListener('blur', this.endCapture_.bind(this));
       node.addEventListener('focus', this.startCapture_.bind(this));
@@ -90,9 +90,6 @@ cr.define('extensions', function() {
      * @private
      */
     onKeyDown_: function(e) {
-      if (e.target == this.$.clear)
-        return;
-
       if (e.keyCode == extensions.Key.Escape) {
         if (!this.capturing_) {
           // If we're not currently capturing, allow escape to propagate.
@@ -120,13 +117,6 @@ cr.define('extensions', function() {
      * @private
      */
     onKeyUp_: function(e) {
-      // Ignores pressing 'Space' or 'Enter' on the clear button. In 'Enter's
-      // case, the clear button disappears before key-up, so 'Enter's key-up
-      // target becomes the input field, not the clear button, and needs to
-      // be caught explicitly.
-      if (e.target == this.$.clear || e.key == 'Enter')
-        return;
-
       if (e.keyCode == extensions.Key.Escape || e.keyCode == extensions.Key.Tab)
         return;
 
@@ -216,11 +206,10 @@ cr.define('extensions', function() {
 
     /** @private */
     onClearTap_: function() {
-      assert(this.shortcut);
-
-      this.pendingShortcut_ = '';
-      this.commitPending_();
-      this.endCapture_();
+      if (this.shortcut) {
+        this.pendingShortcut_ = '';
+        this.commitPending_();
+      }
     },
   });
 

chrome/browser/resources/md_user_manager/BUILD.gn

@@ -26,7 +26,6 @@ js_library("control_bar") {
 js_library("create_profile") {
   deps = [
     ":profile_browser_proxy",
-    "//ui/webui/resources/cr_elements/cr_input:cr_input",
     "//ui/webui/resources/cr_elements/cr_profile_avatar_selector:cr_profile_avatar_selector",
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:util",

chrome/browser/resources/md_user_manager/create_profile.html

@@ -3,7 +3,6 @@
 <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_input/cr_input.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/html/action_link.html">
@@ -14,6 +13,7 @@
 <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-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 
 <dom-module id="create-profile">
@@ -74,9 +74,16 @@
       }
 
       #nameInput {
-        --cr-input-input: {
-          border-bottom: 1px solid var(--paper-grey-800);
-        }
+        --paper-input-container-focus-color: var(--google-blue-500);
+        --paper-input-container-input: {
+          font-size: inherit;
+        };
+        --paper-input-container-label: {
+          font-size: inherit;
+        };
+      }
+
+      #nameInput {
         margin-bottom: 24px;
         margin-top: 32px;
         width: 300px;
@@ -111,9 +118,9 @@
     </div>
     <div class="container">
       <div id="title-bar">$i18n{createProfileTitle}</div>
-      <cr-input id="nameInput" value="{{profileName_}}" pattern=".*\S.*"
-          auto-validate>
-      </cr-input>
+      <paper-input id="nameInput" value="{{profileName_}}" pattern=".*\S.*"
+          no-label-float auto-validate>
+      </paper-input>
       <cr-profile-avatar-selector avatars="[[availableIcons_]]"
           selected-avatar="{{selectedAvatar_}}">
       </cr-profile-avatar-selector>

chrome/browser/resources/md_user_manager/create_profile.js

@@ -112,7 +112,7 @@ Polymer({
 
   /** @override */
   attached: function() {
-    // cr-input's focusable element isn't defined until after it's attached.
+    // paper-input's focusable element isn't defined until after it's attached.
     Polymer.RenderStatus.afterNextRender(this, () => this.$.nameInput.focus());
   },
 
@@ -243,7 +243,9 @@ Polymer({
    * @private
    */
   isSaveDisabled_: function(createInProgress, profileName) {
-    /** @type {CrInputElement} */
+    // TODO(mahmadi): Figure out a way to add 'paper-input-extracted' as a
+    // dependency and cast to PaperInputElement instead.
+    /** @type {{validate: function():boolean}} */
     const nameInput = this.$.nameInput;
     return createInProgress || !profileName || !nameInput.validate();
   },

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

@@ -148,6 +148,10 @@ paper-listbox {
   user-select: none;
 }
 
+#search-input-container {
+  flex-grow: 1;
+}
+
 #search-results {
   overflow-x: hidden;
   overflow-y: auto;
@@ -226,21 +230,19 @@ paper-listbox {
 }
 
 #sink-search-input {
-  --cr-input-container: {
-    border-radius: 0;
-  }
-  --cr-input-error-display: none;
-  --cr-input-input: {
-    -webkit-padding-start: 0;
-    background-color: white;
-    border-bottom: 1px solid var(--paper-grey-800);
-    padding-bottom: 2px;
-    padding-top: 2px;
-  }
+  --paper-input-container: {
+    margin: 8px 0;
+    padding: 0;
+  };
+  --paper-input-container-focus-color: rgb(33, 150, 243);
+  --paper-input-container-input: {
+    font-size: 12px;
+  };
+  --paper-input-container-label: {
+    font-size: 12px;
+  };
   -webkit-margin-end: 31px;
-  align-self: center;
-  flex-grow: 1;
-  font-size: 12px;
+  box-sizing: border-box;
 }
 
 .sink-subtext {

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/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
@@ -159,12 +159,16 @@
         <template is="dom-if" if="[[searchEnabled_]]">
           <div id="sink-search">
             <div class="sink-content">
-              <paper-icon-button id="sink-search-icon" icon="media-router:search"
-                  on-tap="searchButtonClick_" title="[[i18n('searchButtonTitle')]]">
-              </paper-icon-button>
-              <cr-input id="sink-search-input" value="{{searchInputText_}}"
-                  placeholder="[[i18n('searchInputLabel')]]">
-              </cr-input>
+              <div>
+                <paper-icon-button id="sink-search-icon" icon="media-router:search"
+                    on-tap="searchButtonClick_" title="[[i18n('searchButtonTitle')]]">
+                </paper-icon-button>
+              </div>
+              <div id="search-input-container">
+                <paper-input id="sink-search-input" label="[[i18n('searchInputLabel')]]"
+                    no-label-float value="{{searchInputText_}}">
+                </paper-input>
+              </div>
             </div>
           </div>
         </template>

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

@@ -59,7 +59,7 @@
         <div id="pinKeyboardDiv" class="settings-box continuation">
           <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
               on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}"
-              has-error="[[hasError_(problemMessage_, problemClass_)]]">
+              has-error$="[[hasError_(problemMessage_, problemClass_)]]">
             <!-- Warning/error; only shown if title is hidden. -->
             <div id="problemDiv" class$="[[problemClass_]]"
                 invisible$="[[!problemMessage_]]" problem>

chrome/browser/resources/settings/settings_page/settings_subpage_search.html

@@ -22,9 +22,6 @@
       }
 
       cr-input {
-        --cr-input-container: {
-          border-radius: 0;
-        }
         --cr-input-error-display: none;
         --cr-input-input: {
           background-color: white;

chrome/browser/ui/webui/settings/search_engines_handler.cc

@@ -34,8 +34,8 @@
 #include "extensions/common/extension.h"
 
 namespace {
-// The following strings need to match with the IDs of the text input elements
-// at settings/search_engines_page/search_engine_dialog.html.
+// The following strings need to match with the IDs of the paper-input elements
+// at settings/search_engines_page/add_search_engine_dialog.html.
 const char kSearchEngineField[] = "searchEngine";
 const char kKeywordField[] = "keyword";
 const char kQueryUrlField[] = "queryUrl";

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

@@ -129,12 +129,12 @@ suite('cr-dialog', function() {
     assertTrue(clicked);
   });
 
-  test('enter keys from cr-inputs (only) are processed', function() {
+  test('enter keys from paper-inputs (only) are processed', function() {
     document.body.innerHTML = `
       <cr-dialog>
         <div slot="title">title</div>
         <div slot="body">
-          <cr-input></cr-input>
+          <paper-input></paper-input>
           <foobar></foobar>
           <button class="action-button">active</button>
         </div>
@@ -142,7 +142,7 @@ suite('cr-dialog', function() {
 
     const dialog = document.body.querySelector('cr-dialog');
 
-    const inputElement = document.body.querySelector('cr-input');
+    const inputElement = document.body.querySelector('paper-input');
     const otherElement = document.body.querySelector('foobar');
     const actionButton = document.body.querySelector('.action-button');
     assertTrue(!!inputElement);

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

@@ -21,7 +21,6 @@ suite('cr-input', function() {
       ['disabled', 'disabled', false, true],
       ['incremental', 'incremental', false, true],
       ['maxlength', 'maxLength', -1, 5],
-      ['minlength', 'minLength', -1, 5],
       ['pattern', 'pattern', '', '[a-z]+'],
       ['readonly', 'readOnly', false, true],
       ['required', 'required', false, true],

chrome/test/data/webui/media_router/media_router_container_filter_tests.js

@@ -169,7 +169,7 @@ cr.define('media_router_container_filter', function() {
       // Tests that focusing the sink search input will cause the container to
       // enter filter view.
       test('focus sink search input', function(done) {
-        container.$$('#sink-search-input').focus();
+        MockInteractions.focus(container.$$('#sink-search-input'));
         setTimeout(function() {
           checkCurrentView(media_router.MediaRouterView.FILTER);
           assertEquals(

chrome/test/data/webui/settings/certificate_manager_test.js

@@ -168,7 +168,7 @@ cr.define('certificate_manager', function() {
   /**
    * Triggers an 'input' event on the given text input field (which triggers
    * validation to occur for password fields being tested in this file).
-   * @param {!CrInputElement} element
+   * @param {!PaperInputElement} element
    */
   function triggerInputEvent(element) {
     // The actual key code is irrelevant for tests.

chrome/test/data/webui/settings/search_engines_page_test.js

@@ -92,14 +92,14 @@ cr.define('settings_search_engines_page', function() {
       });
 
       // Tests the dialog to add a new search engine. Specifically
-      //  - cr-input elements are empty initially.
+      //  - paper-input elements are empty initially.
       //  - action button initially disabled.
       //  - validation is triggered on 'input' event.
       //  - action button is enabled when all fields are valid.
       //  - action button triggers appropriate browser signal when tapped.
       test('DialogAddSearchEngine', function() {
         /**
-         * Triggers an 'input' event on the cr-input element and checks that
+         * Triggers an 'input' event on the paper-input element and checks that
          * validation is triggered.
          * @param {string} inputId
          * @return {!Promise}
@@ -421,7 +421,7 @@ cr.define('settings_search_engines_page', function() {
               const dialog = page.$$('settings-search-engine-dialog');
               assertTrue(!!dialog);
 
-              // Check that the cr-input fields are pre-populated.
+              // Check that the paper-input fields are pre-populated.
               assertEquals(engine.name, dialog.$.searchEngine.value);
               assertEquals(engine.keyword, dialog.$.keyword.value);
               assertEquals(engine.url, dialog.$.queryUrl.value);

ui/webui/resources/cr_components/chromeos/BUILD.gn

@@ -21,8 +21,8 @@ js_type_check("chromeos_resources") {
 js_library("bluetooth_dialog") {
   deps = [
     "//third_party/polymer/v1_0/components-chromium/iron-resizable-behavior:iron-resizable-behavior-extracted",
+    "//third_party/polymer/v1_0/components-chromium/paper-input:paper-input-extracted",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog",
-    "//ui/webui/resources/cr_elements/cr_input:cr_input",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:i18n_behavior",

ui/webui/resources/cr_components/chromeos/bluetooth_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
@@ -9,6 +8,7 @@
 <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-list/iron-list.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-input/paper-input.html">
 
 <dom-module id="bluetooth-dialog">
   <template>
@@ -17,7 +17,7 @@
         margin-bottom: 10px;
       }
 
-      #pairing cr-input {
+      #pairing paper-input {
         text-align: center;
       }
 
@@ -91,14 +91,14 @@
                 [[getMessage_(pairingDevice, pairingEvent_)]]
               </div>
               <div hidden$="[[!showEnterPincode_(pairingEvent_)]]">
-                <cr-input id="pincode" minlength="1" maxlength="16"
+                <paper-input id="pincode" minlength="1" maxlength="16"
                     type="text" auto-validate value="{{pinOrPass_}}">
-                </cr-input>
+                </paper-input>
               </div>
               <div hidden$="[[!showEnterPasskey_(pairingEvent_)]]">
-                <cr-input id="passkey" minlength="6" maxlength="6"
+                <paper-input id="passkey" minlength="6" maxlength="6"
                     type="text" auto-validate value="{{pinOrPass_}}">
-                </cr-input>
+                </paper-input>
               </div>
               <div id="pinDiv" class="layout horizontal center center-justified"
                   hidden="[[!showDisplayPassOrPin_(pairingEvent_)]]">

ui/webui/resources/cr_components/chromeos/bluetooth_dialog.js

@@ -326,10 +326,10 @@ Polymer({
         (this.pairingEvent_.pairing == PairingEventType.REQUEST_PINCODE) ?
         '#pincode' :
         '#passkey';
-    var crInput = /** @type {!CrInputElement} */ (this.$$(inputId));
-    assert(crInput);
-    /** @type {string} */ var value = crInput.value;
-    return !!value && crInput.validate();
+    var paperInput = /** @type {!PaperInputElement} */ (this.$$(inputId));
+    assert(paperInput);
+    /** @type {string} */ var value = paperInput.value;
+    return !!value && paperInput.validate();
   },
 
   /**

ui/webui/resources/cr_components/chromeos/compiled_resources2.gyp

@@ -21,11 +21,11 @@
       'target_name': 'bluetooth_dialog',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_dialog/compiled_resources2.gyp:cr_dialog',
-        '<(DEPTH)/ui/webui/resources/cr_elements/cr_input/compiled_resources2.gyp:cr_input',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-resizable-behavior/compiled_resources2.gyp:iron-resizable-behavior-extracted',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
         '<(EXTERNS_GYP):bluetooth',
         '<(EXTERNS_GYP):bluetooth_private',
         '<(INTERFACES_GYP):bluetooth_interface',

ui/webui/resources/cr_components/chromeos/quick_unlock/BUILD.gn

@@ -13,7 +13,7 @@ js_type_check("closure_compile") {
 js_library("pin_keyboard") {
   deps = [
     "//third_party/polymer/v1_0/components-chromium/paper-button:paper-button-extracted",
-    "//ui/webui/resources/cr_elements/cr_input:cr_input",
+    "//third_party/polymer/v1_0/components-chromium/paper-input:paper-input-extracted",
     "//ui/webui/resources/js:i18n_behavior",
   ]
 }

ui/webui/resources/cr_components/chromeos/quick_unlock/compiled_resources2.gyp

@@ -8,7 +8,7 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-button/compiled_resources2.gyp:paper-button-extracted',
-        '<(DEPTH)/ui/webui/resources/cr_elements/cr_input/compiled_resources2.gyp:cr_input',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
        ],
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -4,12 +4,12 @@
 
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_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-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-styles/color.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">
@@ -138,6 +138,10 @@
         position: relative;
         text-align: center;
         width: 180px;
+
+        --paper-input-container-input: {
+          caret-color: var(--paper-input-container-focus-color);
+        }
       }
 
       #pinInput[has-content] {
@@ -148,6 +152,16 @@
         direction: rtl;
       }
 
+      #pinInput[type=number]::-webkit-inner-spin-button,
+      #pinInput[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      :host([has-error]) #pinInput {
+        --paper-input-container-focus-color: var(--paper-red-500);
+      }
+
       /* Ensure that all children of paper-button do not consume events. This
        * simplifies the event handler code. */
       paper-button * {
@@ -157,12 +171,13 @@
 
     <div id="root" on-contextmenu="onContextMenu_" on-tap="focusInput_">
       <div id="pinInputDiv" class="row">
-        <cr-input id="pinInput" type="password" value="{{value}}"
+        <paper-input id="pinInput" type="password" no-label-float
+            value="{{value}}"
             is-input-rtl$="[[isInputRtl_(value)]]"
-            has-content$="[[hasInput_(value)]]" invalid="[[hasError]]"
-            placeholder="[[getInputPlaceholder_(enablePassword)]]"
+            has-content$="[[hasInput_(value)]]"
+            label="[[getInputPlaceholder_(enablePassword)]]"
             on-keydown="onInputKeyDown_">
-        </cr-input>
+        </paper-input>
       </div>
       <slot select="[problem]"></slot>
       <div class="row">

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js

@@ -65,12 +65,10 @@ Polymer({
       value: false,
     },
 
-    hasError: Boolean,
-
     /**
      * The password element the pin keyboard is associated with. If this is not
      * set, then a default input element is shown and used.
-     * @type {?HTMLElement}
+     * @type {?Element}
      * @private
      */
     passwordElement: Object,
@@ -397,8 +395,7 @@ Polymer({
   passwordElement_: function() {
     // |passwordElement| is null by default. It can be set to override the
     // input field that will be populated with the keypad.
-    return this.passwordElement ||
-        (/** @type {CrInputElement} */ (this.$.pinInput)).inputElement;
+    return this.passwordElement || this.$.pinInput.inputElement.inputElement;
   },
 });
 })();

ui/webui/resources/cr_elements/cr_input/compiled_resources2.gyp

-# Copyright 2018 The Chromium Authors. All rights reserved.
-# Use of this source code is governed by a BSD-style license that can be
-# found in the LICENSE file.
-{
-  'targets': [
-    {
-      'target_name': 'cr_input',
-      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
-    },
-  ],
-}

ui/webui/resources/cr_elements/cr_input/cr_input.html

@@ -105,7 +105,7 @@
             value="{{value::input}}" tabindex$="[[tabIndex]]" type="[[type]]"
             readonly$="[[readonly]]" maxlength$="[[maxlength]]"
             pattern="[[pattern]]" required="[[required]]"
-            incremental="[[incremental]]" minlength$="[[minlength]]">
+            incremental="[[incremental]]">
         <div id="underline"></div>
       </div>
       <slot name="suffix"></slot>

ui/webui/resources/cr_elements/cr_input/cr_input.js

@@ -10,7 +10,6 @@
  *   disabled
  *   incremental (only applicable when type="search")
  *   maxlength
- *   minlength
  *   pattern
  *   placeholder
  *   readonly
@@ -72,11 +71,6 @@ Polymer({
       reflectToAttribute: true,
     },
 
-    minlength: {
-      type: Number,
-      reflectToAttribute: true,
-    },
-
     pattern: {
       type: String,
       reflectToAttribute: true,
@@ -168,7 +162,7 @@ Polymer({
   /** @private */
   onValueChanged_: function() {
     if (this.autoValidate)
-      this.validate();
+      this.invalid = !this.inputElement.checkValidity();
   },
 
   /**
@@ -190,10 +184,4 @@ Polymer({
     else
       this.removeAttribute('focused_');
   },
-
-  /** @return {boolean} */
-  validate: function() {
-    this.invalid = !this.inputElement.checkValidity();
-    return !this.invalid;
-  },
 });
\ No newline at end of file

ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html

@@ -28,8 +28,6 @@
         overflow: hidden;
         position: relative;
         width: var(--cr-input-width, 100%);
-
-        @apply --cr-input-container;
       }
 
       #input {
@@ -44,7 +42,6 @@
         font-size: inherit;
         line-height: inherit;
         outline: none;
-        text-align: inherit;
         width: 100%;
 
         /**