[MD Settings] Implement search in material design passwords.

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

 // Copyright 2016 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
  * 'settings-subpage' shows a subpage beneath a subheader. The header contains
  * the subpage title and a back icon. The back icon fires an event which
  * is caught by settings-animated-pages, so it requires no separate handling.
  */
 
 Polymer({
   is: 'settings-subpage',
 
   behaviors: [
     // TODO(michaelpg): phase out NeonAnimatableBehavior.
     Polymer.NeonAnimatableBehavior,
     Polymer.IronResizableBehavior,
   ],
 
   properties: {
     pageTitle: String,
+
+    /** Setting a |searchLabel| will enable search. */
+    searchLabel: {
+      type: String,
+      observer: 'onSearchLabelSet_',
+    },
+
+    searchTerm: {
+      type: String,
+      notify: true,
+      value: '',
+    },
   },
 
   /** @private */
   onTapBack_: function() {
     // 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.hidden = !searchLabel;
+  },
 });