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] {
+        display: none !important;
+      }
+
+      paper-icon-button {
+        height: 32px;
+        margin: 6px;
+        padding: 6px;
+        width: 32px;
+      }
+
+      #icon {
+        --paper-icon-button-ink-color: white;
+      }
+
+      #prompt {
+        display: none;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      paper-input-container {
+        --paper-input-container-input-color: white;
+        --paper-input-container-underline: {
+          display: none;
+        };
+        --paper-input-container-underline-focus: {
+          display: none;
+        };
+        -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 {
+        display: inline;
+        opacity: 0.6;
+      }
+
+      /* Any layout, search open. */
+      :host([showing-search]) {
+        width: 100%;
+      }
+
+      :host([narrow][showing-search]) #icon {
+        margin-left: 18px;
+      }
+    </style>
+    <paper-icon-button id="icon" icon="cr:search"
+        title="[[label]]">
+    </paper-icon-button>
+    <span id="prompt">[[label]]</span>

[dpapad, 2016/05/25 01:20:10]

What is this used for? Can't we use the native "placeholder" property instead,
just like cr-search-field does
(https://code.google.com/p/chromium/codesearch#chromium/src/ui/webui/resources...)

[tsergeant, 2016/05/25 07:01:30]

The original reason I avoided placeholder was because the text behavior is
roughly the opposite of what happens in the old search field. After looking into
it more, I've switched it to use a <label> inside the <paper-input-container>.
This is closer to the normal Polymer way of doing things, and should be better
for a11y.

+    <paper-input-container
+        on-search="onSearchTermSearch_" on-keydown="onSearchTermKeydown_"
+        hidden$="[[!showingSearch]]" no-label-float>
+      <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>