From 367898b580bfdc0d2dd8663b130d74982e74c090 Mon Sep 17 00:00:00 2001
From: Jan Johannes <jan@ntr.io>
Date: Fri, 30 Sep 2016 13:22:03 +0200
Subject: [PATCH 1/2] feat: show other new tab options on long click on new tab
 button

Fixes https://github.com/brave/browser-laptop/issues/4398
---
 js/components/tabs.js | 18 ++++++++++++++----
 js/contextMenus.js    | 20 ++++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/js/components/tabs.js b/js/components/tabs.js
index 61b55980dc7..be4dc890453 100644
--- a/js/components/tabs.js
+++ b/js/components/tabs.js
@@ -11,8 +11,9 @@ const windowActions = require('../actions/windowActions')
 const windowStore = require('../stores/windowStore')
 const dragTypes = require('../constants/dragTypes')
 const cx = require('../lib/classSet')
+const contextMenus = require('../contextMenus')
 
-const Button = require('./button')
+const LongPressButton = require('./longPressButton')
 const Tab = require('./tab')
 const dnd = require('../dnd')
 const dndData = require('../dndData')
@@ -87,6 +88,10 @@ class Tabs extends ImmutableComponent {
     windowActions.newFrame()
   }
 
+  onNewTabLongPress (rect) {
+    contextMenus.onNewTabContextMenu(rect)
+  }
+
   render () {
     this.tabRefs = []
     const index = this.props.previewTabPageIndex !== undefined
@@ -125,10 +130,15 @@ class Tabs extends ImmutableComponent {
               onClick={this.onNextPage} />
           }
         })()}
-        <Button label='+'
+
+        <LongPressButton
+          label='+'
           l10nId='newTabButton'
-          className='navbutton newFrameButton'
-          onClick={this.newTab} />
+          className='browserButton navbutton newFrameButton'
+          disabled={false}
+          onClick={this.newTab}
+          onLongPress={this.onNewTabLongPress}
+        />
       </span>
     </div>
   }
diff --git a/js/contextMenus.js b/js/contextMenus.js
index 522c1c694ec..48e9124c4e5 100644
--- a/js/contextMenus.js
+++ b/js/contextMenus.js
@@ -611,6 +611,15 @@ 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
@@ -1248,6 +1257,16 @@ function onTabContextMenu (frameProps, e) {
   tabMenu.destroy()
 }
 
+function onNewTabContextMenu (rect) {
+  const menuTemplate = newTabMenuTemplateInit(rect)
+
+  windowActions.setContextMenuDetail(Immutable.fromJS({
+    left: rect.left,
+    top: rect.bottom + 2,
+    template: menuTemplate
+  }))
+}
+
 function onTabsToolbarContextMenu (activeFrame, closestDestinationDetail, isParent, e) {
   e.stopPropagation()
   const tabsToolbarMenu = Menu.buildFromTemplate(tabsToolbarTemplateInit(activeFrame, closestDestinationDetail, isParent))
@@ -1458,6 +1477,7 @@ module.exports = {
   onHamburgerMenu,
   onMainContextMenu,
   onTabContextMenu,
+  onNewTabContextMenu,
   onTabsToolbarContextMenu,
   onDownloadsToolbarContextMenu,
   onTabPageContextMenu,

From 67ee2c754dec5525ea77af7a20877f7c51a89906 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Wed, 16 Nov 2016 16:18:50 -0700
Subject: [PATCH 2/2] Tweaked code from @lucidNTR and added right click to open
 to LongPressButton

Fixes https://github.com/brave/browser-laptop/issues/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
---
 js/components/longPressButton.js | 17 ++++++++++++++++-
 js/components/tabs.js            | 13 ++++++++-----
 js/components/tabsToolbar.js     |  8 +++++++-
 js/contextMenus.js               | 18 +++++++-----------
 test/about/braveTest.js          |  3 ---
 test/components/tabTest.js       | 31 ++++++++++++++++++++++++++++---
 6 files changed, 66 insertions(+), 24 deletions(-)

diff --git a/js/components/longPressButton.js b/js/components/longPressButton.js
index 2de74c58a13..751ac6658d5 100644
--- a/js/components/longPressButton.js
+++ b/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 () {
diff --git a/js/components/tabs.js b/js/components/tabs.js
index be4dc890453..1537f096b38 100644
--- a/js/components/tabs.js
+++ b/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'
diff --git a/js/components/tabsToolbar.js b/js/components/tabsToolbar.js
index cc0b4854b72..ea42d611981 100644
--- a/js/components/tabsToolbar.js
+++ b/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}
diff --git a/js/contextMenus.js b/js/contextMenus.js
index 48e9124c4e5..847cf43e679 100644
--- a/js/contextMenus.js
+++ b/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,
diff --git a/test/about/braveTest.js b/test/about/braveTest.js
index cf4ea5e2bd3..8746da0c2eb 100644
--- a/test/about/braveTest.js
+++ b/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'
             })
         })
diff --git a/test/components/tabTest.js b/test/components/tabTest.js
index 70a3684275a..2ef1e30e0dd 100644
--- a/test/components/tabTest.js
+++ b/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)