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

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

Index: chrome/browser/resources/chromeos/login/user_pod_row.css
diff --git a/chrome/browser/resources/chromeos/login/user_pod_row.css b/chrome/browser/resources/chromeos/login/user_pod_row.css
index 41ee9cb5b62ff3919953f110ae0cc37f76ac95fd..8204a14d6d67cb80ad2e3713e3d014c17805bb8d 100644
--- a/chrome/browser/resources/chromeos/login/user_pod_row.css
+++ b/chrome/browser/resources/chromeos/login/user_pod_row.css
@@ -64,6 +64,10 @@ podrow[ncolumns='6'] .pod {
   z-index: 1;
 }
 
+.pod.focused[auth-type='userClick'] {
+  cursor: pointer;
+}
+
 .pod .user-image {
   height: 160px;
   opacity: 0.7;
@@ -134,6 +138,19 @@ podrow[ncolumns='6'] .pod {
   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);
@@ -163,13 +180,17 @@ button.custom-button:focus:hover {
   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;
 }
@@ -177,7 +198,7 @@ button.custom-button:focus:hover {
 .pod .signin-button,
 .pod .launch-app-button {
   box-sizing: border-box;
-  display: inline-block;
+  display: none;
   height: 26px;
   margin: 6px 0;
   max-width: 100%;
@@ -185,9 +206,9 @@ button.custom-button:focus:hover {
   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 {
@@ -338,6 +359,7 @@ html[dir=rtl] .action-box-area {
   border: 1px solid lightgray;
   border-radius: 2px;
   box-shadow: none;
+  display: none;
   font-size: 13px;
   line-height: 19px;
   margin: 0;
@@ -358,6 +380,8 @@ html[dir=rtl] .action-box-menu {
 }
 
 .action-box-area.active ~ .action-box-menu {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
   opacity: 1;
   visibility: visible;
 }