Dialog message saying PIN is incorrect positioned correctly.

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 684 matching lines @@
     __proto__: HTMLDivElement.prototype,
 
     /**
      * 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,
+    pinKeyboardShown_: false,

[jdufault, 2016/07/08 21:04:09]

Add docs.

[sammiequon, 2016/07/11 17:35:35]

Done.

 
     /** @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));
 
@@ skipping 415 matching lines @@
 
     setPinVisibility: function(visible) {
       var elements = [this, this.authElement, this.imageElement,
                       this.signInElement, this.pinContainer];
 
       for (var idx = 0; idx < elements.length; idx++) {
         var currentElement = elements[idx];
         currentElement.classList.toggle('pin-enabled', visible);
         currentElement.classList.toggle('pin-disabled', !visible);
       }
+      this.pinKeyboardShown_ = visible;

[jdufault, 2016/07/08 21:04:09]

Can this just be a DOM query so we have less cached state? That way, it won't be
possible for the value to go out of sync.

The cached variable also needs to be updated when the PIN keyboard is hidden
from ie, a timeout or too many attempts.

[sammiequon, 2016/07/11 17:35:35]

Done.

     },
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
 
     /**
      * The user that this pod represents.
      * @type {!Object}
@@ skipping 17 matching lines @@
         (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING);
       return isMultiProfilesUI && !this.user_.isMultiProfilesAllowed;
     },
 
     /**
      * Gets main input element.
      * @type {(HTMLButtonElement|HTMLInputElement)}
      */
     get mainInput() {
       if (this.isAuthTypePassword) {
+        if (this.pinKeyboardShown_)
+          return this.pinKeyboard.inputElement;
         return this.passwordElement;
       } else if (this.isAuthTypeOnlineSignIn) {
         return this;
       } else if (this.isAuthTypeUserClick) {
         return this.passwordLabelElement;
       }
     },
 
     /**
      * Whether action box button is in active state.
@@ skipping 146 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.passwordElement.value)
+        if (!this.passwordElement.value && !this.pinKeyboard.inputElement.value)
           return false;
         Oobe.disableSigninUI();
         chrome.send('authenticateUser',
                     [this.user.username, this.passwordElement.value]);
       } else {
         console.error('Activating user pod with invalid authentication type: ' +
             this.authType);
       }
 
       return true;
@@ skipping 442 matching lines @@
       if (this.parentNode.disabled)
         return;
 
       if (!this.isActionBoxMenuActive) {
         if (this.isAuthTypeOnlineSignIn) {
           this.showSigninUI();
         } else if (this.isAuthTypeUserClick && this.userClickAuthAllowed_) {
           // Note that this.userClickAuthAllowed_ is set in mouse down event
           // handler.
           this.parentNode.setActivatedPod(this);
+        } else if (e.target == this.pinKeyboard.submitButton) {
+          this.parentNode.setActivatedPod(this);

[jdufault, 2016/07/08 21:04:09]

What's this for?

[sammiequon, 2016/07/11 17:35:35]

The error bubble looks for the current activated pod, if it can't find it it
puts the message on the edge of the pod-row. So this line simulates when the
enter button does for the password input, and sets the pod as activated.

[jdufault, 2016/07/11 18:19:53]

Please add a comment describing this.

         }
 
         if (this.multiProfilesPolicyApplied)
           this.userTypeBubbleElement.classList.add('bubble-shown');
 
         // Prevent default so that we don't trigger 'focus' event and
         // stop propagation so that the 'click' event does not bubble
         // up and accidentally closes the bubble tooltip.
         stopEventPropagation(e);
       }
@@ skipping 1576 matching lines @@
             else
               this.focusPod(this.firstElementChild);
 
             e.stopPropagation();
           }
           break;
         case 'Enter':
           if (this.focusedPod_) {
             var targetTag = e.target.tagName;
             if (e.target == this.focusedPod_.passwordElement ||
+                e.target == this.focusedPod_.pinKeyboard.inputElement ||
                 (targetTag != 'INPUT' &&
                  targetTag != 'BUTTON' &&
                  targetTag != 'A')) {
               this.setActivatedPod(this.focusedPod_, e);
               e.stopPropagation();
             }
           }
           break;
         case 'Escape':
           if (!this.alwaysFocusSinglePod)
@@ skipping 85 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });