Tab Search: Enable Close Tab button & click behavior.

Close button focus and navigation aspects to be addressed in crbug
1113470.

Bug: 1099917
Change-Id: I7f42dd62381a345eb0cf807c48d5f8eb3b79b70e
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3203733Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Tom Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819581}

chrome/browser/resources/tab_search_merge/app.html

@@ -32,7 +32,7 @@
   <iron-selector id="selector" selected="{{selectedIndex_}}" selected-class="selected">
     <template id="tabs-list" is="dom-repeat" items="[[filteredOpenTabs_]]">
       <tab-search-item id="[[item.tabId]]" data="[[item]]"
-          on-click="onItemClick_" tabindex="-1" >
+          on-click="onItemClick_" on-close="onItemClose_" tabindex="-1" >
       </tab-search-item>
     </template>
   </iron-selector>

chrome/browser/resources/tab_search_merge/app.js

@@ -133,6 +133,15 @@ export class TabSearchAppElement extends PolymerElement {
     this.apiProxy_.switchToTab({tabId});
   }
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onItemClose_(e) {
+    const tabId = Number.parseInt(e.currentTarget.id, 10);
+    this.apiProxy_.closeTab(tabId);
+  }
+
   /**
    * @param {number} index A valid index for an element present in the
    *     filteredOpenTabs_ array.
@@ -145,6 +154,7 @@ export class TabSearchAppElement extends PolymerElement {
   }
 
   /**
+   * TODO(crbug.com/1113470): Tab Search item and buttons focus and navigation.
    * @param {!KeyboardEvent} e
    * @private
    */

chrome/browser/resources/tab_search_merge/tab_search_api_proxy.js

@@ -9,6 +9,9 @@ import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
 
 /** @interface */
 export class TabSearchApiProxy {
+  /** @param {number} tabId */
+  closeTab(tabId) {}
+
   /**  @return {Promise<{profileTabs: tabSearch.mojom.ProfileTabs}>} */
   getProfileTabs() {}
 
@@ -34,6 +37,11 @@ export class TabSearchApiProxyImpl {
         this.handler.$.bindNewPipeAndPassReceiver());
   }
 
+  /** @override */
+  closeTab(tabId) {
+    this.handler.closeTab(tabId);
+  }
+
   /** @override */
   getProfileTabs() {
     return this.handler.getProfileTabs();

chrome/browser/resources/tab_search_merge/tab_search_item.html

@@ -4,15 +4,23 @@
     --horizontal-margin: 8px;
     --vertical-margin: 12px;
     align-items: center;
-    background-color:  white;
+    background-color: white;
     display: flex;
     padding: var(--vertical-margin) var(--horizontal-margin);
   }
 
-  :host-context(.selected, :host:hover) {
+  :host(:hover) {
     background-color: rgba(var(--google-grey-900-rgb), 0.1);
   }
 
+  :host(.selected) {
+    background-color: rgba(var(--google-grey-900-rgb), 0.16);
+  }
+
+  :host(:hover, .selected) .button-container {
+    display: flex;
+  }
+
   .button-container {
     display: none;
   }

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

@@ -131,6 +131,29 @@ suite('TabSearchAppTest', () => {
         'No default selection in the precense of data');
   });
 
+  test('Click on tab item triggers actions', async () => {
+    const tabData = {
+      index: 0,
+      tabId: 1,
+      favIconUrl: '',
+      title: 'Google',
+      url: 'https://www.google.com',
+    };
+    await setupTest({windows: [{active: true, tabs: [tabData]}]});
+
+    const tabSearchItem = /** @type {!HTMLElement} */
+        (tabSearchApp.shadowRoot.querySelector('tab-search-item'));
+    tabSearchItem.click();
+    const tabInfo = await testProxy.whenCalled('switchToTab');
+    assertEquals(tabData.tabId, tabInfo.tabId);
+
+    const tabSearchItemCloseButton = /** @type {!HTMLElement} */ (
+        tabSearchItem.shadowRoot.querySelector('cr-icon-button'));
+    tabSearchItemCloseButton.click();
+    const tabId = await testProxy.whenCalled('closeTab');
+    assertEquals(tabData.tabId, tabId);
+  });
+
   test('Keyboard navigation on an empty list', async () => {
     await setupTest({windows: [{active: true, tabs: []}]});
 

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

@@ -9,6 +9,7 @@ import {TestBrowserProxy} from '../../test_browser_proxy.m.js';
 export class TestTabSearchApiProxy extends TestBrowserProxy {
   constructor() {
     super([
+      'closeTab',
       'getProfileTabs',
       'switchToTab',
     ]);
@@ -24,6 +25,11 @@ export class TestTabSearchApiProxy extends TestBrowserProxy {
     this.profileTabs_;
   }
 
+  /** @override */
+  closeTab(tabId) {
+    this.methodCalled('closeTab', tabId);
+  }
+
   /** @override */
   getProfileTabs() {
     this.methodCalled('getProfileTabs');