Tab Strip WebUI: Add ability to close tabs

This CL also removes some accessibility features as tabs are not
focusable only through the keyboard, and overall accessibility is still
being decided on.

Bug: 989131
Change-Id: I4aae2fd35000866dca0c641ce59c93a05e191a3f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1747732Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#686215}

chrome/browser/resources/tab_strip/tab.html

@@ -76,7 +76,7 @@
 <header id="title">
   <span id="favicon"></span>
   <h2 id="titleText"></h2>
-  <button id="close" aria-label="Close tab">
+  <button id="close">
     <span id="closeIcon"></span>
   </button>
 </header>

chrome/browser/resources/tab_strip/tab.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {CustomElement} from './custom_element.js';
+import {TabsApiProxy} from './tabs_api_proxy.js';
 
 export class TabElement extends CustomElement {
   static get template() {
@@ -12,16 +13,21 @@ export class TabElement extends CustomElement {
   constructor() {
     super();
 
+    /** @private {!HTMLElement} */
+    this.closeButtonEl_ =
+        /** @type {!HTMLElement} */ (this.shadowRoot.querySelector('#close'));
+
     /** @private {!Tab} */
     this.tab_;
 
+    /** @private {!TabsApiProxy} */
+    this.tabsApi_ = TabsApiProxy.getInstance();
+
     /** @private {!HTMLElement} */
     this.titleTextEl_ = /** @type {!HTMLElement} */ (
         this.shadowRoot.querySelector('#titleText'));
-  }
 
-  connectedCallback() {
-    this.setAttribute('tabindex', 0);
+    this.closeButtonEl_.addEventListener('click', this.onClose_.bind(this));
   }
 
   /** @return {!Tab} */
@@ -40,6 +46,16 @@ export class TabElement extends CustomElement {
 
     this.tab_ = Object.freeze(tab);
   }
+
+  /** @private */
+  onClose_() {
+    // There is no tab data and therefore nothing to close
+    if (!this.tab_) {
+      return;
+    }
+
+    this.tabsApi_.closeTab(this.tab_.id);
+  }
 }
 
 customElements.define('tabstrip-tab', TabElement);

chrome/browser/resources/tab_strip/tabs_api_proxy.js

@@ -28,6 +28,16 @@ export class TabsApiProxy {
       });
     });
   }
+
+  /**
+   * @param {number} tabId
+   * @return {!Promise}
+   */
+  closeTab(tabId) {
+    return new Promise(resolve => {
+      chrome.tabs.remove(tabId, resolve);
+    });
+  }
 }
 
 addSingletonGetter(TabsApiProxy);

chrome/test/data/webui/tab_strip/tab_test.js

@@ -3,31 +3,43 @@
 // found in the LICENSE file.
 
 import 'chrome://tab-strip/tab.js';
+import {TabsApiProxy} from 'chrome://tab-strip/tabs_api_proxy.js';
+import {TestTabsApiProxy} from './test_tabs_api_proxy.js';
 
 suite('Tab', function() {
+  let testTabsApiProxy;
   let tabElement;
 
+  const tab = {
+    id: 1001,
+    title: 'My title',
+  };
+
   setup(() => {
     document.body.innerHTML = '';
 
+    testTabsApiProxy = new TestTabsApiProxy();
+    TabsApiProxy.instance_ = testTabsApiProxy;
+
     tabElement = document.createElement('tabstrip-tab');
+    tabElement.tab = tab;
     document.body.appendChild(tabElement);
   });
 
-  test('sets the tabindex', () => {
-    assertEquals(tabElement.getAttribute('tabindex'), '0');
-  });
-
   test('sets the title', () => {
-    const expectedTitle = 'My title';
-    tabElement.tab = {title: expectedTitle};
     assertEquals(
-        expectedTitle,
-        tabElement.shadowRoot.querySelector('#titleText').innerText);
+        tab.title, tabElement.shadowRoot.querySelector('#titleText').innerText);
   });
 
   test('exposes the tab ID to an attribute', () => {
     tabElement.tab = {id: 1001};
     assertEquals('1001', tabElement.getAttribute('data-tab-id'));
   });
+
+  test('closes the tab', () => {
+    tabElement.shadowRoot.querySelector('#close').click();
+    return testTabsApiProxy.whenCalled('closeTab').then(tabId => {
+      assertEquals(tabId, tab.id);
+    });
+  });
 });

chrome/test/data/webui/tab_strip/test_tabs_api_proxy.js

@@ -22,7 +22,10 @@ class EventDispatcher {
 
 export class TestTabsApiProxy extends TestBrowserProxy {
   constructor() {
-    super(['getCurrentWindow']);
+    super([
+      'closeTab',
+      'getCurrentWindow',
+    ]);
 
     this.callbackRouter = {
       onCreated: new EventDispatcher(),
@@ -33,6 +36,11 @@ export class TestTabsApiProxy extends TestBrowserProxy {
     this.currentWindow_;
   }
 
+  closeTab(tabId) {
+    this.methodCalled('closeTab', tabId);
+    return Promise.resolve();
+  }
+
   getCurrentWindow() {
     this.methodCalled('getCurrentWindow');
     return Promise.resolve(this.currentWindow_);