[Do not commit] MD History: Experimentally implement cr-toolbar using cr-search-field

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..0d5d0cc9d2f79d1b40486e56910730a00bb64daa
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -0,0 +1,132 @@
+<link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.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>

[tsergeant, 2016/05/24 00:37:27]

TODO:

* blur closes the search field
* correct color for icon and prompt
* correct padding to left of icon
* correct styling of clear search button
* correct sizing of input text
* fire delegate callbacks correctly

+      :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: 4px;
+        display: flex;
+        flex: 1 1 0;
+        justify-content: center;
+      }
+
+      #centeredContent cr-search-field {
+        --paper-icon-button: {
+          width: 32px;
+          height: 32px;
+          padding: 6px;
+        };
+        --cr-search-field-search-button: {
+          margin: 6px;
+        };
+        --cr-search-field-container: {
+          max-width: initial;
+        };
+        --cr-search-color: white;
+        --cr-search-field-search-button-color: white;
+        --paper-icon-button-ink-color: white;
+        --paper-input-container-underline: {
+          display: none;
+        };
+        --paper-input-container-underline-focus: {
+          display: none;
+        };
+        align-items: center;
+        height: 40px;
+        justify-content: flex-start;
+        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      #prompt {
+        display: none;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      #searchContainer {
+        -webkit-padding-start: 2px;
+        flex: 1;
+      }
+
+      /** Thin layout, no search open. */
+      @media(max-width: 900px) {
+        #centeredContent {
+          justify-content: flex-end;
+        }
+
+        cr-search-field {
+          width: 54px;
+        }
+      }
+
+      /** Wide layout, no search open. */
+      @media(min-width: 901px) {
+        :host(:not([showing-search_])) cr-search-field {
+          -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_])) #prompt {
+          display: inline;
+          opacity: 0.6;
+        }
+      }
+
+      /* Any layout, search open. */
+      :host([showing-search_]) cr-search-field {
+        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">
+      <cr-search-field id="search" showing-search="{{showingSearch_}}"
+          search-prompt="[[searchPrompt]]" clear-label="[[clearLabel]]">
+        <div id="prompt">Search history</div>
+      </cr-search-field>
+    </div>
+  </template>
+  <script src="cr_toolbar.js"></script>
+</dom-module>