[MD Settings] Implement search in material design passwords.

chrome/browser/resources/settings/settings_page/settings_subpage.js

Index: chrome/browser/resources/settings/settings_page/settings_subpage.js
diff --git a/chrome/browser/resources/settings/settings_page/settings_subpage.js b/chrome/browser/resources/settings/settings_page/settings_subpage.js
index 397e89addb82ae525d02da1d5539b4da745a95d3..382401d668739e07397fdf98d85a9df416f750e2 100644
--- a/chrome/browser/resources/settings/settings_page/settings_subpage.js
+++ b/chrome/browser/resources/settings/settings_page/settings_subpage.js
@@ -20,6 +20,18 @@ Polymer({
 
   properties: {
     pageTitle: String,
+
+    /** Setting a |searchLabel| will enable search. */
+    searchLabel: {
+      type: String,
+      observer: 'onSearchLabelSet_',
+    },
+
+    searchTerm: {
+      type: String,
+      notify: true,
+      value: '',
+    },
   },
 
   /** @private */
@@ -27,4 +39,35 @@ Polymer({
     // Event is caught by settings-animated-pages.
     this.fire('subpage-back');
   },
+
+  /** @private */
+  onTapClear_: function() {
+    this.$$('#searchInput').value = '';
+
+    // Fire events to update the UI. These are fired when the user changes the
+    // input, but not when value is set.
+    this.$$('#searchInput').fire('input');
+    this.$$('#searchInput').fire('search');
+  },
+
+  /** @private */
+  onSearchTermSearch_: function() {
+    this.searchTerm = this.$$('#searchInput').value;
+  },
+
+  /**
+   * @param {string} searchTerm
+   * @return {boolean}
+   */
+  hasSearchTerm_: function(searchTerm) {
+    return !!searchTerm;
+  },
+
+  /**
+   * Shows the search container when a search label is set.
+   * @param {string} searchLabel
+   */
+  onSearchLabelSet_: function(searchLabel) {
+    this.$.searchContainer.if = searchLabel;
+  },
 });