MD WebUI: Delete cr-search-field, simplify CrSearchFieldBehavior

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js

 // 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.
 
-// TODO(tsergeant): Add tests for cr-toolbar-search-field.
 Polymer({
   is: 'cr-toolbar-search-field',
 
   behaviors: [CrSearchFieldBehavior],

[dpapad, 2016/12/13 20:02:58]

After this CL, I don't think there is any other usage of CrSearchFieldBehavior.
Is there a benefit of maintaining that separation?

Can we simply remove the behavior and move the logic here (so that it is all in
one place)?

[tsergeant, 2016/12/14 00:05:55]

<settings-subpage-search> uses it in a pretty basic way. I'm unsure whether it's
worth keeping the behavior for that, or whether we should split the two apart.

[dpapad, 2016/12/14 03:07:07]

I see. I guess we can evaluate this separately after this CL lands.

 
   properties: {
     narrow: {
       type: Boolean,
       reflectToAttribute: true,
     },
 
+    showingSearch: {
+      type: Boolean,
+      value: false,
+      notify: true,
+      observer: 'showingSearchChanged_',
+      reflectToAttribute: true
+    },
+
     // Prompt text to display in the search field.
     label: String,
 
     // Tooltip to display on the clear search button.
     clearLabel: String,
 
     // When true, show a loading spinner to indicate that the backend is
     // processing the search. Will only show if the search field is open.
     spinnerActive: {
       type: Boolean,
@@ skipping 38 matching lines @@
   setValue: function(value, opt_noEvent) {
     CrSearchFieldBehavior.setValue.call(this, value, opt_noEvent);
     this.onSearchInput_();
   },
 
   /** @return {boolean} */
   isSearchFocused: function() {
     return this.searchFocused_;
   },
 
+  showAndFocus: function() {
+    this.showingSearch = true;
+    this.focus_();
+  },
+
+  /** @private */
+  focus_: function() {
+    this.getSearchInput().focus();
+  },
+
   /**
    * @param {boolean} narrow
    * @return {number}
    * @private
    */
   computeIconTabIndex_: function(narrow) {
     return narrow ? 0 : -1;
   },
 
   /**
@@ skipping 22 matching lines @@
    * after any change, whether the result of user input or JS modification.
    * @private
    */
   onSearchInput_: function() {
     var newValue = this.$.searchInput.value;
     this.hasSearchText_ = newValue != '';
     if (newValue != '')
       this.showingSearch = true;
   },
 
+  /** @private */
+  onSearchTermKeydown_: function(e) {
+    if (e.key == 'Escape')
+      this.showingSearch = false;
+  },
+
   /**
    * @param {Event} e
    * @private
    */
   showSearch_: function(e) {
     if (e.target != this.$.clearSearch)
       this.showingSearch = true;
   },
 
   /**
    * @param {Event} e
    * @private
    */
   clearSearch_: function(e) {
     this.setValue('');
     this.getSearchInput().focus();

[dpapad, 2016/12/13 20:02:58]

Nit: Re-use
this.focus_();

[tsergeant, 2016/12/14 00:05:55]

Done.

-  }
+  },
+
+  /**
+   * @param {boolean} current
+   * @param {boolean|undefined} previous
+   * @private
+   */
+  showingSearchChanged_: function(current, previous) {
+    // Prevent unnecessary 'search-changed' event from firing on startup.
+    if (previous == undefined)
+      return;
+
+    if (this.showingSearch) {
+      this.focus_();
+      return;
+    }
+
+    this.setValue('');
+    this.getSearchInput().blur();
+  },
 });