Tab Search: Close dialog support

Depends on CL:
https://chromium-review.googlesource.com/c/chromium/src/+/2414513

Bug: 1128653
Change-Id: I7c5c978a08279dba77db0d28914af345d06d9d99
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3281181Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Tom Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819612}

chrome/browser/resources/tab_search_merge/app.js

@@ -80,6 +80,9 @@ export class TabSearchAppElement extends PolymerElement {
   /** @override */
   ready() {
     super.ready();
+    this.addEventListener(
+        'keydown',
+        (e) => {this.onKeyDown_(/** @type {!KeyboardEvent} **/ (e))});
 
     // TODO(tluk): The listener should provide the data needed to update the
     // WebUI without having to make another round trip request to the Browser.
@@ -267,8 +270,6 @@ export class TabSearchAppElement extends PolymerElement {
       return;
     }
 
-    e.stopPropagation();
-
     if (this.getSelectedIndex() === -1) {
       // No tabs matching the search text criteria.
       return;
@@ -279,11 +280,13 @@ export class TabSearchAppElement extends PolymerElement {
       /** @type {!HTMLElement} */ (this.$.selector.selectedItem).focus({
         preventScroll: true
       });
+      e.stopPropagation();
       e.preventDefault();
     } else if (e.key === 'Enter' || e.key === ' ') {
       const selectedItem = this.filteredOpenTabs_[this.getSelectedIndex()];
       this.apiProxy_.switchToTab(
           {tabId: selectedItem.tabId}, !!this.searchText_);
+      e.stopPropagation();
     }
   }
 
@@ -295,6 +298,18 @@ export class TabSearchAppElement extends PolymerElement {
     }
   }
 
+  /**
+   * @param {!KeyboardEvent} e
+   * @private
+   */
+  onKeyDown_(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      e.preventDefault();
+      this.apiProxy_.closeUI();
+    }
+  }
+
   /**
    * Handles key events when the search field has focus.
    * @param {!KeyboardEvent} e
@@ -306,8 +321,6 @@ export class TabSearchAppElement extends PolymerElement {
       return;
     }
 
-    e.stopPropagation();
-
     if (this.getSelectedIndex() === -1) {
       // No tabs matching the search text criteria.
       return;
@@ -316,6 +329,7 @@ export class TabSearchAppElement extends PolymerElement {
     if (selectorNavigationKeys.includes(e.key)) {
       this.selectorNavigate_(e.key);
       this.updateScrollView_();
+      e.stopPropagation();
       e.preventDefault();
 
       // For some reasons setting combobox/aria-activedescendant on tab-search-search-field
@@ -326,6 +340,7 @@ export class TabSearchAppElement extends PolymerElement {
       const selectedItem = this.filteredOpenTabs_[this.getSelectedIndex()];
       this.apiProxy_.switchToTab(
           {tabId: selectedItem.tabId}, !!this.searchText_);
+      e.stopPropagation();
     }
   }
 

chrome/browser/resources/tab_search_merge/tab_search_api_proxy.js

@@ -38,6 +38,8 @@ export class TabSearchApiProxy {
   getCallbackRouter() {}
 
   showUI() {}
+
+  closeUI() {}
 }
 
 /** @implements {TabSearchApiProxy} */
@@ -89,6 +91,11 @@ export class TabSearchApiProxyImpl {
   showUI() {
     this.handler.showUI();
   }
+
+  /** @override */
+  closeUI() {
+    this.handler.closeUI();
+  }
 }
 
 addSingletonGetter(TabSearchApiProxyImpl);

chrome/browser/resources/tab_search_merge/test/tab_search_app_test.js

@@ -355,4 +355,21 @@ suite('TabSearchAppTest', () => {
     await setupTest({windows: [{active: true, tabs}]});
     verifyTabIds(queryRows(), [2, 3, 1]);
   });
+
+  test('Escape key triggers close UI API', async () => {
+    await setupTest(sampleData());
+
+    const elements = [
+      tabSearchApp.shadowRoot.querySelector('#searchField'),
+      tabSearchApp.shadowRoot.querySelector('#tabs'),
+      tabSearchApp.shadowRoot.querySelector('tab-search-item'),
+      tabSearchApp.shadowRoot.querySelector('#feedback-footer'),
+    ];
+
+    for (const element of elements) {
+      keyDownOn(element, 0, [], 'Escape');
+    }
+
+    assertEquals(4, testProxy.getCallCount('closeUI'));
+  });
 });

chrome/browser/resources/tab_search_merge/test/test_tab_search_api_proxy.js

@@ -14,6 +14,7 @@ export class TestTabSearchApiProxy extends TestBrowserProxy {
       'showFeedbackPage',
       'switchToTab',
       'showUI',
+      'closeUI',
     ]);
 
     /** @type {!tabSearch.mojom.PageCallbackRouter} */
@@ -53,6 +54,11 @@ export class TestTabSearchApiProxy extends TestBrowserProxy {
     this.methodCalled('showUI');
   }
 
+  /** @override */
+  closeUI() {
+    this.methodCalled('closeUI');
+  }
+
   /** @override */
   getCallbackRouter() {
     return this.callbackRouter;