electron-findbar 1.1.0 → 2.0.1

package/README.md

@@ -1,8 +1,5 @@
 <p align='center'>
-    <a href="https://github.com/ECRomaneli/handbook" style='text-decoration:none'>
-        <img src="https://i.postimg.cc/0QR0s0Z1/findbar-light.png" alt='Findbar Light Theme'>
-        <img src="https://i.postimg.cc/LXtB6g0Y/findbar-dark.png" alt='Findbar Dark Theme'>
-    </a>
+    <a href="https://github.com/ECRomaneli/electron-findbar" style='text-decoration:none'><img src="https://i.postimg.cc/sXwqJP59/findbar-v2-light.png" alt='Findbar Light Theme'><img src="https://i.postimg.cc/j26XXRVV/findbar-v2-dark.png" alt='Findbar Dark Theme'></a>
 </p>
 <p align='center'>
     Chrome-like findbar for your Electron application
@@ -47,13 +44,35 @@ const Findbar = require('electron-findbar')
 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)
+// Create or retrieve the findbar associated to the browserWindow.webContents. If a new findbar is created, the browserWindow is used as parent.
+const findbar = Findbar.from(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 findable content:
 
 ```js
-const findbar = new Findbar(baseWindow, customWebContents)
+// Create or retrieve the findbar associated to the webContents. If a new findbar is created, the baseWindow is used as parent.
+const findbar = Findbar.from(baseWindow, webContents)
+```
+
+Is also possible to create a findbar without a parent window (even though it is not recommended):
+
+```js
+// Create or retrieve the findbar associated to the webContents. If a new findbar is created, it will be displayed in the middle of the screen without a parent to connect to.
+const findbar = Findbar.from(webContents)
+```
+
+**Note:** The findbar is ALWAYS linked to the webContents not the window. The parent is only the window to connect the events and stay on top. If the `.from(webContents)` is used to retrieve an existing findbar previously created with a parent, the findbar will stay connected to the parent.
+
+#### Retrieve if exists
+
+If there is no intention to create a new findbar in case it does not exist, use:
+
+```js
+// Get the existing findbar or undefined.
+const existingFindbar = Findbar.fromIfExists(browserWindow)
+/* OR */
+const existingFindbar = Findbar.fromIfExists(webContents)
 ```
 
 ### Configuring the Findbar
@@ -61,7 +80,7 @@ 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({ resizable: true, alwaysOnTop: true, height: 100 })
 ```
 
 To handle the Findbar window directly after it is opened, use the `setWindowHandler` method:
@@ -72,12 +91,14 @@ findbar.setWindowHandler(win => {
 });
 ```
 
-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.
+The findbar has a default position handler which moves the findbar to the top-right corner. To change the position handler, use the `setBoundsHandler` method. The bounds handler is called when the parent window moves or resizes and provides both the parent and findbar bounds as parameters.
 
 ```js
-findbar.setPositionHandler((parentBounds, findbarBounds) => ({
+findbar.setBoundsHandler((parentBounds, findbarBounds) => ({
     x: parentBounds.x + parentBounds.width - findbarBounds.width - 20,
     y: parentBounds.y - ((findbarBounds.height / 4) | 0)
+    /* width: OPTIONAL, current value will be used */
+    /* height: OPTIONAL, current value will be used */
 }))
 ```
 
@@ -89,38 +110,6 @@ The Findbar is a child window of the `BaseWindow` passed during construction. To
 findbar.open()
 ```
 
-### 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:
-
-```js
-/**
- * Retrieve the last queried value.
- */
-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)
-
-/**
- * Select the previous match, if available.
- */
-findPrevious()
-
-/**
- * Select the next match, if available.
- */
-findNext()
-
-/**
- * Stop the find request.
- */
-stopFind()
-```
-
 ### Closing the Findbar
 
 When the Findbar is closed, its window is destroyed to free memory resources. Use the following method to close the Findbar:
@@ -144,21 +133,148 @@ app.whenReady().then(() => {
   window.loadURL('https://github.com/ECRomaneli/electron-findbar')
 
   // Create and configure the Findbar object
-  const findbar = new Findbar(window)
+  const findbar = Findbar.from(window)
 
   // [OPTIONAL] Customize window options
   findbar.setWindowOptions({ movable: true, resizable: true })
 
   // [OPTIONAL] Handle the window object when the Findbar is opened
-  findbar.setWindowHandler(win => {
-    win.webContents.openDevTools()
-  })
+  findbar.setWindowHandler(win => { win.webContents.openDevTools() })
 
   // Open the Findbar
   findbar.open()
 })
 ```
 
