From aa8ed023a411ac73a2f6e641c902e2831bd1a7fe Mon Sep 17 00:00:00 2001 From: jdufault Date: Fri, 25 Mar 2016 18:05:57 -0700 Subject: 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} --- ui/login/account_picker/user_pod_row.js | 10 ++++++---- ui/webui/resources/js/util.js | 17 +++++++++++++---- 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); } /** -- cgit v1.1