Lock screen pin keyboard ui upgrades.

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

 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out
                              what i18n to use for keypad, ie, does 1 ABC make
                              sense in every scenario? -->
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <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">
 
 <iron-iconset-svg name="pin-keyboard" size="24">
   <svg>
     <defs>
       <!--
       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>
 
 <dom-module id="pin-keyboard">
   <template>
     <style>
       #root {
         direction: ltr;
         display: flex;
       }
 
       .input-non-pin {
         direction: rtl;
       }
 
       .row {
         display: flex;
       }
 
       .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;
+      .bottom-row {
+        margin-bottom: 6px;
       }
 
-      .digit-button.center-button {
-        margin: 0 30px;
+      .top-row {
+        margin-top: 6px;
+      }
+
+      .digit-button.backspace-button {
+        opacity: var(--dark-primary-opacity);
+      }
+
+      .digit-button.backspace-button[disabled] {
+        color: #000;
+        opacity: 0.26;
+        padding: 14px;
       }
 
       .digit-button.submit-button {
-        left: 20px;
-        position: relative;
+        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.submit-button[disabled] {
+        color: #000;
+        opacity: 0.26;
+      }
+
+      .digit-button.submit-button.error-show,
+      .digit-button.submit-button.error-show[disabled] {
+        color: var(--google-red-700);
+        opacity: 1;
       }
 
       .digit-button.submit-button.submit-button-hidden {
         display: none;
       }
 
-      .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 .icon-container .icon {
-        color: white;
-        display: block;
-        height: 16px;
-        left: 4px;
-        top: 4px;
-        width: 16px;
-      }
-
-      .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 inner-text {
         color: var(--paper-blue-grey-700);
         display: flex;
         flex-direction: column;
         height: 52px;
       }
 
-      .first-row {
-        height: 64px;
-        min-height: 64px;
-        padding: 28px 15px 12px 15px;
+      #error-message {
+        color: var(--google-red-700);
+        font-size: 12px;
+        height: 0;
+        left: 0;
+        padding: 0 10px;
+        position: relative;
+        width: 160px;
+        z-index: 1;
+      }
+
+      #error-message.error-rtl {
+        direction: rtl;
       }
 
       #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;
+        text-color: #000;
+        width: 127px;
+      }
+
+      #pin-input.has-content {
+        opacity: var(--dark-primary-opacity);
+      }
+
+      #pin-input.submit-button-hidden {
+        left: 0;
+        text-align: center;
         width: 180px;
       }
 
-      #pin-input.submit-button-hidden {
-        border-bottom: 2px;
-        border-bottom-style: solid;
-        text-align: center;
-        width: 230px;
+      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,
       #pin-input[type=number]::-webkit-outer-spin-button {
         -webkit-appearance: none;
         margin: 0;
       }
 
       /* Ensure that all children of paper-button do not consume events. This
        * simplifies the event handler code. */
       paper-button * {
         pointer-events: none;
       }
     </style>
 
     <div id="root">
       <div id="container-constrained-width">
         <div class="row">
           <input id="pin-input" type="[[getInputType_(enablePassword)]]"
                  class$="[[getInputClass_(value)]]
-                         [[getSubmitHiddenClass_(enableSubmitButton)]]"
+                         [[getSubmitClass_(enableSubmitButton)]]
+                         [[getContentClass_(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>
+          <paper-icon-button icon="pin-keyboard:arrow-forward"
+                             class$="digit-button submit-button
+                                     [[getSubmitClass_(enableSubmitButton)]]
+                                     [[getErrorClass_(errorMessage)]]"
+                             disabled="[[!hasInput_(value)]]"
+                             on-tap="firePinSubmitEvent_">
+          </paper-icon-button>
         </div>
-
-        <div class="row keyboard">
+        <hr>
+        <template is="dom-if" if="[[hasErrorMessage_(errorMessage)]]">
+          <div id="error-message" class$="[getErrorDirection_]">

[jdufault, 2016/08/22 20:56:39]

[[getErrorDirection_()]]

[sammiequon, 2016/08/23 17:30:18]

Done.

+            [[errorMessage]]

[jdufault, 2016/08/22 20:56:40]

Please also add support for warnings. I'd rename errorMessage to problemMessage_
and have a problemClass_='warning'/'error'

[sammiequon, 2016/08/23 17:30:18]

Done.

+          </div>
+        </template>
+        <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">
             <inner-text>$i18n{pinKeyboard3}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <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">
             <inner-text>$i18n{pinKeyboard6}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <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>
   </template>
   <script src="pin_keyboard.js"></script>
 </dom-module>