Refactor user pods to use authType property for distinct authentication modes.

chrome/browser/resources/chromeos/login/user_pod_row.css

 /* Copyright (c) 2012 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 46 matching lines @@
   -webkit-transform: scale3d(0.8, 0.8, 0.8);
 }
 
 .pod.focused {
   /* Focused pod has the same size no matter how many pods. */
   -webkit-transform: scale3d(1, 1, 1) !important;
   cursor: default;
   z-index: 1;
 }
 
+.pod.focused[auth-type='userClick'] {
+  cursor: pointer;
+}
+
 .pod .user-image {
   height: 160px;
   opacity: 0.7;
   width: 160px;
 }
 
 .pod.faded {
   opacity: .75;
 }
 
@@ skipping 50 matching lines @@
 .password-area {
   display: none;
 }
 
 .password-input-container {
   -webkit-box-flex: 1;
   /* This relative position is so the capslock hint is positioned correctly. */
   position: relative;
 }
 
+.password-label {
+  -webkit-box-align: center;
+  border: none;
+  display: none;
+  font-size: 14px;
+  height: 40px;
+  text-overflow: ellipsis;
+}
+
+.pod[auth-type='userClick'] .password-label {
+  display: -webkit-box;

[xiyuan, 2014/02/16 18:38:14]

.password-label has no children and "display: -webkit-box" only affects how an
element's children are laid out. We should use use "display: block" to avoid
confusion.

[Tim Song, 2014/02/18 23:32:44]

The textContent node is a child, and I want it to be vertically centered.

+}
+
 .custom-button {
   -webkit-box-align: center;
   background-color: rgba(0, 0, 0, 0);
   background-image: none;
   cursor: pointer;
   display: -webkit-box;
   height: 40px;
   margin: 0;
   max-width: 40px;
   min-height: 0;
   min-width: 0;
   padding: 0;
 }
 
 button.custom-button:focus:active,
 button.custom-button:focus:hover {
   border: 1px solid transparent !important;
 }
 
 .custom-button img {
   max-height: 100%;
   max-width: 100%;
 }
 
 .pod input[type='password'] {
   -webkit-transition: opacity linear 150ms;
   background: white;
   border: none;
   box-sizing: border-box;
-  display: inline-block;
+  display: none;
   height: 40px;
   outline: none;
   padding: 4px 6px;
   width: 100%;
 }
 
+.pod[auth-type='systemPassword'] input[type='password'] {
+  display: inline-block;
+}
+
 .pod.need-password.focused .password-area {
   display: -webkit-box;
 }
 
 .pod .signin-button,
 .pod .launch-app-button {
   box-sizing: border-box;
-  display: inline-block;
+  display: none;
   height: 26px;
   margin: 6px 0;
   max-width: 100%;
   min-width: 72px !important;
   padding: 4px 8px;
 }
 
-.pod:not(.focused) .signin-button,
-.pod:not(.focused) .launch-app-button  {
-  display: none;
+.pod.focused .launch-app-button,
+.pod[auth-type='onlineSignIn'] .signin-button {

[xiyuan, 2014/02/16 18:38:14]

Do this mean to show .signin-button always, regardless of whether the pod is
focused or not?

[Tim Song, 2014/02/18 23:32:44]

You're right, this should only be visible when the pod is focused.

+  display: inline-block;
 }
 
 .pod .capslock-hint {
   bottom: 13px;
   cursor: text;
   position: absolute;
   right: 6px;
   visibility: hidden;
   z-index: 1;
 }
@@ skipping 130 matching lines @@
 .action-box-area.active .action-box-button {
   background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_PRESSED');
 }
 
 .action-box-menu {
   -webkit-transition: opacity 100ms ease-in-out;
   background-color: white;
   border: 1px solid lightgray;
   border-radius: 2px;
   box-shadow: none;
+  display: none;
   font-size: 13px;
   line-height: 19px;
   margin: 0;
   opacity: 0;
   padding: 0;
   position: absolute;
   right: 5px;
   top: 18px;
   /* TODO(glotov): the menu should fade out with transition  */
   visibility: hidden;
   width: 220px;
   z-index: 1;
 }
 
 html[dir=rtl] .action-box-menu {
   left: 5px;
   right: auto;
 }
 
 .action-box-area.active ~ .action-box-menu {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
   opacity: 1;
   visibility: visible;
 }
 
 .action-box-menu-title {
   -webkit-box-orient: vertical;
   -webkit-box-pack: center;
   color: #b4b4b4;
   display: -webkit-box;
   padding: 7px 20px;
@@ skipping 196 matching lines @@
 .pod.public-account.expanded .name,
 .pod.public-account.expanded .learn-more {
   display: none;
 }
 
 .pod.public-account.expanded .side-pane-divider,
 .pod.public-account.expanded .side-pane-container,
 .pod.public-account.animating .side-pane-container {
   visibility: inherit;
 }