Merge 216600 "Fix enable kiosk screen button not clickable."

> Fix enable kiosk screen button not clickable.
>
> - webkitTransitionEnd does not always fire and could leave a ghost screen
>   overlapping the current one causing the current screen not clickable.
>   Add a timer to emulate the event in screen transition to ensure the handler
>   is called.
> - Fix a typo on kiosk enable screen so that escape key works
>
> BUG=268431
>
> Review URL: https://chromiumcodereview.appspot.com/22577006

TBR=xiyuan@chromium.org

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

git-svn-id: svn://svn.chromium.org/chrome/branches/1547/src@218536 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 34 insertions, 1 deletions

diff --git a/chrome/browser/resources/chromeos/login/display_manager.js b/chrome/browser/resources/chromeos/login/display_manager.js
index eb87f87..3088f68 100644
--- a/chrome/browser/resources/chromeos/login/display_manager.js
+++ b/chrome/browser/resources/chromeos/login/display_manager.js
@@ -57,6 +57,36 @@ cr.define('cr.ui.login', function() {
   var Bubble = cr.ui.Bubble;
 
   /**
+   * Maximum time in milliseconds to wait for step transition to finish.
+   * The value is used as the duration for ensureTransitionEndEvent below.
+   * It needs to be inline with the step screen transition duration time
+   * defined in css file. The current value in css is 200ms. To avoid emulated
+   * webkitTransitionEnd fired before real one, 250ms is used.
+   * @const
+   */
+  var MAX_SCREEN_TRANSITION_DURATION = 250;
+
+  /**
+   * webkitTransitionEnd does not always fire (e.g. when animation is aborted
+   * 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.
+   */
+  function ensureTransitionEndEvent(el, timeOut) {
+    var fired = false;
+    el.addEventListener('webkitTransitionEnd', function f(e) {
+      el.removeEventListener('webkitTransitionEnd', f);
+      fired = true;
+    });
+    window.setTimeout(function() {
+      if (!fired)
+        cr.dispatchSimpleEvent(el, 'webkitTransitionEnd');
+    }, timeOut);
+  }
+
+  /**
    * Groups of screens (screen IDs) that should have the same dimensions.
    * @type Array.<Array.<string>>
    * @const
@@ -310,6 +340,7 @@ cr.define('cr.ui.login', function() {
             if (defaultControl)
               defaultControl.focus();
           });
+          ensureTransitionEndEvent(oldStep, MAX_SCREEN_TRANSITION_DURATION);
         } else {
           oldStep.classList.add('hidden');
           if (defaultControl)
@@ -330,6 +361,8 @@ cr.define('cr.ui.login', function() {
                 if (defaultControl)
                   defaultControl.focus();
               });
+          ensureTransitionEndEvent(innerContainer,
+                                   MAX_SCREEN_TRANSITION_DURATION);
         } else {
           if (defaultControl)
             defaultControl.focus();
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_enable_kiosk.js b/chrome/browser/resources/chromeos/login/oobe_screen_enable_kiosk.js
index 4fcf2df..7704978 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_enable_kiosk.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_enable_kiosk.js
@@ -81,7 +81,7 @@ login.createScreen('KioskEnableScreen', 'kiosk-enable', function() {
      * Cancels the reset and drops the user back to the login screen.
      */
     cancel: function() {
-      chrome.send('kioskOnCancel');
+      chrome.send('kioskOnClose');
     },
 
     /**