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

chrome/browser/resources/options2/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() {
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
   /**
    * Base class for options page.
@@ skipping 640 matching lines @@
       document.addEventListener('keydown',
                                 this.keyDownEventHandler_.bind(this));
 
       document.addEventListener('focus', this.manageFocusChange_.bind(this),
                                 true);
     }
 
     // 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.

+  };
+
+  /**
    * 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 427 matching lines @@
     canShowPage: function() {
       return true;
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 });