[Files app] Hide tooltip when the focus is restored to the delete icon

When clicking the 'Delete' icon, a confirmation dialog is shown.
Once closed, the dialog restores the focus to the previously active
element. In the case of the 'Delete' button, it results in the tooltip
showing again after a certain timeout.

This change hides the 'Delete' button tooltip after the dialog is
closed.

The `hideTooltip` function is extended to cancel any potential timeout
that has been initiated to show the tooltip.

Bug: 1082019
test: browser_tests --gtest_filter=*filesTooltipHidesOnDeleteDialogClosed
Change-Id: I4956174df6ad46c2a356cdb8b3985714ed3ff2de
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2483732
Auto-Submit: Jeremie Boulic <jboulic@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833604}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -895,7 +895,8 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
                       TestCase("filesTooltipMouseOver"),
                       TestCase("filesTooltipClickHides"),
                       TestCase("filesTooltipHidesOnWindowResize"),
-                      TestCase("filesCardTooltipClickHides")));
+                      TestCase("filesCardTooltipClickHides"),
+                      TestCase("filesTooltipHidesOnDeleteDialogClosed")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(
     FileList, /* file_list.js */

ui/file_manager/file_manager/foreground/elements/files_tooltip.js

@@ -102,6 +102,9 @@
    * is not dispatched. This method is used to handle these cases manually.
    */
   hideTooltip: function() {
+    if (this.showTooltipTimerId_) {
+      clearTimeout(this.showTooltipTimerId_);
+    }
     if (this.visibleTooltipTarget_) {
       this.initHidingTooltip_(this.visibleTooltipTarget_);
     }

ui/file_manager/file_manager/foreground/js/file_manager_commands.js

@@ -1129,10 +1129,15 @@ CommandHandler.COMMANDS_['delete'] = new class extends Command {
       dialog.showModalElement();
     }
 
-    dialog.show(message, () => {
+    const deleteCallback = () => {
       dialog.doneCallback && dialog.doneCallback();
+      document.querySelector('files-tooltip').hideTooltip();
+    };
+
+    dialog.show(message, () => {
+      deleteCallback();
       fileManager.fileOperationManager.deleteEntries(entries);
-    }, dialog.doneCallback, null);
+    }, deleteCallback, null);
   }
 
   /**

ui/file_manager/integration_tests/file_manager/files_tooltip.js

@@ -13,6 +13,9 @@
       '#read-only-indicator[has-tooltip][show-card-tooltip]';
   const fileList = '#file-list';
   const cancelButton = '#cancel-selection-button[has-tooltip]';
+  const deleteButton = '#delete-button[has-tooltip]';
+
+  const tooltipShowTimeout = 500;  // ms
 
   /**
    * $i18n{} labels used when template replacement is disabled.
@@ -259,4 +262,58 @@
     // The tooltip should be hidden.
     await remoteCall.waitForElement(appId, tooltipQueryHidden);
   };
+
+  /**
+   * Tests that the tooltip is hidden after the 'Delete' confirmation dialog is
+   * closed.
+   */
+  testcase.filesTooltipHidesOnDeleteDialogClosed = async () => {
+    const appId = await setupAndWaitUntilReady(
+        RootPath.DOWNLOADS, [ENTRIES.beautiful, ENTRIES.photos], []);
+
+    const fileListItemQuery = '#file-list li[file-name="Beautiful Song.ogg"]';
+    const okButtonQuery = '.cr-dialog-ok';
+    const cancelButtonQuery = '.cr-dialog-cancel';
+
+    // The tooltip should be hidden.
+    await remoteCall.waitForElement(appId, tooltipQueryHidden);
+
+    // Select file.
+    await remoteCall.waitAndClickElement(appId, [fileListItemQuery]);
+
+    // Focus delete button.
+    chrome.test.assertTrue(
+        await remoteCall.callRemoteTestUtil('focus', appId, [deleteButton]));
+
+    // Click delete button.
+    await remoteCall.waitAndClickElement(appId, [deleteButton]);
+
+    // Cancel deletion by clicking 'Cancel'.
+    await remoteCall.waitAndClickElement(appId, [cancelButtonQuery]);
+
+    // Leave time for tooltip to show.
+    await wait(tooltipShowTimeout);
+
+    // The tooltip should still be hidden.
+    await remoteCall.waitForElement(appId, tooltipQueryHidden);
+
+    // Select file.
+    await remoteCall.waitAndClickElement(appId, [fileListItemQuery]);
+
+    // Focus delete button.
+    chrome.test.assertTrue(
+        await remoteCall.callRemoteTestUtil('focus', appId, [deleteButton]));
+
+    // Click the delete button.
+    await remoteCall.waitAndClickElement(appId, [deleteButton]);
+
+    // Confirm deletion by clicking 'Delete'.
+    await remoteCall.waitAndClickElement(appId, [okButtonQuery]);
+
+    // Leave time for tooltip to show.
+    await wait(tooltipShowTimeout);
+
+    // The tooltip should be hidden.
+    await remoteCall.waitForElement(appId, tooltipQueryHidden);
+  };
 })();