dom-ui settings: Improve search field behavior.

- focus search field by default.
- don't show search results page until user starts typing.
- focus search field on forward slash if not focused on a control.

BUG=69154,69722
TEST=Verify focusing behavior per above.
Review URL: http://codereview.chromium.org/6360016

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

chrome/app/generated_resources.grd

@@ -7191,9 +7191,6 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_OPTIONS_SEARCH_PAGE_TITLE" desc="">
         Search
       </message>
-      <message name="IDS_OPTIONS_SEARCH_PAGE_INFO" desc="">
-        Type to search <ph name="PRODUCT_NAME">$1<ex>Google Chrome</ex></ph> settings.
-      </message>
       <message name="IDS_OPTIONS_SEARCH_PAGE_NO_MATCHES" desc="">
         No matches were found.
       </message>

chrome/browser/dom_ui/options/core_options_handler.cc

@@ -61,9 +61,6 @@ void CoreOptionsHandler::GetLocalizedValues(
   // Search
   localized_strings->SetString("searchPageTitle",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SEARCH_PAGE_TITLE));
-  localized_strings->SetString("searchPageInfo",
-      l10n_util::GetStringFUTF16(IDS_OPTIONS_SEARCH_PAGE_INFO,
-          l10n_util::GetStringUTF16(IDS_PRODUCT_NAME)));
   localized_strings->SetString("searchPageNoMatches",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SEARCH_PAGE_NO_MATCHES));
   localized_strings->SetString("searchPageHelpLabel",

chrome/browser/resources/options/options.js

@@ -158,8 +158,7 @@ function load() {
     if (hash.length > 1)
       OptionsPage.handleHashForPage(pageName, hash.slice(1));
   } else {
-    // TODO(csilv): Save/restore last selected page.
-    OptionsPage.showPageByName(BrowserOptions.getInstance().name);
+    OptionsPage.showDefaultPage();
   }
 
   var subpagesNavTabs = document.querySelectorAll('.subpages-nav-tabs');

chrome/browser/resources/options/options_page.js

@@ -42,6 +42,14 @@ cr.define('options', function() {
    */
   OptionsPage.initialized_ = false;
 
+  /**
+   * Shows the default page.
+   */
+  OptionsPage.showDefaultPage = function() {
+    // TODO(csilv): Persist the current page.
+    this.showPageByName(BrowserOptions.getInstance().name);
+  };
+
   /**
    * Shows a registered page. This handles both top-level pages and sub-pages.
    * @param {string} pageName Page name.
@@ -339,15 +347,8 @@ cr.define('options', function() {
       };
     };
 
-    // Close the top overlay or sub-page on esc.
-    document.addEventListener('keydown', function(e) {
-      if (e.keyCode == 27) { // Esc
-        if (self.isOverlayVisible_())
-          self.clearOverlays();
-        else
-          self.closeTopSubPage();
-      }
-    });
+    // Install handler for key presses.
+    document.addEventListener('keydown', this.keyDownEventHandler_.bind(this));
   };
 
   /**
@@ -405,6 +406,21 @@ cr.define('options', function() {
     }
   };
 
+  /**
+   * A function to handle key press events.
+   * @return {Event} a keydown event.
+   * @private
+   */
+  OptionsPage.keyDownEventHandler_ = function(event) {
+    // Close the top overlay or sub-page on esc.
+    if (event.keyCode == 27) {  // Esc
+      if (this.isOverlayVisible_())
+        this.clearOverlays();
+      else
+        this.closeTopSubPage();
+    }
+  };
+
   /**
    * Re-initializes the C++ handlers if necessary. This is called if the
    * handlers are torn down and recreated but the DOM may not have been (in

chrome/browser/resources/options/search_page.html

 <div id="searchPage" class="page hidden">
   <h1 i18n-content="searchPageTitle"></h1>
-  <div id="searchPageInfo">
-    <p i18n-content="searchPageInfo"></p>
-  </div>
   <div id="searchPageNoMatches">
     <p i18n-content="searchPageNoMatches"></p>
     <p><span i18n-content="searchPageHelpLabel"></span>

chrome/browser/resources/options/search_page.js

@@ -111,12 +111,20 @@ cr.define('options', function() {
       // Replace the contents of the navigation tab with the search field.
       self.tab.textContent = '';
       self.tab.appendChild(searchField);
+      self.tab.onclick = self.tab.onkeypress = undefined;
 
       // Handle search events. (No need to throttle, WebKit's search field
       // will do that automatically.)
       searchField.onsearch = function(e) {
         self.setSearchText_(this.value);
       };
+
+      // Install handler for key presses.
+      document.addEventListener('keydown',
+                                this.keyDownEventHandler_.bind(this));
+
+      // Focus the search field by default.
+      searchField.focus();
     },
 
     /**
@@ -160,10 +168,7 @@ cr.define('options', function() {
 
       if (this.searchActive_ != active) {
         this.searchActive_ = active;
-        if (active) {
-          // Reset the search criteria, effectively hiding all the sections.
-          this.setSearchText_('');
-        } else {
+        if (!active) {
           // Just wipe out any active search text since it's no longer relevant.
           $('search-field').value = '';
         }
@@ -208,6 +213,20 @@ cr.define('options', function() {
      * @private
      */
     setSearchText_: function(text) {
+      // Consider whitespace-only strings as empty.
+      if (!text.replace(/^\s+/, '').length)
+        text = '';
+
+      // Toggle the search page if necessary.
+      if (text.length) {
+        if (!this.searchActive_)
+          OptionsPage.showPageByName(this.name);
+      } else {
+        if (this.searchActive_)
+          OptionsPage.showDefaultPage();
+        return;
+      }
+
       var foundMatches = false;
       var bubbleControls = [];
 
@@ -287,16 +306,10 @@ cr.define('options', function() {
       }
 
       // Configure elements on the search results page based on search results.
-      if (searchText.length == 0) {
-        $('searchPageInfo').classList.remove('search-hidden');
-        $('searchPageNoMatches').classList.add('search-hidden');
-      } else if (foundMatches) {
-        $('searchPageInfo').classList.add('search-hidden');
+      if (foundMatches)
         $('searchPageNoMatches').classList.add('search-hidden');
-      } else {
-        $('searchPageInfo').classList.add('search-hidden');
+      else
         $('searchPageNoMatches').classList.remove('search-hidden');
-      }
 
       // Create search balloons for sub-page results.
       length = bubbleControls.length;
@@ -444,6 +457,21 @@ cr.define('options', function() {
           pages.push(page);
       }
       return pages;
+    },
+
+    /**
+     * A function to handle key press events.
+     * @return {Event} a keydown event.
+     * @private
+     */
+    keyDownEventHandler_: function(event) {
+      // Focus the search field on an unused forward-slash.
+      if (event.keyCode == 191 &&
+          !/INPUT|SELECT|BUTTON|TEXTAREA/.test(event.target.tagName)) {
+        $('search-field').focus();
+        event.stopPropagation();
+        event.preventDefault();
+      }
     }
   };