Files app: Fix search's clear button key down

Change search clear button from <span> to <cr-button> so it handles
the click and key down events.

Bug: 910068
Fixed: 910068
Change-Id: Ie4c19dfdfa749a502a17fbb12f873901a26acd50
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1939138
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#719874}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -832,6 +832,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
     FilesAppBrowserTest,
     ::testing::Values(TestCase("searchDownloadsWithResults"),
                       TestCase("searchDownloadsWithNoResults"),
+                      TestCase("searchDownloadsClearSearchKeyDown"),
                       TestCase("searchDownloadsClearSearch")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -704,16 +704,22 @@ body.check-select #search-box {
       url(../images/files/ui/search_clear.png) 1x,
       url(../images/files/ui/2x/search_clear.png) 2x)
       no-repeat center;
+  border: 0;
   cursor: pointer;
   display: none;
   height: 16px;
   margin: 0;
+  min-width: 0;
   position: absolute;
   right: 0;
   visibility: hidden;
   width: 16px;
 }
 
+#search-box .clear:focus {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 html[dir='rtl'] #search-box .clear {
   left: 0;
   right: auto;

ui/file_manager/file_manager/main.html

@@ -395,8 +395,8 @@
         <div id="search-box">
           <cr-input type="search" tabindex="14" hidden
               aria-label="$i18n{SEARCH_TEXT_LABEL}" placeholder="$i18n{SEARCH_TEXT_LABEL}">
-            <span class="clear" slot="suffix" tabindex="14"
-              aria-label="$i18n{SEARCH_CLEAR_LABEL}" has-tooltip></span>
+            <cr-button class="clear" slot="suffix" tabindex="14"
+              aria-label="$i18n{SEARCH_CLEAR_LABEL}" has-tooltip></cr-button>
           </cr-input>
         </div>
         <button id="refresh-button" class="icon-button menu-button" tabindex="15" hidden

ui/file_manager/integration_tests/file_manager/search.js

@@ -26,15 +26,15 @@
 
     // Focus the search box.
     chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
-        'fakeEvent', appId, ['#search-box cr-input', 'focus']));
+        'fakeEvent', appId, ['#search-box [type="search"]', 'focus']));
 
     // Input a text.
     await remoteCall.callRemoteTestUtil(
-        'inputText', appId, ['#search-box cr-input', 'hello']);
+        'inputText', appId, ['#search-box [type="search"]', 'hello']);
 
     // Notify the element of the input.
     chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
-        'fakeEvent', appId, ['#search-box cr-input', 'input']));
+        'fakeEvent', appId, ['#search-box [type="search"]', 'input']));
 
     // Wait file list to display the search result.
     await remoteCall.waitForFiles(
@@ -58,15 +58,15 @@
 
     // Focus the search box.
     chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
-        'fakeEvent', appId, ['#search-box cr-input', 'focus']));
+        'fakeEvent', appId, ['#search-box [type="search"]', 'focus']));
 
     // Input a text.
     await remoteCall.callRemoteTestUtil(
-        'inputText', appId, ['#search-box cr-input', 'INVALID TERM']);
+        'inputText', appId, ['#search-box [type="search"]', 'INVALID TERM']);
 
     // Notify the element of the input.
     chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
-        'fakeEvent', appId, ['#search-box cr-input', 'input']));
+        'fakeEvent', appId, ['#search-box [type="search"]', 'input']));
 
     // Wait file list to display no results.
     await remoteCall.waitForFiles(appId, []);
@@ -87,7 +87,7 @@
     const appId = await testcase.searchDownloadsWithResults();
 
     // Click on the clear search button.
-    await remoteCall.waitAndClickElement(appId, '#search-box cr-input .clear');
+    await remoteCall.waitAndClickElement(appId, '#search-box .clear');
 
     // Wait for fil list to display all files.
     await remoteCall.waitForFiles(
@@ -100,4 +100,25 @@
     chrome.test.assertEq(
         'Search text cleared, showing all files and folders.', a11yMessages[1]);
   };
+
+  /**
+   * Tests that clearing the search box with keydown crbug.com/910068.
+   */
+  testcase.searchDownloadsClearSearchKeyDown = async () => {
+    // Perform a normal search, to be able to clear the search box.
+    const appId = await testcase.searchDownloadsWithResults();
+
+    const clearButton = '#search-box .clear';
+    // Wait for clear button.
+    await remoteCall.waitForElement(appId, clearButton);
+
+    // Send a enter key to the clear button.
+    const enterKey = [clearButton, 'Enter', false, false, false];
+    await remoteCall.fakeKeyDown(appId, ...enterKey);
+
+    // Check: Search input field is empty.
+    const searchInput =
+        await remoteCall.waitForElement(appId, '#search-box [type="search"]');
+    chrome.test.assertEq('', searchInput.value);
+  };
 })();