[MD Settings] Implement search in material design passwords.

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-subpage">
   <template>
     <style include="settings-shared">
       :host {
         display: block;
       }
 
       .settings-box.first {
         padding-bottom: 16px;
         padding-top: 8px;
       }
 
       paper-icon-button {
         /* The inner icon is 20px in size. paper-icon-button has 8px padding. */
         height: 36px;
         /* Centers the ripple on the icon with appropriate margin on right. */
         margin: 0 8px 0 -8px;
         width: 36px;
       }
 
       h2 {
         color: var(--settings-nav-grey);
         font-size: 107.6923%; /* go to 14px from 13px */
       }
+
+      paper-input-container {
+        -webkit-margin-start: auto;
+        width: var(--paper-input-max-width);
+      }
+
+      input[type='search']::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+      }
+
+      #prompt,
+      #searchInput {
+        color: var(--google-grey-500);
+        font-size: 13px;
+        line-height: 36px;
+      }
+
+      #clearSearch {
+        -webkit-margin-end: -8px;
+        -webkit-margin-start: 8px;
+      }
+
+      :root {
+        --paper-icon-button {
+          height: 36px;
+          width: 36px;
+        }
+
+        --paper-input-suffix: {
+          /* Required to align the icon in |clearSearch| vertically. */
+          line-height: 0;
+        }
+      }
     </style>
     <div class="settings-box first">
       <paper-icon-button icon="settings:arrow-back" on-tap="onTapBack_">
       </paper-icon-button>
       <h2>[[pageTitle]]</h2>
+      <template id="searchContainer" is="dom-if">

[dpapad, 2016/07/13 23:32:41]

There is no need to assign an "id" to the template. This will actually interfere
with the "search within settings" algorithm.

The proper way to use dom-if is as follows

<template is="dom-if" if="[[someBooleanVariableHere_]]">

In your code, all you have to do is flip the boolean, instead of finding the
template by ID and setting if to true. You could even avoid having an observer
on searchLabel completely, as follows

<template is="dom-if" if="[[searchLabel]]">

[hcarmona, 2016/07/20 18:59:48]

I knew of the data binding syntax, but didn't realize it would work if
there's a type mismatch. Works great! Thanks for the heads up so I don't
break search for the section.

+        <paper-input-container no-label-float on-search="onSearchTermSearch_">

[dpapad, 2016/07/13 23:32:41]

If we end up using our own HTML, paper-input-container also needs to be
imported.

[hcarmona, 2016/07/20 18:59:48]

Done.

+          <label id="prompt">[[searchLabel]]</label>
+          <input is="iron-input" id="searchInput" type="search"
+              aria-labelledby="prompt" incremental>
+          </input>
+          <paper-icon-button suffix icon="cr:cancel" id="clearSearch"
+              on-tap="onTapClear_" title="[[clearLabel]]"
+              hidden$="[[!hasSearchTerm_(searchTerm)]]">
+          </paper-icon-button>
+        </paper-input-container>
+      </template>
     </div>
     <content></content>
   </template>
   <script src="settings_subpage.js"></script>
 </dom-module>