WebUI Tab Strip: Show context menu on right click

The default contextmenu event is prevented because touch drag and drop
on Windows does not interact well with the contextmenu events. Since on
Windows, a mouse can be attached to a tablet and have the UI still be
in tablet mode, a pointerup event is added to determine if a user
actually right-clicks on a tab to invoke the context menu.

Bug: 1134282
Change-Id: I92dca4d194905437b6396f42a7be1b6a272ea9e5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2447091Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814043}

chrome/browser/resources/tab_strip/tab.js

@@ -103,6 +103,9 @@ export class TabElement extends CustomElement {
     this.tabEl_.addEventListener('contextmenu', e => this.onContextMenu_(e));
     this.tabEl_.addEventListener(
         'keydown', e => this.onKeyDown_(/** @type {!KeyboardEvent} */ (e)));
+    this.tabEl_.addEventListener(
+        'pointerup', e => this.onPointerUp_(/** @type {!PointerEvent} */ (e)));
+
     this.closeButtonEl_.addEventListener('click', e => this.onClose_(e));
     this.addEventListener('swipe', () => this.onSwipe_());
 
@@ -262,6 +265,17 @@ export class TabElement extends CustomElement {
     }
   }
 
+  /**
+   * @param {!PointerEvent} event
+   * @private
+   */
+  onPointerUp_(event) {
+    if (event.pointerType !== 'touch' && event.button === 2) {
+      this.embedderApi_.showTabContextMenu(
+          this.tab.id, event.clientX, event.clientY);
+    }
+  }
+
   resetSwipe() {
     this.tabSwiper_.reset();
   }

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

@@ -457,4 +457,18 @@ suite('Tab', function() {
     assertEquals(
         Math.floor(originalAspectRatio), Math.floor(dragImageAspectRatio));
   });
+
+  test('RightClickOpensContextMenu', async () => {
+    tabElement.$('#tab').dispatchEvent(new PointerEvent('pointerup', {
+      pointerType: 'mouse',
+      button: 2,
+      clientX: 50,
+      clientY: 100,
+    }));
+    const [id, x, y] =
+        await testTabStripEmbedderProxy.whenCalled('showTabContextMenu');
+    assertEquals(tab.id, id);
+    assertEquals(50, x);
+    assertEquals(100, y);
+  });
 });