sync

chrome/browser/resources/options/options_page.js

Index: chrome/browser/resources/options/options_page.js
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 0e827fdc4addfcd5ae7e2911c1a7a74bf6680568..2b1b1b207c58fb4729febaa26a795140cee953b4 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -356,9 +356,13 @@ cr.define('options', function() {
    * Cancels (closes) the overlay, due to the user pressing <Esc>.
    */
   OptionsPage.cancelOverlay = function() {
+    var overlay = this.getVisibleOverlay_();
+    if (!overlay)
+      return;
+
     // Blur the active element to ensure any changed pref value is saved.
     document.activeElement.blur();
-    var overlay = this.getVisibleOverlay_();
+
     // Let the overlay handle the <Esc> if it wants to.
     if (overlay.handleCancel) {
       overlay.handleCancel();
@@ -655,19 +659,39 @@ cr.define('options', function() {
     // Trigger the scroll handler manually to set the initial state.
     this.handleScroll_();
 
-    // Shake the dialog if the user clicks outside the dialog bounds.
-    var containers = [$('overlay-container-1'), $('overlay-container-2')];
-    for (var i = 0; i < containers.length; i++) {
-      var overlay = containers[i];
-      cr.ui.overlay.setupOverlay(overlay);
-      overlay.addEventListener('cancelOverlay',
-                               OptionsPage.cancelOverlay.bind(OptionsPage));
+    var dialogs = document.querySelectorAll('.overlay-container .page');
+    for (var i = 0; i < dialogs.length; i++) {
+      var dialog = dialogs[i];
+      cr.ui.overlay.setupOverlay(dialog);
+      dialog.addEventListener('cancelOverlay',
+                              OptionsPage.cancelOverlay.bind(OptionsPage));
+      dialog.addEventListener('webkitAnimationEnd',
+                              OptionsPage.handleDialogAnimationEnd_);
     }
 
     cr.ui.overlay.globalInitialization();
   };
 
   /**
+   * Called when a webkitAnimationEnd event occurs on a dialog. If it was a
+   * fading away animation that completed, closes the dialog.
+   */
+  OptionsPage.handleDialogAnimationEnd_ = function(e) {
+    if (e.target != e.currentTarget)
+      return;
+    var dialog = e.target;
+    dialog.classList.remove('opening');
+    dialog.classList.remove('pulse');
+    if (dialog.classList.contains('closing')) {
+      dialog.close();
+      // TODO(falken): It's probably better move these to a close event handler,
+      // once <dialog> implements it.
+      dialog.classList.remove('closing');
+      dialog.page.fadeCompleted_();
+    }
+  }
+
+  /**
    * Does a bounds check for the element on the given x, y client coordinates.
    * @param {Element} e The DOM element.
    * @param {number} x The client X to check.
@@ -812,11 +836,9 @@ cr.define('options', function() {
      * @type {boolean}
      */
     get visible() {
-      // If this is an overlay dialog it is no longer considered visible while
-      // the overlay is fading out. See http://crbug.com/118629.
-      if (this.isOverlay &&
-          this.container.classList.contains('transparent')) {
-        return false;
+      if (this.isOverlay) {
+        if (!this.pageDiv.open || this.pageDiv.classList.contains('closing'))
+          return false;
       }
       if (this.pageDiv.hidden)
         return false;
@@ -853,7 +875,6 @@ cr.define('options', function() {
     setOverlayVisible_: function(visible) {
       assert(this.isOverlay);
       var pageDiv = this.pageDiv;
-      var container = this.container;
 
       if (visible) {
         uber.invokeMethodOnParent('beginInterceptingEvents');
@@ -865,63 +886,42 @@ cr.define('options', function() {
           this.parentPage.pageDiv.removeAttribute('aria-hidden');
       }
 
-      if (container.hidden != visible) {
-        if (visible) {
-          // If the container is set hidden and then immediately set visible
-          // again, the fadeCompleted_ callback would cause it to be erroneously
-          // hidden again. Removing the transparent tag avoids that.
-          container.classList.remove('transparent');
-
-          // Hide all dialogs in this container since a different one may have
-          // been previously visible before fading out.
-          var pages = container.querySelectorAll('.page');
-          for (var i = 0; i < pages.length; i++)
-            pages[i].hidden = true;
-          // Show the new dialog.
-          pageDiv.hidden = false;
-          pageDiv.page = this;
+      if (visible) {
+        // If the dialog is set invisible and then immediately set visible
+        // again, the webkitAnimationEnd callback would cause it to be
+        // erroneously closed again. Removing the closing tag avoids that.
+        pageDiv.classList.remove('closing');
+
+        // Hide all dialogs in this container since a different one may have
+        // been previously visible before fading out.
+        var pages = this.container.querySelectorAll('.page');
+        for (var i = 0; i < pages.length; i++) {
+          if (pages[i].open)
+            pages[i].close();
         }
-        return;
-      }
 
-      if (visible) {
-        container.hidden = false;
-        pageDiv.hidden = false;
+        pageDiv.showModal();
         pageDiv.page = this;
-        // NOTE: This is a hacky way to force the container to layout which
-        // will allow us to trigger the webkit transition.
-        container.scrollTop;
-        container.classList.remove('transparent');
         this.onVisibilityChanged_();
+        cr.ui.overlay.center(pageDiv);
+        pageDiv.classList.add('opening');
       } else {
         // Kick change events for text fields.
         if (pageDiv.contains(document.activeElement))
           document.activeElement.blur();
-        var self = this;
-        // TODO: Use an event delegate to avoid having to subscribe and
-        // unsubscribe for webkitTransitionEnd events.
-        container.addEventListener('webkitTransitionEnd', function f(e) {
-          if (e.target != e.currentTarget || e.propertyName != 'opacity')
-            return;
-          container.removeEventListener('webkitTransitionEnd', f);
-          self.fadeCompleted_();
-        });
-        container.classList.add('transparent');
+
+        pageDiv.classList.add('closing');
       }
     },
 
     /**
-     * Called when a container opacity transition finishes.
+     * Called when a dialog closing animation finishes.
      * @private
      */
     fadeCompleted_: function() {
-      if (this.container.classList.contains('transparent')) {
-        this.pageDiv.hidden = true;
-        this.container.hidden = true;
-        this.onVisibilityChanged_();
-        if (this.nestingLevel == 1)
-          uber.invokeMethodOnParent('stopInterceptingEvents');
-      }
+      this.onVisibilityChanged_();
+      if (this.nestingLevel == 1)
+        uber.invokeMethodOnParent('stopInterceptingEvents');
     },
 
     /**