sync

ui/webui/resources/js/cr/ui/dialog_overlay.js

Index: ui/webui/resources/js/cr/ui/dialog_overlay.js
diff --git a/ui/webui/resources/js/cr/ui/overlay.js b/ui/webui/resources/js/cr/ui/dialog_overlay.js
similarity index 74%
copy from ui/webui/resources/js/cr/ui/overlay.js
copy to ui/webui/resources/js/cr/ui/dialog_overlay.js
index 5c0acb2d3dd826d52e3f76e1a3de7b7127671043..58629833ab39b1e39f8f8f2cde339d78eeb16ed8 100644
--- a/ui/webui/resources/js/cr/ui/overlay.js
+++ b/ui/webui/resources/js/cr/ui/dialog_overlay.js
@@ -13,7 +13,7 @@ cr.define('cr.ui.overlay', function() {
    * @return {HTMLElement} The overlay.
    */
   function getTopOverlay() {
-    var overlays = document.querySelectorAll('.overlay:not([hidden])');
+    var overlays = document.querySelectorAll('.overlay-container .page[open]');
     return overlays[overlays.length - 1];
   }
 
@@ -21,13 +21,13 @@ cr.define('cr.ui.overlay', function() {
    * Returns a visible default button of the overlay, if it has one. If the
    * overlay has more than one, the first one will be returned.
    *
-   * @param {HTMLElement} overlay The .overlay.
+   * @param {HTMLElement} overlay The overlay.
    * @return {HTMLElement} The default button.
    */
   function getDefaultButton(overlay) {
     function isHidden(node) { return node.hidden; }
     var defaultButtons =
-        overlay.querySelectorAll('.page .button-strip > .default-button');
+        overlay.querySelectorAll('.button-strip > .default-button');
     for (var i = 0; i < defaultButtons.length; i++) {
       if (!findAncestor(defaultButtons[i], isHidden))
         return defaultButtons[i];
@@ -49,6 +49,7 @@ cr.define('cr.ui.overlay', function() {
           return;
 
         // Close the overlay on escape.
+        // TODO(falken): <dialog> should do this automatically.
         if (e.keyCode == 27)  // Escape
           cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
 
@@ -76,52 +77,49 @@ cr.define('cr.ui.overlay', function() {
   }
 
   /**
-   * Sets the max-height of all pages in all overlays, based on the window
+   * Vertically centers an overlay.
+   * @param {HTMLElement} overlay The overlay.
+   */
+  function center(overlay) {
+    var topValue =
+        (window.innerHeight - overlay.getBoundingClientRect().height) / 2;
+    overlay.style.top = topValue + 'px';
+  }
+
+  /**
+   * Sets the max-height of all overlays, based on the window
    * height.
    */
   function setMaxHeightAllPages() {
-    var pages = document.querySelectorAll('.overlay .page');
+    var pages = document.querySelectorAll('.overlay-container .page');
 
     var maxHeight = Math.min(0.9 * window.innerHeight, 640) + 'px';
-    for (var i = 0; i < pages.length; i++)
+    for (var i = 0; i < pages.length; i++) {
       pages[i].style.maxHeight = maxHeight;
+      if (pages[i].open)
+        center(pages[i]);
+    }
   }
 
   /**
    * Adds behavioral hooks for the given overlay.
-   * @param {HTMLElement} overlay The .overlay.
+   * @param {HTMLElement} overlay The overlay.
    */
   function setupOverlay(overlay) {
-    // Close the overlay on clicking any of the pages' close buttons.
-    var closeButtons = overlay.querySelectorAll('.page > .close-button');
+    // Close the overlay on clicking any of the close buttons.
+    var closeButtons = overlay.querySelectorAll('.close-button');
     for (var i = 0; i < closeButtons.length; i++) {
       closeButtons[i].addEventListener('click', function(e) {
         cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
       });
     }
 
-    // Remove the 'pulse' animation any time the overlay is hidden or shown.
-    overlay.__defineSetter__('hidden', function(value) {
-      this.classList.remove('pulse');
-      if (value)
-        this.setAttribute('hidden', true);
-      else
-        this.removeAttribute('hidden');
-    });
-    overlay.__defineGetter__('hidden', function() {
-      return this.hasAttribute('hidden');
-    });
-
     // Shake when the user clicks away.
     overlay.addEventListener('click', function(e) {
       // Only pulse if the overlay was the target of the click.
       if (this != e.target)
         return;
-
-      // This may be null while the overlay is closing.
-      var overlayPage = this.querySelector('.page:not([hidden])');
-      if (overlayPage)
-        overlayPage.classList.add('pulse');
+      overlay.classList.add('pulse');
     });
     overlay.addEventListener('webkitAnimationEnd', function(e) {
       e.target.classList.remove('pulse');
@@ -129,6 +127,7 @@ cr.define('cr.ui.overlay', function() {
   }
 
   return {
+    center: center,
     globalInitialization: globalInitialization,
     setupOverlay: setupOverlay,
   };