Add avatar badges and update caps lock icon for new login screen

1) Added supervised-user and signed-in user badge. We do not have
designs for other badges yet and I need to investigate on all other
badge types to see which one should be switched to the new style.
Before that we hide all other badges to avoid style conflict.

2) Updated caps lock icon to match the new spec.

BUG=718159

Review-Url: https://codereview.chromium.org/2919523005
Cr-Commit-Position: refs/heads/master@{#476517}

ui/login/account_picker/md_user_pod_row.css

@@ -108,6 +108,36 @@ html[dir=rtl] .user-image-pane {
   flex: none;
 }
 
+.pod .badge-container {
+  background: #FFF;
+  border-radius: 50%;
+  bottom: 0;
+  display: none;
+  height: 27px;
+  position: absolute;
+  right: 0;
+  width: 27px;
+}
+
+.pod .badge-container iron-icon {
+  --iron-icon-height: 25px;
+  --iron-icon-width: 25px;
+  display: none;
+  padding: 0;
+}
+
+/* Signed-in badge should be hidden when there's another badge. */
+.pod.legacy-supervised.signed-in .signed-in-badge {
+  display: none;
+}
+
+.pod.legacy-supervised .badge-container,
+.pod.signed-in .badge-container,
+.pod.legacy-supervised .legacy-supervised-badge,
+.pod.signed-in .signed-in-badge {
+  display: block;
+}
+
 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the
  style rule once it is included on CrOS only. crbug.com/397638 */
 html:not([screen=login-add-user]) .pod .user-image {
@@ -201,7 +231,7 @@ html[dir=rtl] .main-pane {
   display: none;
 }
 
-#input-line {
+.input-line {
   opacity: 0.34;
   position: absolute;
   stroke: #FFFFFF;
@@ -209,7 +239,7 @@ html[dir=rtl] .main-pane {
   top: 40px;
 }
 
-#input-line[active] {
+.input-present .input-line {
   opacity: 1;
 }
 
@@ -228,6 +258,10 @@ html[dir=rtl] .main-pane {
   width: 180px;
 }
 
+.capslock-on .password-container {
+  width: 160px;
+}
+
 .pod input[type='password'] {
   background-color: transparent;
   border: none;
@@ -252,18 +286,21 @@ html[dir=rtl] .main-pane {
 .capslock-on .capslock-hint-container {
   display: block;
   flex: none;
-  height: 43px;
+  height: 40px;
   position: relative;
   width: 20px;
 }
 </if>
 
 .capslock-hint {
-  -webkit-margin-end: 6px;
-  -webkit-margin-start: -2px;
-  margin: auto;
-  position: relative;
-  top: 15px;
+  --iron-icon-height: 22px;
+  --iron-icon-width: 22px;
+  opacity: 0.34;
+  padding: 13px 0 5px;
+}
+
+.input-present .capslock-hint {
+  opacity: 1;
 }
 
 .password-label,

ui/login/account_picker/md_user_pod_row.js

@@ -1306,7 +1306,9 @@ cr.define('login', function() {
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
-      this.userTypeIconAreaElement.hidden = false;
+      // TODO(wzang): Evaluate all icon types other than supervised user and
+      // switch them to badges per the design spec.
+      this.userTypeIconAreaElement.hidden = true;
     },
 
     isFingerprintIconShown: function() {
@@ -2044,13 +2046,7 @@ cr.define('login', function() {
       }
       this.showError = false;
       $('bubble').hide();
-      var inputLine = this.querySelector('#input-line');
-      if (inputLine) {
-        if (!isEmpty)
-          inputLine.setAttribute('active', 'true');
-        else
-          inputLine.removeAttribute('active');
-      }
+      this.classList.toggle('input-present', !isEmpty);
     },
 
     /**

ui/login/account_picker/md_user_pod_template.html

@@ -20,6 +20,15 @@
       <g id="dropdown" fill="#FFFFFF" stroke="none" stroke-width="1" fill-rule="evenodd" opacity="0.34">
           <polygon points="16.59 8.59 12 13.17 7.41 8.59 6 10 12 16 18 10"></polygon>
       </g>
+      <g id="legacy-supervised-badge">
+          <path d="M16.5,13.5 C17.42,13.5 18.16,12.7533333 18.16,11.8333333 C18.16,10.9133333 17.42,10.1666667 16.5,10.1666667 C15.58,10.1666667 14.8333333,10.9133333 14.8333333,11.8333333 C14.8333333,12.7533333 15.58,13.5 16.5,13.5 Z M11.5,12.8333333 C12.6066667,12.8333333 13.4933333,11.94 13.4933333,10.8333333 C13.4933333,9.72666667 12.6066667,8.83333333 11.5,8.83333333 C10.3933333,8.83333333 9.5,9.72666667 9.5,10.8333333 C9.5,11.94 10.3933333,12.8333333 11.5,12.8333333 Z M16.5,14.8333333 C15.28,14.8333333 12.8333333,15.4466667 12.8333333,16.6666667 L12.8333333,18.1666667 L20.1666667,18.1666667 L20.1666667,16.6666667 C20.1666667,15.4466667 17.72,14.8333333 16.5,14.8333333 Z M11.5,14.1666667 C9.94666667,14.1666667 6.83333333,14.9466667 6.83333333,16.5 L6.83333333,18.1666667 L11.5,18.1666667 L11.5,16.6666667 C11.5,16.1 11.72,15.1066667 13.08,14.3533333 C12.5,14.2333333 11.94,14.1666667 11.5,14.1666667 Z" id="Shape" fill="#000000" fill-rule="nonzero" opacity="0.34"></path>
+      </g>
+      <g id="signed-in-badge">
+          <polygon id="Shape" fill="#000000" fill-rule="nonzero" opacity="0.34" points="11.5 16.28 8.72 13.5 7.77333333 14.44 11.5 18.1666667 19.5 10.1666667 18.56 9.22666667"></polygon>
+      </g>
+      <g id="caps-lock">
+          <path d="M2.5,4.49188419 C2.5,3.39179693 3.39339733,2.5 4.49188419,2.5 L15.5081158,2.5 C16.6082031,2.5 17.5,3.39339733 17.5,4.49188419 L17.5,15.5081158 C17.5,16.6082031 16.6066027,17.5 15.5081158,17.5 L4.49188419,17.5 C3.39179693,17.5 2.5,16.6066027 2.5,15.5081158 L2.5,4.49188419 Z M10,7.47368421 L13.825,11.5 L15,10.2631579 L10,5 L5,10.2631579 L6.175,11.5 L10,7.47368421 Z M5,15 L15,15 L15,13.5 L5,13.5 L5,15 Z" id="Combined-Shape" fill="#FFFFFF"></path>
+      </g>
     </defs>
   </svg>
 </iron-iconset-svg>
@@ -30,10 +39,12 @@
       <div class="user-image-container">
         <img class="user-image" alt>
       </div>
-      <div class="indicator-container">
-        <div class="indicator legacy-supervised-indicator"></div>
-        <div class="indicator child-indicator"></div>
-        <div class="indicator locked-indicator"></div>
+      <div class="badge-container">
+        <iron-icon class="legacy-supervised-badge"
+            icon="user-pod:legacy-supervised-badge">
+        </iron-icon>
+        <iron-icon class="signed-in-badge" icon="user-pod:signed-in-badge">
+        </iron-icon>
       </div>
     </div>
 <if expr="chromeos">
@@ -126,8 +137,8 @@
           </div>
 <if expr="chromeos">
           <div class="capslock-hint-container">
-            <img class="capslock-hint"
-                 src="chrome://theme/IDR_LOGIN_PASSWORD_CAPS_LOCK" alt>
+            <iron-icon class="capslock-hint" icon="user-pod:caps-lock">
+            </iron-icon>
           </div>
           <paper-icon-button class="submit-button" disabled
                              aria-label="$i18n{submitButtonAccessibleName}"
@@ -150,7 +161,7 @@
         <div class="launch-app-button-container" hidden>
           <button class="launch-app-button">$i18n{launchAppButton}</button>
         </div>
-        <div id="input-line">
+        <div class="input-line">
           <svg>
             <line x1="0" y1="0" x2="204" y2="0">
           </svg>