PS - Adjusting Public Session login pod for expanded whitelisting

ui/login/account_picker/user_pod_row.css

Index: ui/login/account_picker/user_pod_row.css
diff --git a/ui/login/account_picker/user_pod_row.css b/ui/login/account_picker/user_pod_row.css
index 9390d68921a201dac2d272e9644dae9e513a820c..a2325e03ed4100f38298d19af7bb681221bbe03d 100644
--- a/ui/login/account_picker/user_pod_row.css
+++ b/ui/login/account_picker/user_pod_row.css
@@ -700,10 +700,12 @@ html[dir=rtl] .user-type-bubble {
 
 .pod.public-account.expanded {
   width: 500px;
+  height: 230px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort, i.e height should be before width

See https://www.chromium.org/developers/web-development-style-guide, look for
"Alphabetize properties."

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 .pod.public-account.expanded.advanced {
   width: 610px;
+  height: 280px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 .pod.public-account.focused .name-container {
@@ -711,7 +713,7 @@ html[dir=rtl] .user-type-bubble {
 }
 
 .pod.public-account.expanded .name-container {
-  transform: translateY(-34px);
+  display: none;
 }
 
 .pod.public-account .learn-more-container {
@@ -740,7 +742,7 @@ html[dir=rtl] .user-type-bubble {
   display: flex;
   flex-direction: column;
   float: right;
-  height: 193px;
+  height: 213px;
   width: 490px;
 }
 
@@ -750,6 +752,7 @@ html[dir=rtl] .user-type-bubble {
 
 .pod.public-account.expanded.advanced .expanded-pane-contents {
   width: 600px;
+  height: 263px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 html[dir=rtl] .expanded-pane-contents {
@@ -770,8 +773,12 @@ html[dir=rtl] .expanded-pane-contents {
   white-space: nowrap;
 }
 
+.expanded-pane-container {
+  color: grey;
+}
+
 .reminder {
-  font-weight: bold;
+  margin-top: 20px;
 }
 
 .language-and-input-section {
@@ -814,10 +821,14 @@ html[dir=rtl] .expanded-pane-contents {
 }
 
 .bottom-container {
-  -webkit-margin-start: 10px;
+  -webkit-margin-start: 20px;
   display: flex;
   flex: none;
   font-size: 13px;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row-reverse;
+  margin-bottom: 4px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 .expanded-pane-learn-more-container,
@@ -830,6 +841,7 @@ html[dir=rtl] .expanded-pane-contents {
   background-image: url(../../webui/resources/images/business.svg);
   background-size: 18px;
   height: 18px;
+  margin-top: -10px;
   position: relative;
   width: 18px;
 }
@@ -840,12 +852,73 @@ html[dir=rtl] .expanded-pane-contents {
 
 .info {
   flex: auto;
-  margin: 5px 10px;
+  margin: -10px 25px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.monitoring-container {
+  margin-top: 35px;
+}
+
+.monitoring-learn-more {
+  color: rgb(49, 106, 197);
+  text-decoration: none;
+}
+
+.monitoring-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.50;
+  background: black;
+  z-index: 10;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort here

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

+}
+
+.monitoring-dialog {
+  position: fixed;
+  margin-left: -160px;

[xiyuan, 2016/11/21 19:38:35]

nit: -webkit-margin-start? xxx-left might not work with RTL

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

+  margin-top: -80px;
+  min-width: 430px;
+  min-height: 170px;
+}
+
+.pod.public-account.expanded.advanced .monitoring-dialog {
+  margin-left: -115px;

[xiyuan, 2016/11/21 19:38:35]

nit: similar here

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

+  margin-top: -45px;
+}
+
+.monitoring-dialog-button {
+  position: absolute;
+  top: 0px;
+  color: grey;
+  height: 34px;
+  width: 34px;
+}
+
+.monitoring-dialog-title {
+  position: absolute;
+  top: -10px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.monitoring-dialog-content {
+  position: absolute;
+  top: 10px;
+  font-size: 13px;
+  color: grey;
+}
+
+.monitoring-dialog-item {
+  display: list-item;
+  margin-left: 16px;
+  margin-bottom: -10px;
+}
+
 .language-and-input-container {
   -webkit-margin-end: 25px;
   flex: none;
@@ -853,9 +926,7 @@ html[dir=rtl] .expanded-pane-contents {
 
 .language-and-input {
   color: rgb(49, 106, 197);
-  position: relative;
   text-decoration: none;
-  top: 4px;
 }
 
 .pod.public-account.expanded.advanced .language-and-input-container {
@@ -863,7 +934,20 @@ html[dir=rtl] .expanded-pane-contents {
 }
 
 .enter-button {
-  font-size: 14px;
+  font-size: 12px;
+  background-color: rgb(66, 133, 244);
+  color: white;
+  text-transform: none;
+}
+
+.enter-button.keyboard-focus {
+  font-weight: normal;
+}
+
+.horizontal-line {
+  border-bottom: 1px double #cccccc;
+  position: relative;
+  bottom: 8px;
 }
 
 /* Animations for the animated ellipsis: */