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..f02b53945b765a792f33cfb311e6198276dee42d
--- /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_}}">

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

Indentation is a bit unusual here, how about

<cr-toolbar-search-field id="search" narrow="[[narrow_]]"
    label="[[searchPrompt]]" clear-label="[[clearLabel]]"
    showing-search="{{showingSearch_}}">
 </cr-toolbar-search-field>

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

"a poor craftsman blames their tools", but vim has been REALLY eager to align
html like that recently.

Fixed.

+      </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>