Make new tab context menu native (#8397)

Fixes #7748

js/contextMenus.js

@@ -1339,29 +1339,15 @@ function onTabContextMenu (frameProps, e) {
 }
 
 function onNewTabContextMenu (target) {
- const rootElement = window.getComputedStyle(document.querySelector(':root'))
- const contextMenuSize = Number.parseInt(rootElement.getPropertyValue('--context-menu-single-max-width'), 10)
-
- const containerRect = target.parentNode.getBoundingClientRect()
- const rect = target.getBoundingClientRect()
-
- const contextMenuMaxVisibleWidth = rect.right + (contextMenuSize / 2)
- const contextMenuHasOverflow = contextMenuMaxVisibleWidth > containerRect.right
-
  const menuTemplate = [
  CommonMenu.newTabMenuItem(),
  CommonMenu.newPrivateTabMenuItem(),
  CommonMenu.newPartitionedTabMenuItem(),
  CommonMenu.newWindowMenuItem()
  ]
-
- windowActions.setContextMenuDetail(Immutable.fromJS({
- left: contextMenuHasOverflow
- ? contextMenuMaxVisibleWidth - contextMenuSize - rect.width
- : rect.left,
- top: rect.bottom + 2,
- template: menuTemplate
- }))
+ const menu = Menu.buildFromTemplate(menuTemplate)
+ menu.popup(getCurrentWindow())
+ menu.destroy()
 }
 
 function onTabsToolbarContextMenu (activeFrame, closestDestinationDetail, isParent, e) {

test/tab-components/tabTest.js

@@ -102,14 +102,14 @@ describe('tab tests', function () {
  .click(newFrameButton)
  .waitForExist('[data-test-id="tab"][data-frame-key="2"]')
  })
- it('shows a context menu when long pressed (click and hold)', function * () {
+ it.skip('shows a context menu when long pressed (click and hold)', function * () {
  yield this.app.client
  .moveToObject(newFrameButton)
  .buttonDown(0)
  .waitForExist('.contextMenu .contextMenuItem .contextMenuItemText')
  .buttonUp(0)
  })
- it('shows a context menu when right clicked', function * () {
+ it.skip('shows a context menu when right clicked', function * () {
  yield this.app.client
  .rightClick(newFrameButton)
  .waitForExist('.contextMenu .contextMenuItem .contextMenuItemText')