MD WebUI: Add shared cr-toolbar element

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
new file mode 100644
index 0000000000000000000000000000000000000000..c65855b1606af50a58edd2b9a740487ace383314
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
@@ -0,0 +1,100 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.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-container.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+
+<dom-module id="cr-toolbar-search-field">
+  <template>
+    <style>
+      :host {
+        align-items: center;
+        display: flex;
+        height: 40px;
+        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        width: 44px;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      paper-icon-button {
+        height: 32px;
+        margin: 6px;
+        padding: 6px;
+        width: 32px;
+      }
+
+      #icon {
+        --paper-icon-button-ink-color: white;
+      }
+
+      #prompt {
+        visibility: hidden;
+      }
+
+      paper-input-container {
+        --paper-input-container-input-color: white;
+        --paper-input-container-underline: {
+          display: none;
+        };
+        --paper-input-container-underline-focus: {
+          display: none;
+        };
+        --paper-input-container-label: {
+          color: inherit;
+          font-size: inherit;
+        };
+        -webkit-padding-start: 2px;
+        flex: 1;
+      }
+
+      input[type='search']::-webkit-search-decoration,
+      input[type='search']::-webkit-search-cancel-button,
+      input[type='search']::-webkit-search-results-button {
+        -webkit-appearance: none;
+      }
+
+      /** Wide layout, no search open. */
+      :host(:not([narrow]):not([showing-search])) {
+        -webkit-padding-end: 0;
+        background: rgba(0, 0, 0, 0.22);
+        border-radius: 2px;
+        cursor: text;
+        width: 580px;
+      }
+
+      :host(:not([narrow]):not([showing-search])) #icon,
+      :host(:not([narrow]):not([showing-search])) #prompt {
+        opacity: 0.6;
+        visibility: visible;
+      }
+
+      /* Any layout, search open. */
+      :host([showing-search]) {
+        width: 100%;
+      }
+
+      :host([narrow][showing-search]) #icon {
+        -webkit-margin-start: 18px;
+      }
+    </style>
+    <paper-icon-button id="icon" icon="cr:search"
+        title="[[label]]">
+    </paper-icon-button>
+    <paper-input-container on-search="onSearchTermSearch_"
+        on-keydown="onSearchTermKeydown_" no-label-float>
+      <label id="prompt" for="searchInput">[[label]]</label>
+      <input is="iron-input" id="searchInput" type="search"
+          on-blur="onInputBlur_" incremental></input>
+    </paper-input-container>
+    <paper-icon-button icon="cr:cancel" id="clearSearch"
+        title="[[clearLabel]]" hidden$="[[!hasSearchText]]"
+        on-tap="hideSearch_">
+    </paper-icon-button>
+  </template>
+  <script src="cr_toolbar_search_field.js"></script>
+</dom-module>