Fix middle click support

Fix #7144

Fix #7185

Auditors: @bsclifton

auxclick is a new event in C55 and up, click is no longer fired for non primary buttons.  Unfortunately React doens't have support yet so I had to do it via componentDidUpdate and access to the DOM node.

app/renderer/components/bookmarksToolbar.js

@@ -32,9 +32,15 @@ class BookmarkToolbarButton extends ImmutableComponent {
     this.onDragOver = this.onDragOver.bind(this)
     this.onContextMenu = this.onContextMenu.bind(this)
   }
+  componentDidMount () {
+    this.bookmarkNode.addEventListener('auxclick', this.onAuxClick.bind(this))
+  }
   get activeFrame () {
     return windowStore.getFrame(this.props.activeFrameKey)
   }
+  onAuxClick (e) {
+    this.onClick(e)
+  }
   onClick (e) {
     if (!this.props.clickBookmarkItem(this.props.bookmark, e) &&
         this.props.bookmark.get('tags').includes(siteTags.BOOKMARK_FOLDER)) {

app/renderer/components/urlBarSuggestionItem.js

@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const suggestionTypes = require('../../../js/constants/suggestionTypes')
+const cx = require('../../../js/lib/classSet')
+
+class UrlBarSuggestionItem extends ImmutableComponent {
+  componentDidMount () {
+    this.node.addEventListener('auxclick', this.props.onClick)
+  }
+  componentWillUpdate (nextProps) {
+    if (!this.props.selected && nextProps.selected) {
+      this.node.scrollIntoView()
+    }
+  }
+  render () {
+    return <li data-index={this.props.currentIndex}
+      onMouseOver={this.props.onMouseOver.bind(this)}
+      onClick={this.props.onClick}
+      key={`${this.props.suggestion.location}|${this.props.currentIndex + this.props.i}`}
+      ref={(node) => { this.node = node }}
+      className={cx({
+        selected: this.props.selected,
+        suggestionItem: true,
+        [this.props.suggestion.type]: true
+      })}>
+      {
+        this.props.suggestion.type !== suggestionTypes.TOP_SITE && this.props.suggestion.title
+        ? <div className='suggestionTitle'>{this.props.suggestion.title}</div>
+        : null
+      }
+      {
+        this.props.suggestion.type !== suggestionTypes.SEARCH && this.props.suggestion.type !== suggestionTypes.ABOUT_PAGES
+        ? <div className='suggestionLocation'>{this.props.suggestion.location}</div>
+        : null
+      }
+    </li>
+  }
+}
+
+module.exports = UrlBarSuggestionItem

app/renderer/components/urlBarSuggestions.js

@@ -3,10 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-
-const windowActions = require('../../../js/actions/windowActions')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
 
+const UrlBarSuggestionItem = require('./urlBarSuggestionItem')
+const windowActions = require('../../../js/actions/windowActions')
 const suggestionTypes = require('../../../js/constants/suggestionTypes')
 const cx = require('../../../js/lib/classSet')
 const locale = require('../../../js/l10n')
@@ -16,6 +16,7 @@ class UrlBarSuggestions extends ImmutableComponent {
   constructor () {
     super()
     this.onSuggestionClicked = this.onSuggestionClicked.bind(this)
+    this.onMouseOver = this.onMouseOver.bind(this)
   }
 
   get activeIndex () {
@@ -63,27 +64,13 @@ class UrlBarSuggestions extends ImmutableComponent {
       items = items.concat(suggestions.map((suggestion, i) => {
         const currentIndex = index + i
         const selected = this.activeIndex === currentIndex || (!this.activeIndex && currentIndex === 0 && this.props.hasLocationValueSuffix)
-        return <li data-index={currentIndex}
-          onMouseOver={this.onMouseOver.bind(this)}
-          onClick={this.onSuggestionClicked}
-          key={`${suggestion.location}|${index + i}`}
-          ref={(node) => { selected && (this.selectedElement = node) }}
-          className={cx({
-            selected,
-            suggestionItem: true,
-            [suggestion.type]: true
-          })}>
-          {
-            suggestion.type !== suggestionTypes.TOP_SITE && suggestion.title
-            ? <div className='suggestionTitle'>{suggestion.title}</div>
-            : null
-          }
-          {
-            suggestion.type !== suggestionTypes.SEARCH && suggestion.type !== suggestionTypes.ABOUT_PAGES
-            ? <div className='suggestionLocation'>{suggestion.location}</div>
-            : null
-          }
-        </li>
+        return <UrlBarSuggestionItem
+          suggestion={suggestion}
+          selected={selected}
+          currentIndex={currentIndex}
+          i={i}
+          onMouseOver={this.onMouseOver}
+          onClick={this.onSuggestionClicked} />
       }))
       index += suggestions.size
     }
@@ -109,12 +96,6 @@ class UrlBarSuggestions extends ImmutableComponent {
   componentDidMount () {
   }
 
-  componentWillUpdate (nextProps) {
-    if (this.selectedElement) {
-      this.selectedElement.scrollIntoView()
-    }
-  }
-
   updateSuggestions (newIndex) {
     const suggestions = this.suggestionList || this.props.suggestionList
     if (!suggestions) {

js/components/contextMenu.js

@@ -13,6 +13,11 @@ const separatorMenuItem = require('../../app/common/commonMenu').separatorMenuIt
 const keyCodes = require('../../app/common/constants/keyCodes')
 
 class ContextMenuItem extends ImmutableComponent {
+  componentDidMount () {
+    if (this.node) {
+      this.node.addEventListener('auxclick', this.onAuxClick.bind(this))
+    }
+  }
   get submenu () {
     return this.props.contextMenuItem.get('submenu')
   }
@@ -65,6 +70,9 @@ class ContextMenuItem extends ImmutableComponent {
     }
     windowActions.setContextMenuDetail()
   }
+  onAuxClick (e) {
+    this.onClick(this.props.contextMenuItem.get('click'), true, e)
+  }
 
   onMouseEnter (e) {
     let openedSubmenuDetails = this.props.contextMenuDetail.get('openedSubmenuDetails')
@@ -156,6 +164,7 @@ class ContextMenuItem extends ImmutableComponent {
     }
 
     return <div {...props}
+      ref={(node) => { this.node = node }}
       draggable={this.props.contextMenuItem.get('draggable')}
       onDragStart={this.onDragStart.bind(this)}
       onDragEnd={this.onDragEnd.bind(this)}

js/components/longPressButton.js

@@ -15,6 +15,10 @@ class LongPressButton extends ImmutableComponent {
     this.onMouseLeave = this.onMouseLeave.bind(this)
   }
 
+  componentDidMount (e) {
+    this.buttonNode.addEventListener('auxclick', this.onAuxClick.bind(this))
+  }
+
   onMouseDown (e) {
     if (e.target.attributes.getNamedItem('disabled')) {
       return
@@ -67,11 +71,16 @@ class LongPressButton extends ImmutableComponent {
     }
   }
 
+  onAuxClick (e) {
+    this.onClick(e)
+  }
+
   render () {
     return <button data-l10n-id={this.props.l10nId}
       className={this.props.className}
       disabled={this.props.disabled}
       onClick={this.onClick}
+      ref={(node) => { this.buttonNode = node }}
       onMouseDown={this.onMouseDown}
       onMouseUp={this.onMouseUp}
       onMouseLeave={this.onMouseLeave} />

js/components/tab.js

@@ -154,15 +154,16 @@ class Tab extends ImmutableComponent {
     windowActions.setTabHoverState(this.frame, true)
   }
 
-  onClickTab (e) {
-    // Middle click should close tab
+  onAuxClick (e) {
     if (e.button === 1) {
       this.onTabClosedWithMouse(e)
-    } else {
-      this.setActiveFrame(e)
     }
   }
 
+  onClickTab (e) {
+    this.setActiveFrame(e)
+  }
+
   get themeColor () {
     return this.props.paintTabs &&
     (this.props.tab.get('themeColor') || this.props.tab.get('computedThemeColor'))
@@ -203,6 +204,7 @@ class Tab extends ImmutableComponent {
 
   componentDidMount () {
     this.onUpdateTabSize()
+    this.tabNode.addEventListener('auxclick', this.onAuxClick.bind(this))
     window.addEventListener('resize', throttle(this.onUpdateTabSize, tabUpdateFrameRate))
   }
 

test/unit/app/renderer/components/urlBarSuggestionItemTest.js

@@ -0,0 +1,83 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* global describe, before, after, it */
+
+const mockery = require('mockery')
+const {mount} = require('enzyme')
+const assert = require('assert')
+const sinon = require('sinon')
+const fakeElectron = require('../../../lib/fakeElectron')
+const suggestionTypes = require('../../../../../js/constants/suggestionTypes')
+let UrlBarSuggestionItem
+require('../../../braveUnit')
+
+describe('UrlBarSuggestionItem component', function () {
+  before(function () {
+    mockery.enable({
+      warnOnReplace: false,
+      warnOnUnregistered: false,
+      useCleanCache: true
+    })
+    mockery.registerMock('electron', fakeElectron)
+    UrlBarSuggestionItem = require('../../../../../app/renderer/components/urlBarSuggestionItem')
+  })
+  after(function () {
+    mockery.disable()
+  })
+
+  Object.values(suggestionTypes).forEach((suggestionType) => {
+    describe(`${suggestionType} suggestion item`, function () {
+      before(function () {
+        this.onMouseOver = sinon.spy()
+        this.onSuggestionClicked = sinon.spy()
+        this.suggestion = {
+          title: 'hello',
+          type: suggestionType,
+          location: 'http://www.brave.com'
+        }
+        this.result = mount(<UrlBarSuggestionItem
+          suggestion={this.suggestion}
+          selected
+          currentIndex={1}
+          i={0}
+          onMouseOver={this.onMouseOver}
+          onClick={this.onSuggestionClicked}
+        />)
+      })
+
+      it('renders a list item', function () {
+        assert.equal(this.result.find('li').length, 1)
+      })
+
+      it('renders the suggestion title', function () {
+        if (suggestionType !== suggestionTypes.TOP_SITE) {
+          assert.equal(this.result.find('.suggestionTitle').length, 1)
+          assert.equal(this.result.find('.suggestionTitle').text(), this.suggestion.title)
+        } else {
+          assert.equal(this.result.find('.suggestionTitle').length, 0)
+        }
+      })
+
+      it('renders a suggestion URL', function () {
+        if (suggestionType !== suggestionTypes.SEARCH && suggestionType !== suggestionTypes.ABOUT_PAGES) {
+          assert.equal(this.result.find('.suggestionLocation').length, 1)
+          assert.equal(this.result.find('.suggestionLocation').text(), this.suggestion.location)
+        } else {
+          assert.equal(this.result.find('.suggestionLocation').length, 0)
+        }
+      })
+
+      it('detects mouse moves', function () {
+        this.result.simulate('click')
+        assert.ok(this.onSuggestionClicked.calledOnce)
+        assert.ok(this.onMouseOver.notCalled)
+      })
+
+      it('detects mouse moves', function () {
+        this.result.simulate('mouseover')
+        assert.ok(this.onMouseOver.calledOnce)
+      })
+    })
+  })
+})