cros: Account picker UI for public account.

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 {
   -webkit-box-align: center;
   -webkit-box-pack: center;
@@ skipping 11 matching lines @@
 }
 
 .pod {
   border-radius: 2px;
   cursor: pointer;
   /* TODO(nkostylev): Figure out why explicit display: block is needed.
      See http://crbug.com/161297 */
   display: block;
   outline: none;
   padding: 10px;
+}
+
+.pod .main-pane {
   position: relative;
   text-align: center;
 }
 
 html[oobe=old] .pod {
   -webkit-transition: all 230ms ease;
   margin: 0 10px;
+}
+
+html[oobe=old] .pod,
+html[oobe=old] .pod .main-pane {
   width: 170px;
 }
 
 html[oobe=new] .pod {
   -webkit-transition: all 180ms ease;
   background-color: white;
   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);
   margin: 0 20px;
   padding-bottom: 3px;
+}
+
+html[oobe=new] .pod,
+html[oobe=new] .pod .main-pane {
   width: 160px;
 }
 
 html[oobe=old] .pod .user-image {
   -webkit-transition: all 140ms ease;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 2px;
   box-shadow: 0 3px 12px #ccc;
   margin-bottom: 10px;
@@ skipping 69 matching lines @@
   -webkit-transition: opacity 800ms ease;
   margin-top: 4px;
 }
 
 html[oobe=new] .name {
   -webkit-transition: all 170ms ease;
   /* Matching font-size 14px but since name is visible
      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;
 }
 
 .name.init {
   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%;
 }
 
 html[oobe=old] .pod input[type='password'] {
   -webkit-border-radius: 2px;
   -webkit-transition: box-shadow 100ms, background 100ms, border 500ms;
   border: 1px solid #aaa;
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1),
               0 1px 0 white,
               0 0 1px transparent,
               0 0 1px transparent,
               0 0 1px transparent;
   height: 26px;
 }
 
 html[oobe=new] .pod input[type='password'] {
   -webkit-transition: opacity linear 150ms;
   background: white;
   border: none;
   height: 40px;
   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 {
   -webkit-transition: box-shadow 200ms, background 200ms, border 200ms;
   background: #f8f8f8;
   border-color: rgb(64, 128, 250);
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15),
               0 1px 0 transparent,
               0 0 1px #c0c0c0,
               0 0 1px #c0c0c0,
@@ skipping 117 matching lines @@
 }
 
 html[oobe=old] .signed-in-indicator {
   margin: 5px;
 }
 
 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;
+}