Lock screen pin keyboard ui upgrades.

Changed the pin keyboard to match the specs at https://folio.googleplex.com/cros-core-ui/spec#%2F5.1%20-%20Start%20screen%20Pin%20lock%20pods.png%3Fz=width, minus the submit button on the normal pod and the errors on the pin keyboard.

BUG=627222
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2222583002
Cr-Commit-Position: refs/heads/master@{#414858}

chrome/app/generated_resources.grd

@@ -13210,11 +13210,14 @@ Please check your email at <ph name="ACCOUNT_EMAIL">$2<ex>jane.doe@gmail.com</ex
             PIN
           </message>
           <message name="IDS_PIN_KEYBOARD_HINT_TEXT_PIN_PASSWORD" desc="Text to display in the pin field for user pod when no pin has been entered, and passwords are allowed.">
-            Enter PIN or Password
+            Pin or password
           </message>
           <message name="IDS_PIN_KEYBOARD_CLEAR" desc="Text to display text of button on pin keyboard which deletes last character.">
             Clear
           </message>
+          <message name="IDS_PIN_KEYBOARD_ERROR_MESSAGE" desc="Text to display the error message on the pin keyboard if the user has entered a wrong password or pin.">
+            Pin or password incorrect.
+          </message>
         </if>
         <message name="IDS_LOGIN_ERROR_AUTHENTICATING" desc="Couldn't sign in because password is invalid">
           Sorry, your password could not be verified. Please try again.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.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">
@@ -17,7 +18,13 @@
       Inlined from Polymer's iron-icons to avoid importing everything.
       See http://goo.gl/Y1OdAq for instructions on adding additional icons.
       -->
-      <g id="forward"><path d="M12 8V4l8 8-8 8v-4H4V8z"></path></g>
+      <g id="arrow-forward">
+        <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z">
+        </path>
+      </g>
+      <g id="backspace">
+        <path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z">
+      </g>
     </defs>
   </svg>
 </iron-iconset-svg>
@@ -30,10 +37,6 @@
         display: flex;
       }
 
-      .input-non-pin {
-        direction: rtl;
-      }
-
       .row {
         display: flex;
       }
@@ -41,68 +44,60 @@
       .digit-button {
         align-items: center;
         background: none;
-        border-radius: 20px;
+        border-radius: 100px;
         box-sizing: border-box;
-        color: var(--paper-blue-grey-700);
+        color: #000;
         display: flex;
         flex-direction: column;
-        font-size: 32px;
-        height: 70px;
+        font-size: 18px;
+        height: 48px;
         justify-content: center;
-        margin: 0;
-        min-height: 70px;
-        min-width: 70px;
-        padding: 15px 20px;
-        width: 70px;
+        margin: 0 6px;
+        min-height: 48px;
+        min-width: 48px;
+        opacity: 0.87;
+        padding: 15px;
+        width: 48px;
       }
 
