Pin keyboard works with virtual keyboard.

ui/login/account_picker/screen_account_picker.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 Account picker screen implementation.
  */
 
 login.createScreen('AccountPickerScreen', 'account-picker', function() {
   /**
@@ skipping 162 matching lines @@
             [activatedPod.user.emailAddress]);
         activatedPod.showSigninUI();
       } else {
         if (loginAttempts == 1) {
           chrome.send('firstIncorrectPasswordAttempt',
               [activatedPod.user.emailAddress]);
         }
         // We want bubble's arrow to point to the first letter of input.
         /** @const */ var BUBBLE_OFFSET = 7;
         /** @const */ var BUBBLE_PADDING = 4;
-        $('bubble').showContentForElement(activatedPod.mainInput,
-                                          cr.ui.Bubble.Attachment.BOTTOM,
-                                          error,
-                                          BUBBLE_OFFSET, BUBBLE_PADDING);
+
+        // We want the bubble to point to where the input is after it is done
+        // tranisitioning.
+        var showBottomCallback = function() {
+          activatedPod.removeEventListener("webkitTransitionEnd",
+              showBottomCallback);
+          $('bubble').showContentForElement(activatedPod.mainInput,
+                                            cr.ui.Bubble.Attachment.BOTTOM,
+                                            error,
+                                            BUBBLE_OFFSET, BUBBLE_PADDING);
+        };
+        activatedPod.addEventListener("webkitTransitionEnd", showBottomCallback,
+                                      false);
+        // Guard timer set to animation duration + 20ms.
+        ensureTransitionEndEvent(activatedPod, 200);

[jdufault, 2016/08/25 18:35:09]

Remove 200, ensureTransitionEndEvent(activatedPod) will lookup the transition by
with +50ms padding by default.

[sammiequon, 2016/08/25 23:29:40]

Done.

+
         // Move error bubble up if it overlaps the shelf.
         var maxHeight =
             cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping($('bubble'));
         if (maxHeight < $('bubble').offsetHeight) {
-          $('bubble').showContentForElement(activatedPod.mainInput,
-                                            cr.ui.Bubble.Attachment.TOP,
-                                            error,
-                                            BUBBLE_OFFSET, BUBBLE_PADDING);
+          var showTopCallback = function() {
+            activatedPod.removeEventListener("webkitTransitionEnd",
+                showTopCallback);
+            $('bubble').showContentForElement(activatedPod.mainInput,
+                                              cr.ui.Bubble.Attachment.TOP,
+                                              error,
+                                              BUBBLE_OFFSET, BUBBLE_PADDING);
+          };
+          activatedPod.addEventListener("webkitTransitionEnd", showTopCallback,
+                                        false);

[jdufault, 2016/08/25 18:35:09]

Do you need the false parameter?

[sammiequon, 2016/08/25 23:29:40]

According to the web, some old browsers still need this useCapture to be set
explicitly.

[jdufault, 2016/08/26 01:12:30]

This code will only ever run on Chrome (and possibly also Chrome iOS).

[sammiequon, 2016/08/29 22:00:21]

Done.

+          // Guard timer set to animation duration + 20ms.
+          ensureTransitionEndEvent(activatedPod, 200);

[jdufault, 2016/08/25 18:35:08]

Ditto

[sammiequon, 2016/08/25 23:29:40]

Done.

         }
       }
     },
 
     /**
      * Loads the PIN keyboard if any of the users can login with a PIN.
      * @param {array} users Array of user instances.
      */
     loadPinKeyboardIfNeeded_: function(users) {
       for (var i = 0; i < users.length; ++i) {
@@ skipping 143 matching lines @@
 
     /**
      * Sets the state of touch view mode.
      * @param {boolean} isTouchViewEnabled true if the mode is on.
      */
     setTouchViewState: function(isTouchViewEnabled) {
       $('pod-row').setTouchViewState(isTouchViewEnabled);
     },
 
     /**
-     * Hides the PIN keyboard if it's active.
+     * Removes the PIN keyboard so the user can no longer enter a PIN.
      * @param {!user} user The user who can no longer enter a PIN.
      */
     disablePinKeyboardForUser: function(user) {
-      $('pod-row').setPinVisibility(user, false);
+      $('pod-row').removePinKeyboard(user);
     },
 
     /**
      * Updates the display name shown on a public session pod.
      * @param {string} userID The user ID of the public session
      * @param {string} displayName The new display name
      */
     setPublicSessionDisplayName: function(userID, displayName) {
       $('pod-row').setPublicSessionDisplayName(userID, displayName);
     },
@@ skipping 21 matching lines @@
      * @param {string} userID The user ID of the public session
      * @param {string} locale The locale to which this list of keyboard layouts
      *     applies
      * @param {!Object} list List of available keyboard layouts
      */
     setPublicSessionKeyboardLayouts: function(userID, locale, list) {
       $('pod-row').setPublicSessionKeyboardLayouts(userID, locale, list);
     }
   };
 });