+### Configuring Keyboard Shortcuts
+
+The Findbar component can be controlled using keyboard shortcuts. Below are two implementation approaches to help you integrate search functionality seamlessly into your application's user experience.
+
+**Note:** The following examples demonstrate only the ideal (happy path) scenarios. For production use, make sure to thoroughly validate all inputs and handle edge cases appropriately.
+
+#### Using Before Input Event
+
+The `before-input-event` approach allows you to capture keyboard events directly in the main process before they're processed by the web contents, giving you precise control:
+
+```js
+window.webContents.on('before-input-event', (event, input) => {
+  // Detect Ctrl+F (Windows/Linux) or Command+F (macOS)
+  if ((input.control || input.meta) && input.key.toLowerCase() === 'f') {
+    // Prevent default browser behavior
+    event.preventDefault()
+    
+    // Access and open the findbar
+    const findbar = Findbar.from(window)
+    if (findbar) {
+      findbar.open()
+    }
+  }
+  
+  // Handle Escape key to close the findbar
+  if (input.key === 'Escape') {
+    const findbar = Findbar.from(window)
+    if (findbar && findbar.isOpen()) {
+      event.preventDefault()
+      findbar.close()
+    }
+  }
+})
+```
+
+#### Using Menu Accelerators
+
+For a more integrated approach, you can modify your application's menu system to include findbar controls with keyboard accelerators. This method makes shortcuts available throughout your application:
+
+```js
+// Get reference to the parent window
+const parent = currentBrowserWindowOrWebContents
+
+// Get or create application menu
+const appMenu = Menu.getApplicationMenu() ?? new Menu()
+
+// Add Findbar controls to menu
+appMenu.append(new MenuItem({
+  label: 'Find', 
+  submenu: [
+    { 
+      label: 'Find in Page', 
+      click: () => Findbar.from(parent)?.open(), 
+      accelerator: 'CommandOrControl+F' 
+    },
+    { 
+      label: 'Close Find', 
+      click: () => Findbar.from(parent)?.close(), 
+      accelerator: 'Esc' 
+    }
+  ]
+}))
+
+// Apply the updated menu
+Menu.setApplicationMenu(appMenu)
+```
+
+Both approaches have their advantages - the first offers fine-grained control over exactly when shortcuts are activated, while the second provides better integration with standard application menu conventions.
+
+### Finding Text using the main process
+
+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:
+
+```js
+/**
+ * Get the last state of the findbar.
+ * @returns {{ text: string, matchCase: boolean, movable: boolean }} Last state of the findbar.
+ */
+getLastState()
+
+/**
+ * Initiate a request to find all matches for the specified text on the page.
+ * @param {string} text - The text to search for.
+ * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+ */
+startFind(text, skipRendererEvent)
+
+/**
+ * Whether the search should be case-sensitive.
+ * @param {boolean} status - Whether the search should be case-sensitive. Default is false.
+ * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+ */
+matchCase(status, skipRendererEvent)
+
+/**
+ * Select the previous match, if available.
+ */
+findPrevious()
+
+/**
+ * Select the next match, if available.
+ */
+findNext()
+
+/**
+ * Stop the find request and clears selection.
+ */
+stopFind()
+
+/**
+ * Whether the findbar is opened.
+ * @returns {boolean} True if the findbar is open, otherwise false.
+ */
+isOpen()
+
+/**
+ * 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()
+
+/**
+ * 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()
+```
+
 ## 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.
