Handle Esc key press event in Local NTP.

chrome/browser/resources/local_ntp/local_ntp.js

 // Copyright 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.
 
 
 /**
  * @fileoverview The local InstantExtended NTP and suggestions dropdown.
  */
 
 (function() {
@@ skipping 595 matching lines @@
   } else if (!fakebox ||
       !document.body.classList.contains(CLASSES.FAKEBOX_ANIMATE)) {
     // The user has typed in the omnibox - hide the NTP immediately.
     document.body.classList.add(CLASSES.HIDE_NTP);
     clearCustomTheme();
   }
 }
 
 
 /**
+ * Shows the NTP (destroys the activeBox if exists and reloads the custom
+ * theme).
+ */
+function showNtp() {
+  hideActiveSuggestions();
+  document.body.classList.remove(CLASSES.HIDE_NTP);
+  onThemeChange();
+}
+
+/**
  * Clears the custom theme (if any).
  */
 function clearCustomTheme() {
   document.body.style.background = '';
   document.body.classList.remove(CLASSES.CUSTOM_THEME);
 }
 
 
 /**
  * @return {boolean} True if the NTP is visible.
@@ skipping 146 matching lines @@
 
 /**
  * "Down" arrow keycode.
  * @type {number}
  * @const
  */
 var KEY_DOWN_ARROW = 40;
 
 
 /**
+ * "Esc" keycode.
+ * @type {number}
+ * @const
+ */
+var KEY_ESC = 27;
+
+/**
  * Pixels of padding inside a suggestion div for displaying its icon.
  * @type {number}
  * @const
  */
 var SUGGESTION_ICON_PADDING = 26;
 
 
 /**
  * Pixels by which iframes should be moved down relative to their wrapping
  * suggestion div.
@@ skipping 406 matching lines @@
   },
 
   /**
    * Selects the suggestion after the current selection.
    */
   selectNext: function() {
     this.changeSelection_(this.selectedIndex_ + 1);
   },
 
   /**
+   * @return {boolean} True if a suggestion is selected by default or because
+   * the user arrowed down to it.
+   */
+  hasSelectedSuggestion: function() {
+    return this.selectedIndex_ != -1;
+  },
+
+  /**
+   * Clears the selected suggestion.
+   */
+  clearSelection: function() {
+    this.selectedIndex_ = -1;
+    var oldSelection = this.container_.querySelector('.' + CLASSES.SELECTED);
+    if (oldSelection)
+      oldSelection.classList.remove(CLASSES.SELECTED);
+  },
+
+  /**
    * Changes the current selected suggestion index.
    * @param {number} index The new selection to suggest.
    * @private
    */
   changeSelection_: function(index) {
     var numSuggestions = this.suggestions_.length;
     this.selectedIndex_ = Math.min(numSuggestions - 1, Math.max(-1, index));
 
     this.redrawSelection_();
     this.redrawHover_();
   },
 
   /**
    * Redraws the selected suggestion.
    * @private
    */
   redrawSelection_: function() {
     var oldSelection = this.container_.querySelector('.' + CLASSES.SELECTED);
     if (oldSelection)
       oldSelection.classList.remove(CLASSES.SELECTED);
-    if (this.selectedIndex_ == -1) {
+    if (!this.hasSelectedSuggestion()) {
       searchboxApiHandle.setValue(this.inputValue_);
     } else {
       this.suggestions_[this.selectedIndex_].select(true);
       searchboxApiHandle.setRestrictedValue(
           this.suggestions_[this.selectedIndex_].restrictedId);
     }
   },
 
   /**
    * @param {!Window} iframeWindow The window of the iframe that was clicked.
@@ skipping 196 matching lines @@
   if (activeBox)
     activeBox.repositionSuggestions();
 
   // This is bound only for initialization. Afterwards this style should only
   // change onmarginchange.
   window.removeEventListener('resize', setSuggestionStyles);
 }
 
 
 /**
- * Makes keys navigate through suggestions.
+ * Handles key press events.
  * @param {Object} e The key being pressed.
  */
 function handleKeyPress(e) {
-  if (!activeBox)
-    return;
-
   switch (e.keyCode) {
     case KEY_UP_ARROW:
-      activeBox.selectPrevious();
+      if (activeBox)
+        activeBox.selectPrevious();
       break;
     case KEY_DOWN_ARROW:
-      activeBox.selectNext();
+      if (activeBox)
+        activeBox.selectNext();
+      break;
+    case KEY_ESC:
+      if (activeBox && activeBox.hasSelectedSuggestion())
+        activeBox.clearSelection();
+      else
+        showNtp();
       break;
   }
 }
 
 
 /**
  * Handles postMessage calls from suggestion iframes.
  * @param {Object} message A notification that all iframes are done loading or
  *     that an iframe was clicked.
  */
@@ skipping 165 matching lines @@
   searchboxApiHandle.onchange = updateSuggestions;
   searchboxApiHandle.onkeypress = handleKeyPress;
   // TODO(jered): Re-enable this after http://crbug.com/236492 is fixed.
   // searchboxApiHandle.onmarginchange = setSuggestionStyles;
   if (window.innerWidth > 0) {
     setSuggestionStyles();
   } else {
     // Wait until the overlay is shown to initialize suggestion margins.
     window.addEventListener('resize', setSuggestionStyles);
   }
   searchboxApiHandle.onsubmit = function() {

[jeremycho, 2013/05/06 20:32:34]

Can you add a comment explaining this is needed to inform Chrome that the NTP is
instant-extended capable?

[kmadhusu, 2013/05/06 21:11:45]

Done.

-    var value = searchboxApiHandle.value;
-    if (!value) {
-      // Interpret onsubmit with an empty query as an ESC key press.
-      hideActiveSuggestions();
-    }
   };
 
   if (fakebox) {
     // Listener for updating the key capture state.
     document.body.onclick = function(event) {
       if (isFakeboxClick(event))
         searchboxApiHandle.startCapturingKeyStrokes();
       else if (fakeboxIsFocused())
         searchboxApiHandle.stopCapturingKeyStrokes();
     };
     searchboxApiHandle.onkeycapturechange = function() {
       setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled);
     };
 
     // Set the cursor alignment based on language directionality.
     $(IDS.CURSOR).style[searchboxApiHandle.rtl ? 'right' : 'left'] = '9px';
   }
 }
 
 document.addEventListener('DOMContentLoaded', init);
 window.addEventListener('message', handleMessage, false);
 window.addEventListener('blur', function() {
   if (activeBox)
     activeBox.clearHover();
 }, false);
 })();