[web-ui settings] Fixes and improvements for settings page searching.

chrome/browser/resources/options/extension_list.js

 // Copyright (c) 2011 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() {
   'use strict';
 
   /**
    * A lookup helper function to find the first node that has an id (starting
    * at |node| and going up the parent chain).
@@ skipping 41 matching lines @@
       var toggleSection = $('dev');
       if (this.data_.developerMode) {
         toggleSection.classList.add('dev-open');
         toggleSection.classList.remove('dev-closed');
         toggleButton.checked = true;
       } else {
         toggleSection.classList.remove('dev-open');
         toggleSection.classList.add('dev-closed');
       }
 
-      // Install handler for key presses.
+      // Install handler for search changes.
       if (!handleInstalled) {
-        this.ownerDocument.addEventListener('keyup',
-                                            this.upEventHandler_.bind(this));
-        this.ownerDocument.addEventListener('mouseup',
-                                            this.upEventHandler_.bind(this));
+        var searchPage = SearchPage.getInstance();
+        searchPage.addEventListener('searchChanged',
+                                    this.searchChangedHandler_.bind(this));
         handleInstalled = true;
       }
     },
 
     /**
      * Deletes the existing Extension nodes from the page to make room for new
      * ones. It also keeps track of who was showing details so when the
      * extension list gets recreated we can recreate that state.
      *     @param {Array} showingDetails An array that will contain the list of
      *                    id's of extension that had the details section
@@ skipping 509 matching lines @@
             details.classList.add('extension-details-visible');
             iter.classList.remove('extension-list-item-collaped');
             iter.classList.add('extension-list-item-expanded');
           }
         }
         iter = iter.nextSibling;
       }
     },
 
     /**
-     * Handles the mouse-up and keyboard-up events. This is used to limit the
-     * number of items to show in the list, when the user is searching for items
-     * with the search box. Otherwise, if one match is found, the whole list of
+     * Handles the 'searchChanged' event. This is used to limit the number of
+     * items to show in the list, when the user is searching for items with the
+     * search box. Otherwise, if one match is found, the whole list of
      * extensions would be shown when we only want the matching items to be
      * found.
      * @param {Event} e Change event.
      * @private
      */
-    upEventHandler_: function(e) {
-      var searchString = $('search-field').value.toLowerCase();
+    searchChangedHandler_: function(e) {
+      var searchString = e.searchText;
       var child = this.firstChild;
-      while (child){
+      while (child) {
         var extension = this.getExtensionWithId_(child.id);
         if (searchString.length == 0) {
           // Show all.
           child.classList.remove('search-suppress');
         } else {
           // If the search string does not appear within the text of the
           // extension, then hide it.
           if ((extension.name.toLowerCase().indexOf(searchString) < 0) &&
               (extension.version.toLowerCase().indexOf(searchString) < 0) &&
               (extension.description.toLowerCase().indexOf(searchString) < 0)) {
@@ skipping 107 matching lines @@
           ]);
         }
       }
     },
   };
 
   return {
     ExtensionsList: ExtensionsList
   };
 });