@@ -169,12 +285,12 @@ If the `contextIsolation` is enabled, the `electron-findbar/remote` will not be
 
 ```js
 const $remote = (ipc => ({
-    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+    getLastState: async () => ipc.invoke('electron-findbar/last-state'),
     inputChange: (value) => { ipc.send('electron-findbar/input-change', value) },
+    matchCase: (value) => { ipc.send('electron-findbar/match-case', 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') },
+    close: () => { ipc.send('electron-findbar/close') }
 })) (require('electron').ipcRenderer)
 
 $remote.open()

package/index.js

@@ -1,5 +1,8 @@
 const { BaseWindow, BrowserWindow, WebContents, BrowserWindowConstructorOptions, Rectangle } = require('electron')
 
+/**
+ * Chrome-like findbar for Electron applications.
+ */
 class Findbar {
     /** @type {BaseWindow} */
     #parent
@@ -10,14 +13,14 @@ class Findbar {
     /** @type {WebContents} */
     #findableContents
 
-    /** */
+    /** @type { { active: number, total: number } } */
     #matches
 
     /** @type {(findbarWindow: BrowserWindow) => void} */
     #windowHandler
 
-    /** @type {{parentBounds: Rectangle, findbarBounds: Rectangle} => {x: number, y: number}} */
-    #positionHandler = Findbar.#setDefaultPosition
+    /** @type {{parentBounds: Rectangle, findbarBounds: Rectangle} => Rectangle} */
+    #boundsHandler = Findbar.#setDefaultPosition
 
     /** @type {BrowserWindowConstructorOptions} */
     #customOptions
@@ -25,6 +28,12 @@ class Findbar {
     /** @type {string} */
     #lastText = ''
 
+    /** @type {boolean} */
+    #matchCase = false
+
+    /** @type {boolean} */
+    #isMovable = false
+
     /**
      * Workaround to fix "findInPage" bug - double-click to loop
      * @type {boolean | null}
@@ -32,37 +41,56 @@ class Findbar {
     #fixMove = null
 
     /**
-     * Prepare the findbar.
-     * @param {BaseWindow} parent Parent window.
-     * @param {WebContents | void} webContents Searchable web contents. If not set and the parent is a BrowserWindow, 
-     * the web contents of the parent will be used. Otherwise, an error will be triggered.
+     * Configure the findbar and link to the web contents.
+     * 
+     * @overload
+     * @param {BrowserWindow} browserWindow Parent window.
+     * @param {WebContents} [customWebContents] Custom findable web contents. If not provided, the web contents of the BrowserWindow will be used.
+     * @returns {Findbar} The findbar instance if it exists.
+     *
+     * @overload
+     * @param {BaseWindow} baseWindow Parent window.
+     * @param {WebContents} webContents Findable web contents.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
+     *     * 
+     * @overload
+     * @param {WebContents} webContents Findable web contents. The parent window will be undefined.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
      */
     constructor (parent, webContents) {
-        this.#parent = parent
-        this.#findableContents = webContents ?? parent.webContents
-        this.#findableContents._findbar = this
-        
+        if (isFindable(parent)) {
+            this.#parent = void 0
+            this.#findableContents = parent
+        } else {
+            this.#parent = parent
+            this.#findableContents = webContents ?? parent.webContents
+        }
+
         if (!this.#findableContents) {
             throw new Error('There are no searchable web contents.')
         }
+
+        this.#findableContents._findbar = this
     }
     
     /**
      * Open the findbar. If the findbar is already opened, focus the input text.
+     * @returns {void}
      */
     open() {
         if (this.#window) {
             this.#focusWindowAndHighlightInput()
             return
         }
-        this.#window = new BrowserWindow(Findbar.#mergeStandardOptions(this.#customOptions, this.#parent))
+        const options = Findbar.#mergeStandardOptions(this.#customOptions, this.#parent)
+        this.#isMovable = options.movable
+        this.#window = new BrowserWindow(options)
         this.#window.webContents._findbar = this
 
         this.#registerListeners()
 
-        const pos = this.#positionHandler(this.#parent.getBounds(), this.#window.getBounds())
-        this.#window.setPosition(pos.x, pos.y)
-
         this.#windowHandler && this.#windowHandler(this.#window)
         
         this.#window.loadFile(`${__dirname}/web/findbar.html`)
@@ -70,6 +98,7 @@ class Findbar {
 
     /**
      * Close the findbar.
+     * @returns {void}
      */
     close() {
         if (!this.#window || this.#window.isDestroyed()) { return }
@@ -79,53 +108,72 @@ class Findbar {
     }
 
     /**
-     * Get last queried text.
+     * Get the last state of the findbar.
+     * @returns {{ text: string, matchCase: boolean, movable: boolean }} Last state of the findbar.
      */
-    getLastText() {
-        return this.#lastText
+    getLastState() {
+        return { text: this.#lastText, matchCase: this.#matchCase, movable: this.#isMovable }
     }
 
     /**
      * 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.
+     * @param {string} text - Value to find in page.
+     * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+     * @returns {void}
      */
-    startFind(text, skipInputUpdate) {
-        skipInputUpdate || this.#window?.webContents.send('electron-findbar/text-change', text)
+    startFind(text, skipRendererEvent) {
+        skipRendererEvent || this.#window?.webContents.send('electron-findbar/text-change', text)
         if (this.#lastText = text) {
-            this.isOpen() && this.#findableContents.findInPage(this.#lastText, { findNext: true })
+            this.isOpen() && this.#findInContent({ findNext: true })
         } else {
             this.stopFind()
         }
     }
 
+    /**
+     * Whether the search should be case-sensitive. If not set, the search will be case-insensitive.
+     * @param {boolean} status - Whether the search should be case-sensitive. Default is false.
+     * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+     * @returns {void}
+     */
+    matchCase(status, skipRendererEvent) {
+        if (this.#matchCase === status) { return }
+        this.#matchCase = status
+        skipRendererEvent || this.#window?.webContents.send('electron-findbar/match-case-change', this.#matchCase)
+        this.#stopFindInContent()
+        this.startFind(this.#lastText, skipRendererEvent)
+    }
+
     /**
      * Select previous match if any.
+     * @returns {void}
      */
     findPrevious() {
         this.#matches.active === 1 && (this.#fixMove = false)
-        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: false })
+        this.isOpen() && this.#findInContent({ forward: false })
     }
 
     /**
      * Select next match if any.
+     * @returns {void}
      */
     findNext() {
         this.#matches.active === this.#matches.total && (this.#fixMove = true)
-        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: true })
+        this.isOpen() && this.#findInContent({ forward: true })
     }
 
     /**
-     * Stops the find request.
+     * Stops the find request and clears selection.
+     * @returns {void}
      */
     stopFind() {
         this.isOpen() && this.#sendMatchesCount(0, 0)
-        this.#findableContents.isDestroyed() || this.#findableContents.stopFindInPage("clearSelection")
+        this.#findableContents.isDestroyed() || this.#stopFindInContent()
     }
 
     /**
      * Whether the findbar is opened.
-     * @returns {boolean} True, if the findbar is open. Otherwise, false.
+     * @returns {boolean} True if the findbar is open, otherwise false.
      */
     isOpen() {
         return !!this.#window
@@ -133,15 +181,16 @@ class Findbar {
 
     /**
      * Whether the findbar is focused. If the findbar is closed, false will be returned.
-     * @returns {boolean} True, if the findbar is focused. Otherwise, false.
+     * @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.
+     * 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()
@@ -160,7 +209,9 @@ class Findbar {
      * - options.fullscreenable (value: false)
      * - options.webPreferences.nodeIntegration (value: true)
      * - options.webPreferences.contextIsolation (value: false)
-     * @param {BrowserWindowConstructorOptions} customOptions Custom window options.
+     * 
+     * @param {BrowserWindowConstructorOptions} customOptions - Custom window options.
+     * @returns {void}
      */
     setWindowOptions(customOptions) {
         this.#customOptions = customOptions
@@ -168,18 +219,32 @@ class Findbar {
 
     /**
      * Set a window handler capable of changing the findbar window settings after opening.
-     * @param {(findbarWindow: BrowserWindow) => void} windowHandler Window handler.
+     * @param {(findbarWindow: BrowserWindow) => void} windowHandler - Window handler function.
+     * @returns {void}
      */
     setWindowHandler(windowHandler) {
         this.#windowHandler = windowHandler
     }
 
     /**
-     * Set a bounds handler to calculate the findbar bounds when the parent resizes.
-     * @param {{parentBounds: Rectangle, findbarBounds: Rectangle} => Rectangle} boundsHandler Bounds handler.
+     * Set a bounds handler to calculate the findbar bounds when the parent window resizes. If width and/or height are not provided, the current value will be used.
+     * @param {(parentBounds: Rectangle, findbarBounds: Rectangle) => Rectangle} boundsHandler - Bounds handler function.
+     * @returns {void}
      */
     setBoundsHandler(boundsHandler) {
-        this.#positionHandler = boundsHandler
+        this.#boundsHandler = boundsHandler
+    }
+
+    /**
+     * @param {Electron.FindInPageOptions} options 
+     */
+    #findInContent(options) {
+        options.matchCase = this.#matchCase
+        this.#findableContents.findInPage(this.#lastText, options)
+    }
+
+    #stopFindInContent() {
+        this.#findableContents.stopFindInPage('clearSelection')
     }
 
     /**
@@ -188,21 +253,29 @@ class Findbar {
     #registerListeners() {
         const showCascade = () => this.#window.isVisible() || this.#window.show()
         const hideCascade = () => this.#window.isVisible() && this.#window.hide()
-        const positionHandler = () => {
-            const pos = this.#positionHandler(this.#parent.getBounds(), this.#window.getBounds())
-            this.#window.setPosition(pos.x, pos.y)
+        const boundsHandler = () => {
+            const currentBounds = this.#window.getBounds()
+            const newBounds = this.#boundsHandler(this.#parent.getBounds(), currentBounds)
+            if (!newBounds.width) { newBounds.width = currentBounds.width }
+            if (!newBounds.height) { newBounds.height = currentBounds.height }
+            this.#window.setBounds(newBounds, false)
         }
         
-        this.#parent.prependListener('show', showCascade)
-        this.#parent.prependListener('hide', hideCascade)
-        this.#parent.prependListener('resize', positionHandler)
-        this.#parent.prependListener('move', positionHandler)
+        if (this.#parent && !this.#parent.isDestroyed()) {
+            boundsHandler()
+            this.#parent.prependListener('show', showCascade)
+            this.#parent.prependListener('hide', hideCascade)
+            this.#parent.prependListener('resize', boundsHandler)
+            this.#parent.prependListener('move', boundsHandler)
+        }
 
         this.#window.once('close', () => {
-            this.#parent.off('show', showCascade)
-            this.#parent.off('hide', hideCascade)
-            this.#parent.off('resize', positionHandler)
-            this.#parent.off('move', positionHandler)
+            if (this.#parent && !this.#parent.isDestroyed()) {
+                this.#parent.off('show', showCascade)
+                this.#parent.off('hide', hideCascade)
+                this.#parent.off('resize', boundsHandler)
+                this.#parent.off('move', boundsHandler)
+            }
             this.#window = null
             this.stopFind()
         })
@@ -279,14 +352,53 @@ class Findbar {
         options.webPreferences.preload = options.webPreferences.preload ?? `${__dirname}/web/preload.js`
         return options
     }
+
+    /**
+     * Get the findbar instance for a given BrowserWindow or WebContents. 
+     * If no findbar instance exists, it will return a new one linked to the web contents.
+     * 
+     * @overload
+     * @param {BrowserWindow} browserWindow Parent window.
+     * @param {WebContents} [customWebContents] Custom findable web contents. If not provided, the web contents of the BrowserWindow will be used.
+     * @returns {Findbar} The findbar instance if it exists.
+     * 
+     * @overload
+     * @param {WebContents} webContents Findable web contents. The parent window will be undefined.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
+     * 
+     * @overload
+     * @param {BaseWindow} baseWindow Parent window.
+     * @param {WebContents} webContents Findable web contents.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
+     */
+     static from(windowOrWebContents, customWebContents) {
+        let webContents = isFindable(windowOrWebContents) ?
+            windowOrWebContents : customWebContents ?? windowOrWebContents.webContents
+
+        return webContents._findbar || new Findbar(windowOrWebContents, customWebContents)
+    }
+
+    /**
+     * Get the findbar instance for a given BrowserWindow or WebContents. 
+     * @param {BrowserWindow | WebContents} windowOrWebContents
+     * @returns {Findbar | undefined} The findbar instance if it exists, otherwise undefined.
+     */
+    static fromIfExists(windowOrWebContents) {
+        return (isFindable(windowOrWebContents) ? windowOrWebContents : windowOrWebContents.webContents)._findbar
+    }
 }
 
+const isFindable = (obj) => obj && typeof obj.findInPage === 'function' && typeof obj.stopFindInPage === 'function';
+
 /**
  * Define IPC events.
  */
 (ipc => {
-    ipc.handle('electron-findbar/last-text', e => e.sender._findbar.getLastText())
+    ipc.handle('electron-findbar/last-state', e => e.sender._findbar.getLastState())
     ipc.on('electron-findbar/input-change', (e, text, skip) => e.sender._findbar.startFind(text, skip))
+    ipc.on('electron-findbar/match-case', (e, status, skip) => e.sender._findbar.matchCase(status, 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())

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-findbar",
-  "version": "1.1.0",
+  "version": "2.0.1",
   "description": "Chrome-like findbar for your Electron app.",
   "main": "index.js",
   "files": [

package/remote.js

@@ -3,19 +3,41 @@
  */
 const Remote = (ipc => ({
     /**
-     * Get last queried text.
-     * @returns {string}
+     * Get last queried text and the "match case" status.
+     * @returns {Promise<{ text: string, matchCase: boolean, movable: boolean }>}
      */
-    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+    getLastState: async () => ipc.invoke('electron-findbar/last-state'),
 
     /**
      * Change the input value and find it.
-     * @param {string} text 
+     * @param {string} text - The text to search for
      */
     inputChange: (text) => { ipc.send('electron-findbar/input-change', text) },
+    
+    /**
+     * Toggle case sensitive search
+     * @param {boolean} value - Whether to match case or not
+     */
+    matchCase: (value) => { ipc.send('electron-findbar/match-case', value) },
+    
+    /**
+     * Navigate to the previous match
+     */
     previous: () => { ipc.send('electron-findbar/previous') },
+    
+    /**
+     * Navigate to the next match
+     */
     next: () => { ipc.send('electron-findbar/next') },
+    
+    /**
+     * Open the findbar
+     */
     open: () => { ipc.send('electron-findbar/open') },
+    
+    /**
+     * Close the findbar
+     */
     close: () => { ipc.send('electron-findbar/close') },
 })) (require('electron').ipcRenderer)
 

package/web/app.css

@@ -11,28 +11,37 @@ body {
 
 nav {
     --bg-color: #fff;
-    --border: #eee;
+    --border: #ddd;
     --color: #626262;
-    --input-color: #1f1f1f;
+    --input-color: #111;
     --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;
+    --spacing: .5rem;
 }
 
 @media (prefers-color-scheme: dark) {
     nav {
         --bg-color: #1f1f1f;
-        --border: #2f2f2f;
+        --border: #3f3f3f;
         --color: #a9a9aa;
-        --input-color: #e3e3e3;
+        --input-color: #eee;
         --btn-hover-color: #333;
         --btn-active-color: #444;
     }
 }
 
-svg {
+#match-case {
+    fill: var(--color);
+    user-select: none;
+}
+
+#match-case > svg {
+    width: 20px;
+}
+
+#previous, #next, #close {
     fill: none;
     stroke: var(--color);
     stroke-width: 2;
@@ -48,15 +57,15 @@ nav {
     padding: var(--spacing);
     background-color: var(--bg-color);
     color: var(--color);
+}
+
+.linux nav {
     border-radius: 10px;
     border: 1px solid var(--border);
-    -webkit-app-region: drag;
-    app-region: drag;
 }
 
-nav > *:not(:last-child),
-.btn-group > *:not(:last-child) {
-    margin-right: var(--spacing);
+nav, .btn-group {
+    gap: var(--spacing);
 }
 
 span, input {
@@ -65,6 +74,7 @@ span, input {
 }
 
 span {
+    color: var(--input-color);
     user-select: none;
 }
 
@@ -75,8 +85,6 @@ input {
     font-weight: 500;
     border: none;
     outline: none;
-    -webkit-app-region: no-drag;
-    app-region: no-drag;
 }
 
 .divider {
@@ -89,27 +97,45 @@ input {
     display: flex;
 }
 
-.btn-group > div {
+button {
+    background-color: transparent;
+    border: none;
     border-radius: 50%;
     cursor: default;
     width: 26px;
     height: 26px;
     padding: 3px;
     text-align: center;
-    transition: .1s linear all;
-    -webkit-app-region: no-drag;
-    app-region: no-drag;
+    transition: .2s linear all;
 }
 
-.btn-group > div:hover {
+button:hover {
     background-color: var(--btn-hover-color);
 }
 
-.btn-group > div:active {
+button:active {
     background-color: var(--btn-active-color);
 }
 
-.btn-group > .disabled {
+button:focus {
+    outline: none;
+}
+
+button.disabled {
     opacity: .4;
+}
+
+#previous.disabled, #next.disabled {
     background-color: transparent !important;
+}
+
+.movable nav {
+    -webkit-app-region: drag;
+    app-region: drag;
+}
+
+input, button {
+    -webkit-app-region: no-drag;
+    app-region: no-drag;
+    
 }

package/web/findbar.html

@@ -5,30 +5,37 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self'; default-src 'self'; connect-src 'none'; frame-src 'none'; object-src 'none'; font-src 'self'; img-src 'self'">
-    <title>Findbar</title>
+    <title>Find in page</title>
     <link rel="stylesheet" href="app.css">
-<body>
+<body class="movable">
     <nav>
-        <input id='input' type="text" spellcheck="false">
+        <input id="input" type="text" spellcheck="false">
         <span id="matches"></span>
+        <button id="match-case" class="disabled" title="Match case">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="none">
+                <text x="4" y="15" font-size="14" font-family="monospace" font-weight="bold">A</text>
+                <text x="12" y="19" font-size="14" font-family="monospace">a</text>
+            </svg>
+        </button>
         <div class="divider"></div>
         <div class="btn-group">
-            <div id="previous" class="disabled">
+            
+            <button id="previous" class="disabled" title="Previous">
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M7 15L12 10L17 15"/>
                 </svg>
-            </div>
-            <div id="next" class="disabled">
+            </button>
+            <button id="next" class="disabled" title="Next">
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M7 10L12 15L17 10"/>
                 </svg>
-            </div>
-            <div id="close">
+            </button>
+            <button id="close" title="Close">
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M7 17.5L12 12.5L17 17.5"/>
                     <path d="M7 7.5L12 12.5L17 7.5"/>
                 </svg>
-            </div>
+            </button>
         </div>
     </nav>
 </body>

package/web/preload.js

@@ -1,12 +1,14 @@
 const $remote = (ipc => ({
-    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+    getLastState: async () => ipc.invoke('electron-findbar/last-state'),
     inputChange: (value) => { ipc.send('electron-findbar/input-change', value, true) },
+    matchCase: (value) => { ipc.send('electron-findbar/match-case', 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) }
+    onTextChange: (listener) => { ipc.on('electron-findbar/text-change', listener) },
+    onMatchCaseChange: (listener) => { ipc.on('electron-findbar/match-case-change', listener) }
 })) (require('electron').ipcRenderer)
 
 let canRequest = true, canMove = false
@@ -16,6 +18,12 @@ function inputChange(e) {
     $remote.inputChange(e.target.value)
 }
 
+function matchCaseChange(btn) {
+    const newStatus = buttonIsDisabled(btn)
+    toggleButton(btn, newStatus)
+    $remote.matchCase(newStatus)
+}
+
 function move(next) {
     if (canRequest && canMove) {
         canRequest = false
@@ -23,38 +31,51 @@ function move(next) {
     }
 }
 
+function toggleButton(btn, status) {
+    btn.classList[status ? 'remove' : 'add']('disabled')
+}
+
+function buttonIsDisabled(btn) {
+    return btn.classList.contains('disabled')
+}
+
 document.addEventListener('DOMContentLoaded', async () => {
     const inputEl = document.getElementById('input')
+    const matchCaseBtn = document.getElementById('match-case')
     const previousBtn = document.getElementById('previous')
     const nextBtn = document.getElementById('next')
     const closeBtn = document.getElementById('close')
     const matchesEl = document.getElementById('matches')
-    const moveBtns = [...document.getElementsByClassName('disabled')]
+    const moveBtns = [previousBtn, nextBtn]
 
+    matchCaseBtn.addEventListener('click', () => matchCaseChange(matchCaseBtn))
     previousBtn.addEventListener('click', () => move(false))
     nextBtn.addEventListener('click', () => move(true))
     closeBtn.addEventListener('click', () => $remote.close())
     inputEl.addEventListener('input', inputChange)
 
-    $remote.onMatchesChange((_, m) => {
-        canRequest = true
-        matchesEl.innerText = inputEl.value ? m.active + '/' + m.total : ''
-
-        for (var moveBtn of moveBtns) {
-            (canMove = m.total > 1) ? 
-                moveBtn.classList.remove('disabled') :
-                moveBtn.classList.add('disabled')
-        }
-    })
+    $remote.onTextChange((_, text) => { inputEl.value = text })
 
     $remote.onInputFocus(() => {
         inputEl.setSelectionRange(0, inputEl.value.length)
         inputEl.focus()
     })
 
-    $remote.onTextChange((_, text) => { inputEl.value = text })
+    $remote.onMatchCaseChange((_, status) => { console.log('Match case:', status);toggleButton(matchCaseBtn, status) })
 
-    inputEl.value = await $remote.getLastText()
+    $remote.onMatchesChange((_, m) => {
+        canRequest = true
+        matchesEl.innerText = inputEl.value ? m.active + '/' + m.total : ''
+        for (var moveBtn of moveBtns) { toggleButton(moveBtn, canMove = m.total > 1) }
+    })
+    
+    const lastState = await $remote.getLastState()
+    inputEl.value = lastState.text || ''
+    lastState.movable || document.body.classList.remove('movable')
+    if (process.platform === 'linux') {
+        document.body.classList.add('linux')
+    }
+    toggleButton(matchCaseBtn, lastState.matchCase)
     $remote.inputChange(inputEl.value)
     inputEl.setSelectionRange(0, inputEl.value.length)
     inputEl.focus()