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..f625bc580299d68d8e255ff0b35ad480c865a8fb
--- /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;
+      }
+
+      #left-content {
+        align-items: center;
+        display: flex;
+        width: var(--side-bar-width, 0);
+      }
+
+      #centered-content {
+        -webkit-padding-end: 12px;
+        display: flex;
+        flex: 1 1 0;
+        justify-content: center;
+      }
+
+      #search-field {
+        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);
+      }
+
+      #search-icon {
+        --paper-icon-button-ink-color: white;
+      }
+
+      #search-prompt {
+        display: none;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      #search-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;
+      }
+
+      /** Thin layout, no search open. */
+      @media(max-width: 900px) {
+        #centered-content {
+          justify-content: flex-end;
+        }
+
+        #search-field {
+          width: 44px;
+        }
+      }
+
+      /** Wide layout, no search open. */
+      @media(min-width: 901px) {
+        :host(:not([showing-search_])) #search-field {
+          -webkit-padding-end: 0;
+          background: rgba(0, 0, 0, 0.22);
+          border-radius: 2px;
+          cursor: text;
+          width: 580px;
+        }
+
+        :host(:not([showing-search_])) #search-icon,
+        :host(:not([showing-search_])) #search-prompt {
+          display: inline;
+          opacity: 0.6;
+        }
+      }
+
+      /* Any layout, search open. */
+      :host([showing-search_]) #search-field {
+        width: 100%;
+      }
+
+      /* Thin layout, search open. */
+      @media(max-width: 900px) {
+        :host([showing-search_]) #left-content {
+          display: none;
+        }
+
+        :host([showing-search_]) #search-icon {
+          margin-left: 18px;
+        }
+      }
+    </style>
+    <div id="left-content">
+      <h1>[[pageName]]</h1>
+    </div>
+
+    <div id="centered-content">
+      <div id="search-field" on-click="showSearch_">

[dpapad, 2016/05/18 23:39:13]

Should we be using on-tap instead of on-click, which works both for mouse and
touch devices? (Here and elsewhere in this file).

[tsergeant, 2016/05/19 07:11:55]

Done.

+        <paper-icon-button id="search-icon" icon="cr:search"
+            title="[[searchPrompt]]">
+        </paper-icon-button>
+        <span id="search-prompt">[[searchPrompt]]</span>
+        <paper-input-container id="search-container"
+            on-search="onSearchTermSearch_" on-keydown="onSearchTermKeydown_"
+            hidden$="[[!showingSearch_]]" no-label-float>
+          <input is="iron-input" id="search-input" type="search"
+              on-blur="onInputBlur_" incremental></input>
+        </paper-input-container>
+        <paper-icon-button icon="cr:cancel" id="clear-search"
+            on-click="toggleShowingSearch_" title="[[clearLabel]]"
+            hidden$="[[!hasSearchText_]]">
+        </paper-icon-button>
+      </div>
+    </div>
+  </template>
+  <script src="cr_toolbar.js"></script>
+</dom-module>