Add fingerprint UI in user pod

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 64e25f6e2491e5c7569842b4ff45c68a2370b510..3db3cf911e8fa3548702e2f869a89cf2ca9adb6b 100644
--- a/ui/login/account_picker/user_pod_row.css
+++ b/ui/login/account_picker/user_pod_row.css
@@ -291,6 +291,7 @@ html[dir=rtl] .main-pane {
   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;
@@ -302,6 +303,7 @@ html[dir=rtl] .main-pane {
   width: 27px;
 }
 
+.fingerprint-icon-image.faded,
 .custom-icon.faded {
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
 }
@@ -415,6 +417,7 @@ html[dir=rtl] .main-pane {
   display: none;
 }
 
+.fingerprint-icon-container,
 .custom-icon-container {
   display: flex;
   flex: none;
@@ -554,6 +557,34 @@ html[dir=rtl] .user-type-icon-area {
   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;