MD WebUI: Add shared cr-toolbar element

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

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..afd8b04c8dc54950c430bad9bff1ba9c1200f70c
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -0,0 +1,152 @@
+<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">
+<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">
+
+<dom-module id="cr-toolbar">
+  <template>
+    <style>
+      :host {
+        color: #fff;
+        display: flex;
+        height: 56px;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      paper-icon-button {
+        height: 32px;
+        margin: 6px;
+        padding: 6px;
+        width: 32px;
+      }
+
+      h1 {
+        @apply(--layout-flex);
+        -webkit-padding-start: 24px;
+        font-size: 123%;
+        font-weight: 400;
+      }
+
+      #leftContent {
+        align-items: center;
+        display: flex;
+        width: var(--side-bar-width, 0);
+      }
+
+      #centeredContent {
+        -webkit-padding-end: 12px;
+        display: flex;
+        flex: 1 1 0;
+        justify-content: center;
+      }
+
+      #searchField {
+        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);
+      }
+
+      #searchIcon {
+        --paper-icon-button-ink-color: white;
+      }
+
+      #searchPrompt {
+        display: none;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      #searchContainer {
+        --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;
+      }
+
+      /** Thin layout, no search open. */
+      @media(max-width: 900px) {
+        #centeredContent {
+          justify-content: flex-end;
+        }
+
+        #searchField {
+          width: 44px;
+        }
+      }
+
+      /** Wide layout, no search open. */
+      @media(min-width: 901px) {
+        :host(:not([showing-search_])) #searchField {
+          -webkit-padding-end: 0;
+          background: rgba(0, 0, 0, 0.22);
+          border-radius: 2px;
+          cursor: text;
+          width: 580px;
+        }
+
+        :host(:not([showing-search_])) #searchIcon,
+        :host(:not([showing-search_])) #searchPrompt {
+          display: inline;
+          opacity: 0.6;
+        }
+      }
+
+      /* Any layout, search open. */
+      :host([showing-search_]) #searchField {
+        width: 100%;
+      }
+
+      /* Thin layout, search open. */
+      @media(max-width: 900px) {
+        :host([showing-search_]) #leftContent {
+          display: none;
+        }
+
+        :host([showing-search_]) #searchIcon {
+          margin-left: 18px;
+        }
+      }
+    </style>
+    <div id="leftContent">
+      <h1>[[pageName]]</h1>
+    </div>
+
+    <div id="centeredContent">
+      <div id="searchField" on-tap="showSearch_">
+        <paper-icon-button id="searchIcon" icon="cr:search"
+            title="[[searchPrompt]]">
+        </paper-icon-button>
+        <span id="searchPrompt">[[searchPrompt]]</span>
+        <paper-input-container id="searchContainer"
+            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"
+            on-tap="toggleShowingSearch_" title="[[clearLabel]]"
+            hidden$="[[!hasSearchText_]]">
+        </paper-icon-button>
+      </div>
+    </div>
+  </template>
+  <script src="cr_toolbar.js"></script>
+</dom-module>