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..2f7b4b579e1370f42c095852e9f651270ff30427 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 overlay page.
+    var page = this.querySelector('.page:not([hidden])');
+
+    // Shake it.
+    page.classList.add('shake');
+
+    // Bake it.
+    page.addEventListener('webkitAnimationEnd', function() {
+      page.classList.remove('shake');
+    });
   };
 
   /**