Close overlays when the user hits ESC key.

BUG=chromium-os:7024
TEST=manually closing overlays by hitting ESC key.

Review URL: http://codereview.chromium.org/4076004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@63861 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 18 insertions, 0 deletions

diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 4afad5b..efc9e1c 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -68,6 +68,9 @@ cr.define('options', function() {
     }
   };
 
+  /**
+   * Clears overlays (i.e. hide all overlays).
+   */
   OptionsPage.clearOverlays = function() {
      for (var name in OptionsPage.registeredOverlayPages_) {
        var page = OptionsPage.registeredOverlayPages_[name];
@@ -76,6 +79,17 @@ cr.define('options', function() {
   };
 
   /**
+   * Clears overlays if the key event is ESC.
+   * @param {Event} e Key event.
+   * @private
+   */
+  OptionsPage.clearOverlaysOnEsc_ = function(e) {
+    if (e.keyCode == 27) { // Esc
+      OptionsPage.clearOverlays();
+    }
+  };
+
+  /**
   * Shows the tab contents for the given navigation tab.
   * @param {!Element} tab The tab that the user clicked.
   */
@@ -208,6 +222,8 @@ cr.define('options', function() {
         if (this.isOverlay) {
           var overlay = $('overlay');
           overlay.classList.remove('hidden');
+          document.addEventListener('keydown',
+                                    OptionsPage.clearOverlaysOnEsc_);
         } else {
           var banner = $('managed-prefs-banner');
           banner.style.display = this.managed ? 'block' : 'none';
@@ -225,6 +241,8 @@ cr.define('options', function() {
         if (this.isOverlay) {
           var overlay = $('overlay');
           overlay.classList.add('hidden');
+          document.removeEventListener('keydown',
+                                       OptionsPage.clearOverlaysOnEsc_);
         }
         this.pageDiv.style.display = 'none';
         if (this.tab) {