electron-findbar 0.4.0 → 0.6.4

package/.vscode/launch.json

@@ -10,7 +10,7 @@
         "windows": {
           "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
         },
-        "args" : ["sample.js"],
+        "args" : ["test/sample.js"],
         "outputCapture": "std"
       }
     ]

package/README.md

@@ -47,21 +47,21 @@ All public methods are documented with JSDoc and can be referenced during import
 To import the Findbar class:
 
 ```js
-const { Findbar } = require('electron-findbar');
+const { Findbar } = require('electron-findbar')
 ```
 
 ### Creating the Findbar Instance
 
-You can pass a `BrowserWindow` instance as a single parameter to use it as the parent window. The `BrowserWindow.WebContents` will be used as the searchable content:
+You can pass a `BrowserWindow` instance as a single parameter to use it as the parent window. The `BrowserWindow.WebContents` will be used as the findable content:
 
 ```js
-const findbar = new Findbar(browserWindow);
+const findbar = new Findbar(browserWindow)
 ```
 
-Alternatively, you can provide a custom `WebContents` as the second parameter. In this case, the first parameter can be any `BaseWindow`, and the second parameter will be the searchable content:
+Alternatively, you can provide a custom `WebContents` as the second parameter. In this case, the first parameter can be any `BaseWindow`, and the second parameter will be the findable content:
 
 ```js
-const findbar = new Findbar(baseWindow, customWebContents);
+const findbar = new Findbar(baseWindow, customWebContents)
 ```
 
 ### Configuring the Findbar
@@ -69,33 +69,34 @@ const findbar = new Findbar(baseWindow, customWebContents);
 You can customize the Findbar window options using the `setWindowOptions` method:
 
 ```js
-findbar.setWindowOptions({ movable: true, resizable: true, alwaysOnTop: true });
+findbar.setWindowOptions({ movable: true, resizable: true, alwaysOnTop: true })
 ```
 
 To handle the Findbar window directly after it is opened, use the `setWindowHandler` method:
 
 ```js
 findbar.setWindowHandler(win => {
-    win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+    win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true })
 });
 ```
 
-### Opening the Findbar
-
-The Findbar is a child window of the `BaseWindow` passed during construction. To open it use:
+The findbar has a default position handler which moves the findbar to the top-right corner. To change the position handler, use the `setPositionHandler` method. The position handler is called when the parent window moves or resizes and provides both the parent and findbar bounds as parameters.
 
 ```js
-findbar.open();
+findbar.setPositionHandler((parentBounds, findbarBounds) => ({
+    x: parentBounds.x + parentBounds.width - findbarBounds.width - 20,
+    y: parentBounds.y - ((findbarBounds.height / 4) | 0)
+}))
 ```
 
-On MacOS, the findbar will follow the relative movement of the parent window by default and there is no way to change it. On Windows and Linux, this behavior is not default and is simulated by using the `move` event of the parent and can be disabled by using:
+### Opening the Findbar
+
+The Findbar is a child window of the `BaseWindow` passed during construction. To open it use:
 
 ```js
-findbar.followParentWindow(false)
+findbar.open()
 ```
 
-> Enabled by default.
-
 ### Finding Text in the Page
 
 Once open, the Findbar appears by default in the top-right corner of the parent window and can be used without additional coding. Alternatively, you can use the following methods to trigger `findInPage` and navigate through matches in the main process:
@@ -104,28 +105,28 @@ Once open, the Findbar appears by default in the top-right corner of the parent
 /**
  * Retrieve the last queried value.
  */
-getLastValue();
+getLastValue()
 
 /**
  * Initiate a request to find all matches for the specified text on the page.
  * @param {string} text - The text to search for.
  */
-startFind(text);
+startFind(text)
 
 /**
  * Select the previous match, if available.
  */
-findPrevious();
+findPrevious()
 
 /**
  * Select the next match, if available.
  */
-findNext();
+findNext()
 
 /**
  * Stop the find request.
  */
-stopFind();
+stopFind()
 ```
 
 ### Closing the Findbar
@@ -133,7 +134,7 @@ stopFind();
 When the Findbar is closed, its window is destroyed to free memory resources. Use the following method to close the Findbar:
 
 ```js
-findbar.close();
+findbar.close()
 ```
 
 A new internal window will be created the next time the `open` method is called. There is no need to instantiate another Findbar for the same parent window.
@@ -143,32 +144,61 @@ A new internal window will be created the next time the `open` method is called.
 Here is a quick example demonstrating how to use the `electron-findbar`:
 
 ```js
-const { app, BrowserWindow } = require('electron');
-const { Findbar } = require('electron-findbar');
+const { app, BrowserWindow } = require('electron')
+const { Findbar } = require('electron-findbar')
 
 app.whenReady().then(() => {  
-  const window = new BrowserWindow();
-  window.loadURL('https://github.com/ECRomaneli/electron-findbar');
+  const window = new BrowserWindow()
+  window.loadURL('https://github.com/ECRomaneli/electron-findbar')
 
   // Create and configure the Findbar object
-  const findbar = new Findbar(window);
+  const findbar = new Findbar(window)
 
   // [OPTIONAL] Customize window options
-  findbar.setWindowOptions({ movable: true, resizable: true });
+  findbar.setWindowOptions({ movable: true, resizable: true })
 
   // [OPTIONAL] Handle the window object when the Findbar is opened
   findbar.setWindowHandler(win => {
-    win.webContents.openDevTools();
-  });
+    win.webContents.openDevTools()
+  })
 
   // Open the Findbar
-  findbar.open();
-});
+  findbar.open()
+})
 ```
 
-## Notes
+## IPC Events
+
+As an alternative, the findbar can be controlled using IPC events in the `renderer` process of the `WebContents` provided during the findbar construction.
+
+### ipcRenderer
 
-There are some intentional differences from the Chrome findbar, such as the horizontal margins of the divider and the input text, which has been replaced by a search input to include a clear button (the "x" on the right side).
+If the `contextIsolation` is enabled, the `electron-findbar/remote` will not be available, but the IPC events can be used directly through the preload script:
+
+```js
+const $remote = (ipc => ({
+    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+    inputChange: (value) => { ipc.send('electron-findbar/input-change', value) },
+    previous: () => { ipc.send('electron-findbar/previous') },
+    next: () => { ipc.send('electron-findbar/next') },
+    open: () => { ipc.send('electron-findbar/open') },
+    close: () => { ipc.send('electron-findbar/close') },
+})) (require('electron').ipcRenderer)
+
+$remote.open()
+$remote.inputChange('findIt')
+```
+
+### Remote module
+
+With the `contextIsolation` disabled, the remote library is available to use:
+
+```js
+const FindbarRemote = require('electron-findbar/remote')
+
+FindbarRemote.open()
+FindbarRemote.inputChange('findIt')
+```
 
 ## Author
 

package/index.js

@@ -8,7 +8,7 @@ class Findbar {
     #window
 
     /** @type {WebContents} */
-    #searchableContents
+    #findableContents
 
     /** */
     #matches
@@ -16,14 +16,14 @@ class Findbar {
     /** @type {(findbarWindow: BrowserWindow) => void} */
     #windowHandler
 
+    /** @type {{parentBounds: Rectangle, findbarBounds: Rectangle} => {x: number, y: number}} */
+    #positionHandler = Findbar.#setDefaultPosition
+
     /** @type {BrowserWindowConstructorOptions} */
     #customOptions
 
     /** @type {string} */
-    #lastValue = ''
-
-    /** @type {boolean} */
-    #followParent = process.platform !== 'darwin'
+    #lastText = ''
 
     /**
      * Workaround to fix "findInPage" bug - double-click to loop
@@ -39,26 +39,29 @@ class Findbar {
      */
     constructor (parent, webContents) {
         this.#parent = parent
-        this.#searchableContents = webContents ?? parent.webContents
+        this.#findableContents = webContents ?? parent.webContents
+        this.#findableContents._findbar = this
         
-        if (!this.#searchableContents) {
+        if (!this.#findableContents) {
             throw new Error('There are no searchable web contents.')
         }
     }
     
     /**
-     * Open the findbar.
+     * Open the findbar. If the findbar is already opened, focus the input text.
      */
     open() {
         if (this.#window) {
-            this.#focusInput()
+            this.#focusWindowAndHighlightInput()
             return
         }
         this.#window = new BrowserWindow(Findbar.#mergeStandardOptions(this.#customOptions, this.#parent))
-        this.#window.webContents.findbar = this
+        this.#window.webContents._findbar = this
 
         this.#registerListeners()
-        this.#setDefaultPosition(this.#parent.getBounds())
+
+        const pos = this.#positionHandler(this.#parent.getBounds(), this.#window.getBounds())
+        this.#window.setPosition(pos.x, pos.y)
 
         this.#windowHandler && this.#windowHandler(this.#window)
         
@@ -73,19 +76,21 @@ class Findbar {
     }
 
     /**
-     * Get last queried value.
+     * Get last queried text.
      */
-    getLastValue() {
-        return this.#lastValue
+    getLastText() {
+        return this.#lastText
     }
 
     /**
      * Starts a request to find all matches for the text in the page.
      * @param {string} text Value to find in page.
+     * @param {boolean | void} skipInputUpdate Skip findbar input update.
      */
-    startFind(text) {
-        if (this.#lastValue = text) {
-            this.#searchableContents.findInPage(this.#lastValue, { findNext: true })
+    startFind(text, skipInputUpdate) {
+        skipInputUpdate || this.#window?.webContents.send('electron-findbar/text-change', text)
+        if (this.#lastText = text) {
+            this.isOpen() && this.#findableContents.findInPage(this.#lastText, { findNext: true })
         } else {
             this.stopFind()
         }
@@ -95,22 +100,16 @@ class Findbar {
      * Select previous match if any.
      */
     findPrevious() {
-        if (this.#matches.active === 1) {
-            this.#fixMove = false
-        }
-
-        this.#searchableContents.findInPage(this.#lastValue, { forward: false })
+        this.#matches.active === 1 && (this.#fixMove = false)
+        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: false })
     }
 
     /**
      * Select next match if any.
      */
     findNext() {
-        if (this.#matches.active === this.#matches.total) {
-            this.#fixMove = true
-        }
-
-        this.#searchableContents.findInPage(this.#lastValue, { forward: true })
+        this.#matches.active === this.#matches.total && (this.#fixMove = true)
+        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: true })
     }
 
     /**
@@ -118,17 +117,33 @@ class Findbar {
      */
     stopFind() {
         this.isOpen() && this.#sendMatchesCount(0, 0)
-        this.#searchableContents.isDestroyed() || this.#searchableContents.stopFindInPage("clearSelection")
+        this.#findableContents.isDestroyed() || this.#findableContents.stopFindInPage("clearSelection")
     }
 
     /**
-     * Return if the findbar is open or not.
+     * Whether the findbar is opened.
      * @returns {boolean} True, if the findbar is open. Otherwise, false.
      */
     isOpen() {
         return !!this.#window
     }
 
+    /**
+     * Whether the findbar is focused. If the findbar is closed, false will be returned.
+     * @returns {boolean} True, if the findbar is focused. Otherwise, false.
+     */
+    isFocused() {
+        return !!this.#window?.isFocused()
+    }
+
+    /**
+     * Whether the findbar is visible to the user in the foreground of the app. If the findbar is closed, false will be returned.
+     * @returns {boolean} True, if the findbar is visible. Otherwise, false.
+     */
+    isVisible() {
+        return !!this.#window?.isVisible()
+    }
+
     /**
      * Provides a customized set of options to findbar window before open. Note
      * that the options below are necessary for the correct functioning and cannot
@@ -157,86 +172,40 @@ class Findbar {
     }
 
     /**
-     * Set the findbar to follow the parent window. Default is true.
-     * 
-     * On darwin platform, the findbar follows the parent window by default. This method is set
-     * to false to not create a "move" event listener unnescessarily.
-     * @platform win32,linux
-     * @param {boolean} follow If true, the findbar will follow the parent window movement.
-     */
-    followParentWindow(follow) {
-        this.#followParent = follow
-    }
-
-    /**
-     * Merge custom, defaults, and fixed options.
-     * @param {Electron.BrowserWindowConstructorOptions} options Custom options.
-     * @param {BaseWindow | void} parent Parent window, if any.
-     * @returns {Electron.BrowserWindowConstructorOptions} Merged options.
+     * Set a bounds handler to calculate the findbar bounds when the parent resizes.
+     * @param {{parentBounds: Rectangle, findbarBounds: Rectangle} => Rectangle} boundsHandler Bounds handler.
      */
-    static #mergeStandardOptions(options, parent) {
-        if (!options) { options = {} }
-        options.width = options.width ?? 372
-        options.height = options.height ?? 52
-        options.resizable = options.resizable ?? false
-        options.movable = options.movable ?? false
-        options.parent = parent
-        options.frame = false
-        options.transparent = true
-        options.maximizable = false
-        options.minimizable = false
-        options.skipTaskbar = true
-        options.fullscreenable = false
-        if (!options.webPreferences) { options.webPreferences = {} }
-        options.webPreferences.nodeIntegration = true
-        options.webPreferences.contextIsolation = false
-        return options
+    setBoundsHandler(boundsHandler) {
+        this.#positionHandler = boundsHandler
     }
 
     /**
      * Register all event listeners.
      */
     #registerListeners() {
-        const followParent = this.#followParent
         const showCascade = () => this.#window.isVisible() || this.#window.show()
         const hideCascade = () => this.#window.isVisible() && this.#window.hide()
-        
-        let lastPos = this.#parent.getPosition()
-        const moveCascade = () => {
-            const newPos = this.#parent.getPosition()
-            const diff = { x: newPos[0] - lastPos[0], y: newPos[1] - lastPos[1] }
-            lastPos = newPos
-
-            const { x, y } = this.#window.getBounds()
-            this.#window.setPosition(x + diff.x, y + diff.y)
+        const positionHandler = () => {
+            const pos = this.#positionHandler(this.#parent.getBounds(), this.#window.getBounds())
+            this.#window.setPosition(pos.x, pos.y)
         }
-
+        
         this.#parent.prependListener('show', showCascade)
         this.#parent.prependListener('hide', hideCascade)
-        followParent && this.#parent.prependListener('move', moveCascade)
+        this.#parent.prependListener('resize', positionHandler)
+        this.#parent.prependListener('move', positionHandler)
 
         this.#window.once('close', () => {
             this.#parent.off('show', showCascade)
             this.#parent.off('hide', hideCascade)
-            followParent && this.#parent.off('move', moveCascade)
+            this.#parent.off('resize', positionHandler)
+            this.#parent.off('move', positionHandler)
             this.#window = null
             this.stopFind()
         })
 
-        this.#searchableContents.prependOnceListener('destroyed', () => { this.close() })
-        this.#searchableContents.prependListener('found-in-page', (_e, result) => { this.#sendMatchesCount(result.activeMatchOrdinal, result.matches) })
-    }
-
-    /**
-     * Set default findbar position.
-     * @param {Rectangle} parentBounds 
-     */
-    #setDefaultPosition(parentBounds) {
-        const s = this.#window.getSize()
-        this.#window.setBounds({
-            x: parentBounds.x + parentBounds.width - s[0] - 20,
-            y: parentBounds.y - ((s[1] / 4) | 0)
-        })
+        this.#findableContents.prependOnceListener('destroyed', () => { this.close() })
+        this.#findableContents.prependListener('found-in-page', (_e, result) => { this.#sendMatchesCount(result.activeMatchOrdinal, result.matches) })
     }
 
     /**
@@ -256,31 +225,67 @@ class Findbar {
     }
 
     /**
-     * Select input text.
+     * Focus the findbar and highlight the input text.
      */
-    #focusInput() {
+    #focusWindowAndHighlightInput() {
+        this.#window.focus()
         this.#window.webContents.send('electron-findbar/input-focus')
     }
+
+    /**
+     * Set default findbar position.
+     * @param {Rectangle} parentBounds 
+     * @param {Rectangle} findbarBounds
+     * @returns {x: number, y: number} position.
+     */
+    static #setDefaultPosition(parentBounds, findbarBounds) {
+        return {
+            x: parentBounds.x + parentBounds.width - findbarBounds.width - 20,
+            y: parentBounds.y - ((findbarBounds.height / 4) | 0)
+        }
+    }
+
+    /**
+     * Merge custom, defaults, and fixed options.
+     * @param {Electron.BrowserWindowConstructorOptions} options Custom options.
+     * @param {BaseWindow | void} parent Parent window, if any.
+     * @returns {Electron.BrowserWindowConstructorOptions} Merged options.
+     */
+    static #mergeStandardOptions(options, parent) {
+        if (!options) { options = {} }
+        options.width = options.width ?? 372
+        options.height = options.height ?? 52
+        options.resizable = options.resizable ?? false
+        options.movable = options.movable ?? false
+        options.acceptFirstMouse = options.acceptFirstMouse ?? true
+        options.parent = parent
+        options.frame = false
+        options.transparent = true
+        options.maximizable = false
+        options.minimizable = false
+        options.skipTaskbar = true
+        options.fullscreenable = false
+        if (!options.webPreferences) { options.webPreferences = {} }
+        options.webPreferences.nodeIntegration = true
+        options.webPreferences.contextIsolation = false
+        return options
+    }
 }
 
 /**
  * Define IPC events.
  */
-(({ ipcMain }) => {
-    ipcMain.handle('electron-findbar/initial-input', e => {
-        const findbar = e.sender.findbar
-        findbar.startFind(findbar.getLastValue())
-        return findbar.getLastValue()
-    })
-    
-    ipcMain.on('electron-findbar/input-change', (e, value) => e.sender.findbar.startFind(value))
-    ipcMain.on('electron-findbar/previous', e => e.sender.findbar.findPrevious())
-    ipcMain.on('electron-findbar/next', e => e.sender.findbar.findNext())
-    ipcMain.on('electron-findbar/close', e => {
-        const findbar = e.sender.findbar
+(ipc => {
+    ipc.handle('electron-findbar/last-text', e => e.sender._findbar.getLastText())
+    ipc.on('electron-findbar/input-change', (e, text, skip) => e.sender._findbar.startFind(text, skip))
+    ipc.on('electron-findbar/previous', e => e.sender._findbar.findPrevious())
+    ipc.on('electron-findbar/next', e => e.sender._findbar.findNext())
+    ipc.on('electron-findbar/open', e => e.sender._findbar.open())
+    ipc.on('electron-findbar/close', e => {
+        const findbar = e.sender._findbar
         findbar.stopFind()
         findbar.close()
     })
-}) (require('electron'))
+}) (require('electron').ipcMain)
 
 module.exports = { Findbar }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "electron-findbar",
-  "version": "0.4.0",
+  "version": "0.6.4",
   "description": "Chrome-like findbar for your Electron app.",
   "main": "index.js",
   "scripts": {
-    "sample": "electron sample.js",
-    "test": "node test.js"
+    "sample": "electron test/sample.js",
+    "test": "node test/test.js"
   },
   "repository": {
     "type": "git",
@@ -13,10 +13,15 @@
   },
   "keywords": [
     "findbar",
+    "find-bar",
+    "find bar",
     "electron-findbar",
+    "electron-find-bar",
     "electron",
     "chrome-findbar",
-    "search"
+    "chrome-find-bar",
+    "search",
+    "search-bar"
   ],
   "author": "ECRomaneli",
   "license": "MIT",

package/remote.js

@@ -0,0 +1,22 @@
+/**
+ * Remote IPC events to control the findbar through the renderer.
+ */
+const Remote = (ipc => ({
+    /**
+     * Get last queried text.
+     * @returns {string}
+     */
+    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+
+    /**
+     * Change the input value and find it.
+     * @param {string} text 
+     */
+    inputChange: (text) => { ipc.send('electron-findbar/input-change', text) },
+    previous: () => { ipc.send('electron-findbar/previous') },
+    next: () => { ipc.send('electron-findbar/next') },
+    open: () => { ipc.send('electron-findbar/open') },
+    close: () => { ipc.send('electron-findbar/close') },
+})) (require('electron').ipcRenderer)
+
+module.exports = Remote

package/test/sample.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Sample</title>
+</head>
+<body>
+    <input type="text" oninput="$remote.inputChange(event.target.value)">
+    <button onclick="$remote.open()">Open</button>
+    <button onclick="$remote.previous()">Previous</button>
+    <button onclick="$remote.next()">Next</button>
+    <button onclick="$remote.close()">Close</button>
+    <br>
+    <span>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et suscipit tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dictum massa id sapien tristique, in venenatis neque sollicitudin. Fusce accumsan augue arcu, sed rhoncus libero pretium vitae. Phasellus sed imperdiet ante. Maecenas ultrices, elit vitae aliquet tincidunt, elit enim maximus libero, id lacinia ex enim consequat justo. Sed sodales tristique augue sed maximus. Integer tincidunt mi ac arcu tempus, sed accumsan lorem bibendum. Sed in dictum nibh. Pellentesque posuere dui pulvinar sodales scelerisque. Ut nisi magna, vulputate ornare bibendum pharetra, accumsan sed tortor. Proin rhoncus interdum tincidunt. Suspendisse diam eros, ultrices eu volutpat in, vestibulum quis nunc.
+
+Sed sit amet dapibus eros. Quisque porttitor mi a nisl pretium molestie. Praesent tellus dui, vehicula a ex sed, faucibus congue mauris. Cras dictum, sapien tempus consequat luctus, dolor magna vestibulum risus, nec blandit diam nulla eget est. Curabitur vitae posuere dolor, accumsan vulputate felis. Cras eget iaculis ante. Nulla velit felis, aliquet vitae convallis nec, vehicula et nunc. Fusce dapibus vel eros non viverra. Fusce elit arcu, tempus eu enim in, rutrum mattis justo.
+
+Cras justo tellus, imperdiet et felis sed, iaculis varius lacus. Pellentesque posuere feugiat nisl, eu vulputate tortor. Proin volutpat tortor erat, feugiat pretium justo aliquam non. Maecenas nec neque ultricies diam rhoncus ullamcorper a vitae mauris. Integer ultricies euismod leo, nec facilisis diam volutpat et. Nulla eleifend ante egestas, imperdiet elit at, malesuada velit. Donec tincidunt eleifend libero. Integer congue pharetra scelerisque. In egestas lacus erat. Quisque aliquam massa lectus, eu semper massa ornare auctor. Cras sit amet auctor sem. Curabitur vitae tellus eu risus ultrices accumsan. Curabitur egestas eu lorem et efficitur. Sed nec turpis felis.
+
+Suspendisse vel euismod ante. Nunc sagittis quam ut gravida pulvinar. Sed at semper nisl, eu porttitor ante. Cras vitae dolor massa. Fusce tincidunt turpis at egestas pharetra. Donec vitae vestibulum ante. Cras erat dolor, finibus vitae auctor vel, varius dictum arcu. Nam porta arcu consectetur, posuere tellus at, laoreet metus. Ut faucibus tincidunt mi placerat fermentum.
+
+Aliquam ut pellentesque tellus, quis vulputate nisl. Phasellus vitae blandit nunc, eu sodales velit. Duis enim tellus, faucibus id arcu vitae, consectetur tempus mauris. Praesent commodo commodo dolor non malesuada. Donec sed dolor eget arcu tincidunt efficitur sit amet vel nisi. Sed consectetur tincidunt molestie. Nam at magna a odio rhoncus convallis id eu nunc. Nam luctus ut leo et viverra. Proin tempor libero vitae arcu laoreet, sed pharetra sapien rutrum. Nam nunc orci, aliquet sit amet dignissim nec, aliquet quis quam. Nulla facilisi.
+    </span>
+    <script>
+        const $remote = require('../remote')
+    </script>
+</body>
+</html>

package/test/sample.js

@@ -0,0 +1,43 @@
+const { BrowserWindow, app, Menu, MenuItem } = require('electron')
+const { Findbar } = require('../index')
+
+app.whenReady().then(() => {  
+  const window = setupWindow()
+  const findbar = setupFindbar(window)
+  setupApplicationMenu(findbar)
+})
+
+function setupWindow() {
+  const window = new BrowserWindow({
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  })
+  window.loadFile(`${__dirname}/sample.html`)
+  return window
+}
+
+function setupFindbar(window) {
+  const findbar = new Findbar(window)
+  findbar.setWindowOptions({ movable: true, resizable: true })
+  findbar.setWindowHandler(win => { /* handle the findbar window */ })
+  return findbar
+}
+
+function setupApplicationMenu(findbar) {
+  const appMenu = Menu.getApplicationMenu()
+  appMenu.append(new MenuItem({ label: 'Findbar', submenu: [
+    { label: 'Open', click: () => findbar.open(), accelerator: 'CommandOrControl+F' },
+    { label: 'Close', click: () => findbar.isOpen() && findbar.close(), accelerator: 'Esc' },
+    { role: 'toggleDevTools', accelerator: 'CommandOrControl+Shift+I' },
+    { label: 'Test input propagation', click: () => {
+      let count = 0
+      setInterval(() => {
+        findbar.startFind('count: ' + count++)
+        findbar.startFind('cannot show this', true)
+      }, 1000)
+    }}
+  ]}))
+  Menu.setApplicationMenu(appMenu)
+}

package/web/app.css

@@ -16,6 +16,9 @@ nav {
     --input-color: #1f1f1f;
     --btn-hover-color: #ccc;
     --btn-active-color: #bbb;
+    --font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    --font-size: .75rem;
+    --spacing: .75rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -42,19 +45,25 @@ nav {
     align-items: center;
     width: 100%;
     height: 100%;
-    padding: .75rem;
-    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    padding: var(--spacing);
     background-color: var(--bg-color);
     color: var(--color);
-    font-size: .75rem;
     border-radius: 10px;
     border: 1px solid var(--border);
     -webkit-app-region: drag;
 }
 
-nav > span,
-nav > .divider {
-    margin-right: .75rem;
+nav > *:not(:last-child),
+.btn-group > *:not(:last-child) {
+    margin-right: var(--spacing);
+}
+
+span, input {
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+}
+
+span {
     user-select: none;
 }
 
@@ -62,6 +71,7 @@ input {
     width: 100%;
     background-color: transparent;
     color: var(--input-color);
+    font-weight: 500;
     border: none;
     outline: none;
     -webkit-app-region: no-drag;
@@ -77,10 +87,6 @@ input {
     display: flex;
 }
 
-.btn-group > :not(:last-child) {
-    margin-right: .5rem;
-}
-
 .btn-group > div {
     border-radius: 50%;
     cursor: default;

package/web/app.js

@@ -1,14 +1,13 @@
-const { ipcRenderer } = require('electron')
-
-const $remote = {
-    getInitialInput: async () => ipcRenderer.invoke('electron-findbar/initial-input'),
-    inputChange: (value) => { ipcRenderer.send('electron-findbar/input-change', value) },
-    previous: () => { ipcRenderer.send('electron-findbar/previous') },
-    next: () => { ipcRenderer.send('electron-findbar/next') },
-    close: () => { ipcRenderer.send('electron-findbar/close') },
-    onMatchesChange: (listener) => { ipcRenderer.on('electron-findbar/matches', listener) },
-    onInputFocus: (listener) => { ipcRenderer.on('electron-findbar/input-focus', listener) }
-}
+const $remote = (ipc => ({
+    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+    inputChange: (value) => { ipc.send('electron-findbar/input-change', value, true) },
+    previous: () => { ipc.send('electron-findbar/previous') },
+    next: () => { ipc.send('electron-findbar/next') },
+    close: () => { ipc.send('electron-findbar/close') },
+    onMatchesChange: (listener) => { ipc.on('electron-findbar/matches', listener) },
+    onInputFocus: (listener) => { ipc.on('electron-findbar/input-focus', listener) },
+    onTextChange: (listener) => { ipc.on('electron-findbar/text-change', listener) }
+})) (require('electron').ipcRenderer)
 
 let canRequest = true, canMove = false
 
@@ -40,12 +39,15 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
     })
 
-    $remote.onInputFocus(async () => {
+    $remote.onInputFocus(() => {
         inputEl.setSelectionRange(0, inputEl.value.length)
         inputEl.focus()
     })
 
-    inputEl.value = await $remote.getInitialInput()
+    $remote.onTextChange((_, text) => { inputEl.value = text })
+
+    inputEl.value = await $remote.getLastText()
+    $remote.inputChange(inputEl.value)
     inputEl.setSelectionRange(0, inputEl.value.length)
     inputEl.focus()
 })

package/web/findbar.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="app.css">
 <body>
     <nav>
-        <input id='input' oninput="inputChange(event)" type="search" spellcheck="false">
+        <input id='input' oninput="inputChange(event)" type="text" spellcheck="false">
         <span id="matches"></span>
         <div class="divider"></div>
         <div class="btn-group">

package/sample.js

@@ -1,23 +0,0 @@
-const { BrowserWindow, app, Menu } = require('electron')
-const { Findbar } = require('./index')
-
-app.whenReady().then(() => {  
-  const window = new BrowserWindow()
-  window.loadURL('https://github.com/ECRomaneli/electron-findbar#readme')
-
-  const findbar = new Findbar(window)
-  findbar.setWindowOptions({ movable: !true, resizable: true })
-  findbar.setWindowHandler(win => {
-    win.webContents.openDevTools()
-  })
-  findbar.open()
-
-  const contextMenu = Menu.buildFromTemplate([
-    { role: 'separator' },
-    { label: 'Open findbar', click: () => findbar.open(), accelerator: 'CommandOrControl+F' },
-    { label: 'Close findbar', click: () => findbar.isOpen() && findbar.close(), accelerator: 'Esc', registerAccelerator: true, acceleratorWorksWhenHidden: true }
-  ])
-
-  Menu.setApplicationMenu(contextMenu)
-  
-})