Pin keyboard moved to under the user profile.

chrome/browser/resources/chromeos/login/lock.js

Index: chrome/browser/resources/chromeos/login/lock.js
diff --git a/chrome/browser/resources/chromeos/login/lock.js b/chrome/browser/resources/chromeos/login/lock.js
index c1147ef2121f47d0d16ee7cb063a2b1722b1f506..394217a98483f720c0d930e6eeed8b5f4d131fd8 100644
--- a/chrome/browser/resources/chromeos/login/lock.js
+++ b/chrome/browser/resources/chromeos/login/lock.js
@@ -18,9 +18,36 @@
     html: [{ url: 'chrome://oobe/custom_elements.html' }]
   });
 
+  var showPinContainer = function(visible) {
+    var authContainer = document.getElementsByClassName('auth-container')[0];
+    var pinContainer = $('pin-container');
+    var signIn = document.getElementsByClassName('signed-in-indicator')[0];
+    var pod = document.getElementsByClassName('pod')[0];
+    var userImage = document.getElementsByClassName('user-image')[0];
+    var elems = [authContainer, pinContainer, signIn, pod, userImage];

[jdufault, 2016/06/14 22:50:32]

Can you make showPinContainer take a UserPod instance, and then fetch all of
these sub-elements from that UserPod? That way, when we add support for multiple
users this code will just work.

+
+    // The top of pod is not set in a css class since some other js will
+    // overwritte its values.

[jdufault, 2016/06/14 22:50:33]

nit: overwrite

[sammiequon, 2016/06/15 21:56:58]

Done.

+    if (visible)
+      pod.style.top = '-200px';
+    else
+      pod.style.top = '0';
+
+    for (var idx = 0; idx < elems.length; idx++) {
+      if (visible) {
+        elems[idx].classList.add('pin-enabled');

[jdufault, 2016/06/14 22:50:33]

Since you're typing elems[idx] 4 times, I think it's worthwhile to store it in a
variable.

  var elem = elems[idx];

[sammiequon, 2016/06/15 21:56:58]

Done.

+        elems[idx].classList.remove('pin-disabled');
+      }
+      else {
+        elems[idx].classList.add('pin-disabled');
+        elems[idx].classList.remove('pin-enabled');
+      }
+    }
+  };
+
   // Called after polymer has been loaded. Fades the pin element in.
   var onPinLoaded = function(pinContainer) {
-    pinContainer.style.opacity = 1;
+    showPinContainer(true);
   };
 
   // We only load the PIN element when it is actually shown so that lock screen