Merge pull request #5696 from bsclifton/feat/new_tab_menu

New tab button can now show a dropdown

Author: bbondy

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

@@ -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} />
           }
         })()}
-        <Button label='+'
+
+        <LongPressButton
+          ref='newTabButton'
+          label='+'
           l10nId='newTabButton'
-          className='navbutton newFrameButton'
-          onClick={this.newTab} />
+          className='browserButton navbutton newFrameButton'
+          disabled={false}
+          onClick={this.newTab}
+          onLongPress={this.onNewTabLongPress}
+        />
       </span>
     </div>
   }

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

@@ -1248,6 +1248,21 @@ function onTabContextMenu (frameProps, e) {
   tabMenu.destroy()
 }
 
+function onNewTabContextMenu (target) {
+  const rect = target.getBoundingClientRect()
+  const menuTemplate = [
+    CommonMenu.newPrivateTabMenuItem(),
+    CommonMenu.newPartitionedTabMenuItem(),
+    CommonMenu.newWindowMenuItem()
+  ]
+
+  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 +1473,7 @@ module.exports = {
   onHamburgerMenu,
   onMainContextMenu,
   onTabContextMenu,
+  onNewTabContextMenu,
   onTabsToolbarContextMenu,
   onDownloadsToolbarContextMenu,
   onTabPageContextMenu,

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)