WebUI[MD-refresh]: switches remaining paper-input in Settings to cr-input.

Bug: 832177
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Iae1036e0a8975f65a37ff9ccc7b6084b4a6d45ef
Reviewed-on: https://chromium-review.googlesource.com/1081243
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#564968}

chrome/browser/resources/settings/downloads_page/add_smb_share_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/shared_vars_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="../settings_shared_css.html">
 <link rel="import" href="../settings_vars_css.html">
 <link rel="import" href="smb_browser_proxy.html">
@@ -10,33 +11,31 @@
 <dom-module id="settings-add-smb-share-dialog">
   <template>
     <style include="settings-shared">
-      paper-input {
+      cr-input {
+        --cr-input-error-display: none;
         width: var(--settings-input-max-width);
       }
+
+      cr-input:not(:last-child) {
+        margin-bottom: var(--cr-form-field-bottom-spacing);
+      }
     </style>
 
     <cr-dialog id="dialog">
       <div slot="title">$i18n{addSmbShare}</div>
       <div slot="body" spellcheck="false">
-        <paper-input always-float-label id="address"
-            label="$i18n{smbShareUrl}"
-            value="{{mountUrl_}}"
+        <cr-input id="address" label="$i18n{smbShareUrl}" value="{{mountUrl_}}"
             autofocus>
-        </paper-input>
-        <paper-input always-float-label id="name"
-            label="$i18n{smbShareName}"
-            value="{{mountName_}}"
-            maxlength=64>
-        </paper-input>
-        <paper-input always-float-label id="username"
-            label="$i18n{smbShareUsername}"
+        </cr-input>
+        <cr-input id="name" label="$i18n{smbShareName}" value="{{mountName_}}"
+            maxlength="64">
+        </cr-input>
+        <cr-input id="username" label="$i18n{smbShareUsername}"
             value="{{username_}}">
-        </paper-input>
-        <paper-input always-float-label id="password"
-            type="password"
-            label="$i18n{smbSharePassword}"
+        </cr-input>
+        <cr-input id="password" type="password" label="$i18n{smbSharePassword}"
             value="{{password_}}">
-        </paper-input>
+        </cr-input>
       </div>
       <div slot="button-container">
         <paper-button class="cancel-button" on-click="cancel_" id="cancel">

chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html

@@ -15,7 +15,6 @@
   <template>
     <style include="settings-shared">
       cr-input {
-        width: var(--settings-input-max-width);
         --cr-input-error-display: none;
       }
 
@@ -23,6 +22,18 @@
         margin-bottom: var(--cr-form-field-bottom-spacing);
       }
 
