MD WebUI: Add shared cr-toolbar element

ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js

Index: ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js
diff --git a/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js b/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js
similarity index 56%
copy from ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js
copy to ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js
index a507fc34f663939c5889c21c3a7455d533265b6d..7e3b8bf8f74478645a69f5905f40214dcc6460c6 100644
--- a/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js
+++ b/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js
@@ -1,4 +1,4 @@
-// Copyright 2015 The Chromium Authors. All rights reserved.
+// Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -12,9 +12,12 @@ SearchFieldDelegate.prototype = {
   onSearchTermSearch: assertNotReached,
 };
 
-var SearchField = Polymer({
-  is: 'cr-search-field',
-
+/**
+ * Implements an incremental search field which can be shown and hidden.
+ * Canonical implementation is <cr-search-field>.
+ * @polymerBehavior
+ */
+var CrSearchFieldBehavior = {
   properties: {
     label: {
       type: String,
@@ -26,20 +29,22 @@ var SearchField = Polymer({
       value: '',
     },
 
-    showingSearch_: {
+    showingSearch: {
       type: Boolean,
       value: false,
+      notify: true,
       observer: 'showingSearchChanged_',
+      reflectToAttribute: true
     },
+
+    hasSearchText: Boolean,
   },
 
   /**
-   * Returns the value of the search field.
-   * @return {string}
+   * @return {string} The value of the search field.
    */
   getValue: function() {
-    var searchInput = this.getSearchInput_();
-    return searchInput ? searchInput.value : '';
+    return this.$.searchInput.value;
   },
 
   /**
@@ -47,9 +52,10 @@ var SearchField = Polymer({
    * @param {string} value
    */
   setValue: function(value) {
-    var searchInput = this.getSearchInput_();
-    if (searchInput)
-      searchInput.value = value;
+    // Use bindValue when setting the input value so that changes propagate
+    // correctly.
+    this.$.searchInput.bindValue = value;
+    this.hasSearchText = value != '';
   },
 
   /** @param {SearchFieldDelegate} delegate */
@@ -57,66 +63,54 @@ var SearchField = Polymer({
     this.delegate_ = delegate;
   },
 
-  /** @return {Promise<boolean>} */
+  /** @return {!Promise<boolean>} */
   showAndFocus: function() {
-    this.showingSearch_ = true;
+    this.showingSearch = true;
     return this.focus_();
   },
 
   /**
-   * @return {Promise<boolean>}
+   * @return {!Promise<boolean>}
    * @private
    */
   focus_: function() {
     return new Promise(function(resolve) {
       this.async(function() {
-        if (this.showingSearch_) {
-          var searchInput = this.getSearchInput_();
-          if (searchInput)
-            searchInput.focus();
+        if (this.showingSearch) {
+          this.$.searchInput.focus();
         }
-        resolve(this.showingSearch_);
+        resolve(this.showingSearch);
       });
     }.bind(this));
   },
 
-  /**
-   * @return {?Element}
-   * @private
-   */
-  getSearchInput_: function() {
-    return this.$$('#search-input');
-  },
-
   /** @private */
   onSearchTermSearch_: function() {
+    this.hasSearchText = this.getValue() != '';
     if (this.delegate_)
       this.delegate_.onSearchTermSearch(this.getValue());
   },
 
   /** @private */
   onSearchTermKeydown_: function(e) {
-    if (e.keyIdentifier == 'U+001B')  // Escape.
-      this.showingSearch_ = false;
+    if (e.key == 'Escape')
+      this.showingSearch = false;
   },
 
   /** @private */
   showingSearchChanged_: function() {
-    if (this.showingSearch_) {
+    if (this.showingSearch) {
       this.focus_();
       return;
     }
 
-    var searchInput = this.getSearchInput_();
-    if (!searchInput)
-      return;
-
-    searchInput.value = '';
+    this.setValue('');
+    this.$.searchInput.blur();
     this.onSearchTermSearch_();
   },
 
   /** @private */
   toggleShowingSearch_: function() {
-    this.showingSearch_ = !this.showingSearch_;
+    this.showingSearch = !this.showingSearch;
   },
-});
+};