Reduce failsafe time for animation events. This makes the lock-time more consistent.

This animation delay compensates for the amount of time it takes the native
animation to run so the user pods are not shown while the native windows are
flying out of the screen. This approach has a few problems, however:

1. If the WebUI takes a long time to load (such as on slow devices), then the
   CSS animation here will still be running even after the native animation
   has completed.
2. If the screen is locked via some cancellable lock mechanism, such as the
   power button, then the native animation has already completed and the wait is
   unnecessary.

A better approach is to intead have the lock screen emit an event that notifies
the webui that has finished the native animation. Doing so is tricky, however,
as there are various states that the webui and lock screen can be in.

BUG=452599

Review URL: https://codereview.chromium.org/1811113003

Cr-Commit-Position: refs/heads/master@{#383428}

2 files changed, 19 insertions, 8 deletions

diff --git a/ui/login/account_picker/user_pod_row.js b/ui/login/account_picker/user_pod_row.js
index c36496d..ab16792 100644
--- a/ui/login/account_picker/user_pod_row.js
+++ b/ui/login/account_picker/user_pod_row.js
@@ -3243,14 +3243,18 @@ cr.define('login', function() {
      * Called right after the pod row is shown.
      */
     handleAfterShow: function() {
+      var focusedPod = this.focusedPod_;
+
       // Without timeout changes in pods positions will be animated even though
       // it happened when 'flying-pods' class was disabled.
       setTimeout(function() {
         Oobe.getInstance().toggleClass('flying-pods', true);
+        if (focusedPod)
+          ensureTransitionEndEvent(focusedPod);
       }, 0);
+
       // Force input focus for user pod on show and once transition ends.
-      if (this.focusedPod_) {
-        var focusedPod = this.focusedPod_;
+      if (focusedPod) {
         var screen = this.parentNode;
         var self = this;
         focusedPod.addEventListener('webkitTransitionEnd', function f(e) {
@@ -3259,8 +3263,6 @@ cr.define('login', function() {
           // Notify screen that it is ready.
           screen.onShow();
         });
-        // Guard timer for 1 second -- it would conver all possible animations.
-        ensureTransitionEndEvent(focusedPod, 1000);
       }
     },
 
diff --git a/ui/webui/resources/js/util.js b/ui/webui/resources/js/util.js
index 2707dbc..82a4e50 100644
--- a/ui/webui/resources/js/util.js
+++ b/ui/webui/resources/js/util.js
@@ -374,10 +374,19 @@ function createElementWithClassName(type, className) {
  * or when no paint happens during the animation). This function sets up
  * a timer and emulate the event if it is not fired when the timer expires.
  * @param {!HTMLElement} el The element to watch for webkitTransitionEnd.
- * @param {number} timeOut The maximum wait time in milliseconds for the
- *     webkitTransitionEnd to happen.
+ * @param {number=} opt_timeOut The maximum wait time in milliseconds for the
+ *     webkitTransitionEnd to happen. If not specified, it is fetched from |el|
+ *     using the transitionDuration style value.
  */
-function ensureTransitionEndEvent(el, timeOut) {
+function ensureTransitionEndEvent(el, opt_timeOut) {
+  if (opt_timeOut === undefined) {
+    var style = getComputedStyle(el);
+    opt_timeOut = parseFloat(style.transitionDuration) * 1000;
+
+    // Give an additional 50ms buffer for the animation to complete.
+    opt_timeOut += 50;
+  }
+
   var fired = false;
   el.addEventListener('webkitTransitionEnd', function f(e) {
     el.removeEventListener('webkitTransitionEnd', f);
@@ -386,7 +395,7 @@ function ensureTransitionEndEvent(el, timeOut) {
   window.setTimeout(function() {
     if (!fired)
       cr.dispatchSimpleEvent(el, 'webkitTransitionEnd', true);
-  }, timeOut);
+  }, opt_timeOut);
 }
 
 /**