Improve way the set passphrase dialog is closed.

Right now resetting the set passphrase dialog fields leads to a flicker and/or
leaves data not cleared. This gives a better user experience by delaying
clearing the data after the dialog is closed and properly handling the other
close/save scenarios.

R=jhawkins@chromium.org, akuegel@chromium.org
BUG=171370


Review URL: https://chromiumcodereview.appspot.com/12430003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@186687 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 26 insertions, 6 deletions

diff --git a/chrome/browser/resources/options/managed_user_set_passphrase.js b/chrome/browser/resources/options/managed_user_set_passphrase.js
index e602147..930cfcc 100644
--- a/chrome/browser/resources/options/managed_user_set_passphrase.js
+++ b/chrome/browser/resources/options/managed_user_set_passphrase.js
@@ -23,9 +23,20 @@ cr.define('options', function() {
   cr.addSingletonGetter(ManagedUserSetPassphraseOverlay);
 
   /** Closes the page and resets the passphrase fields */
-  var closePage = function() {
-    $('managed-user-passphrase').value = '';
-    $('passphrase-confirm').value = '';
+  var closePage = function(container) {
+    // Reseting the fields directly would lead to a flicker, so listen to
+    // webkitTransitionEnd to clear them after that. Similar to how it is done
+    // in setOverlayVisible_ in options_page.js.
+    container.addEventListener('webkitTransitionEnd', function f(e) {
+      if (e.target != e.currentTarget || e.propertyName != 'opacity')
+        return;
+      container.removeEventListener('webkitTransitionEnd', f);
+
+      // Reset the fields.
+      $('managed-user-passphrase').value = '';
+      $('passphrase-confirm').value = '';
+      $('passphrase-mismatch').hidden = true;
+    });
     OptionsPage.closeOverlay();
   };
 
@@ -38,7 +49,7 @@ cr.define('options', function() {
       $('managed-user-passphrase').oninput = this.updateDisplay_;
       $('passphrase-confirm').oninput = this.updateDisplay_;
 
-      $('save-passphrase').onclick = this.setPassphrase_;
+      $('save-passphrase').onclick = this.setPassphrase_.bind(this);
 
       $('managed-user-passphrase').onkeypress = function(event) {
         // Check if the user pressed enter and advance to the
@@ -59,7 +70,9 @@ cr.define('options', function() {
           self.setPassphrase_(event);
       };
 
-      $('cancel-passphrase').onclick = closePage;
+      $('cancel-passphrase').onclick = function(event) {
+        closePage(self.container);
+      };
     },
 
     /** Updates the display according to the validity of the user input. */
@@ -79,7 +92,7 @@ cr.define('options', function() {
      */
     setPassphrase_: function(event) {
       chrome.send('setPassphrase', [$('managed-user-passphrase').value]);
-      closePage();
+      closePage(this.container);
     },
 
     /** @override */
@@ -91,6 +104,13 @@ cr.define('options', function() {
     /** @override */
     didShowPage: function() {
       $('managed-user-passphrase').focus();
+    },
+
+    /**
+     * Make sure that we reset the fields on cancel.
+     */
+    handleCancel: function() {
+      closePage(this.container);
     }
   };