Pin keyboard moved to under the user profile.

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. */
   height: 100%;
   overflow: visible;
   position: absolute;
   width: 100%;
 }
 
 /* Hide the pod row while images are loading. */
 podrow.images-loading {
   visibility: hidden;
 }
 
+pin-keyboard {
+  display: block;
+}
+
 .pod {
   -webkit-tap-highlight-color: transparent;
   background-color: 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;
   height: 213px;
   outline: none;
   position: absolute;
+  top: 0;
   transform: scale3d(0.9, 0.9, 0.9);
+  transition: height 500ms ease-in-out,
+              padding 500ms ease-in-out,
+              top 500ms ease-in-out,
+              width 500ms ease-in-out;

[xiyuan, 2016/06/24 21:19:09]

Why 500ms? Feel kind of slow. Do we have UX stamped on this?

[sammiequon, 2016/06/24 22:06:39]

we don't have UX stamp. 500ms was a guess.

[sammiequon, 2016/06/24 22:06:39]

Done.

[xiyuan, 2016/06/24 22:13:16]

180ms is better. But check with UX about all animation times before launch.

   width: 180px;
   z-index: 0;
 }
 
-.account-picker.flying-pods .pod {
-  transition: all 180ms;
+.pod.pin-enabled {
+  height: 600px;
+  padding: 10px;
+  top: -200px !important;
+  width: 256px;
+}
+
+.pod .pin-container {
+  height: 334px;
+  position: absolute;
+  top: 276px;
+  width: 256px;
+}
+
+#account-picker {

[xiyuan, 2016/06/24 21:19:09]

move this into screen_account_picker.css ?

[sammiequon, 2016/06/24 22:06:39]

Done.

[sammiequon, 2016/06/24 22:06:39]

removed.

+  height: 100%;
+  width: 100%;
 }
 
 .pod.faded {
   opacity: .75;
 }
 
 podrow[ncolumns='6'] .pod {
   transform: scale3d(0.8, 0.8, 0.8);
 }
 
 .pod.focused {
   /* Focused pod has the same size no matter how many pods. */
   cursor: default;
   transform: scale3d(1, 1, 1) !important;
   z-index: 1;
 }
 
 .pod.focused[auth-type='userClick'] {
   cursor: pointer;
 }
 
 .user-image-pane {
   background-color: white;
-  height: 160px;
-  left: 10px;
-  position: absolute;
-  top: 10px;
-  width: 160px;
-  z-index: 3;
 }
 
 html[dir=rtl] .user-image-pane {
   left: auto;
   right: 10px;
 }
 
 .user-image-container {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
 }
 
 .pod .user-image {
   flex: none;
 }
 
 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the
  style rule once it is included on CrOS only. crbug.com/397638 */
 html:not([screen=login-add-user]) .pod .user-image {
   max-height: 160px;
   max-width: 160px;
   opacity: 0.7;
+  position: absolute;
+  top: 10px;
+  transition: max-height 500ms ease-in-out,
+              max-width 500ms ease-in-out;
+}
+
+html:not([screen=login-add-user]) .pod .user-image.pin-enabled {
+  max-height: 256px;
+  max-width: 256px;
 }
 
 html:not([screen=login-add-user]) .pod.focused .user-image {
   opacity: 1;
 }
 
 .pod.multiprofiles-policy-applied .user-image {
   -webkit-filter: grayscale(100%);
 }
 
 .signed-in-indicator {
   display: none;
 }
 
 .pod.signed-in .signed-in-indicator {
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   display: block;
   font-size: small;
-  padding: 3px 0;
+  left: 10px;
   position: absolute;
   text-align: center;
-  top: 0;
-  width: 100%;
+  top: 10px;
+  transition: width 500ms ease-in-out;
+  width: 160px;
+}
+
+.pod.signed-in .signed-in-indicator.pin-enabled {
+  width: 256px;
 }
 
 .main-pane {
   left: 10px;
   position: absolute;
   top: 10px;
   z-index: 2;
 }
 
 html[dir=rtl] .main-pane {
   left: auto;
   right: 10px;
 }
 
 .name-container,
 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
   background-color: white;
   display: flex;
   position: absolute;
   top: 160px;
   width: 160px;
 }
 
+.pod.focused:not(.multiprofiles-policy-applied) .auth-container {
+  background-color: white;
+  position: absolute;
+  top: 160px;
+  width: 160px;
+}
+
+.auth-container.pin-disabled {
+  opacity: 1;
+  transition: opacity 200ms ease-in-out 500ms,
+              visibility 200ms ease-in-out 500ms;
+  visibility: visible;
+}
+
+.auth-container.pin-enabled {
+  opacity: 0;
+  transition: none;
+  visibility: hidden;

[xiyuan, 2016/06/24 21:19:09]

Why we need to use visibility? Do we need to reserve the space?

[sammiequon, 2016/06/24 22:06:39]

i use visibility to prevent people from tabbing to the 0 opacity elements.

[xiyuan, 2016/06/24 22:13:17]

Do you need to keep the element's space while it is invisible? If not, how about
"display: none"?

[sammiequon, 2016/06/24 22:39:01]

i think i do because the pin-keyboard is considered done loading when its
offsetHeight is not 0 anymore. 

[xiyuan, 2016/06/24 22:43:54]

Okay then.

[jdufault, 2016/06/24 22:57:05]

Add a comment noting that?

+}
+
 .name-container {
   transition: transform 180ms;
 }
 
 .pod.focused .name-container {
   display: none;
 }
 
 .pod.focused.multiprofiles-policy-applied .name-container {
   display: flex;
@@ skipping 679 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; }
 }