Tweaked code from @lucidNTR and added right click to open to LongPressButton

Fixes #1594

Auditors: @lucidNTR, @cezaraugusto, @jkup

Test Plan:
1. Launch Brave and right click the new tab button "+"
2. Verify that it shows New Private / New Session / New Window
3. Cancel the menu and then click and hold the new tab button "+"
4. After ~300ms, the menu should show up
5. Cancel the menu again and navigate to Brave.com.
6. Follow a few links so that you have a history, then hit back button.
7. Confirm you can right click both the back/forward buttons to show the menu
8. Cancel the menu and then click and hold each button to confirm the existing behavior works

Author: bsclifton

js/components/longPressButton.js

@@ -19,11 +19,24 @@ class LongPressButton extends ImmutableComponent {
     if (e.target.attributes.getNamedItem('disabled')) {
       return
     }
+    if (e && e.preventDefault) {
+      e.preventDefault()
+    }
+    if (e && e.stopPropagation) {
+      e.stopPropagation()
+    }
 
     const self = this
     const target = e.target
     const LONG_PRESS_MILLISECONDS = 300
 
+    // Right click should immediately trigger the action
+    if (e.button === 2) {
+      self.props.onLongPress(target)
+      return
+    }
+
+    // Otherwise, it should wait before triggering
     this.longPressTimer = setTimeout(function () {
       self.isLocked = true
       self.props.onLongPress(target)
@@ -49,7 +62,9 @@ class LongPressButton extends ImmutableComponent {
       this.isLocked = false
       return
     }
-    this.props.onClick(e)
+    if (this.props.onClick) {
+      this.props.onClick(e)
+    }
   }
 
   render () {

js/components/tabs.js

@@ -25,6 +25,8 @@ class Tabs extends ImmutableComponent {
     this.onDrop = this.onDrop.bind(this)
     this.onPrevPage = this.onPrevPage.bind(this)
     this.onNextPage = this.onNextPage.bind(this)
+    this.onNewTabLongPress = this.onNewTabLongPress.bind(this)
+    this.wasNewTabClicked = this.wasNewTabClicked.bind(this)
   }
 
   onPrevPage () {
@@ -83,15 +85,15 @@ class Tabs extends ImmutableComponent {
       e.preventDefault()
     }
   }
-
+  wasNewTabClicked (target) {
+    return target.className === this.refs.newTabButton.props.className
+  }
   newTab () {
     windowActions.newFrame()
   }
-
-  onNewTabLongPress (rect) {
-    contextMenus.onNewTabContextMenu(rect)
+  onNewTabLongPress (target) {
+    contextMenus.onNewTabContextMenu(target)
   }
-
   render () {
     this.tabRefs = []
     const index = this.props.previewTabPageIndex !== undefined
@@ -132,6 +134,7 @@ class Tabs extends ImmutableComponent {
         })()}
 
         <LongPressButton
+          ref='newTabButton'
           label='+'
           l10nId='newTabButton'
           className='browserButton navbutton newFrameButton'

js/components/tabsToolbar.js

@@ -26,6 +26,10 @@ class TabsToolbar extends ImmutableComponent {
   }
 
   onContextMenu (e) {
+    if (this.refs.tabs.wasNewTabClicked(e.target)) {
+      // Don't show the tabs menu if the new tab "+"" was clicked
+      return
+    }
     contextMenus.onTabsToolbarContextMenu(windowStore.getFrame(this.props.activeFrameKey), undefined, undefined, e)
   }
 
@@ -51,7 +55,9 @@ class TabsToolbar extends ImmutableComponent {
           />
         : null
       }
-      <Tabs tabs={unpinnedTabs}
+      <Tabs
+        ref='tabs'
+        tabs={unpinnedTabs}
         shouldAllowWindowDrag={this.props.shouldAllowWindowDrag}
         draggingOverData={this.props.draggingOverData}
         paintTabs={this.props.paintTabs}

js/contextMenus.js

@@ -611,15 +611,6 @@ function getMisspelledSuggestions (selection, isMisspelled, suggestions) {
   return items
 }
 
-function newTabMenuTemplateInit (location, e) {
-  const template = [
-    CommonMenu.newPrivateTabMenuItem(),
-    CommonMenu.newPartitionedTabMenuItem(),
-    CommonMenu.newWindowMenuItem()
-  ]
-  return template
-}
-
 function getEditableItems (selection, editFlags) {
   const hasSelection = selection.length > 0
   const hasClipboard = clipboard.readText().length > 0
@@ -1257,8 +1248,13 @@ function onTabContextMenu (frameProps, e) {
   tabMenu.destroy()
 }
 
-function onNewTabContextMenu (rect) {
-  const menuTemplate = newTabMenuTemplateInit(rect)
+function onNewTabContextMenu (target) {
+  const rect = target.getBoundingClientRect()
+  const menuTemplate = [
+    CommonMenu.newPrivateTabMenuItem(),
+    CommonMenu.newPartitionedTabMenuItem(),
+    CommonMenu.newWindowMenuItem()
+  ]
 
   windowActions.setContextMenuDetail(Immutable.fromJS({
     left: rect.left,

test/about/braveTest.js

@@ -23,7 +23,6 @@ describe('about:brave tests', function () {
         .waitUntil(function () {
           return this.getText('table.sortableTable td[data-sort="Brave"]')
             .then((textValue) => {
-              console.log(textValue)
               return textValue && String(textValue).length > 0 && String(textValue) !== 'null'
             })
         })
@@ -33,7 +32,6 @@ describe('about:brave tests', function () {
         .waitUntil(function () {
           return this.getText('table.sortableTable td[data-sort="Muon"]')
             .then((textValue) => {
-              console.log(textValue)
               return textValue && String(textValue).length > 0 && String(textValue) !== 'null'
             })
         })
@@ -43,7 +41,6 @@ describe('about:brave tests', function () {
         .waitUntil(function () {
           return this.getText('table.sortableTable td[data-sort="Update Channel"]')
             .then((textValue) => {
-              console.log(textValue)
               return textValue && String(textValue).length > 0 && String(textValue) !== 'null'
             })
         })

test/components/tabTest.js

@@ -1,11 +1,11 @@
-/* global describe, it, before */
+/* global describe, it, before, beforeEach */
 
 const Brave = require('../lib/brave')
 const messages = require('../../js/constants/messages')
 const settings = require('../../js/constants/settings')
-const {urlInput, backButton, forwardButton, activeTabTitle} = require('../lib/selectors')
+const {urlInput, backButton, forwardButton, activeTabTitle, newFrameButton} = require('../lib/selectors')
 
-describe('tabs', function () {
+describe('tab tests', function () {
   function * setup (client) {
     yield client
       .waitForUrl(Brave.newTabUrl)
@@ -73,6 +73,31 @@ describe('tabs', function () {
     })
   })
 
+  describe('new tab button', function () {
+    Brave.beforeEach(this)
+    beforeEach(function * () {
+      yield setup(this.app.client)
+    })
+
+    it('creates a new tab when clicked', function * () {
+      yield this.app.client
+        .click(newFrameButton)
+        .waitForExist('.tab[data-frame-key="2"]')
+    })
+    it('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 * () {
+      yield this.app.client
+        .rightClick(newFrameButton)
+        .waitForExist('.contextMenu .contextMenuItem .contextMenuItemText')
+    })
+  })
+
   describe('tab order', function () {
     describe('sequentially by default', function () {
       Brave.beforeAll(this)