MD Settings: Fix label visibility in subpage search fields

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.
 
 Polymer({
   is: 'cr-toolbar-search-field',
 
   behaviors: [CrSearchFieldBehavior],
 
   properties: {
@@ skipping 14 matching lines @@
     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, reflectToAttribute: true},
 
     /** @private */
-    hasSearchText_: {type: Boolean, reflectToAttribute: true},
-
-    /** @private */
     isSpinnerShown_: {
       type: Boolean,
       computed: 'computeIsSpinnerShown_(spinnerActive, showingSearch)'
     },
 
     /** @private */
     searchFocused_: {type: Boolean, value: false},
   },
 
   listeners: {
     // Deliberately uses 'click' instead of 'tap' to fix crbug.com/624356.
     'click': 'showSearch_',
   },
 
   /** @return {!HTMLInputElement} */
   getSearchInput: function() {
     return this.$.searchInput;
   },
 
-  /**
-   * Sets the value of the search field. Overridden from CrSearchFieldBehavior.
-   * @param {string} value
-   * @param {boolean=} opt_noEvent Whether to prevent a 'search-changed' event
-   *     firing for this change.
-   */
-  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_();
   },
 
+  onSearchTermInput: function() {
+    CrSearchFieldBehavior.onSearchTermInput.call(this);
+    if (this.hasSearchText)

[dpapad, 2017/01/18 02:52:26]

Shouldn't we update the boolean either way?

this.showingSearch = this.hasSearchText;

[tsergeant, 2017/01/18 04:14:05]

Hmm, almost: we don't want to close the search field as soon as there's no text
in it -- otherwise, backspacing all the text away would be enough to close the
field.

However if we take focus into account, we can get the correct behavior while
fixing the bug you mention above:
this.showingSearch = this.hasSearchText || this.isSearchFocused();

+      this.showingSearch = true;
+  },
+
   /** @private */
   focus_: function() {
     this.getSearchInput().focus();
   },
 
   /**
    * @param {boolean} narrow
    * @return {number}
    * @private
    */
@@ skipping 10 matching lines @@
   },
 
   /** @private */
   onInputFocus_: function() {
     this.searchFocused_ = true;
   },
 
   /** @private */
   onInputBlur_: function() {
     this.searchFocused_ = false;
-    if (!this.hasSearchText_)
+    if (!this.hasSearchText)
       this.showingSearch = false;
   },
 
-  /**
-   * Update the state of the search field whenever the underlying input value
-   * changes. Unlike onsearch or onkeypress, this is reliably called immediately
-   * 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
    */
@@ skipping 23 matching lines @@
 
     if (this.showingSearch) {
       this.focus_();
       return;
     }
 
     this.setValue('');
     this.getSearchInput().blur();
   },
 });