Add fingerprint UI in user pod

ui/login/account_picker/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 273 matching lines @@
   color: grey;
   display: block;
   flex: auto;
   margin-top: 11px;
   outline: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.fingerprint-icon-image,

[jdufault, 2017/03/08 23:21:26]

What about applying inside of the div, you also apply the custom-icon class?
That would eliminate the changes on line 294, 306, and 420. Feel free to ignore
if there is styling that is applied to .custom-icon that does not also apply to
fingerprint-icon-image.

So class="custom-icon fingerprint-icon-image"

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:11]

Thanks for the suggestion. I've applied the custom-icon class along with
fingerprint-icon-image.
I didn't apply "custom-icon-container" with "fingerprint-icon-container" though,
because get customIconElement() are querying 'custom-icon-container', and just
want to avoid confusion with customIconElement vs 
fingerprintIconElement.
Let me know if you think otherwise.

 .custom-icon {
   -webkit-margin-end: 0;
   -webkit-margin-start: auto;
   background-position: center;
   background-repeat: no-repeat;
   flex: none;
   height: 27px;
   margin: 8px 0;
   width: 27px;
 }
 
+.fingerprint-icon-image.faded,
 .custom-icon.faded {
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
 }
 
 .custom-icon-hardlocked {
   background-image: url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED);
 }
 
 .custom-icon-hardlocked.icon-with-tooltip:hover {
   background-image: url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER);
@@ skipping 93 matching lines @@
 }
 
 .interactive-custom-icon {
   cursor: pointer;
 }
 
 .pod[auth-type='onlineSignIn'] .custom-icon-container {
   display: none;
 }
 
+.fingerprint-icon-container,
 .custom-icon-container {
   display: flex;
   flex: none;
   flex-direction: column;
   height: 43px;
   width: 27px;
 }
 
 .launch-app-button-container {
   display: block;
@@ skipping 119 matching lines @@
 
 .user-type-icon-area.policy .user-type-icon-image {
   background-image: url(../../webui/resources/images/business.svg);
   background-size: 18px;
 }
 
 .user-type-icon-area.app .user-type-icon-image {
   background-image: url(chrome://theme/IDR_KIOSK_APP_USER_POD_ICON);
 }
 
+.fingerprint-icon-container.default .fingerprint-icon-image {
+  background-image: url(../../webui/resources/images/fingerprint_default.svg);
+}
+
+.fingerprint-icon-container.default:hover .fingerprint-icon-image {
+  background-image: url(../../webui/resources/images/fingerprint_signin.svg);
+}
+
+.fingerprint-icon-container.fingerprintSignin .fingerprint-icon-image {
+  background-image: url(../../webui/resources/images/fingerprint_signin.svg);
+}
+
+.fingerprint-icon-container.fingerprintFailed .fingerprint-icon-image {
+  background-image: url(../../webui/resources/images/fingerprint_failed.svg);
+}
+
+.pod input[type='password'].default::-webkit-input-placeholder {
+  color:grey;

[jdufault, 2017/03/08 23:21:27]

nit: space after :

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:11]

Done.

+}
+
+.pod input[type='password'].fingerprintSignin::-webkit-input-placeholder {
+  color:#4285F4;

[jdufault, 2017/03/08 23:21:26]

nit: space after :

Is this one of the material design colors such that we can reuse a constant?

ie,

color: var(--google-blue-500);

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:11]

Done.

+}
+
+.pod input[type='password'].fingerprintFailed::-webkit-input-placeholder {
+  color:#DB4437;

[jdufault, 2017/03/08 23:21:27]

ditto

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:11]

Done.

+}
+
 .action-box-menu {
   display: none;
   z-index: 6;
 }
 
 .action-box-area.active ~ .action-box-menu {
   background-color: white;
   border: 1px solid lightgray;
   border-radius: 2px;
   display: flex;
@@ skipping 420 matching lines @@
   animation: ellipsis-component2 1.5s infinite;
 }
 
 @keyframes ellipsis-component2 {
   0% { opacity: 0; }
   25% { opacity: 0; }
   50% { opacity: 0; }
   75% { opacity: 1; }
   100% { opacity: 0; }
 }