Add fingerprint UI in user pod

ui/login/account_picker/user_pod_row.js

 // 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.
 
 /**
  * @fileoverview User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 107 matching lines @@
    */
   var AUTH_TYPE_NAMES = {
     0: 'offlinePassword',
     1: 'onlineSignIn',
     2: 'numericPin',
     3: 'userClick',
     4: 'expandThenUserClick',
     5: 'forceOfflinePassword'
   };
 
+  /**
+   * Supported fingerprint unlock states.
+   * @enum {number}
+   * @const
+   */
+  var FINGERPRINT_STATES = {
+    HIDDEN: 0,
+    DEFAULT: 1,
+    SIGNIN: 2,
+    FAILED: 3,
+  };
+
+  /**
+   * The fingerprint states to classes mapping.
+   * {@code state} properties indicate current fingerprint unlock state.
+   * {@code class} properties are CSS classes used to set the icons' background
+   * and password placeholder color.
+   * @const {Array<{type: !number, class: !string}>}
+   */
+  var FINGERPRINT_STATES_MAPPING = [
+    {state: 0, class: 'hidden'},
+    {state: 1, class: 'default'},
+    {state: 2, class: 'signin'},
+    {state: 3, class: 'failed'}

[xiyuan, 2017/03/10 17:51:10]

nit: Can replace the numbers with the state const defined above?
i.e.
var FINGERPRINT_STATES_MAPPING = [
  {state: FINGERPRINT_STATES.HIDDEN, class: 'hidden'},
  ...
];

[xiaoyinh(OOO Sep 11-29), 2017/03/10 21:55:58]

Done.

+  ];
+
   // Focus and tab order are organized as follows:
   //
   // (1) all user pods have tab index 1 so they are traversed first;
   // (2) when a user pod is activated, its tab index is set to -1 and its
   // main input field gets focus and tab index 1;
   // (3) if user pod custom icon is interactive, it has tab index 2 so it
   // follows the input.
   // (4) buttons on the header bar have tab index 3 so they follow the custom
   // icon, or user pod if custom icon is not interactive;
   // (5) Action box buttons have tab index 4 and follow header bar buttons;
@@ skipping 566 matching lines @@
 
     /**
      * Whether click on the pod can issue a user click auth attempt. The
      * attempt can be issued iff the pod was focused when the click
      * started (i.e. on mouse down event).
      * @type {boolean}
      * @private
      */
     userClickAuthAllowed_: false,
 
