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}

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}
e25ce181 · Giovanni Ortuño Urquidi · Commit Bot · 156afe2a · e25ce181 · e25ce181
Commit e25ce181 authored Jun 19, 2018 by Giovanni Ortuño Urquidi Committed by Commit Bot Jun 19, 2018
39 changed files
--- a/chrome/browser/resources/chromeos/emulator/audio_settings.html
+++ b/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}}"
+            <paper-input value="{{currentEditableObject.deviceName}}"
-                label="Device Name"></cr-input>
+                label="Device Name"></paper-input>
-            <cr-input value="{{currentEditableObject.name}}"
+            <paper-input value="{{currentEditableObject.name}}"
-                label="Tray Name"></cr-input>
+                label="Tray Name"></paper-input>
-            <cr-input value="{{currentEditableObject.id}}"
+            <paper-input value="{{currentEditableObject.id}}"
-                label="ID" disabled></cr-input>
+                label="ID" disabled></paper-input>
          </div>
          <div class="form-field-section">
            <span class="toggle-button-label">Is Input</span>

--- a/chrome/browser/resources/chromeos/emulator/battery_settings.html
+++ b/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>
+          </paper-input>
-          <cr-input label="Seconds until empty" value="[[timeUntilEmpty]]"
+          <paper-input label="Seconds until empty" value="[[timeUntilEmpty]]"
              on-change="onTimeUntilEmptyChange" type="number">
-          </cr-input>
+          </paper-input>
-          <cr-input label="Seconds until full" value="[[timeUntilFull]]"
+          <paper-input label="Seconds until full" value="[[timeUntilFull]]"
              on-change="onTimeUntilFullChange" type="number">
-          </cr-input>
+          </paper-input>
        </div>
      </iron-collapse>

--- a/chrome/browser/resources/chromeos/emulator/bluetooth_settings.html
+++ b/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}}"
+            <paper-input value="{{currentEditableObject.alias}}"
-                label="Alias"></cr-input>
+                label="Alias"></paper-input>
-            <cr-input on-input="validatePath"
+            <paper-input on-input="validatePath"
                id="devicePathInput"
                value="{{currentEditableObject.path}}"
-                label="Path"></cr-input>
+                label="Path" on-input="validatePath"></paper-input>
-            <cr-input value="{{currentEditableObject.name}}"
+            <paper-input value="{{currentEditableObject.name}}"
-                label="Name"></cr-input>
+                label="Name"></paper-input>
-            <cr-input id="deviceAddressInput" on-input="handleAddressInput"
+            <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}}"
+                <paper-input value="{{currentEditableObject.pairingAuthToken}}"
-                    label="Code"></cr-input>
+                    label="Code"></paper-input>
              </div>
            <div class="form-field-section">
              <label>

--- a/chrome/browser/resources/chromeos/emulator/shared_styles.html
+++ b/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;
      }

--- a/chrome/browser/resources/chromeos/zip_archiver/css/passphrase-dialog.css
+++ b/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;

--- a/chrome/browser/resources/chromeos/zip_archiver/html/passphrase-dialog.html
+++ b/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"
+    <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">
-    </cr-input>
+    </paper-input-container>
    <div id="buttons">
      <paper-button noink
                    on-click="accept"

--- a/chrome/browser/resources/md_bookmarks/BUILD.gn
+++ b/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",

--- a/chrome/browser/resources/md_bookmarks/edit_dialog.html
+++ b/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}"
+        <paper-input always-float-label id="name"
-            value="{{titleValue_}}" autofocus>
+            label="$i18n{editDialogNameInput}"
-        </cr-input>
+            value="{{titleValue_}}"
-        <cr-input id="url" type="url" label="$i18n{editDialogUrlInput}"
+            autofocus>
-            error-message="$i18n{editDialogInvalidUrl}" value="{{urlValue_}}"
+        </paper-input>
-            hidden$="[[isFolder_]]" required>
+        <paper-input always-float-label id="url"
-        </cr-input>
+            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_">

--- a/chrome/browser/resources/md_bookmarks/edit_dialog.js
+++ b/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())

--- a/chrome/browser/resources/md_extensions/keyboard_shortcuts.html
+++ b/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
+        height: var(--cr-section-min-height);
-           space for cr-input error message in between rows. */
-        margin-bottom: -8px;
-        padding-top: 16px;
      }
      .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;
      }

--- a/chrome/browser/resources/md_extensions/kiosk_dialog.html
+++ b/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 {
+      #add-kiosk-app paper-input {
-        width: 350px;
+        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_)]]">
+                  '$i18nPolymer{kioskInvalidApp}', errorAppId_)]]"
+              on-keydown="clearInputInvalid_">
+          </paper-input>
          <paper-button id="add-button" on-click="onAddAppTap_"
-                disabled="[[!addAppInput_]]" slot="suffix">
+              disabled="[[!addAppInput_]]">
            $i18n{add}
          </paper-button>
-          </cr-input>
        </div>
        <cr-checkbox disabled="[[!canEditBailout_]]" id="bailout"
            on-change="onBailoutChanged_" checked="[[bailoutDisabled_]]"

--- a/chrome/browser/resources/md_extensions/pack_dialog.html
+++ b/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">
+    <style include="cr-shared-style paper-button-style paper-input-style">
-      cr-input {
+      .file-input {
-        margin-top: var(--cr-form-field-bottom-spacing);
+        align-items: center;
-        --cr-input-error-display: none;
+        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}"
+        <div class="file-input">
-            value="{{packDirectory_}}">
+          <paper-input id="root-dir" label="$i18n{packDialogExtensionRoot}"
-          <paper-button id="root-dir-browse" on-click="onRootBrowse_"
+              always-float-label value="{{packDirectory_}}">
-              slot="suffix">
+          </paper-input>
+          <paper-button id="root-dir-browse" on-click="onRootBrowse_">
            $i18n{packDialogBrowse}
          </paper-button>
-        </cr-input>
+        </div>
-        <cr-input id="key-file" label="$i18n{packDialogKeyFile}"
+        <div class="file-input">
-            value="{{keyFile_}}">
+          <paper-input id="key-file" label="$i18n{packDialogKeyFile}"
-          <paper-button id="key-file-browse" on-click="onKeyBrowse_"
+              always-float-label value="{{keyFile_}}">
-              slot="suffix">
+          </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_">

--- a/chrome/browser/resources/md_extensions/shortcut_input.html
+++ b/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_)]]">
+          value="[[computeText_(capturing_, shortcut, pendingShortcut_)]]"
-        <paper-icon-button-light id="clearContainer" slot="suffix"
+          no-label-float>
-            class="icon-cancel no-overlap"
+      </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>
-      </cr-input>
    </div>
  </template>
  <script src="shortcut_input.js"></script>

--- a/chrome/browser/resources/md_extensions/shortcut_input.js
+++ b/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);
+      if (this.shortcut) {
        this.pendingShortcut_ = '';
        this.commitPending_();
-      this.endCapture_();
+      }
    },
  });

--- a/chrome/browser/resources/md_user_manager/BUILD.gn
+++ b/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",

--- a/chrome/browser/resources/md_user_manager/create_profile.html
+++ b/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: {
+        --paper-input-container-focus-color: var(--google-blue-500);
-          border-bottom: 1px solid var(--paper-grey-800);
+        --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.*"
+      <paper-input id="nameInput" value="{{profileName_}}" pattern=".*\S.*"
-          auto-validate>
+          no-label-float auto-validate>
-      </cr-input>
+      </paper-input>
      <cr-profile-avatar-selector avatars="[[availableIcons_]]"
          selected-avatar="{{selectedAvatar_}}">
      </cr-profile-avatar-selector>

--- a/chrome/browser/resources/md_user_manager/create_profile.js
+++ b/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();
  },

