Settings: Shake the overlay when the user clicks on the overlay shield.

chrome/browser/resources/options2/options_page.js

Index: chrome/browser/resources/options2/options_page.js
diff --git a/chrome/browser/resources/options2/options_page.js b/chrome/browser/resources/options2/options_page.js
index 72cddffa20f1208c431203c49a60aa4f01df33a7..e017c851eb22da32e536d881d50bb4b3352b593e 100644
--- a/chrome/browser/resources/options2/options_page.js
+++ b/chrome/browser/resources/options2/options_page.js
@@ -658,6 +658,30 @@ cr.define('options', function() {
     // Trigger the resize and scroll handlers manually to set the initial state.
     this.handleResize_(null);
     this.handleScroll_();
+
+    // Shake the dialog if the user clicks outside the dialog bounds.
+    $('overlay').onclick = this.shakeDialog_;
+  };
+
+  /**
+   * Sets and resets the shake class to perform the shake animation.
+   * @private
+   */
+  OptionsPage.shakeDialog_ = function(e) {
+    // Only shake if the non-page part of the overlay is clicked.
+    if (e.target != this)
+      return;
+
+    // Query the visible page.
+    var page = this.querySelector('.page:not([hidden])');
+
+    // Shake it.
+    page.classList.add('shake');
+
+    var SHAKE_DURATION_MS = 60 * 7;  // 7 iterations of 60ms.
+    window.setTimeout(function() {
+      page.classList.remove('shake');
+    }, SHAKE_DURATION_MS);

[csilv, 2012/02/07 18:57:33]

Instead of using a timeout, have you considered using an animation end function?
 something like:

page.classList.addEventListener("webkitAnimationEnd", function(){
    page.classList.remove('shake');
}, false);

[James Hawkins, 2012/02/07 20:15:36]

Done.

   };
 
   /**