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..d052b321d7b113f79bd2d1a5e0539540924b4e1b
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -0,0 +1,56 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html">
+
+<dom-module id="cr-toolbar">
+  <template>
+    <style>
+      :host {
+        color: #fff;
+        display: flex;
+        height: 56px;
+      }
+
+      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;
+      }
+
+      :host([narrow_]) #centeredContent {
+        justify-content: flex-end;
+      }
+
+      :host([narrow_][showing-search_]) #leftContent {
+        display: none;
+      }
+    </style>
+    <div id="leftContent">
+      <h1>[[pageName]]</h1>
+    </div>
+
+    <div id="centeredContent">
+      <cr-toolbar-search-field id="search" narrow="[[narrow_]]"
+          label="[[searchPrompt]]" clear-label="[[clearLabel]]"
+          showing-search="{{showingSearch_}}">
+      </cr-toolbar-search-field>
+      <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
+      </iron-media-query>
+    </div>
+  </template>
+  <script src="cr_toolbar.js"></script>
+</dom-module>