+    /**
+     * Whether the user has recently authenticated with fingerprint.
+     * @type {boolean}
+     * @private
+     */
+    fingerprintAuthenticated_: false,
+
     /** @override */
     decorate: function() {
       this.tabIndex = UserPodTabOrder.POD_INPUT;
       this.actionBoxAreaElement.tabIndex = UserPodTabOrder.POD_INPUT;
 
       this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
       this.addEventListener('click', this.handleClickOnPod_.bind(this));
       this.addEventListener('mousedown', this.handlePodMouseDown_.bind(this));
 
       if (this.pinKeyboard) {
@@ skipping 19 matching lines @@
           this.handleRemoveCommandClick_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('keydown',
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
       this.actionBoxRemoveUserWarningButtonElement.addEventListener('click',
           this.handleRemoveUserConfirmationClick_.bind(this));
       this.actionBoxRemoveUserWarningButtonElement.addEventListener('keydown',
           this.handleRemoveUserConfirmationKeyDown_.bind(this));
 
+      if (this.fingerprintIconElement) {
+        this.fingerprintIconElement.addEventListener(
+            'mouseover', this.handleFingerprintIconMouseOver_.bind(this));
+        this.fingerprintIconElement.addEventListener(
+            'mouseout', this.handleFingerprintIconMouseOut_.bind(this));
+        this.fingerprintIconElement.addEventListener(
+            'mousedown', stopEventPropagation);
+      }
+
       var customIcon = this.customIconElement;
       customIcon.parentNode.replaceChild(new UserPodCustomIcon(), customIcon);
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       this.passwordElement.addEventListener('keydown',
           this.parentNode.handleKeyDown.bind(this.parentNode));
@@ skipping 326 matching lines @@
           'Passwords':
               this.querySelector('.action-box-remove-user-warning-passwords'),
           'Bookmarks':
               this.querySelector('.action-box-remove-user-warning-bookmarks'),
           'Settings':
               this.querySelector('.action-box-remove-user-warning-settings')
       }
     },
 
     /**
+     * Gets the fingerprint icon area.
+     * @type {!HTMLDivElement}
+     */
+    get fingerprintIconElement() {
+      return this.querySelector('.fingerprint-icon-container');
+    },
+
+    /**
      * Updates the user pod element.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + UserPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user_.displayName;
       this.reauthNameHintElement.textContent = this.user_.displayName;
       this.classList.toggle('signed-in', this.user_.signedIn);
 
@@ skipping 100 matching lines @@
 
     isPinShown: function() {
       return this.classList.contains('pin-enabled');
     },
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
 
+    isFingerprintIconShown: function() {
+      return this.fingerprintIconElement && !this.fingerprintIconElement.hidden;
+    },
+
     /**
      * The user that this pod represents.
      * @type {!Object}
      */
     user_: undefined,
     get user() {
       return this.user_;
     },
     set user(userDict) {
       this.user_ = userDict;
@@ skipping 176 matching lines @@
      * @return {boolean} True if activated successfully.
      */
     activate: function(e) {
       if (this.isAuthTypeOnlineSignIn) {
         this.showSigninUI();
       } else if (this.isAuthTypeUserClick) {
         Oobe.disableSigninUI();
         this.classList.toggle('signing-in', true);
         chrome.send('attemptUnlock', [this.user.username]);
       } else if (this.isAuthTypePassword) {
+        if (this.fingerprintAuthenticated_) {
+          this.fingerprintAuthenticated_ = false;
+          return true;
+        }
         var pinValue = this.pinKeyboard ? this.pinKeyboard.value : '';
         var password = this.passwordElement.value || pinValue;
         if (!password)
           return false;
         Oobe.disableSigninUI();
         chrome.send('authenticateUser', [this.user.username, password,
                                          this.isPinShown()]);
       } else {
         console.error('Activating user pod with invalid authentication type: ' +
             this.authType);
@@ skipping 390 matching lines @@
      */
     handleRemoveUserConfirmationClick_: function(e) {
       if (this.isActionBoxMenuActive) {
         this.isActionBoxMenuActive = false;
         this.removeUser(this.user);
         e.stopPropagation();
       }
     },
 
     /**
+     * Handles mouseover event on fingerprint icon.
+     * @param {Event} e MouseOver event.
+     */
+    handleFingerprintIconMouseOver_: function(e) {
+      var bubbleContent = document.createElement('div');
+      bubbleContent.textContent =
+          loadTimeData.getString('fingerprintIconMessage');
+      this.passwordElement.placeholder =
+          loadTimeData.getString('fingerprintHint');
+
+      /** @const */ var BUBBLE_OFFSET = 25;
+      /** @const */ var BUBBLE_PADDING = -8;
+      var attachment = this.isPinShown() ? cr.ui.Bubble.Attachment.RIGHT :
+                                           cr.ui.Bubble.Attachment.BOTTOM;
+      var bubbleAnchor = this;
+      if (this.isPinShown())
+        bubbleAnchor = (this.getElementsByClassName('auth-container'))[0];
+      $('bubble').showContentForElement(
+          bubbleAnchor, attachment, bubbleContent, BUBBLE_OFFSET,
+          BUBBLE_PADDING, true);
+    },
+
+    /**
+     * Handles mouseout event on fingerprint icon.
+     * @param {Event} e MouseOut event.
+     */
+    handleFingerprintIconMouseOut_: function(e) {
+      if(this.isPinShown()) {
+        $('bubble').hideForElement(
+            (this.getElementsByClassName('auth-container'))[0]);

[xiyuan, 2017/03/10 17:51:10]

nit: wrap the bubbleAnchor logic into a helper and use it here and in
handleFingerprintIconMouseOver_.

[xiaoyinh(OOO Sep 11-29), 2017/03/10 21:55:58]

Done.

+      } else {
+        $('bubble').hideForElement(this);
+      }
+      this.passwordElement.placeholder = loadTimeData.getString(
+          this.isPinShown() ? 'pinKeyboardPlaceholderPinPassword' :
+                              'passwordHint');
+    },
+
+    /**
      * Handles a keydown event on remove user confirmation button.
      * @param {Event} e KeyDown event.
      */
     handleRemoveUserConfirmationKeyDown_: function(e) {
       if (!this.isActionBoxMenuActive)
         return;
 
       // Only handle pressing 'Enter' or 'Space', and let all other events
       // bubble to the action box menu.
       if (e.key == 'Enter' || e.key == ' ') {
@@ skipping 57 matching lines @@
      */
     handlePodMouseDown_: function(e) {
       this.userClickAuthAllowed_ = this.parentNode.isFocused(this);
     },
 
     /**
      * Called when the input of the password element changes. Updates the submit
      * button color and state and hides the error popup bubble.
      */
     updateInput_: function() {
-      if (this.submitButton)
-        this.submitButton.disabled = this.passwordElement.value.length <= 0;
+      if (this.submitButton) {
+        this.submitButton.disabled = this.passwordElement.value.length == 0;
+        if (this.isFingerprintIconShown()) {
+          this.submitButton.hidden = this.passwordElement.value.length == 0;
+        } else {
+          this.submitButton.hidden = false;
+        }
+      }
       this.showError = false;
       $('bubble').hide();
     },
 
     /**
      * Handles input event on the password element.
      * @param {Event} e Input event.
      */
     handleInputChanged_: function(e) {
       this.updateInput_();
@@ skipping 1080 matching lines @@
         pod.customIconElement.setAriaLabel(ariaLabel);
       else
         console.warn('No ARIA label for user pod custom icon.');
 
       pod.customIconElement.show();
 
       // This has to be called after |show| in case the tooltip should be shown
       // immediatelly.
       pod.customIconElement.setTooltip(
           icon.tooltip || {text: '', autoshow: false});
+
+      // Hide fingerprint icon when custom icon is shown.
+      this.setUserPodFingerprintIcon(username, FINGERPRINT_STATES.HIDDEN);
     },
 
     /**
      * Hard-locks user pod for the user. If user pod is hard-locked, it can be
      * only unlocked using password, and the authentication type cannot be
      * changed.
      * @param {!string} username The user's username.
      * @private
      */
     hardlockUserPod_: function(username) {
@@ skipping 16 matching lines @@
      */
     hideUserPodCustomIcon: function(username) {
       var pod = this.getPodWithUsername_(username);
       if (pod == null) {
         console.error('Unable to hide user pod button: user pod not found.');
         return;
       }
 
       // TODO(tengs): Allow option for a fading transition.
       pod.customIconElement.hide();
+
+      // Show fingerprint icon if applicable.
+      this.setUserPodFingerprintIcon(username, FINGERPRINT_STATES.DEFAULT);
     },
 
     /**
+     * Set a fingerprint icon in the user pod of |username|.
+     * @param {string} username Username of the selected user
+     * @param {number} state Fingerprint unlock state
+     */
+    setUserPodFingerprintIcon: function(username, state) {
+      var pod = this.getPodWithUsername_(username);
+      if (pod == null) {
+        console.error(
+            'Unable to set user pod fingerprint icon: user pod not found.');
+        return;
+      }
+      pod.fingerprintAuthenticated_ = false;
+      if (!pod.fingerprintIconElement)
+        return;
+      if (!pod.user.allowFingerprint || state == FINGERPRINT_STATES.HIDDEN ||
+          !pod.customIconElement.hidden) {
+        pod.fingerprintIconElement.hidden = true;
+        pod.submitButton.hidden = false;
+        return;
+      }
+
+      FINGERPRINT_STATES_MAPPING.forEach(function(icon) {
+          pod.fingerprintIconElement.classList.toggle(
+              icon.class, state == icon.state);
+      });
+      pod.fingerprintIconElement.setAttribute(
+          'aria-label', loadTimeData.getString('fingerprintIconMessage'));

[xiyuan, 2017/03/10 17:51:10]

The aria-label seems to be a const. Why not put it in html ?

  <div class="fingerprint-icon-container" hidden
      i18n-values="aria-label:fingerprintIconMessage">

[xiaoyinh(OOO Sep 11-29), 2017/03/10 21:55:58]

Done.

+      pod.fingerprintIconElement.hidden = false;
+      pod.submitButton.hidden = pod.passwordElement.value.length == 0;
+      this.updatePasswordField_(pod, state);
+      if (state == FINGERPRINT_STATES.DEFAULT)
+        return;
+
+      pod.fingerprintAuthenticated_ = true;
+      this.setActivatedPod(pod);
+      if (state == FINGERPRINT_STATES.FAILED) {
+        /** @const */ var RESET_ICON_TIMEOUT_MS = 500;
+        setTimeout(
+            this.resetIconAndPasswordField_.bind(this, pod),
+            RESET_ICON_TIMEOUT_MS);
+      }
+    },
+
+    /**
+     * Reset the fingerprint icon and password field.
+     * @param {UserPod} pod Pod to reset.
+     */
+    resetIconAndPasswordField_:function(pod) {

[jdufault, 2017/03/09 21:11:25]

nit: space after ':'

[xiaoyinh(OOO Sep 11-29), 2017/03/10 21:55:58]

Done.

+      if (!pod.fingerprintIconElement)
+        return;
+      this.setUserPodFingerprintIcon(
+          pod.user.username, FINGERPRINT_STATES.DEFAULT);
+    },
+
+    /**
+     * Remove the fingerprint icon in the user pod.
+     * @param {string} username Username of the selected user
+     */
+    removeUserPodFingerprintIcon: function(username) {
+      var pod = this.getPodWithUsername_(username);
+      if (pod == null) {
+        console.error(
+            'Unable to remove user pod fingerprint icon: user pod not found.');

[jdufault, 2017/03/09 21:11:25]

You might be able to get the console.error on one line with a string like 

  'No user pod found (when removing fingerprint icon)'

Though the current string is also good.

[xiaoyinh(OOO Sep 11-29), 2017/03/10 21:55:58]

Done.

+        return;
+      }
+      this.resetIconAndPasswordField_(pod);
+      if (pod.fingerprintIconElement) {
+        pod.fingerprintIconElement.parentNode.removeChild(
+            pod.fingerprintIconElement);
+      }
+      pod.submitButton.hidden = false;
+    },
+
+    /**
+     * Updates the password field in the user pod.
+     * @param {UserPod} pod Pod to update.
+     * @param {number} state Fingerprint unlock state
+     */
+    updatePasswordField_: function(pod, state) {
+      FINGERPRINT_STATES_MAPPING.forEach(function(item) {
+        pod.passwordElement.classList.toggle(item.class, state == item.state);
+      });
+      var placeholderStr = loadTimeData.getString(
+          pod.isPinShown() ? 'pinKeyboardPlaceholderPinPassword' :
+                             'passwordHint');
+      if (state == FINGERPRINT_STATES.SIGNIN) {
+        placeholderStr = loadTimeData.getString('fingerprintSigningin');
+      } else if (state == FINGERPRINT_STATES.FAILED) {
+        placeholderStr = loadTimeData.getString('fingerprintSigninFailed');
+      }
+      pod.passwordElement.placeholder = placeholderStr;
+    },
+
+    /**
      * Sets the authentication type used to authenticate the user.
      * @param {string} username Username of selected user
      * @param {number} authType Authentication type, must be one of the
      *                          values listed in AUTH_TYPE enum.
      * @param {string} value The initial value to use for authentication.
      */
     setAuthType: function(username, authType, value) {
       var pod = this.getPodWithUsername_(username);
       if (pod == null) {
         console.error('Unable to set auth type: user pod not found.');
@@ skipping 248 matching lines @@
       this.insideFocusPod_ = true;
 
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (!this.alwaysFocusSinglePod) {
           pod.isActionBoxMenuActive = false;
         }
         if (pod != podToFocus) {
           pod.isActionBoxMenuHovered = false;
           pod.classList.remove('focused');
           pod.setPinVisibility(false);
+          this.setUserPodFingerprintIcon(
+              pod.user.username, FINGERPRINT_STATES.HIDDEN);
           // On Desktop, the faded style is not set correctly, so we should
           // manually fade out non-focused pods if there is a focused pod.
           if (pod.user.isDesktopUser && podToFocus)
             pod.classList.add('faded');
           else
             pod.classList.remove('faded');
           pod.reset(false);
         }
       }
 
@@ skipping 19 matching lines @@
           // is false, it doesn't focus on the password input box by default.
           podToFocus.focus();
         }
 
         // focusPod() automatically loads wallpaper
         if (!podToFocus.user.isApp)
           chrome.send('focusPod', [podToFocus.user.username]);
         this.firstShown_ = false;
         this.lastFocusedPod_ = podToFocus;
         this.scrollFocusedPodIntoView();
+        this.setUserPodFingerprintIcon(
+            podToFocus.user.username, FINGERPRINT_STATES.DEFAULT);
       } else {
         chrome.send('noPodFocused');
       }
       this.insideFocusPod_ = false;
     },
 
     /**
      * Resets wallpaper to the last active user's wallpaper, if any.
      */
     loadLastWallpaper: function() {
@@ skipping 371 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });