Add simple context menu for findbar

Fix #4975

Ideally the right click wouldn't select the closet word in macOS but it's beyond the scope of this task to implement that and override how inputs work on macOS in this ticket

Auditors: @diracdeltas

js/components/findbar.js

@@ -10,6 +10,7 @@ const Button = require('./button')
 const SwitchControl = require('../components/switchControl')
 const windowActions = require('../actions/windowActions')
 const windowStore = require('../stores/windowStore')
+const contextMenus = require('../contextMenus')
 const {getTextColorForBackground} = require('../lib/color')
 
 class FindBar extends ImmutableComponent {
@@ -19,7 +20,8 @@ class FindBar extends ImmutableComponent {
     this.onInputFocus = this.onInputFocus.bind(this)
     this.onClear = this.onClear.bind(this)
     this.onKeyDown = this.onKeyDown.bind(this)
-    this.onChange = this.onChange.bind(this)
+    this.onContextMenu = this.onContextMenu.bind(this)
+    this.onKeyUp = this.onKeyUp.bind(this)
     this.onFindPrev = this.onFindPrev.bind(this)
     this.onFindNext = this.onFindNext.bind(this)
     this.onCaseSensitivityChange = this.onCaseSensitivityChange.bind(this)
@@ -30,7 +32,7 @@ class FindBar extends ImmutableComponent {
     return windowStore.getFrame(this.props.frameKey)
   }
 
-  onChange (e) {
+  onKeyUp (e) {
     windowActions.setFindDetail(this.frame, Immutable.fromJS({
       searchString: e.target.value,
       caseSensitivity: this.isCaseSensitive
@@ -56,6 +58,15 @@ class FindBar extends ImmutableComponent {
     this.props.onFind(this.searchString, this.isCaseSensitive, false, this.props.findDetail.get('internalFindStatePresent'))
   }
 
+  onContextMenu (e) {
+    // Without this timeout selection is not shown when right clicking in
+    // a word so the word replacement is kind of a surprise.  This is because
+    // our context menus are modal at the moment.  If we fix that we can
+    // remove this timeout.
+    setTimeout(() =>
+      contextMenus.onFindBarContextMenu(e), 10)
+  }
+
   /**
    * Focus the find in page input and select the text
    */
@@ -110,7 +121,7 @@ class FindBar extends ImmutableComponent {
   }
 
   onInputFocus () {
-    this.searchInput.select()
+    this.select()
   }
 
   onBlur (e) {
@@ -202,11 +213,12 @@ class FindBar extends ImmutableComponent {
           <span className='searchStringContainerIcon fa fa-search' />
           <input type='text'
             spellCheck='false'
+            onContextMenu={this.onContextMenu}
             ref={(node) => { this.searchInput = node }}
             value={inputValue}
             onFocus={this.onInputFocus}
             onKeyDown={this.onKeyDown}
-            onKeyUp={this.onChange} />
+            onKeyUp={this.onKeyUp} />
           <span className='searchStringContainerIcon fa fa-times findClear'
             onClick={this.onClear} />
         </div>

js/contextMenus.js

@@ -119,6 +119,10 @@ function urlBarTemplateInit (searchDetail, activeFrame, e) {
   return items
 }
 
+function findBarTemplateInit () {
+  return getEditableItems(window.getSelection().toString())
+}
+
 function tabsToolbarTemplateInit (activeFrame, closestDestinationDetail, isParent) {
   const menu = [
     CommonMenu.bookmarksManagerMenuItem(),
@@ -1254,6 +1258,13 @@ function onUrlBarContextMenu (searchDetail, activeFrame, e) {
   inputMenu.destroy()
 }
 
+function onFindBarContextMenu (e) {
+  e.stopPropagation()
+  const findBarMenu = Menu.buildFromTemplate(findBarTemplateInit(e))
+  findBarMenu.popup(currentWindow)
+  findBarMenu.destroy()
+}
+
 function onSiteDetailContextMenu (siteDetail, activeFrame, e) {
   if (e) {
     e.stopPropagation()
@@ -1429,6 +1440,7 @@ module.exports = {
   onDownloadsToolbarContextMenu,
   onTabPageContextMenu,
   onUrlBarContextMenu,
+  onFindBarContextMenu,
   onSiteDetailContextMenu,
   onShowBookmarkFolderMenu,
   onShowUsernameMenu,