Reland dialog transitions and fix dialog visible getter.

This fixes the history updating bug with overlays by checking the transparent state of the dialog's container when determining visibility. In order to properly update the overlay on opening the history is updated after a timeout.

BUG=118949
TEST=Open an overlay, the location url updates. Close the overlay and the location url updates again.

Review URL: http://codereview.chromium.org/9718012

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

2 files changed, 82 insertions, 30 deletions

diff --git a/chrome/browser/resources/options2/options_page.js b/chrome/browser/resources/options2/options_page.js
index 4ec21b9..2af423a 100644
--- a/chrome/browser/resources/options2/options_page.js
+++ b/chrome/browser/resources/options2/options_page.js
@@ -718,41 +718,57 @@ cr.define('options', function() {
     },
 
     /**
+     * Gets the container div for this page if it is an overlay.
+     * @type {HTMLElement}
+     */
+    get container() {
+      assert(this.isOverlay);
+      return this.pageDiv.parentNode;
+    },
+
+    /**
      * Gets page visibility state.
+     * @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;
+      }
       return !this.pageDiv.hidden;
     },
-
     /**
      * Sets page visibility.
+     * @type {boolean}
      */
     set visible(visible) {
       if ((this.visible && visible) || (!this.visible && !visible))
         return;
 
-      this.pageDiv.hidden = !visible;
-      this.setContainerVisibility_(visible);
-
-      OptionsPage.updateRootPageFreezeState();
-      OptionsPage.updateManagedBannerVisibility();
-
-      if (this.isOverlay && !visible)
-        OptionsPage.updateScrollPosition_();
+      // If using an overlay, the visibility of the dialog is toggled at the
+      // same time as the overlay to show the dialog's out transition. This
+      // is handled in setOverlayVisible.
+      if (this.isOverlay) {
+        this.setOverlayVisible_(visible);
+      } else {
+        this.pageDiv.hidden = !visible;
+        this.onVisibilityChanged_();
+      }
 
       cr.dispatchPropertyChange(this, 'visible', visible, !visible);
     },
 
     /**
-     * Shows or hides this page's container.
-     * @param {boolean} visible Whether the container should be visible or not.
+     * Shows or hides an overlay (including any visible dialog).
+     * @param {boolean} visible Whether the overlay should be visible or not.
      * @private
      */
-    setContainerVisibility_: function(visible) {
-      if (!this.isOverlay)
-        return;
-
-      var container = this.pageDiv.parentNode;
+    setOverlayVisible_: function(visible) {
+      assert(this.isOverlay);
+      var pageDiv = this.pageDiv;
+      var container = this.container;
 
       if (visible)
         uber.invokeMethodOnParent('beginInterceptingEvents');
@@ -763,27 +779,35 @@ cr.define('options', function() {
           // 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;
         }
         return;
       }
 
       if (visible) {
         container.hidden = false;
-        if (document.documentElement.classList.contains('loading')) {
-          container.classList.remove('transparent');
-        } else {
-          // Separate animating changes from the removal of display:none.
-          window.setTimeout(function() {
-            container.classList.remove('transparent');
-          });
-        }
+        pageDiv.hidden = false;
+        // 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_();
       } else {
         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.propertyName != 'opacity')
+          if (e.target != e.currentTarget || e.propertyName != 'opacity')
             return;
           container.removeEventListener('webkitTransitionEnd', f);
-          self.fadeCompleted_(container);
+          self.fadeCompleted_();
         });
         container.classList.add('transparent');
       }
@@ -791,18 +815,32 @@ cr.define('options', function() {
 
     /**
      * Called when a container opacity transition finishes.
-     * @param {HTMLElement} container The container element.
      * @private
      */
-    fadeCompleted_: function(container) {
-      if (container.classList.contains('transparent')) {
-        container.hidden = true;
+    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');
       }
     },
 
     /**
+     * Called when a page is shown or hidden to update the root options page
+     * based on this page's visibility.
+     * @private
+     */
+    onVisibilityChanged_: function() {
+      OptionsPage.updateRootPageFreezeState();
+      OptionsPage.updateManagedBannerVisibility();
+
+      if (this.isOverlay && !this.visible)
+        OptionsPage.updateScrollPosition_();
+    },
+
+    /**
      * The nesting level of this page.
      * @type {number} The nesting level of this page (0 for top-level page)
      */
diff --git a/chrome/browser/resources/shared/css/overlay.css b/chrome/browser/resources/shared/css/overlay.css
index e2c5ed4..b8afe1b 100644
--- a/chrome/browser/resources/shared/css/overlay.css
+++ b/chrome/browser/resources/shared/css/overlay.css
@@ -19,10 +19,18 @@
   top: 0;
 }
 
+/* Used to slide in the overlay. */
+.overlay.transparent .page {
+  /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
+   * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
+  -webkit-transform: scale(0.99) translateY(-20px);
+}
+
 /* The foreground dialog. */
 .overlay .page {
   -webkit-border-radius: 3px;
   -webkit-box-orient: vertical;
+  -webkit-transition: 200ms -webkit-transform;
   background: white;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
   color: #333;
@@ -32,6 +40,12 @@
   position: relative;
 }
 
+/* If the options page is loading don't do the transition. */
+.loading .overlay,
+.loading .overlay .page {
+  -webkit-transition-duration: 0 !important;
+}
+
 /* keyframes used to pulse the overlay */
 @-webkit-keyframes pulse {
  0% {