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 61b55980dc7..1537f096b38 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')
@@ -24,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 () {
@@ -82,11 +85,15 @@ class Tabs extends ImmutableComponent {
e.preventDefault()
}
}
-
+ wasNewTabClicked (target) {
+ return target.className === this.refs.newTabButton.props.className
+ }
newTab () {
windowActions.newFrame()
}
-
+ onNewTabLongPress (target) {
+ contextMenus.onNewTabContextMenu(target)
+ }
render () {
this.tabRefs = []
const index = this.props.previewTabPageIndex !== undefined
@@ -125,10 +132,16 @@ class Tabs extends ImmutableComponent {
onClick={this.onNextPage} />
}
})()}
-
+ className='browserButton navbutton newFrameButton'
+ disabled={false}
+ onClick={this.newTab}
+ onLongPress={this.onNewTabLongPress}
+ />
}
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
}
- {
- 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)