-      .digit-button.clear-button {
-        display: block;
+      [hidden=true] {
+        display: none;
       }
 
-      .digit-button.center-button {
-        margin: 0 30px;
+      .bottom-row {
+        margin-bottom: 6px;
       }
 
-      .digit-button.submit-button {
-        left: 20px;
-        position: relative;
+      .top-row {
+        margin-top: 6px;
       }
 
-      .digit-button.submit-button.submit-button-hidden {
-        display: none;
+      .digit-button.backspace-button {
+        opacity: var(--dark-primary-opacity);
       }
 
-      .digit-button .icon-container {
-        background: var(--paper-grey-400);
-        border-radius: 100px;
-        height: 24px;
-        margin: auto;
-        width: 24px;
-      }
-
-      .digit-button .icon-container.ready-background {
-        background: var(--paper-blue-800);
+      .digit-button.backspace-button[disabled] {
+        color: #000;
+        opacity: 0.26;
+        padding: 14px;
       }
 
-      .digit-button .icon-container .icon {
-        color: white;
-        display: block;
-        height: 16px;
-        left: 4px;
-        top: 4px;
-        width: 16px;
+      .digit-button.submit-button {
+        color: var(--google-blue-500);
+        height: 43px;
+        left: 137px;
+        margin: 0;
+        min-height: 43px;
+        min-width: 43px;
+        opacity: var(--light-primary-opacity);
+        padding: 11.5px 10px;
+        position: absolute;
+        width: 43px;
       }
 
-      .digit-button .icon-subheading {
-        color: var(--paper-grey-400);
-        font-size: 10px;
-        left: 0;
-        position: absolute;
-        text-align: center;
-        text-transform: capitalize;
-        top: 44px;
-        width: 100%;
+      .digit-button.submit-button[disabled] {
+        color: #000;
+        opacity: 0.26;
       }
 
       .digit-button inner-text {
@@ -112,31 +107,44 @@
         height: 52px;
       }
 
-      .first-row {
-        height: 64px;
-        min-height: 64px;
-        padding: 28px 15px 12px 15px;
-      }
-
       #pin-input {
         -webkit-text-security: disc;
         background-color: white;
         border: 0;
         box-sizing: border-box;
-        font-size: 18px;
-        height: 64px;
-        left: 20px;
+        font-face: Roboto-Regular;
+        font-size: 13px;
+        height: 43px;
+        left: 10px;
+        opacity: var(--dark-secondary-opacity);
         outline: 0;
-        padding: 28px 3px 12px 3px;
         position: relative;
-        width: 180px;
+        text-color: #000;
+        width: 127px;
+      }
+
+      #pin-input[has-content] {
+        opacity: var(--dark-primary-opacity);
       }
 
-      #pin-input.submit-button-hidden {
-        border-bottom: 2px;
-        border-bottom-style: solid;
+      #pin-input[is-input-rtl] {
+        direction: rtl;
+      }
+
+      :host(:not([enable-submit-button])) #pin-input {
+        left: 0;
         text-align: center;
-        width: 230px;
+        width: 180px;
+      }
+
+      hr {
+        border: 0;
+        border-bottom: 1px solid #000;
+        left: 10px;
+        margin: 0;
+        opacity: 0.14;
+        position: relative;
+        width: 160px;
       }
 
       #pin-input[type=number]::-webkit-inner-spin-button,
@@ -156,26 +164,25 @@
       <div id="container-constrained-width">
         <div class="row">
           <input id="pin-input" type="[[getInputType_(enablePassword)]]"
-                 class$="[[getInputClass_(value)]]
-                         [[getSubmitHiddenClass_(enableSubmitButton)]]"
+                 is-input-rtl$="[[isInputRtl_(value)]]"
+                 has-content$="[[hasInput_(value)]]"
                  placeholder="[[getInputPlaceholder_(enablePassword)]]"
                  value="{{value::input}}"
-                 on-keydown="onInputKeyDown_"></input>
-          <paper-button class$="digit-button first-row submit-button
-                                [[getSubmitHiddenClass_(enableSubmitButton)]]"
-                        on-tap="firePinSubmitEvent_">
-            <div class$="icon-container [[getSubmitClass_(value)]]">
-                <iron-icon class="icon" icon="pin-keyboard:forward"><iron-icon>
-            </div>
-          </paper-button>
+                 on-keydown="onInputKeyDown_">
+          </input>
+          <paper-icon-button icon="pin-keyboard:arrow-forward"
+                             class="digit-button submit-button"
+                             disabled="[[!hasInput_(value)]]"
+                             hidden="[[!enableSubmitButton]]"
+                             on-tap="firePinSubmitEvent_">
+          </paper-icon-button>
         </div>
-
-        <div class="row keyboard">
+        <hr>
+        <div class="row keyboard top-row">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
             <inner-text>$i18n{pinKeyboard1}</inner-text>
           </paper-button>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="2">
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="2">
             <inner-text>$i18n{pinKeyboard2}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="3">
@@ -186,8 +193,7 @@
           <paper-button class="digit-button" on-tap="onNumberTap_" value="4">
             <inner-text>$i18n{pinKeyboard4}</inner-text>
           </paper-button>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="5">
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="5">
             <inner-text>$i18n{pinKeyboard5}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="6">
@@ -198,28 +204,22 @@
           <paper-button class="digit-button" on-tap="onNumberTap_" value="7">
             <inner-text>$i18n{pinKeyboard7}</inner-text>
           </paper-button>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="8">
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="8">
             <inner-text>$i18n{pinKeyboard8}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="9">
             <inner-text>$i18n{pinKeyboard9}</inner-text>
           </paper-button>
         </div>
-        <div class="row keyboard">
+        <div class="row keyboard bottom-row">
           <div class="digit-button"></div>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="0">
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="0">
             <inner-text>$i18n{pinKeyboard0}</inner-text>
           </paper-button>
-          <paper-button class="digit-button clear-button" on-tap="onPinClear_">
-            <div class="icon-container">
-              <iron-icon class="icon" icon="cr:clear"><iron-icon>
-            </div>
-            <inner-text class="icon-subheading">
-              $i18n{pinKeyboardClear}
-            </inner-text>
-          </paper-button>
+          <paper-icon-button class="digit-button backspace-button"
+                             disabled="[[!hasInput_(value)]]"
+                             on-tap="onPinClear_" icon="pin-keyboard:backspace">
+          </paper-icon-button>
         </div>
       </div>
     </div>

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

@@ -127,12 +127,12 @@ Polymer({
   },
 
   /**
-   * Changes the color of the submit button if PIN is ready.
+   * Disables the submit and backspace button if nothing is entered.
    * @param {string} value
    * @private
    */
-  getSubmitClass_: function(value) {
-    return value.length > 0 ? 'ready-background' : '';
+  hasInput_: function(value) {
+    return value.length > 0;
   },
 
   /**
@@ -160,7 +160,7 @@ Polymer({
    * @param {string} password
    * @private
    */
-  getInputClass_: function(password) {
+  isInputRtl_: function(password) {
     // +password will convert a string to a number or to NaN if that's not
     // possible. Number.isInteger will verify the value is not a NaN and that it
     // does not contain decimals.
@@ -169,16 +169,6 @@ Polymer({
     // Since we still support users entering their passwords through the PIN
     // keyboard, we swap the input box to rtl when we think it is a password
     // (just numbers), if the document direction is rtl.
-    var enableRtl = (document.dir == 'rtl') && !Number.isInteger(+password);
-    return enableRtl ? 'input-non-pin' : '';
+    return (document.dir == 'rtl') && !Number.isInteger(+password);
   },
-
-  /**
-   * Computes if the submit button is visible.
-   * @param {boolean} submitEnabled
-   * @private
-   */
-  getSubmitHiddenClass_: function(submitEnabled) {
-    return submitEnabled ? '' : 'submit-button-hidden';
-  }
 });

ui/login/account_picker/user_pod_row.css

@@ -46,22 +46,18 @@ pin-keyboard {
 
 .pod.flying-pin-pod {
   transition: height 180ms ease-in-out,
-              left 180ms ease-in-out,
-              top 180ms ease-in-out,
-              width 180ms ease-in-out;
+              top 180ms ease-in-out;
 }
 
 .pod.pin-enabled {
-  height: 594px;
-  top: -200px !important;
-  width: 270px;
+  height: 417px;
+  top: -87px !important;
 }
 
 .pod .pin-container {
-  height: 344px;
+  height: 204px;
   position: absolute;
-  top: 250px;
-  width: 270px;
+  top: 170px;
 }
 
 .pod.faded {
@@ -98,23 +94,11 @@ podrow[ncolumns='6'] .pod {
   z-index: 3;
 }
 
-.user-image-pane.pin-enabled {
-  height: 230px;
-  left: 20px;
-  top: 20px;
-  width: 230px;
-}
-
 html[dir=rtl] .user-image-pane {
   left: auto;
   right: 10px;
 }
 
-html[dir=rtl] .user-image-pane.pin-enabled {
-  left: auto;
-  right: 20px;
-}
-
 .user-image-container {
   align-items: center;
   display: flex;
@@ -134,14 +118,6 @@ html:not([screen=login-add-user]) .pod .user-image {
   max-width: 160px;
   opacity: 0.7;
   position: absolute;
-  transition: max-height 180ms ease-in-out,
-              max-width 180ms ease-in-out,
-              top 180ms ease-in-out;
-}
-
-html:not([screen=login-add-user]) .pod .user-image.pin-enabled {
-  max-height: 230px;
-  max-width: 230px;
 }
 
 html:not([screen=login-add-user]) .pod.focused .user-image {
@@ -164,18 +140,9 @@ html:not([screen=login-add-user]) .pod.focused .user-image {
   position: absolute;
   text-align: center;
   top: 0;
-  transition: left 180ms ease-in-out,
-              top 180ms ease-in-out,
-              width 180ms ease-in-out;
   width: 100%;
 }
 
-.pod.signed-in .signed-in-indicator.pin-enabled {
-  left: 20px;
-  top: 20px;
-  width: 230px;
-}
-
 .main-pane {
   left: 10px;
   position: absolute;

ui/login/account_picker/user_pod_row.js

@@ -59,9 +59,7 @@ cr.define('login', function() {
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 32;
   var CUSTOM_ICON_CONTAINER_SIZE = 40;
-  var CROS_PIN_POD_WIDTH = 270;
-  var CROS_PIN_POD_HEIGHT = 594;
-  var PIN_EXTRA_WIDTH = 90;
+  var CROS_PIN_POD_HEIGHT = 417;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
@@ -1093,6 +1091,10 @@ cr.define('login', function() {
       }
     },
 
+    isPinReady: function() {
+      return this.pinKeyboard && this.pinKeyboard.offsetHeight > 0;
+    },
+
     toggleTransitions: function(enable) {
       this.classList.toggle('flying-pin-pod', enable);
     },
@@ -3001,28 +3003,6 @@ cr.define('login', function() {
       return {columns: columns, rows: rows};
     },
 
-    /**
-     * Calculates the row and column of the given |pod|.
-     * @param {UserPod} pod Pod we want the row and column of.
-     * @param {number} columns Columns in the podrow.
-     * @param {number} rows Rows in the podrow.
-     * @return {{columns: number, rows: number}}
-     * @private
-     */
-    findPodLocation_: function(pod, columns, rows) {
-      var column = -1;
-      var row = -1;
-      var index = this.pods.indexOf(pod);
-      if (index >= 0) {
-        row = Math.floor(index / columns);
-        column = index % columns;
-      }
-      else {
-        console.error('Pod not found in pod row.');
-      }
-      return {column: column, row: row};
-    },
-
     /**
      * Places pods onto their positions onto pod grid.
      * @private
@@ -3058,23 +3038,16 @@ cr.define('login', function() {
           console.error('Pod offsetHeight (' + pod.offsetHeight +
               ') and POD_HEIGHT (' + height + ') are not equal.');
         }
-        if (pod.offsetWidth != width &&
-            pod.offsetWidth != CROS_PIN_POD_WIDTH) {
+        if (pod.offsetWidth != width) {
           console.error('Pod offsetWidth (' + pod.offsetWidth +
               ') and POD_WIDTH (' + width + ') are not equal.');
         }
         var column = index % columns;
         var row = Math.floor(index / columns);
-        var offsetFromPin = 0;
-        if (row == pinPodLocation.row) {
-          offsetFromPin = PIN_EXTRA_WIDTH / 2;
-          if (column <= pinPodLocation.column)
-            offsetFromPin *= -1;
-        }
 
         var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
                                                 POD_ROW_PADDING;
-        pod.left = rowPadding + column * (width + margin) + offsetFromPin;
+        pod.left = rowPadding + column * (width + margin);
 
         // On desktop, we want the rows to always be equally spaced.
         pod.top = isDesktopUserManager ? row * (height + rowPadding) :
@@ -3163,7 +3136,9 @@ cr.define('login', function() {
       var hadFocus = !!this.focusedPod_;
       this.focusedPod_ = podToFocus;
       if (podToFocus) {
-        this.setFocusedPodPinVisibility(true);
+        // Only show the keyboard if it is fully loaded.
+        if (podToFocus.isPinReady())
+          podToFocus.setPinVisibility(true);
         podToFocus.classList.remove('faded');
         podToFocus.classList.add('focused');
         if (!podToFocus.multiProfilesPolicyApplied) {
@@ -3186,7 +3161,6 @@ cr.define('login', function() {
         this.scrollFocusedPodIntoView();
       }
       this.insideFocusPod_ = false;
-      this.placePods_();
     },
 
     /**

ui/login/account_picker/user_pod_template.html

 <div id="user-pod-template" class="pod disabled" hidden>
-  <div class="user-image-pane pin-tag">
+  <div class="user-image-pane">
     <div class="user-image-container">
-      <img class="user-image pin-tag" alt>
+      <img class="user-image" alt>
     </div>
     <div class="signed-in-indicator" i18n-content="signedIn"></div>
     <div class="indicator-container">