[Wallpaper Picker] Pressing <Escape> closes the active overlay

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js

 // Copyright (c) 2013 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.
 
 /**
  * WallpaperManager constructor.
  *
  * WallpaperManager objects encapsulate the functionality of the wallpaper
  * manager extension.
  *
@@ skipping 256 matching lines @@
       window.addEventListener('online', function() {
         self.downloadedListMap_ = null;
         $('wallpaper-grid').classList.remove('image-picker-offline');
       });
     }
     $('window-close-button').addEventListener('click', function() {
       window.close();
     });
     this.document_.defaultView.addEventListener(
         'resize', this.onResize_.bind(this));
+    this.document_.defaultView.addEventListener(
+        'keydown', this.onKeyDown_.bind(this));
     $('learn-more').href = LearnMoreURL;
     $('close-error').addEventListener('click', function() {
       $('error-container').hidden = true;
     });
     $('close-wallpaper-selection').addEventListener('click', function() {
       $('wallpaper-selection-container').hidden = true;
       $('set-wallpaper-layout').disabled = true;
     });
 
     this.onResize_();
@@ skipping 359 matching lines @@
 
   /**
    * Resize thumbnails grid and categories list to fit the new window size.
    */
   WallpaperManager.prototype.onResize_ = function() {
     this.wallpaperGrid_.redraw();
     this.categoriesList_.redraw();
   };
 
   /**
+   * Close the last opened overlay on pressing the Escape key.
+   * @param {Event} event A keydown event.
+   */
+  WallpaperManager.prototype.onKeyDown_ = function(event) {
+    if (event.keyCode == 27) {
+      // The last opened overlay coincides with the first match of querySelector
+      // because the Error Container is declared in the DOM before the Wallpaper
+      // Selection Container.
+      // TODO(bshe): Make the overlay selection not dependent on the DOM.
+      var closeButtonSelector = '.overlay-container:not([hidden]) .close';
+      var closeButton = this.document_.querySelector(closeButtonSelector);
+      if (closeButton) {
+        closeButton.click();
+        event.preventDefault();
+      }
+    }
+  };
+
+  /**
    * Constructs the categories list.
    */
   WallpaperManager.prototype.initCategoriesList_ = function() {
     this.categoriesList_ = $('categories-list');
     cr.ui.List.decorate(this.categoriesList_);
     // cr.ui.list calculates items in view port based on client height and item
     // height. However, categories list is displayed horizontally. So we should
     // not calculate visible items here. Sets autoExpands to true to show every
     // item in the list.
     // TODO(bshe): Use ul to replace cr.ui.list for category list.
@@ skipping 319 matching lines @@
           }
         }
       }
       this.wallpaperGrid_.dataModel = wallpapersDataModel;
       this.wallpaperGrid_.selectedItem = selectedItem;
       this.wallpaperGrid_.activeItem = selectedItem;
     }
   };
 
 })();