Pin keyboard moved to under the user profile.

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

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
index 578269313f4b33d49fe26c54d4c91200c503e443..5027753b0245f2499f2d7d2752638611ac68013b 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
@@ -6,101 +6,21 @@
 <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/paper-styles.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+<link rel="stylesheet" href="pin_keyboard.css">
 
 <dom-module id="pin-keyboard">
   <template>
-    <style>
-      #root {
-        display: flex;
-      }
-
-      /* TODO(jdufault): Remove this CSS once we inline the PIN element with the
-       * user-pod. */
-      #container-constrained-width {
-        -webkit-tap-highlight-color: transparent;
-        background: white;
-        border-radius: 2px;
-        box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
-                    0 2px 6px rgba(0, 0, 0, 0.15),
-                    0 3px 0 rgba(0, 0, 0, 0.08);
-        cursor: pointer;
-        flex-direction: column;
-        outline: none;
-      }
-
-      .row {
-        display: flex;
-      }
-
-      .row.horizontal-center {
-        justify-content: center;
-      }
-
-      .digit-button {
-        align-items: center;
-        background: none;
-        border-radius: 50px;
-        display: flex;
-        font-size: 30px;
-        justify-content: center;
-        margin: 5px;
-        min-width: 94px;
-        width: 94px;
-      }
-
-      .digit-button inner-text {
-        display: flex;
-        flex-direction: column;
-        height: 52px;
-      }
-
-      .digit-button inner-text subhead {
-        color: var(--paper-grey-500);
-        font-size: 16px;
-      }
-
-      .digit-button .submit-button {
-        background: var(--paper-blue-a400);
-        color: white;
-        font-size: 20px;
-        height: 60px;
-        min-width: 0;
-        width: 60px;
-      }
-
-      #pin-input {
-        -webkit-text-security: disc;
-        border-bottom-color: lightgray;
-        border-left: none;
-        border-right: none;
-        border-top: none;
-        font-size: 20px;
-        height: 30px;
-        margin-top: 10px;
-        text-align: center;
-        width: 95%;
-      }
-
-      #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 horizontal-center">
-          <input id="pin-input" type="number" placeholder="Enter PIN"
+          <input id="pin-input" type="password" placeholder="Enter PIN or Password"
                  on-keydown="onInputKeyDown_"></input>
+          <div class="digit-button">

[jdufault, 2016/05/31 19:24:51]

Let's pull the pin keyboard changes out into a separate CL.

[sammiequon, 2016/06/14 22:22:21]

Done.

+            <paper-icon-button class="digit-button submit-button"
+                               icon="icons:check" on-tap="onPinSubmit_">
+            </paper-icon-button>
+          </div>
         </div>
-
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
             <inner-text>1</inner-text>
@@ -135,16 +55,12 @@
           </paper-button>
         </div>
         <div class="row keyboard">
-          <div class="digit-button"></div>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="0">
-            <inner-text>0</inner-text>
+            <inner-text>0<subhead>+</subhead></inner-text>
           </paper-button>
-          <div class="digit-button">
-            <paper-icon-button class="digit-button submit-button"
-                               icon="icons:check" on-tap="onPinSubmit_">
-            </paper-icon-button>
-          </div>
-        </div>
+          <paper-icon-button class="digit-button clear-button"
+                             icon="icons:clear" on-tap="onPinClear_">
+          </paper-icon-button>
       </div>
     </div>
   </template>