Files app: Fix search button to expand and collapse search box

Use requestAnimationFrame() to change the CSS to collapsed the search
box to give the chance for the button to process the collapse at the
click.

Add a test so we don't regress on this again.

Test: browser_tests --gtest_filter="*searchButtonToggles*"
Bug: 1062148
Change-Id: I628fb0b22f0a0223d659743618e7077ff0a7007d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2112171
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751997}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -945,7 +945,8 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
                       TestCase("searchDownloadsClearSearchKeyDown"),
                       TestCase("searchDownloadsClearSearch"),
                       TestCase("searchHidingViaTab"),
-                      TestCase("searchHidingTextEntryField")));
+                      TestCase("searchHidingTextEntryField"),
+                      TestCase("searchButtonToggles")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(
     Metrics, /* metrics.js */

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

@@ -97,7 +97,9 @@ class SearchBox extends cr.EventTarget {
         return;
       }
       this.isClicking_ = false;
-      this.removeHidePending();
+      window.requestAnimationFrame(() => {
+        this.removeHidePending();
+      });
     }, {passive: true});
 
     this.searchWrapper.addEventListener(

ui/file_manager/integration_tests/file_manager/search.js

@@ -137,8 +137,7 @@
         'selectFile', appId, [entry.nameText]));
 
     // Focus the toolbar search button.
-    chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
-        'fakeEvent', appId, ['#search-button', 'click']));
+    await remoteCall.waitAndClickElement(appId, '#search-button');
 
     // Verify the toolbar search text entry box is enabled.
     let textInputElement =
@@ -178,10 +177,9 @@
         appId, '#search-wrapper', ['width']);
 
     // Click the toolbar search button.
-    chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
-        'fakeEvent', appId, ['#search-button', 'click']));
+    await remoteCall.waitAndClickElement(appId, '#search-button');
 
-    // Wait search box to be expanded.
+    // Wait search box to expand.
     const caller = getCaller();
     await repeatUntil(async () => {
       const element = await remoteCall.waitForElementStyles(
@@ -211,4 +209,43 @@
       }
     });
   };
+
+  /**
+   * Tests that the search button toggles the search box: collapses and expands.
+   */
+  testcase.searchButtonToggles = async () => {
+    const entry = ENTRIES.hello;
+
+    // Open Files app on Downloads.
+    const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS, [entry], []);
+
+    // Measure the width of the search box when it's collapsed.
+    const collapsedSearchBox = await remoteCall.waitForElementStyles(
+        appId, '#search-wrapper', ['width']);
+
+    // Click the toolbar search button.
+    await remoteCall.waitAndClickElement(appId, '#search-button');
+
+    // Wait search box to expand.
+    const caller = getCaller();
+    await repeatUntil(async () => {
+      const element = await remoteCall.waitForElementStyles(
+          appId, '#search-wrapper', ['width']);
+      if (collapsedSearchBox.renderedWidth > element.renderedWidth) {
+        return pending(caller, 'Waiting search box to expand');
+      }
+    });
+
+    // Click the toolbar search button again.
+    await remoteCall.waitAndClickElement(appId, '#search-button');
+
+    // Check: the search box should collapse.
+    await repeatUntil(async () => {
+      const element = await remoteCall.waitForElementStyles(
+          appId, '#search-wrapper', ['width']);
+      if (collapsedSearchBox.renderedWidth < element.renderedWidth) {
+        return pending(caller, 'Waiting search box to collapse');
+      }
+    });
+  };
 })();