WebUI: Add password manager search feature. Also add tooltips for the URLs.

chrome/browser/resources/options/password_manager.js

Index: chrome/browser/resources/options/password_manager.js
===================================================================
--- chrome/browser/resources/options/password_manager.js	(revision 86208)
+++ chrome/browser/resources/options/password_manager.js	(working copy)
@@ -44,6 +44,9 @@
     initializePage: function() {
       OptionsPage.prototype.initializePage.call(this);
 
+      $('password-search-box').addEventListener('search',
+          this.handleSearchQueryChange_.bind(this));
+
       this.createSavedPasswordsList_();
       this.createPasswordExceptionsList_();
     },
@@ -81,7 +84,44 @@
       this.passwordExceptionsList_.autoExpands = true;
     },
 
+    queryDelayTimerId_: 0,

[James Hawkins, 2011/05/22 00:02:58]

nit: Document this variable and move it to the top. Same for the other private
variables.

[Mike Mammarella, 2011/05/22 00:35:11]

Done. Also documented similar variables in cookie search.

+
     /**
+     * Handles search query changes.
+     * @private

[James Hawkins, 2011/05/22 00:02:58]

nit: @private should be last.

[Mike Mammarella, 2011/05/22 00:35:11]

Done.

+     * @param {!Event} e The event object.
+     */
+    handleSearchQueryChange_: function(e) {
+      if (this.queryDelayTimerId_)
+        window.clearTimeout(this.queryDelayTimerId_);
+
+      // Searching cookies uses a timeout of 500. We use a shorter timeout

[James Hawkins, 2011/05/22 00:02:58]

500ms?

[Mike Mammarella, 2011/05/22 00:35:11]

Done.

+      // because there are probably fewer passwords and we want the UI to be
+      // snappier since users (at least I) expect that it's "less work."

[James Hawkins, 2011/05/22 00:02:58]

nit: Remove the parenthetical.

[Mike Mammarella, 2011/05/22 00:35:11]

Done.

+      this.queryDelayTimerId_ = window.setTimeout(
+          this.searchPasswords_.bind(this), 250);
+    },
+
+    lastQuery_: null,
+
+    /**
+     * Search passwords using text in password-search-box.

[James Hawkins, 2011/05/22 00:02:58]

nit: |password-search-box|.

[Mike Mammarella, 2011/05/22 00:35:11]

Done.

+     * @private
+     */
+    searchPasswords_: function() {
+      this.queryDelayTimerId_ = 0;
+      var filter = $('password-search-box').value;
+      filter = (filter == '') ? null : filter;
+      if (this.lastQuery_ != filter) {
+        this.lastQuery_ = filter;
+        // Searching for passwords has the side effect of requerying the
+        // underlying password store. This is done intentionally, as on OS X and
+        // Linux they can change from outside and we won't be notified of it.
+        chrome.send('updatePasswordLists');
+      }
+    },
+
+    /**
      * Updates the visibility of the list and empty list placeholder.
      * @param {!List} list The list to toggle visilibility for.
      */
@@ -98,6 +138,16 @@
      * @param {Array} entries The list of saved password data.
      */
     setSavedPasswordsList_: function(entries) {
+      if (this.lastQuery_) {
+        // Implement password searching here in javascript, rather than in C++.
+        // The number of saved passwords shouldn't be too big for us to handle.
+        var query = this.lastQuery_;
+        var filter = function(entry) {
+          // Search both URL and username.
+          return entry[0].indexOf(query) >= 0 || entry[1].indexOf(query) >= 0;
+        };
+        entries = entries.filter(filter);
+      }
       this.savedPasswordsList_.dataModel = new ArrayDataModel(entries);
       this.updateListVisibility_(this.savedPasswordsList_);
     },