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..2752b1b7e9b89b61714f89c4c15d20018e301a68 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,109 @@ 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: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
+  background-position: right;
+  background-repeat: no-repeat;
+  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 {
+  padding: 10px;
+  width: 400px;
+}
+
+.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;
+}