Multi-pod support for lock screen.

ui/login/account_picker/user_pod_row.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   /* Temporarily disabled because animation interferes with updating screen's
    size. */
@@ skipping 27 matching lines @@
   transform: scale3d(0.9, 0.9, 0.9);
   width: 180px;
   z-index: 0;
 }
 
 #account_picker.flying-pods .pod {
   transition: all 180ms;
 }
 
 .pod.flying-pin-pod {
-  transition: height 180ms ease-in-out,
-              top 180ms ease-in-out,
-              width 180ms ease-in-out;
+  transition: all 180ms ease-in-out;

[jdufault, 2016/07/12 00:22:25]

Why's this change needed?

[sammiequon, 2016/07/12 19:35:56]

Done.

 }
 
 .pod.pin-enabled {
   height: 594px;
   top: -200px !important;
   width: 270px;
 }
 
 .pod .pin-container {
   height: 344px;
@@ skipping 129 matching lines @@
   visibility: visible;
 }
 
 .auth-container.pin-enabled {
   opacity: 0;
   transition: none;
   visibility: hidden;
 }
 
 .name-container {
-  transition: transform 180ms;
+  transition: transform 180ms,
+              opacity 200ms ease-in-out 180ms,
+              visibility 200ms ease-in-out 180ms;

[jdufault, 2016/07/12 00:22:25]

Why 200ms duration instead of 180ms?

[sammiequon, 2016/07/12 19:35:56]

Done.

+  opacity : 1;
+  visibility: visible;
 }
 
-.pod.focused .name-container {
-  display: none;
+.name-container.pin-enabled {
+  opacity : 0;
+  transition: none;
+  visibility: hidden;
 }
 
 .pod.focused.multiprofiles-policy-applied .name-container {
   display: flex;
 }
 
 .name {
   color: #565656;
   /* This should be 15.6px - the equivalent of 14px at 90% scale. */
   flex: auto;
@@ skipping 673 matching lines @@
   -webkit-animation: ellipsis-component2 1.5s infinite;
 }
 
 @-webkit-keyframes ellipsis-component2 {
   0% { opacity: 0; }
   25% { opacity: 0; }
   50% { opacity: 0; }
   75% { opacity: 1; }
   100% { opacity: 0; }
 }