Fix input autofocus in smart card SAML PIN dialog

This fixes the regression that the input field wasn't auto-focused when
the smart card PIN dialog (<security-token-pin>) is shown during the
SAML login.

The regression was introduced in https://crrev.com/c/1968989, which
erroneously changed the focus to be set synchronously. This didn't work,
because in practice this happens too early, while the dialog still has
the "hidden" attribute - because Polymer doesn't guarantee the order of
updates triggered by the changes in |pinDialogParameters_|.

The fix is to schedule the focus assignment to be done asynchronously
(soon), so that this happens after Polymer updates all properties
synchronously.

Bug: TODO
Test: enroll Chromebook under domain with smart card settings, start SAML login via the smart card, wait until the PIN dialog appears, verify that the PIN input field is auto-focused
Change-Id: I2f1b4961867f735ac00290cd0cb62cb10fc3d33d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2047167
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#743168}

chrome/browser/resources/chromeos/login/screen_gaia_signin.js

@@ -1483,8 +1483,8 @@ Polymer({
   /**
    * Observer that is called when the |pinDialogParameters_| property gets
    * changed.
-   * @param {number} newValue
-   * @param {number} oldValue
+   * @param {OobeTypes.SecurityTokenPinDialogParameter} newValue
+   * @param {OobeTypes.SecurityTokenPinDialogParameter} oldValue
    * @private
    */
   onPinDialogParametersChanged_(newValue, oldValue) {
@@ -1493,8 +1493,17 @@ Polymer({
       // initialization.
       return;
     }
-    if (oldValue === null && newValue !== null)
-      chrome.send('securityTokenPinDialogShownForTest');
+    if (oldValue === null && newValue !== null) {
+      // Asynchronously set the focus, so that this happens after Polymer
+      // recalculates the visibility of |pinDialog|.
+      // Also notify the C++ test after this happens, in order to avoid
+      // flakiness (so that the test doesn't try to simulate the input before
+      // the caret is positioned).
+      requestAnimationFrame(() => {
+        this.$.pinDialog.focus();
+        chrome.send('securityTokenPinDialogShownForTest');
+      });
+    }
     if ((oldValue !== null && newValue === null) ||
         (oldValue !== null && newValue !== null &&
          !this.pinDialogResultReported_)) {

chrome/browser/resources/chromeos/login/security_token_pin.js

@@ -86,6 +86,13 @@ Polymer({
     },
   },
 
+  focus() {
+    // Note: setting the focus synchronously, to avoid flakiness in tests due to
+    // racing between the asynchronous caret positioning and the PIN characters
+    // input.
+    this.$.pinKeyboard.focusInputSynchronously();
+  },
+
   /**
    * Returns the i18n string ID for the current error label.
    * @param {OobeTypes.SecurityTokenPinDialogParameters} parameters
@@ -166,10 +173,6 @@ Polymer({
     this.processingCompletion_ = false;
     this.hasValue_ = false;
     this.userEdited_ = false;
-    // Note: setting the focus synchronously, to avoid flakiness in tests due to
-    // racing between the asynchronous caret positioning and the PIN characters
-    // input.
-    this.$.pinKeyboard.focusInputSynchronously();
   },
 
   /**