--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
+++ b/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: {
+  --paper-input-container: {
-    border-radius: 0;
+    margin: 8px 0;
-  }
+    padding: 0;
-  --cr-input-error-display: none;
+  };
-  --cr-input-input: {
+  --paper-input-container-focus-color: rgb(33, 150, 243);
-    -webkit-padding-start: 0;
+  --paper-input-container-input: {
-    background-color: white;
+    font-size: 12px;
-    border-bottom: 1px solid var(--paper-grey-800);
+  };
-    padding-bottom: 2px;
+  --paper-input-container-label: {
-    padding-top: 2px;
-  }
-  -webkit-margin-end: 31px;
-  align-self: center;
-  flex-grow: 1;
    font-size: 12px;
+  };
+  -webkit-margin-end: 31px;
+  box-sizing: border-box;
 }
 .sink-subtext {

--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
+++ b/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">
+              <div>
                <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_}}"
+              </div>
-                  placeholder="[[i18n('searchInputLabel')]]">
+              <div id="search-input-container">
-              </cr-input>
+                <paper-input id="sink-search-input" label="[[i18n('searchInputLabel')]]"
+                    no-label-float value="{{searchInputText_}}">
+                </paper-input>
+              </div>
            </div>
          </div>
        </template>

--- a/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
+++ b/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>

--- a/chrome/browser/resources/settings/settings_page/settings_subpage_search.html
+++ b/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;

--- a/chrome/browser/ui/webui/settings/search_engines_handler.cc
+++ b/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
+// The following strings need to match with the IDs of the paper-input elements
-// at settings/search_engines_page/search_engine_dialog.html.
+// at settings/search_engines_page/add_search_engine_dialog.html.
 const char kSearchEngineField[] = "searchEngine";
 const char kKeywordField[] = "keyword";
 const char kQueryUrlField[] = "queryUrl";

--- a/chrome/test/data/webui/cr_elements/cr_dialog_test.js
+++ b/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);

--- a/chrome/test/data/webui/cr_elements/cr_input_test.js
+++ b/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],

--- a/chrome/test/data/webui/media_router/media_router_container_filter_tests.js
+++ b/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(

--- a/chrome/test/data/webui/settings/certificate_manager_test.js
+++ b/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.

--- a/chrome/test/data/webui/settings/search_engines_page_test.js
+++ b/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);

--- a/ui/webui/resources/cr_components/chromeos/BUILD.gn
+++ b/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",

--- a/ui/webui/resources/cr_components/chromeos/bluetooth_dialog.html
+++ b/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_)]]">

--- a/ui/webui/resources/cr_components/chromeos/bluetooth_dialog.js
+++ b/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));
+    var paperInput = /** @type {!PaperInputElement} */ (this.$$(inputId));
-    assert(crInput);
+    assert(paperInput);
-    /** @type {string} */ var value = crInput.value;
+    /** @type {string} */ var value = paperInput.value;
-    return !!value && crInput.validate();
+    return !!value && paperInput.validate();
  },
  /**

--- a/ui/webui/resources/cr_components/chromeos/compiled_resources2.gyp
+++ b/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',

--- a/ui/webui/resources/cr_components/chromeos/quick_unlock/BUILD.gn
+++ b/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",
  ]
 }
--- a/ui/webui/resources/cr_components/chromeos/quick_unlock/compiled_resources2.gyp
+++ b/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'],
    },

--- a/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html
+++ b/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]]"
+            has-content$="[[hasInput_(value)]]"
-            placeholder="[[getInputPlaceholder_(enablePassword)]]"
+            label="[[getInputPlaceholder_(enablePassword)]]"
            on-keydown="onInputKeyDown_">
-        </cr-input>
+        </paper-input>
      </div>
      <slot select="[problem]"></slot>
      <div class="row">

--- a/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js
+++ b/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 ||
+    return this.passwordElement || this.$.pinInput.inputElement.inputElement;
-        (/** @type {CrInputElement} */ (this.$.pinInput)).inputElement;
  },
 });
 })();
--- a/ui/webui/resources/cr_elements/cr_input/compiled_resources2.gyp
+++ b/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'],
-    },
-  ],
-}
--- a/ui/webui/resources/cr_elements/cr_input/cr_input.html
+++ b/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>

--- a/ui/webui/resources/cr_elements/cr_input/cr_input.js
+++ b/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
--- a/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
+++ b/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%;
        /**