Propagate search-box classes to search wrapper

Reflects the classes applied to the search box up to the wrapper element
around the search button and search box as a prerequisite for styling
the wrapper itself.

Bug: 992823
Change-Id: I41d91a06f456c9f9bc27524fa61a3a1388decf7f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2054473Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#741401}

ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js

@@ -168,6 +168,7 @@ class FileManagerUI {
      */
     this.searchBox = new SearchBox(
         queryRequiredElement('#search-box', this.element),
+        queryRequiredElement('#search-wrapper', this.element),
         queryRequiredElement('#search-button', this.element));
     // Add a listener to the containing action bar for hiding the search box.
     this.actionbar.addEventListener('click', (event) => {

ui/file_manager/file_manager/foreground/js/ui/search_box.js

@@ -8,9 +8,10 @@
 class SearchBox extends cr.EventTarget {
   /**
    * @param {!Element} element Root element of the search box.
+   * @param {!Element} searchWrapper Wrapper element around the buttons and box.
    * @param {!Element} searchButton Search button.
    */
-  constructor(element, searchButton) {
+  constructor(element, searchWrapper, searchButton) {
     super();
 
     /**
@@ -26,6 +27,12 @@ class SearchBox extends cr.EventTarget {
      */
     this.element = element;
 
+    /**
+     * Search wrapper.
+     * @type {!Element}
+     */
+    this.searchWrapper = searchWrapper;
+
     /**
      * Search button.
      * @type {!Element}
@@ -112,6 +119,7 @@ class SearchBox extends cr.EventTarget {
       return;
     }
     this.element.classList.toggle('has-cursor', true);
+    this.searchWrapper.classList.toggle('has-cursor', true);
     this.autocompleteList.attachToInput(this.inputElement);
     this.updateStyles_();
     this.searchButtonToggleRipple_.activated = true;
@@ -125,6 +133,8 @@ class SearchBox extends cr.EventTarget {
   onBlur_() {
     this.element.classList.toggle('has-cursor', false);
     this.element.classList.toggle('hide-pending', true);
+    this.searchWrapper.classList.toggle('has-cursor', false);
+    this.searchWrapper.classList.toggle('hide-pending', true);
     this.autocompleteList.detach();
     this.updateStyles_();
     this.searchButtonToggleRipple_.activated = false;
@@ -139,11 +149,13 @@ class SearchBox extends cr.EventTarget {
       // If the search box was waiting to hide, but we clicked on it, don't.
       if (event.target === this.inputElement) {
         this.element.classList.toggle('hide-pending', false);
+        this.searchWrapper.classList.toggle('hide-pending', false);
         this.onFocus_();
       } else {
         // When input has any text we keep it displayed with current search.
         this.inputElement.disabled = this.inputElement.value.length == 0;
         this.element.classList.toggle('hide-pending', false);
+        this.searchWrapper.classList.toggle('hide-pending', false);
       }
     }
   }
@@ -164,6 +176,7 @@ class SearchBox extends cr.EventTarget {
     this.inputElement.blur();
     this.inputElement.disabled = this.inputElement.value.length == 0;
     this.element.classList.toggle('hide-pending', false);
+    this.searchWrapper.classList.toggle('hide-pending', false);
   }
 
   /**