[MD Settings] Implement search in material design passwords.

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

Index: chrome/browser/resources/settings/settings_page/settings_subpage.html
diff --git a/chrome/browser/resources/settings/settings_page/settings_subpage.html b/chrome/browser/resources/settings/settings_page/settings_subpage.html
index fa94d0769b665fd71012bd192229ae40c2f70b1c..7d1bfdae62ff0e690145388aa5e2f036d99e76dc 100644
--- a/chrome/browser/resources/settings/settings_page/settings_subpage.html
+++ b/chrome/browser/resources/settings/settings_page/settings_subpage.html
@@ -2,6 +2,7 @@
 <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">
 
@@ -29,11 +30,55 @@
         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>
+      <paper-input-container id="searchContainer" no-label-float hidden

[dpapad, 2016/07/13 18:11:17]

Can we re-use the existing cr-search-field instead of rolling our own search
field here? See
https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_search...

Also having this complex search field in the DOM for every subpage, when we only
need it for the manage-passwords <settings-subpage> seems wasteful. Can we use
dom-if instead of hidden?

[hcarmona, 2016/07/13 23:19:40]

cr-search-field doesn't match the mocks. If we can get bettes@ to OK the
changes, then it's not a big deal to change to use cr-search-field.
See http://crrev.com/2147103002 for a rough idea.

I started styling it to match our mocks but it felt like I was forcing
cr-search-field to be two different things. The main differences are:
  1. Search in passwords is always expanded
  2. Clicking the clear button will clear the search instead toggling
  3. Search field needs to be longer and isn't easily expanded w/ mixin

As for the dom-if part: Done.

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

cr-search-field logic is broken down to two parts
1) A "canonical" implementation with default styling (via the <cr-search-field>
element).
2) A cr_search_field_behavior.js for cases where the default styling needs to be
heavily modified. An example of a search field that uses the behavior, with
completely different styling (and HTML) is
https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_toolba....

Even if styling is different, we should be able to use the behavior.

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

Sounds good.

+          on-search="onSearchTermSearch_">
+        <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>
     </div>
     <content></content>
   </template>