cros: Account picker UI for public account.

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 7bb0e24e1ea1aa82509b4bd5ad4d89e26b8b2771..01a553bc4be687fa0a10e66f3099ee76ac5db761 100644
--- a/chrome/browser/resources/chromeos/login/user_pod_row.css
+++ b/chrome/browser/resources/chromeos/login/user_pod_row.css
@@ -29,6 +29,9 @@ html[oobe=old] podrow {
   display: block;
   outline: none;
   padding: 10px;
+}
+
+.pod .main-pane {
   position: relative;
   text-align: center;
 }
@@ -36,6 +39,10 @@ html[oobe=old] podrow {
 html[oobe=old] .pod {
   -webkit-transition: all 230ms ease;
   margin: 0 10px;
+}
+
+html[oobe=old] .pod,
+html[oobe=old] .pod .main-pane {
   width: 170px;
 }
 
@@ -47,6 +54,10 @@ html[oobe=new] .pod {
               0 3px 0 rgba(0, 0, 0, 0.08);
   margin: 0 20px;
   padding-bottom: 3px;
+}
+
+html[oobe=new] .pod,
+html[oobe=new] .pod .main-pane {
   width: 160px;
 }
 
@@ -136,6 +147,7 @@ html[oobe=new] .name {
      when pod is not focused increase that a bit. */
   font-size: 16px;
   height: 26px;
+  line-height: 26px;  /* This vertically centers text */
   overflow: hidden;
   white-space: nowrap;
 }
@@ -144,12 +156,13 @@ html[oobe=new] .name {
   opacity: 0;
 }
 
-.pod.focused .name {
+.pod.need-password.focused .name {
   display: none;
 }
 
 .pod input[type='password'] {
   box-sizing: border-box;
+  display: none;
   padding: 4px 6px;
   width: 100%;
 }
@@ -174,8 +187,8 @@ html[oobe=new] .pod input[type='password'] {
   outline: none;
 }
 
-.pod:not(.focused) input[type='password'] {
-  display: none;
+.pod.need-password.focused input[type='password'] {
+  display: inline-block;
 }
 
 html[oobe=old] .pod input[type='password']:focus {
@@ -313,4 +326,111 @@ html[oobe=old] .pod.focused .signed-in-indicator {
   /* Track shifting of .user-image on pod focus. */
   -webkit-transform: translateY(-1px);
   -webkit-transition: -webkit-transform 140ms ease;
-}
+}
+
+/**** Public account user pod rules *******************************************/
+
+.pod.public-account .name,
+.side-pane-name {
+  -webkit-padding-end: 16px;
+  background-image: -webkit-image-set(
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY') 1x,

[Nikita (slow), 2012/12/04 08:41:26]

You don't have to specify all these rules 1x/2x rules manually as resources will
be parsed and rules inserted.

Just url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY') would work.

[xiyuan, 2012/12/04 18:48:57]

Done. Thanks for the tip.

+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY@2x') 2x);
+  background-repeat: no-repeat;
+  background-position: right;
+  outline: none;
+}
+
+html[dir=rtl] .pod.public-account .name,
+html[dir=rtl] .side-pane-name {
+  background-position: left;
+}
+
+.side-pane-divider,
+.side-pane-container {
+  bottom: 5px;
+  top: 5px;
+  visibility: hidden;
+}
+
+.side-pane-divider {
+  border-left: 1px solid lightgray;
+  left: 180px;
+  position: absolute;
+  right: auto;
+  width: 1px;
+}
+
+html[dir=rtl] .side-pane-divider {
+  left: auto;
+  right: 180px;
+}
+
+.side-pane-container {
+  left: 185px;
+  overflow: hidden;
+  padding: 5px;
+  position: absolute;
+  right: auto;
+}
+
+html[dir=rtl] .side-pane-container {
+  left: auto;
+  right: 185px;
+}
+
+.side-pane-contents {
+  -webkit-transform: translateX(-240px);
+  -webkit-transition: -webkit-transform 180ms ease;
+  height: 100%;
+  width: 225px;
+}
+
+html[dir=rtl] .side-pane-contents {
+  -webkit-transform: translateX(240px);
+}
+
+.pod.public-account.expanded .side-pane-contents {
+  -webkit-transform: translateX(0);
+}
+
+.side-pane-container .info,
+.side-pane-container .reminder {
+  font-size: 12px;
+}
+
+.side-pane-container .info {
+  -webkit-margin-before: 25px;
+}
+
+.side-pane-container .reminder {
+  font-weight: bold;
+}
+
+.side-pane-container .enter-button {
+  bottom: 5px;
+  display: block;
+  left: auto;
+  position: absolute;
+  right: 5px;
+}
+
+html[dir=rtl] .side-pane-container .enter-button {
+  left: 5px;
+  right: auto;
+}
+
+.pod.public-account.expanded {

[Nikita (slow), 2012/12/04 08:41:26]

When public account user pod is in such expanded state will keyboard shortcut
navigation between pods work (Left/Right)?

Will it reset public account pod state to original one? I think it should. 

[xiyuan, 2012/12/04 18:48:57]

Tab/Shift+Tab/Left/Right keys are working and navigate away from an expanded pod
would restore it to original state .

+  padding: 10px;
+  width: 400px;

[Nikita (slow), 2012/12/04 09:28:14]

User pod row width is 1100px wide and we allow 5 user pods at a time.

Will 4 pods + public account user pod in expanded state fit in 1100px?

[xiyuan, 2012/12/04 18:48:57]

4 pods + expaned public pod does not fit in. However, because we are using
"display:-webkit-box" and "overflow:hidden" on the pod-row, the right-most pod
would be animated away. And when focus move out of the public pod to cause it to
collapse, the right-most pod will be animated back in.

+}
+
+.pod.public-account.expanded .name {
+  display: none;
+}
+
+.pod.public-account.expanded .side-pane-divider,
+.pod.public-account.expanded .side-pane-container,
+.pod.public-account.animating .side-pane-container {
+  visibility: visible;
+}