Fixes middle click not working for home button

Resolves #9562

Auditors: @bsclifton

Test Plan:
- middle click on Home button
- new tab is opened

app/renderer/components/navigation/navigationBar.js

@@ -48,6 +48,7 @@ class NavigationBar extends React.Component {
     this.onReload = this.onReload.bind(this)
     this.onHome = this.onHome.bind(this)
     this.onReloadLongPress = this.onReloadLongPress.bind(this)
+    this.auxHomeButtonAdded = false
   }
 
   get activeFrame () {
@@ -117,6 +118,25 @@ class NavigationBar extends React.Component {
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
+
+    if (this.homeButton != null) {
+      this.homeButton.addEventListener('auxclick', this.onHome)
+      this.auxHomeButtonAdded = true
+    }
+  }
+
+  componentWillUpdate () {
+    if (this.homeButton != null) {
+      if (this.props.showHomeButton && !this.auxHomeButtonAdded) {
+        this.homeButton.addEventListener('auxclick', this.onHome)
+        this.auxHomeButtonAdded = true
+      }
+
+      if (!this.props.showHomeButton && this.auxHomeButtonAdded) {
+        this.homeButton.removeEventListener('auxclick', this.onHome)
+        this.auxHomeButtonAdded = false
+      }
+    }
   }
 
   mergeProps (state, ownProps) {
@@ -168,6 +188,7 @@ class NavigationBar extends React.Component {
     props.titleMode = titleMode
     props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
     props.activeTabId = activeTabId
+    props.showHomeButton = !props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
 
     return props
   }
@@ -208,12 +229,13 @@ class NavigationBar extends React.Component {
           </span>
       }
       {
-        !this.props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
+        this.props.showHomeButton
         ? <span className='navigationButtonContainer'>
           <button
             data-test-id='homeButton'
             data-l10n-id='homeButton'
             className='normalizeButton navigationButton homeButton'
+            ref={(node) => { this.homeButton = node }}
             onClick={this.onHome} />
         </span>
         : null

test/navbar-components/navigationBarTest.js

@@ -1055,6 +1055,18 @@ describe('navigationBar tests', function () {
           .waitForTabCount(2)
           .waitForUrl(page2Url)
       })
+
+      it('opens home page in a new tab when middle mouse button is clicked', function * () {
+        const page3Url = Brave.server.url('page3.html')
+
+        yield this.app.client
+          .windowByUrl(Brave.browserWindowUrl)
+          .changeSetting(settings.HOMEPAGE, page3Url)
+          .waitForVisible(homeButton)
+          .middleClick(homeButton)
+          .waitForTabCount(3)
+          .waitForUrl(page3Url)
+      })
     })
 
     describe('when disabled', function () {