MD WebUI: Add shared cr-toolbar element

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

+<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] {

[dpapad, 2016/05/26 00:42:52]

Can you verify whether this rule is needed? It has always worked for me without
the need for explicitly specifying it.

Maybe it is inherited from
https://code.google.com/p/chromium/codesearch#search/&q=%22html%20/deep/%20%5...
or somewhere else?

[tsergeant, 2016/05/26 01:34:52]

It's a bit weird, but I think it's coming from somewhere like that.

The search fields in History and Downloads don't hide correctly without manually
specifying this rule, and the only reason it -used- to work was because the
dom-if was making the hidden properties redundant.

+        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 {
+        margin-left: 18px;

[dpapad, 2016/05/26 00:42:52]

I don't think this works for RTL. How about --webkit-margin-start

[tsergeant, 2016/05/26 01:34:52]

Oops, done.

+      }
+    </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]]">
+    </paper-icon-button>
+  </template>
+  <script src="cr_toolbar_search_field.js"></script>
+</dom-module>