+      #websiteInput,
+      #usernameInput {
+        width: var(--settings-input-max-width);
+      }
+
+      #passwordInput {
+        --cr-input-width: var(--settings-input-max-width);
+        --cr-input-row-container: {
+          justify-content: initial;
+        }
+      }
+
       paper-icon-button-light {
         -webkit-margin-start: 2px;
         background-size: 24px;  /* Other buttons are sized by --cr-icon-size. */

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

@@ -171,7 +171,7 @@ js_library("password_prompt_dialog") {
   deps = [
     ":lock_screen_constants",
     "..:route",
-    "//third_party/polymer/v1_0/components-chromium/paper-input:paper-input-extracted",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input",
   ]
   externs_list = [ "$externs_path/quick_unlock_private.js" ]
   extra_sources = [ "$interfaces_path/quick_unlock_private_interface.js" ]
@@ -228,8 +228,8 @@ js_library("sync_page") {
     "..:page_visibility",
     "..:route",
     "../settings_page:settings_animated_pages",
-    "//third_party/polymer/v1_0/components-chromium/paper-input:paper-input-extracted",
     "//ui/webui/resources/cr_elements/cr_expand_button:cr_expand_button",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:load_time_data",
     "//ui/webui/resources/js:util",

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

 <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/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
@@ -9,7 +10,6 @@
 <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-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-ripple/paper-ripple.html">
 <link rel="import" href="fingerprint_browser_proxy.html">
 <link rel="import" href="setup_fingerprint_dialog.html">
@@ -37,8 +37,8 @@
         background-color: white;
       }
 
-      paper-input {
-        --paper-input-container-color: transparent;
+      cr-input {
+        --cr-input-error-display: none;
       }
 
       paper-ripple {
@@ -52,9 +52,8 @@
         <template>
           <div class="list-item">
             <paper-ripple noink></paper-ripple>
-            <paper-input value="{{item}}"
-                on-change="onFingerprintLabelChanged_">
-            </paper-input>
+            <cr-input value="{{item}}" on-change="onFingerprintLabelChanged_">
+            </cr-input>
             <paper-icon-button-light class="icon-delete-gray">
               <button on-click="onFingerprintDeleteTapped_"></button>
             </paper-icon-button-light>

chrome/browser/resources/settings/people_page/password_prompt_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/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="lock_screen_constants.html">
 <link rel="import" href="lock_state_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -22,18 +22,16 @@
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">$i18n{passwordPromptTitle}</div>
       <div slot="body">
-
         <div class="settings-box first">
           [[selectPasswordPromptEnterPasswordString(hasPinLogin)]]
         </div>
-
-        <paper-input id="passwordInput" type="password"
-            label="$i18n{passwordPromptPasswordLabel}"
-            invalid="{{passwordInvalid_}}"
+        <cr-input id="passwordInput" type="password"
+            placeholder="$i18n{passwordPromptPasswordLabel}"
+            invalid="[[passwordInvalid_]]"
             error-message="$i18n{passwordPromptInvalidPassword}"
             value="{{inputValue_}}"
             aria-disabled="false">
-        </paper-input>
+        </cr-input>
       </div>
       <div slot="button-container">
         <paper-button class="cancel-button" on-click="onCancelTap_">

chrome/browser/resources/settings/people_page/password_prompt_dialog.js

@@ -128,8 +128,7 @@ Polymer({
         // Select the whole password if user entered an incorrect password.
         // Return focus to the password input if it lost focus while being
         // checked (user pressed confirm button).
-        this.$.passwordInput.inputElement.inputElement.select();
-        if (!this.$.passwordInput.focused)
+        this.$.passwordInput.inputElement.select();
         this.$.passwordInput.focus();
         return;
       }

chrome/browser/resources/settings/people_page/sync_page.js

@@ -288,7 +288,7 @@ Polymer({
     if (this.syncPrefs.passphraseRequired) {
       // Wait for the dom-if templates to render and subpage to become visible.
       listenOnce(document, 'show-container', () => {
-        const input = /** @type {!PaperInputElement} */ (
+        const input = /** @type {!CrInputElement} */ (
             this.$$('#existingPassphraseInput'));
         input.focus();
       });

chrome/browser/resources/settings/people_page/users_add_user_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/html/assert.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="../settings_shared_css.html">
 <link rel="import" href="../settings_vars_css.html">
 
 <dom-module id="settings-users-add-user-dialog">
   <template>
     <style include="settings-shared">
-      paper-input {
+      cr-input {
         width: var(--settings-input-max-width);
-        --paper-input-container-focus-color: var(--google-blue-500);
-        --paper-input-container-input: {
-          font-size: inherit;
-        };
+        --cr-input-error-display: none;
       }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">$i18n{addUsers}</div>
       <div slot="body">
-        <paper-input id="addUserInput" label="$i18n{addUsersEmail}" autofocus
+        <cr-input id="addUserInput" label="$i18n{addUsersEmail}" autofocus
             on-input="validate_" invalid="[[!isValid_]]">
-        </paper-input>
+        </cr-input>
       </div>
       <div slot="button-container">
         <paper-button class="cancel-button" on-click="onCancelTap_">

chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html

 <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/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="cups_add_printer_dialog_util.html">
@@ -108,24 +108,15 @@
       <div slot="dialog-title">$i18n{addPrintersManuallyTitle}</div>
       <div slot="dialog-body">
         <div class="settings-box first two-line">
-          <div class="start">
-            <div class="label">$i18n{printerName}</div>
-            <div class="secondary">
-              <paper-input class="printer-name-input" no-label-float autofocus
-                  id="printerNameInput" value="{{newPrinter.printerName}}">
-              </paper-input>
-            </div>
-          </div>
+          <cr-input class="printer-name-input" autofocus
+            id="printerNameInput" value="{{newPrinter.printerName}}"
+            label="$i18n{printerName}">
+          </cr-input>
         </div>
         <div class="settings-box two-line">
-          <div class="start">
-            <div class="label">$i18n{printerAddress}</div>
-            <div class="secondary">
-              <paper-input no-label-float id="printerAddressInput"
+          <cr-input id="printerAddressInput" label="$i18n{printerAddress}"
               value="{{newPrinter.printerAddress}}">
-              </paper-input>
-            </div>
-          </div>
+          </cr-input>
         </div>
         <div class="settings-box two-line">
           <div class="start">
@@ -146,14 +137,9 @@
           </div>
         </div>
         <div class="settings-box two-line">
-          <div class="start">
-            <div class="label">$i18n{printerQueue}</div>
-            <div class="secondary">
-              <paper-input no-label-float label="ipp/print"
+          <cr-input placeholder="ipp/print" label="$i18n{printerQueue}"
               value="{{newPrinter.printerQueue}}">
-              </paper-input>
-            </div>
-          </div>
+          </cr-input>
         </div>
       </div>
       <div slot="dialog-buttons">
@@ -208,20 +194,14 @@
           </div>
         </div>
         <div class="settings-box two-line last">
-          <div class="start">
-            <div class="label">$i18n{selectDriver}</div>
-            <div class="secondary">
-              <paper-input class="browse-file-input" no-label-float readonly
-                  value="[[newUserPPD_]]"
-                  error-message="$i18n{selectDriverErrorMessage}"
-                  invalid="[[invalidPPD_]]">
-                <paper-button class="browse-button" slot="suffix"
-                    on-click="onBrowseFile_">
+          <cr-input class="browse-file-input" readonly value="[[newUserPPD_]]"
+              label="$i18n{selectDriver}" invalid="[[invalidPPD_]]"
+              error-message="$i18n{selectDriverErrorMessage}">
+            <paper-button class="browse-button" on-click="onBrowseFile_"
+                slot="suffix">
               $i18n{selectDriverButtonText}
             </paper-button>
-              </paper-input>
-            </div>
-          </div>
+          </cr-input>
         </div>
       </div>
       <div slot="dialog-buttons">

chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.html

 <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/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="cups_add_printer_dialog_util.html">
 <link rel="import" href="cups_printer_shared_css.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
@@ -10,33 +10,28 @@
 <dom-module id="settings-cups-edit-printer-dialog">
   <template>
     <style include="cups-printer-shared">
-      #existingUserPPD {
-        padding-top: 10px;
+      /* This is needed to line up the existing PDD text with cr-input.
+         TODO(scottchen): move away from using .settings-box just for margin,
+         and then remove this hacky alignment. */
+      .last {
+        align-items: start;
+        flex-direction: column;
       }
     </style>
     <add-printer-dialog>
       <div slot="dialog-title">$i18n{editPrinterDialogTitle}</div>
       <div slot="dialog-body">
         <div class="settings-box first two-line">
-          <div class="start">
-            <div class="label">$i18n{printerName}</div>
-            <div class="secondary">
-              <paper-input class="printer-name-input" no-label-float autofocus
-                  value="{{activePrinter.printerName}}">
-              </paper-input>
-            </div>
-          </div>
+          <cr-input class="printer-name-input" autofocus
+              value="{{activePrinter.printerName}}"
+              label="$i18n{printerName}">
+          </cr-input>
         </div>
         <div class="settings-box two-line">
-          <div class="start">
-            <div class="label">$i18n{printerAddress}</div>
-            <div class="secondary">
-              <paper-input no-label-float
+          <cr-input label="$i18n{printerAddress}"
               value="{{activePrinter.printerAddress}}"
               disabled="[[!networkProtocolActive_]]">
-              </paper-input>
-            </div>
-          </div>
+          </cr-input>
         </div>
         <div class="settings-box two-line">
           <div class="start">
@@ -75,25 +70,15 @@
           </div>
         </div>
         <div class="settings-box two-line">
-          <div class="start">
-            <div class="label">$i18n{printerQueue}</div>
-            <div class="secondary">
-              <paper-input no-label-float
+          <cr-input label="$i18n{printerQueue}"
               value="{{activePrinter.printerQueue}}"
               disabled="[[!networkProtocolActive_]]">
-              </paper-input>
-            </div>
-          </div>
+          </cr-input>
         </div>
         <div class="settings-box two-line">
-          <div class="start">
-            <div class="label">$i18n{printerURI}</div>
-            <div class="secondary">
-              <paper-input no-label-float disabled
+          <cr-input label="$i18n{printerURI}" readonly
               value="[[getPrinterURI_(activePrinter)]]">
-              </paper-input>
-            </div>
-          </div>
+          </cr-input>
         </div>
         <div class="settings-box two-line">
           <div class="start">
@@ -116,19 +101,15 @@
           </div>
         </div>
         <div class="settings-box two-line last">
-          <div class="start">
-            <div class="label">$i18n{selectDriver}</div>
-            <div class="secondary">
-              <paper-input class="browse-file-input" no-label-float readonly
-                  value="[[newUserPPD_]]"
+          <cr-input class="browse-file-input" readonly
+              value="[[newUserPPD_]]" label="$i18n{selectDriver}"
               error-message="$i18n{selectDriverErrorMessage}"
               invalid="[[invalidPPD_]]">
-                <paper-button class="browse-button" slot="suffix"
-                    on-click="onBrowseFile_">
+            <paper-button class="browse-button" on-click="onBrowseFile_"
+                slot="suffix">
               $i18n{selectDriverButtonText}
             </paper-button>
-              </paper-input>
-            </div>
+          </cr-input>
           <template is="dom-if" if="[[existingUserPPDMessage_]]">
             <div class="secondary" id="existingUserPPD">
               [[existingUserPPDMessage_]]
@@ -136,7 +117,6 @@
           </template>
         </div>
       </div>
-      </div>
       <div slot="dialog-buttons">
         <paper-button class="cancel-button secondary-button"
             on-click="onCancelTap_">

chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html

+<link rel="import" href="chrome://resources/html/polymer.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="../settings_shared_css.html">
 <link rel="import" href="../settings_vars_css.html">
@@ -16,18 +19,21 @@
       }
 
       [slot='dialog-body'] .settings-box .start .label {
-        color: var(--google-grey-700);
+        @apply --cr-form-field-label;
       }
 
-      [slot='dialog-body'] .settings-box paper-input {
-        --paper-input-container-input: {
-          font-size: inherit;
-        };
+      [slot='dialog-body'] .settings-box cr-input {
         width: 270px;
       }
 
+      /* The only input that has error-message are at the end, so we don't
+         need to allocate space for error-message under each input
+         for consistency. */
+      [slot='dialog-body'] .settings-box cr-input:not([error-message]) {
+        --cr-input-error-display: none;
+      }
+
       [slot='dialog-body'] .settings-box .md-select {
-        margin-top: 8px;
         width: 270px;
       }
 
@@ -36,25 +42,12 @@
       }
 
       [slot='dialog-body'] .settings-box .browse-file-input {
-        --paper-input-container-input: {
-          border: 1px solid lightgray;
-          font-size: inherit;
-        };
-        --paper-input-container-underline: {
-          display: none;
-        };
-        --paper-input-container-underline-focus: {
-          display: none;
-        };
-        --paper-input-suffix: {
-          font-size: inherit;
-        };
-        width: 340px;
+        width: auto;
+        --cr-input-width: 270px;
       }
 
       [slot='dialog-body'] .settings-box .browse-button {
         -webkit-margin-start: 5px;
-        color: black;
       }
 
       [slot='dialog-body'] .last {

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

@@ -2,9 +2,9 @@
 
 <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/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-input/paper-input.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="constants.html">
@@ -25,11 +25,11 @@
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">$i18n{addSiteTitle}</div>
       <div slot="body">
-        <paper-input id="site" always-float-label label="$i18n{addSite}"
+        <cr-input id="site" label="$i18n{addSite}"
             placeholder="$i18n{addSiteExceptionPlaceholder}"
             value="{{site_}}" on-input="validate_"
             error-message="$i18n{notValidWebAddress}" spellcheck="false"
-            autofocus></paper-input>
+            autofocus></cr-input>
         <cr-checkbox id="incognito"
             invisible$="[[!showIncognitoSessionOnly_]]">
           $i18n{incognitoSiteOnly}

chrome/browser/resources/settings/site_settings/edit_exception_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/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="../i18n_setup.html">
 <link rel="import" href="site_settings_prefs_browser_proxy.html">
 
@@ -12,11 +12,11 @@
     <cr-dialog id="dialog">
       <div slot="title">$i18n{editSiteTitle}</div>
       <div slot="body">
-        <paper-input always-float-label label="$i18n{addSite}"
-            placeholder="$i18n{addSiteExceptionPlaceholder}" value="{{origin_}}"
+        <cr-input label="$i18n{addSite}" value="{{origin_}}"
+            placeholder="$i18n{addSiteExceptionPlaceholder}"
             on-input="validate_" error-message="$i18n{notValidWebAddress}"
             invalid="[[invalid_]]" autofocus>
-        </paper-input>
+        </cr-input>
       </div>
       <div slot="button-container">
         <paper-button class="cancel-button" on-click="onCancelTap_"

chrome/browser/resources/settings/site_settings/edit_exception_dialog.js

@@ -66,7 +66,7 @@ Polymer({
 
   /** @private */
   validate_: function() {
-    if (this.$$('paper-input').value.trim() == '') {
+    if (this.$$('cr-input').value.trim() == '') {
       this.invalid_ = true;
       return;
     }

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

@@ -137,6 +137,8 @@
         /* This will spread the input field and the suffix apart only if the
            host element width is intentionally set to something large. */
         justify-content: space-between;
+
+        @apply --cr-input-row-container;
       }
     </style>
     <div id="label" hidden="[[!label]]">[[label]]</div>