Merge pull request #5802 from Liunkae/reload-dropdown

Add context menu to reload button

app/browser/menu.js

@@ -219,19 +219,9 @@ const createViewSubmenu = () => {
       click: function (item, focusedWindow) {
         CommonMenu.sendToFocusedWindow(focusedWindow, [messages.SHORTCUT_ACTIVE_FRAME_STOP])
       }
-    }, {
-      label: locale.translation('reloadPage'),
-      accelerator: 'CmdOrCtrl+R',
-      click: function (item, focusedWindow) {
-        CommonMenu.sendToFocusedWindow(focusedWindow, [messages.SHORTCUT_ACTIVE_FRAME_RELOAD])
-      }
-    }, {
-      label: locale.translation('cleanReload'),
-      accelerator: 'CmdOrCtrl+Shift+R',
-      click: function (item, focusedWindow) {
-        CommonMenu.sendToFocusedWindow(focusedWindow, [messages.SHORTCUT_ACTIVE_FRAME_CLEAN_RELOAD])
-      }
     },
+    CommonMenu.reloadPageMenuItem(),
+    CommonMenu.cleanReloadMenuItem(),
     CommonMenu.separatorMenuItem,
     /*
     {

app/common/commonMenu.js

@@ -348,3 +348,23 @@ module.exports.braveryPaymentsMenuItem = () => {
     }
   }
 }
+
+module.exports.reloadPageMenuItem = () => {
+  return {
+    label: locale.translation('reloadPage'),
+    accelerator: 'CmdOrCtrl+R',
+    click: function (item, focusedWindow) {
+      module.exports.sendToFocusedWindow(focusedWindow, [messages.SHORTCUT_ACTIVE_FRAME_RELOAD])
+    }
+  }
+}
+
+module.exports.cleanReloadMenuItem = () => {
+  return {
+    label: locale.translation('cleanReload'),
+    accelerator: 'CmdOrCtrl+Shift+R',
+    click: function (item, focusedWindow) {
+      module.exports.sendToFocusedWindow(focusedWindow, [messages.SHORTCUT_ACTIVE_FRAME_CLEAN_RELOAD])
+    }
+  }
+}

js/components/navigationBar.js

@@ -20,13 +20,16 @@ const siteUtil = require('../state/siteUtil')
 const eventUtil = require('../lib/eventUtil')
 const getSetting = require('../settings').getSetting
 const windowStore = require('../stores/windowStore')
+const contextMenus = require('../contextMenus')
+const LongPressButton = require('./longPressButton')
 
 class NavigationBar extends ImmutableComponent {
   constructor () {
     super()
     this.onToggleBookmark = this.onToggleBookmark.bind(this)
     this.onStop = this.onStop.bind(this)
     this.onReload = this.onReload.bind(this)
+    this.onReloadLongPress = this.onReloadLongPress.bind(this)
     this.onNoScript = this.onNoScript.bind(this)
   }
 
@@ -53,6 +56,10 @@ class NavigationBar extends ImmutableComponent {
     }
   }
 
+  onReloadLongPress (target) {
+    contextMenus.onReloadContextMenu(target)
+  }
+
   onHome () {
     getSetting(settings.HOMEPAGE).split('|')
       .forEach((homepage, i) => {
@@ -136,9 +143,11 @@ class NavigationBar extends ImmutableComponent {
               onClick={this.onStop} />
           </span>
           : <span className='navigationButtonContainer'>
-            <button data-l10n-id='reloadButton'
+            <LongPressButton
+              l10nId='reloadButton'
               className='navigationButton reloadButton'
-              onClick={this.onReload} />
+              onClick={this.onReload}
+              onLongPress={this.onReloadLongPress} />
           </span>
       }
       {

js/contextMenus.js

@@ -1482,6 +1482,20 @@ function onForwardButtonHistoryMenu (activeFrame, history, target) {
   }))
 }
 
+function onReloadContextMenu (target) {
+  const rect = target.getBoundingClientRect()
+  const menuTemplate = [
+    CommonMenu.reloadPageMenuItem(),
+    CommonMenu.cleanReloadMenuItem()
+  ]
+
+  windowActions.setContextMenuDetail(Immutable.fromJS({
+    left: rect.left,
+    top: rect.bottom + 2,
+    template: menuTemplate
+  }))
+}
+
 module.exports = {
   onHamburgerMenu,
   onMainContextMenu,
@@ -1498,5 +1512,6 @@ module.exports = {
   onShowAutofillMenu,
   onMoreBookmarksMenu,
   onBackButtonHistoryMenu,
-  onForwardButtonHistoryMenu
+  onForwardButtonHistoryMenu,
+  onReloadContextMenu
 }