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..35410f202ae4b7ef919ca7dd6891cc065dde5c15
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -0,0 +1,170 @@
+<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">
+<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
+
+<dom-module id="cr-toolbar">
+  <template>
+    <style no-process>
+      :host {
+        background-color: var(--md-toolbar-color);
+      }
+    </style>
+    <style>
+      :host {
+        color: #fff;
+        display: flex;
+        height: 56px;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      paper-icon-button {
+        --paper-icon-button: {

[calamity, 2016/05/16 04:27:34]

QQ: Why is this applied as a mixin? So that will override correctly?

[tsergeant, 2016/05/17 03:24:39]

That's a cargo-cult from PDF which is...not necessary after all. Done.

+          height: 32px;
+          padding: 6px;
+          width: 32px;
+        };
+        margin: 6px;
+      }
+
+      h1 {
+        @apply(--layout-flex);
+        -webkit-padding-start: 24px;
+        font-size: 123%;
+        font-weight: 400;
+      }
+
+      #left-content {
+        align-items: center;
+        display: flex;
+        flex: 1 0 var(--side-bar-width, 0);
+      }
+
+      #centered-content {
+        -webkit-padding-end: 12px;
+        display: flex;
+        flex: 0 1 var(--content-max-width, 960px);
+        justify-content: center;
+      }
+
+      #right-padding {
+        flex: 1 0 0;
+      }
+
+      #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-prompt {
+        display: none;

[calamity, 2016/05/16 04:27:34]

Some animation jank can happen here from text wrapping.

overflow: hidden;
white-space: nowrap;

[tsergeant, 2016/05/17 03:24:39]

Done.

+      }
+
+      #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: 900px) {
+        :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%;
+      }
+
+      :host([showing-search_]) #right-padding {
+        display: none;
+      }
+
+      :host([showing-search_]) #centered-content {
+        flex-grow: 1;

[calamity, 2016/05/16 04:27:34]

As discussed, this is causing animation jank because it changes width
immediately on property change.

[tsergeant, 2016/05/17 03:24:39]

Done.

+      }
+
+      :host([showing-search_]) #left-content {
+        flex-grow: 0;
+      }
+
+      /* 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_">
+        <paper-icon-button id="search-icon" icon="search"></paper-icon-button>
+        <span id="search-prompt">Search [[lowerPageName_]]</span>

[calamity, 2016/05/16 04:27:34]

It would seem that in i18n, the rule is "Do it dumb".

Time to make a generic placeholder property that each client fills in! =D

[tsergeant, 2016/05/17 03:24:39]

Done, and I've added back in clearLabel as well.

+        <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"
+              incremental></input>
+        </paper-input-container>
+        <paper-icon-button icon="cancel" id="clear-search"
+            on-click="toggleShowingSearch_" title="[[clearLabel]]"
+            hidden$="[[!hasSearchText_]]">
+        </paper-icon-button>
+      </div>
+    </div>
+
+    <div id="right-padding"></div>

[calamity, 2016/05/16 04:27:34]

I think we can get rid of this right-padding div and just have centered-content
flex: 1 1 0, and left-content have constant width.

[tsergeant, 2016/05/17 03:24:39]

Done.

+  </template>
+  <script src="cr_toolbar.js"></script>
+</dom-module>