Add language and keyboard layout pickers to public session pods

chrome/browser/resources/login/user_pod_row.css

 /* Copyright 2014 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 397 matching lines @@
 .easy-unlock-button-content {
   width: 145px;
 }
 
 /**** Public account user pod rules *******************************************/
 
 .pod.public-account.expanded {
   width: 500px;
 }
 
+.pod.public-account.expanded.advanced {
+  width: 610px;
+}
+
 .pod.public-account.focused .name-container {
   display: flex;
 }
 
 .pod.public-account.expanded .name-container {
   transform: translateY(-34px);
 }
 
 .pod.public-account .learn-more-container {
   display: block;
   flex: none;
 }
 
 .pod.public-account .learn-more {
   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
   height: 16px;
   position: relative;
   top: 16px;
   width: 16px;
 }
 
 .expanded-pane {
   display: none;
 }
 
 .pod.public-account.animating .expanded-pane,
 .pod.public-account.expanded .expanded-pane {
   display: block;
+  font-size: 12px;
   margin: 10px;
   overflow: hidden;
   z-index: 1;
 }
 
 .expanded-pane-contents {
   display: flex;
   flex-direction: column;
   float: right;
   height: 193px;
   width: 490px;
 }
 
+.pod.public-account.transitioning-to-advanced .expanded-pane-contents {
+  transition: width 180ms;
+}
+
+.pod.public-account.expanded.advanced .expanded-pane-contents {
+  width: 600px;
+}
+
 html[dir=rtl] .expanded-pane-contents {
   float: left;
 }
 
+.side-container {
+  -webkit-margin-start: 200px;
+  flex: auto;
+}
+
 .expanded-pane-name {
-  -webkit-margin-start: 200px;
-  flex: none;
   font-size: 19px;
   margin-bottom: 11px;
   margin-top: -2px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .reminder {
-  -webkit-margin-start: 200px;
+  font-weight: bold;
+}
+
+.language-and-input-section {
+  display: none;
+}
+
+.pod.public-account.transitioning-to-advanced .language-and-input-section {
+  display: block;
+  opacity: 0;
+  transition: opacity 180ms ease 180ms;
+}
+
+.pod.public-account.expanded.advanced .language-and-input-section {
+  display: block;
+  opacity: 1;
+}
+
+.select-with-label {
+  display: flex;
+  margin-top: 20px;
+}
+
+.language-select-label,
+.keyboard-select-label {
+  flex: none;
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 170px;
+}
+
+.select-container {
   flex: auto;
-  font-size: 12px;
-  font-weight: bold;
+}
+
+.language-select,
+.keyboard-select {
+  width: 100%;
 }
 
 .bottom-container {
   -webkit-margin-start: 10px;
   display: flex;
   flex: none;
+  font-size: 13px;
 }
 
 .expanded-pane-learn-more-container,
 .enter-button {
   flex: none;
 }
 
 .expanded-pane-learn-more {
   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
   height: 16px;
   position: relative;
   top: 6px;
   width: 16px;
 }
 
 .info {
   flex: auto;
-  font-size: 13px;
-  margin: 5px 10px 0 10px;
+  margin: 5px 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.language-and-input-container {
+  -webkit-margin-end: 25px;
+  flex: none;
+}
+
+.language-and-input {
+  color: rgb(49, 106, 197);
+  position: relative;
+  text-decoration: none;
+  top: 4px;
+}
+
+.pod.public-account.expanded.advanced .language-and-input-container {
+  display: none;
+}
+
+.enter-button {
+  font-size: 14px;
+}