Implement new overlay style for options pages.

chrome/browser/resources/shared/js/cr/ui/overlay.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.
 
 // This file exists to share common overlay behaviors.
 
 cr.define('cr.ui.overlay', function() {
 
   /**
    * Gets the top, visible overlay. It makes the assumption that if multiple
@@ skipping 33 matching lines @@
         cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
       }
     });
   }
 
   /**
    * Adds behavioral hooks for the given overlay.
    * @param {HTMLElement} overlay The .overlay.
    */
   function setupOverlay(overlay) {
-    /* Remove the 'shake' animation any time the overlay is hidden or shown.
+    // Close the overlay on clicking any of the pages' close buttons.
+    var closeButtons = overlay.querySelectorAll('.page .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('shake');
+      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 shake if the overlay was the target of the click.
+      // 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('shake');
+        overlayPage.classList.add('pulse');
     });
     overlay.addEventListener('webkitAnimationEnd', function(e) {
-      e.target.classList.remove('shake');
+      e.target.classList.remove('pulse');
     });
   }
 
   return {
     globalInitialization: globalInitialization,
     setupOverlay: setupOverlay,
   }
 });
 
 document.addEventListener('DOMContentLoaded',
                           cr.ui.overlay.globalInitialization);