sync

chrome/browser/resources/options/options_page.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   /** @const */ var FocusOutlineManager = cr.ui.FocusOutlineManager;
 
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
@@ skipping 338 matching lines @@
 
     this.restoreLastFocusedElement_();
     if (!this.isOverlayVisible_())
       $('searchBox').removeAttribute('aria-hidden');
   };
 
   /**
    * 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();
       this.restoreLastFocusedElement_();
     } else {
       this.closeOverlay();
     }
   };
 
   /**
@@ skipping 276 matching lines @@
    */
   OptionsPage.initialize = function() {
     chrome.send('coreOptionsInitialize');
     uber.onContentFrameLoaded();
     FocusOutlineManager.forDocument(document);
     document.addEventListener('scroll', this.handleScroll_.bind(this));
 
     // 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.
    * @param {number} y The client Y to check.
    * @return {boolean} True if the point falls within the element's bounds.
    * @private
    */
   OptionsPage.elementContainsPoint_ = function(e, x, y) {
     var clientRect = e.getBoundingClientRect();
     return x >= clientRect.left && x <= clientRect.right &&
@@ skipping 124 matching lines @@
     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;
+      if (this.isOverlay) {
+        if (!this.pageDiv.open || this.pageDiv.classList.contains('closing'))
+          return false;
       }
       if (this.pageDiv.hidden)
         return false;
       return this.pageDiv.page == this;
     },
 
     /**
      * Sets page visibility.
      * @type {boolean}
      */
@@ skipping 16 matching lines @@
     },
 
     /**
      * Shows or hides an overlay (including any visible dialog).
      * @param {boolean} visible Whether the overlay should be visible or not.
      * @private
      */
     setOverlayVisible_: function(visible) {
       assert(this.isOverlay);
       var pageDiv = this.pageDiv;
-      var container = this.container;
 
       if (visible) {
         uber.invokeMethodOnParent('beginInterceptingEvents');
         this.pageDiv.removeAttribute('aria-hidden');
         if (this.parentPage)
           this.parentPage.pageDiv.setAttribute('aria-hidden', true);
       } else {
         if (this.parentPage)
           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');
+      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 = 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;
+        // 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');
     },
 
     /**
      * 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();
 
@@ skipping 47 matching lines @@
     canShowPage: function() {
       return true;
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 });