MD WebUI: Add shared cr-toolbar element

ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html

Index: ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
diff --git a/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html b/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
index 4ff9b93481b3e62971fb3e0c4ba27660d77017e9..19d509c95c41416fb67bd5c78cdb700d5224ba45 100644
--- a/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
+++ b/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
@@ -1,3 +1,4 @@
+<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/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
@@ -7,16 +8,16 @@
 
 <dom-module id="cr-search-field">
   <template>
-    <paper-icon-button icon="cr:search" id="search-button"
+    <paper-icon-button icon="cr:search" id="searchButton"
         disabled$="[[showingSearch_]]" title="[[label]]"
         on-click="toggleShowingSearch_"></paper-icon-button>
-    <template is="dom-if" if="[[showingSearch_]]" id="search-container">
-      <paper-input-container id="search-term" on-search="onSearchTermSearch_"
+    <template is="dom-if" if="[[showingSearch_]]" id="searchContainer">

[dpapad, 2016/05/19 23:19:46]

Is this dom-if really useful? Does it make any noticeable difference in
performance?
Why not just
<paper-input-container hidden="[[!showingSearch_]]"...></paper-input-container>

The fact the the text field is within a dom-if forces the UI to repeatedly have
to check whether "searchInput" actually exists in the DOM (happens in
getValue(), setValue(), focus_()). This can be avoided if there is no good
reason.

[tsergeant, 2016/05/20 00:27:12]

I agree, but if possible I'd like to defer this to a follow-up patch (this patch
is getting pretty big already).

[dpapad, 2016/05/20 01:11:31]

Follow up CL SG. Perhaps add a TODO for this?

+      <paper-input-container id="searchTerm" on-search="onSearchTermSearch_"
           on-keydown="onSearchTermKeydown_" hidden$="[[!showingSearch_]]"

[dpapad, 2016/05/19 23:19:46]

Everything within the dom-if is hidden when !showingSearch_. Why is this
"hidden$=" necessary (seems redundant)? Same question for the paper-icon-button
below.

[tsergeant, 2016/05/20 00:27:12]

As above, I'd like to defer this for now.

           no-label-float>
-        <input is="iron-input" id="search-input" type="search"
+        <input is="iron-input" id="searchInput" type="search"
             placeholder="[[label]]" incremental>
-        <paper-icon-button icon="cr:cancel" id="clear-search"
+        <paper-icon-button icon="cr:cancel" id="clearSearch"
             on-click="toggleShowingSearch_" title="[[clearLabel]]"
             hidden$="[[!showingSearch_]]"></paper-icon-button>
       </paper-input-container>