electron-findbar 3.1.1 → 3.3.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Emerson Capuchi Romaneli
+Copyright (c) 2026 Emerson Capuchi Romaneli
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -19,6 +19,23 @@ Install the `electron-findbar` package via [npm](https://www.npmjs.com/package/e
 npm install electron-findbar
 ```
 
+## Development & Build
+
+This project is written in **TypeScript** and uses **Webpack** for bundling and minification.
+
+### Prerequisites
+
+- Node.js >= 12.0.0
+- npm
+
+### Setup
+
+Install dependencies:
+
+```sh
+npm install
+```
+
 ## Overview
 
 The `electron-findbar` package creates a `BrowserWindow`-based component designed to emulate the Chrome findbar layout, leveraging the `webContents.findInPage` method to navigate through matches. Inter-process communication (IPC) is used for interaction between the `main` and `renderer` processes.
@@ -62,7 +79,7 @@ It is also possible to create a findbar providing only the web contents. The Bas
 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.
+**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. If a different parent is used, the parent window is updated automatically.
 
 #### Retrieve if exists
 
@@ -241,7 +258,7 @@ Once open, the Findbar appears by default in the top-right corner of the parent
 ```js
 /**
  * Get the last state of the findbar.
- * @returns {{ text: string, matchCase: boolean, movable: boolean }} Last state of the findbar.
+ * @returns {{ text: string, matchCase: boolean, movable: boolean, theme: 'light' | 'dark' | 'system' }} Last state of the findbar.
  */
 getLastState()
 
@@ -292,6 +309,36 @@ isFocused()
  * @returns {boolean} True if the findbar is visible, otherwise false.
  */
 isVisible()
+
+/**
+ * Get the current theme of this findbar instance.
+ * @returns {'light' | 'dark' | 'system'} The current theme setting.
+ */
+getTheme()
+
+/**
+ * Update the theme of the findbar. Only affects the current instance.
+ * @param {'light' | 'dark' | 'system'} theme - The theme to set. If not provided, uses the default theme.
+ */
+updateTheme(theme)
+
+/**
+ * Set whether the findbar will follow the parent window visibility events. Default is true.
+ * If false, the findbar will not hide with the parent window automatically.
+ */
+followVisibilityEvents(shouldFollow: boolean = true)
+
+/**
+ * Get the default theme for new findbar instances.
+ * @returns {'light' | 'dark' | 'system'} The default theme setting.
+ */
+static getDefaultTheme()
+
+/**
+ * Set the default theme for new findbar instances.
+ * @param {'light' | 'dark' | 'system'} theme - The theme to set as default.
+ */
+static setDefaultTheme(theme)
 ```
 
 ## IPC Events
@@ -305,13 +352,17 @@ If the `contextIsolation` is enabled, the `electron-findbar/remote` will not be
 ```js
 const $remote = (ipc => ({
     getLastState: async () => ipc.invoke('electron-findbar/last-state'),
-    inputChange: (text) => { ipc.send('electron-findbar/input-change', text) },
-    matchCase: (value) => { ipc.send('electron-findbar/match-case', value) },
+    inputChange: (value: string) => { ipc.send('electron-findbar/input-change', value, true) },
+    matchCase: (value: boolean) => { ipc.send('electron-findbar/match-case', value, true) },
     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)
+    close: () => { ipc.send('electron-findbar/close') },
+    onMatchesChange: (listener: Function) => { ipc.on('electron-findbar/matches', listener) },
+    onInputFocus: (listener: Function) => { ipc.on('electron-findbar/input-focus', listener) },
+    onTextChange: (listener: Function) => { ipc.on('electron-findbar/text-change', listener) },
+    onMatchCaseChange: (listener: Function) => { ipc.on('electron-findbar/match-case-change', listener) },
+    onForceTheme: (listener: Function) => { ipc.on('electron-findbar/force-theme', listener) },
+})) (require('electron').ipcRenderer);
 
 $remote.open()
 $remote.inputChange('findIt')
@@ -338,7 +389,7 @@ The `updateParentWindow` method allows you to change the parent window while pre
 
 ```javascript
 // Create a findbar for the initial window
-const findbar = Findbar.from(oldWindow, webContents)
+const findbar = Findbar.from([oldWindow, ]webContents)
 
 // Later, when you need to change the parent:
 findbar.updateParentWindow(newWindow)

package/dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><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' 'sha256-xegrQ38nadcaxMgXTqofPqPhLTW4XM5uk6u7cigFZb4='; default-src 'self'; connect-src 'none'; frame-src 'none'; object-src 'none'; font-src 'self'; img-src 'self'"><title>Find in page</title><style>*,:after,:before{box-sizing:border-box}body{margin:0;padding:0;font-weight:400;height:100vh;--bg-color:#fff;--border:#ddd;--color:#626262;--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:.5rem}body.dark{--bg-color:#1f1f1f;--border:#3f3f3f;--color:#a9a9aa;--input-color:#eee;--btn-hover-color:#333;--btn-active-color:#444}@media (prefers-color-scheme:dark){body:not(.light){--bg-color:#1f1f1f;--border:#3f3f3f;--color:#a9a9aa;--input-color:#eee;--btn-hover-color:#333;--btn-active-color:#444}}#match-case{fill:var(--color);user-select:none}#match-case>svg{width:20px}#close,#next,#previous{fill:none;stroke:var(--color);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}nav{display:flex;align-items:center;width:100%;height:100%;padding:var(--spacing);background-color:var(--bg-color);color:var(--color)}.linux nav{border-radius:10px;border:1px solid var(--border)}.btn-group,nav{gap:var(--spacing)}input,span{font-family:var(--font-family);font-size:var(--font-size)}span{color:var(--input-color);user-select:none}input{width:100%;background-color:transparent;color:var(--input-color);font-weight:500;border:none;outline:0}.divider{width:2px;height:100%;background-color:var(--btn-hover-color)}.btn-group{display:flex}button{background-color:transparent;border:none;border-radius:50%;cursor:default;width:26px;height:26px;padding:3px;text-align:center;transition:.2s linear all}button:hover{background-color:var(--btn-hover-color)}button:active{background-color:var(--btn-active-color)}button:focus{outline:0}button.disabled{opacity:.4}#next.disabled,#previous.disabled{background-color:transparent!important}.movable nav{-webkit-app-region:drag;app-region:drag}button,input{-webkit-app-region:no-drag;app-region:no-drag}</style></head><body class="movable"><nav><input id="input" 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"><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></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></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></button></div></nav></body></html>

package/dist/main.d.ts

@@ -0,0 +1,150 @@
+import { BaseWindow, BrowserWindow, WebContents, BrowserWindowConstructorOptions, Rectangle } from 'electron';
+interface LastState {
+    text: string;
+    matchCase: boolean;
+    movable: boolean;
+    theme: 'light' | 'dark' | 'system';
+}
+/**
+ * Chrome-like findbar for Electron applications.
+ */
+declare class Findbar {
+    private static defaultTheme;
+    private static defaultWindowHandler?;
+    private static defaultBoundsHandler;
+    private parent?;
+    private window?;
+    private findableContents;
+    private followVisibilityEventsFlag;
+    private matches;
+    private windowHandler;
+    private boundsHandler;
+    private customOptions?;
+    private lastText;
+    private theme;
+    private matchCaseFlag;
+    private isMovableFlag;
+    private fixMove?;
+    /**
+     * Configure the findbar and link to the web contents.
+     *
+     * @param parent - Parent window or web contents
+     * @param webContents - Custom findable web contents (optional)
+     */
+    constructor(parent: BaseWindow | BrowserWindow | WebContents, webContents?: WebContents);
+    /**
+     * Open the findbar. If the findbar is already opened, focus the input text.
+     */
+    open(): void;
+    /**
+     * Close the findbar.
+     */
+    close(): void;
+    /**
+     * Detach the findbar from the web contents and close it if opened.
+     */
+    detach(): void;
+    /**
+     * Update the parent window of the findbar.
+     */
+    updateParentWindow(newParent?: BaseWindow): void;
+    /**
+     * Get the last state of the findbar.
+     */
+    getLastState(): LastState;
+    /**
+     * Starts a request to find all matches for the text in the page.
+     */
+    startFind(text: string, skipRendererEvent?: boolean): void;
+    /**
+     * Whether the search should be case-sensitive.
+     */
+    matchCase(status: boolean, skipRendererEvent?: boolean): void;
+    /**
+     * Select previous match if any.
+     */
+    findPrevious(): void;
+    /**
+     * Select next match if any.
+     */
+    findNext(): void;
+    /**
+     * Stops the find request and clears selection.
+     */
+    stopFind(): void;
+    /**
+     * Whether the findbar is opened.
+     */
+    isOpen(): boolean;
+    /**
+     * Whether the findbar is focused.
+     */
+    isFocused(): boolean;
+    /**
+     * Whether the findbar is visible to the user.
+     */
+    isVisible(): boolean;
+    /**
+     * Set custom options for the findbar window.
+     */
+    setWindowOptions(customOptions: BrowserWindowConstructorOptions): void;
+    /**
+     * Set a window handler for the findbar window.
+     */
+    setWindowHandler(windowHandler: (findbarWindow: BrowserWindow) => void): void;
+    /**
+     * Set a bounds handler to calculate findbar bounds.
+     */
+    setBoundsHandler(boundsHandler: (parentBounds: Rectangle, findbarBounds: Rectangle) => Rectangle): void;
+    /**
+     * Set whether the findbar will follow the parent window "show" and "hide" events. Default is true.
+     * If false, the findbar will not hide automatically with the parent window.
+    */
+    followVisibilityEvents(shouldFollow: boolean): void;
+    /**
+     * Get the current theme of this findbar instance.
+     * @returns The current theme setting ('light', 'dark', or 'system').
+     */
+    getTheme(): 'light' | 'dark' | 'system';
+    /**
+     * Update the theme of the findbar. Only affects the current instance.
+     * @param theme - The theme to set. If not provided, uses the default theme.
+     */
+    updateTheme(theme?: 'light' | 'dark' | 'system'): void;
+    /**
+     * Get the default theme.
+     */
+    static getDefaultTheme(): 'light' | 'dark' | 'system';
+    /**
+     * Set the default theme for new findbar instances.
+     */
+    static setDefaultTheme(theme: 'light' | 'dark' | 'system'): void;
+    /**
+     * Set the default window handler for new findbar instances.
+     */
+    static setDefaultWindowHandler(windowHandler: (findbarWindow: BrowserWindow) => void): void;
+    /**
+     * Set the default bounds handler for new findbar instances.
+     */
+    static setDefaultBoundsHandler(boundsHandler: (parentBounds: Rectangle, findbarBounds: Rectangle) => Rectangle): void;
+    private registerKeyboardShortcuts;
+    private removeParent;
+    private findInContent;
+    private stopFindInContent;
+    private registerListeners;
+    private sendMatchesCount;
+    private focusWindowAndHighlightInput;
+    private static retrieveWebContents;
+    private static getBaseWindowFromWebContents;
+    private static setDefaultPosition;
+    private static mergeStandardOptions;
+    /**
+     * Get the findbar instance for a given BrowserWindow or WebContents.
+     */
+    static from(windowOrWebContents: BaseWindow | BrowserWindow | WebContents, customWebContents?: WebContents): Findbar;
+    /**
+     * Get the findbar instance for a given BrowserWindow or WebContents if it exists.
+     */
+    static fromIfExists(windowOrWebContents: BaseWindow | BrowserWindow | WebContents): Findbar | undefined;
+}
+export = Findbar;

package/dist/main.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e={288(e){e.exports=require("electron")},927(e,t,i){const n=i(288);class s{constructor(e,t){var i;if(this.followVisibilityEventsFlag=!0,this.matches={active:0,total:0},this.windowHandler=s.defaultWindowHandler,this.boundsHandler=s.defaultBoundsHandler,this.lastText="",this.theme=s.defaultTheme,this.matchCaseFlag=!1,this.isMovableFlag=!1,o(e)?(this.findableContents=e,e=s.getBaseWindowFromWebContents(this.findableContents)):this.findableContents=null!==(i=t)&&void 0!==i?i:s.retrieveWebContents(e),!this.findableContents)throw new Error("There are no searchable web contents.");this.findableContents._findbar=this,this.findableContents.once("destroyed",()=>{this.detach()}),this.updateParentWindow(e)}open(){var e,t;if(this.window)return void this.focusWindowAndHighlightInput();this.parent||this.updateParentWindow();const i=s.mergeStandardOptions(this.customOptions,this.parent);this.isMovableFlag=null!==(e=i.movable)&&void 0!==e&&e,this.window=new n.BrowserWindow(i),this.window.webContents._findbar=this,this.registerListeners(),null===(t=this.windowHandler)||void 0===t||t.call(this,this.window),this.window.loadFile(`${__dirname}/index.html`)}close(){this.window&&!this.window.isDestroyed()&&this.window.close()}detach(){this.close(),this.findableContents._findbar=void 0,this.window&&(this.window.webContents._findbar=void 0)}updateParentWindow(e){var t;this.parent!==e&&(this.close(),this.parent=null!==(t=e)&&void 0!==t?t:s.getBaseWindowFromWebContents(this.findableContents),this.parent&&!this.parent.isDestroyed()&&this.parent.once("closed",()=>{this.removeParent()}))}getLastState(){return{text:this.lastText,matchCase:this.matchCaseFlag,movable:this.isMovableFlag,theme:this.theme}}startFind(e,t){var i;t||null===(i=this.window)||void 0===i||i.webContents.send("electron-findbar/text-change",e),(this.lastText=e)?this.isOpen()&&this.findInContent({findNext:!0}):this.stopFind()}matchCase(e,t){var i;this.matchCaseFlag!==e&&(this.matchCaseFlag=e,t||null===(i=this.window)||void 0===i||i.webContents.send("electron-findbar/match-case-change",this.matchCaseFlag),this.stopFindInContent(),this.startFind(this.lastText,t))}findPrevious(){this.matches.total<2||(1===this.matches.active&&(this.fixMove=!1),this.isOpen()&&this.findInContent({forward:!1}))}findNext(){this.matches.total<2||(this.matches.active===this.matches.total&&(this.fixMove=!0),this.isOpen()&&this.findInContent({forward:!0}))}stopFind(){this.isOpen()&&this.sendMatchesCount(0,0),this.findableContents.isDestroyed()||this.stopFindInContent()}isOpen(){return!!this.window}isFocused(){var e;return!!(null===(e=this.window)||void 0===e?void 0:e.isFocused())}isVisible(){var e;return!!(null===(e=this.window)||void 0===e?void 0:e.isVisible())}setWindowOptions(e){this.customOptions=e}setWindowHandler(e){this.windowHandler=e}setBoundsHandler(e){this.boundsHandler=e}followVisibilityEvents(e){this.followVisibilityEventsFlag=e}getTheme(){return this.theme}updateTheme(e=s.defaultTheme){this.theme=e,this.window&&!this.window.isDestroyed()&&this.window.webContents.send("electron-findbar/force-theme",e)}static getDefaultTheme(){return s.defaultTheme}static setDefaultTheme(e){s.defaultTheme=e}static setDefaultWindowHandler(e){s.defaultWindowHandler=e}static setDefaultBoundsHandler(e){s.defaultBoundsHandler=e}registerKeyboardShortcuts(e,t){if(t.meta||t.control||t.alt)return;const i=t.key.toLowerCase();if(!t.shift)return"enter"===i?(this.findNext(),void e.preventDefault()):void("escape"===i&&this.isOpen()&&(this.close(),e.preventDefault()));"enter"===i&&(this.findPrevious(),e.preventDefault())}removeParent(){this.close(),this.parent=void 0}findInContent(e){e.matchCase=this.matchCaseFlag,this.findableContents.findInPage(this.lastText,e)}stopFindInContent(){this.findableContents.stopFindInPage("clearSelection")}registerListeners(){const e=()=>{this.window.isVisible()||this.window.show()},t=()=>{this.window.isVisible()&&this.window.hide()},i=()=>{const e=this.window.getBounds(),t=this.boundsHandler(this.parent.getBounds(),e);t.width||(t.width=e.width),t.height||(t.height=e.height),this.window.setBounds(t,!1)};this.parent&&!this.parent.isDestroyed()&&(i(),this.followVisibilityEventsFlag&&(this.parent.prependListener("show",e),this.parent.prependListener("hide",t)),this.parent.prependListener("resize",i),this.parent.prependListener("move",i)),this.window.once("closed",()=>{this.parent&&!this.parent.isDestroyed()&&(this.followVisibilityEventsFlag&&(this.parent.off("show",e),this.parent.off("hide",t)),this.parent.off("resize",i),this.parent.off("move",i)),this.window=void 0,this.stopFind()}),this.window.prependOnceListener("ready-to-show",()=>{this.window.show()}),this.window.webContents.prependListener("before-input-event",(e,t)=>{this.registerKeyboardShortcuts(e,t)}),this.findableContents.prependOnceListener("destroyed",()=>{this.close()}),this.findableContents.prependListener("found-in-page",(e,t)=>{this.sendMatchesCount(t.activeMatchOrdinal,t.matches)})}sendMatchesCount(e,t){void 0!==this.fixMove&&(this.fixMove?this.findNext():this.findPrevious(),this.fixMove=void 0),this.matches.active=e,this.matches.total=t,this.window.webContents.send("electron-findbar/matches",this.matches)}focusWindowAndHighlightInput(){this.window.focus(),this.window.webContents.send("electron-findbar/input-focus")}static retrieveWebContents(e){var t,i,n;return null!==(t=e.webContents)&&void 0!==t?t:null===(n=null===(i=e.contentView)||void 0===i?void 0:i.children[0])||void 0===n?void 0:n.webContents}static getBaseWindowFromWebContents(e){return n.BaseWindow.getAllWindows().find(t=>{var i;return t.webContents===e||(null===(i=t.contentView)||void 0===i?void 0:i.children.some(t=>t.webContents===e))})}static setDefaultPosition(e,t){return{x:e.x+e.width-t.width-20,y:e.y-(t.height/4|0),width:t.width,height:t.height}}static mergeStandardOptions(e,t){var i,n,s,o,r,a;return e||(e={}),e.width=null!==(i=e.width)&&void 0!==i?i:372,e.height=null!==(n=e.height)&&void 0!==n?n:52,e.resizable=null!==(s=e.resizable)&&void 0!==s&&s,e.movable=null!==(o=e.movable)&&void 0!==o&&o,e.acceptFirstMouse=null===(r=e.acceptFirstMouse)||void 0===r||r,e.parent=t,e.show=!1,e.frame=!1,e.roundedCorners=!0,e.transparent="linux"===process.platform,e.maximizable=!1,e.minimizable=!1,e.skipTaskbar=!0,e.fullscreenable=!1,e.autoHideMenuBar=!0,e.webPreferences||(e.webPreferences={}),e.webPreferences.nodeIntegration=!1,e.webPreferences.contextIsolation=!0,e.webPreferences.preload=null!==(a=e.webPreferences.preload)&&void 0!==a?a:`${__dirname}/preload.js`,e}static from(e,t){const i=o(e)?e:null!=t?t:s.retrieveWebContents(e);if(!i)throw new Error("[Findbar] There are no searchable web contents.");return i._findbar||new s(e,t)}static fromIfExists(e){const t=o(e)?e:s.retrieveWebContents(e);if(!t)throw new Error("[Findbar] There are no searchable web contents.");return t._findbar}}s.defaultTheme="system",s.defaultBoundsHandler=s.setDefaultPosition;const o=e=>e&&"function"==typeof e.findInPage&&"function"==typeof e.stopFindInPage;n.ipcMain.handle("electron-findbar/last-state",e=>{var t;return null===(t=s.fromIfExists(e.sender))||void 0===t?void 0:t.getLastState()}),n.ipcMain.on("electron-findbar/input-change",(e,t,i)=>{var n;return null===(n=s.fromIfExists(e.sender))||void 0===n?void 0:n.startFind(t,i)}),n.ipcMain.on("electron-findbar/match-case",(e,t,i)=>{var n;return null===(n=s.fromIfExists(e.sender))||void 0===n?void 0:n.matchCase(t,i)}),n.ipcMain.on("electron-findbar/previous",e=>{var t;return null===(t=s.fromIfExists(e.sender))||void 0===t?void 0:t.findPrevious()}),n.ipcMain.on("electron-findbar/next",e=>{var t;return null===(t=s.fromIfExists(e.sender))||void 0===t?void 0:t.findNext()}),n.ipcMain.on("electron-findbar/open",e=>s.from(e.sender).open()),n.ipcMain.on("electron-findbar/close",e=>{const t=s.fromIfExists(e.sender);t&&(t.stopFind(),t.close())}),e.exports=s}},t={},i=function i(n){var s=t[n];if(void 0!==s)return s.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,i),o.exports}(927);module.exports=i})();

package/dist/preload.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e={213(e,n,t){var o=this&&this.__awaiter||function(e,n,t,o){return new(t||(t=Promise))(function(c,a){function s(e){try{r(o.next(e))}catch(e){a(e)}}function i(e){try{r(o.throw(e))}catch(e){a(e)}}function r(e){var n;e.done?c(e.value):(n=e.value,n instanceof t?n:new t(function(e){e(n)})).then(s,i)}r((o=o.apply(e,n||[])).next())})};const c=(a=t(288).ipcRenderer,{getLastState:()=>o(void 0,void 0,void 0,function*(){return a.invoke("electron-findbar/last-state")}),inputChange:e=>{a.send("electron-findbar/input-change",e,!0)},matchCase:e=>{a.send("electron-findbar/match-case",e,!0)},previous:()=>{a.send("electron-findbar/previous")},next:()=>{a.send("electron-findbar/next")},close:()=>{a.send("electron-findbar/close")},onMatchesChange:e=>{a.on("electron-findbar/matches",e)},onInputFocus:e=>{a.on("electron-findbar/input-focus",e)},onTextChange:e=>{a.on("electron-findbar/text-change",e)},onMatchCaseChange:e=>{a.on("electron-findbar/match-case-change",e)},onForceTheme:e=>{a.on("electron-findbar/force-theme",e)}});var a;let s=!0,i=!1;function r(e){const n=e.target;s=!1,c.inputChange(n.value)}function d(e){s&&i&&(s=!1,e?c.next():c.previous())}function l(e,n){e.classList[n?"remove":"add"]("disabled")}function u(e){document.body.classList.remove("light","dark"),"system"!==e&&document.body.classList.add(e)}document.addEventListener("DOMContentLoaded",()=>o(void 0,void 0,void 0,function*(){const e=document.getElementById("input"),n=document.getElementById("match-case"),t=document.getElementById("previous"),o=document.getElementById("next"),a=document.getElementById("close"),v=document.getElementById("matches"),f=[t,o].filter(e=>null!==e);if(!(e&&n&&t&&o&&a&&v))return void console.error("Required elements not found in the DOM");n.addEventListener("click",()=>function(e){const n=function(e){return e.classList.contains("disabled")}(e);l(e,n),c.matchCase(n)}(n)),t.addEventListener("click",()=>d(!1)),o.addEventListener("click",()=>d(!0)),a.addEventListener("click",()=>c.close()),e.addEventListener("input",r),c.onTextChange((n,t)=>{e.value=t}),c.onInputFocus(()=>{e.setSelectionRange(0,e.value.length),e.focus()}),c.onMatchCaseChange((e,t)=>l(n,t)),c.onMatchesChange((n,t)=>{s=!0,v.innerText=e.value?t.active+"/"+t.total:"";for(const e of f)l(e,i=t.total>1)}),c.onForceTheme((e,n)=>{u(n)});const h=yield c.getLastState();e.value=h.text||"",h.movable||document.body.classList.remove("movable"),"linux"===process.platform&&document.body.classList.add("linux"),u(h.theme),l(n,h.matchCase),c.inputChange(e.value),e.setSelectionRange(0,e.value.length),e.focus()}))},288(e){e.exports=require("electron")}},n={};!function t(o){var c=n[o];if(void 0!==c)return c.exports;var a=n[o]={exports:{}};return e[o].call(a.exports,a,a.exports,t),a.exports}(213)})();

package/dist/remote.d.ts

@@ -0,0 +1,65 @@
+import { IpcRendererEvent } from 'electron';
+/**
+ * Remote IPC events to control the findbar through the renderer.
+ */
+interface Remote {
+    /**
+     * Get last queried text and the "match case" status.
+     */
+    getLastState(): Promise<{
+        text: string;
+        matchCase: boolean;
+        movable: boolean;
+    }>;
+    /**
+     * Change the input value and find it.
+     * @param text - The text to search for
+     */
+    inputChange(text: string): void;
+    /**
+     * Toggle case sensitive search
+     * @param value - Whether to match case or not
+     */
+    matchCase(value: boolean): void;
+    /**
+     * Navigate to the previous match
+     */
+    previous(): void;
+    /**
+     * Navigate to the next match
+     */
+    next(): void;
+    /**
+     * Open the findbar
+     */
+    open(): void;
+    /**
+     * Close the findbar
+     */
+    close(): void;
+    /**
+     * Listen for matches change event
+     */
+    onMatchesChange(listener: (event: IpcRendererEvent, matches: {
+        active: number;
+        total: number;
+    }) => void): void;
+    /**
+     * Listen for input focus event
+     */
+    onInputFocus(listener: (event: IpcRendererEvent) => void): void;
+    /**
+     * Listen for text change event
+     */
+    onTextChange(listener: (event: IpcRendererEvent, text: string) => void): void;
+    /**
+     * Listen for match case change event
+     */
+    onMatchCaseChange(listener: (event: IpcRendererEvent, status: boolean) => void): void;
+    /**
+     * Listen for force theme change event
+     */
+    onForceTheme(listener: (event: IpcRendererEvent, theme: 'light' | 'dark' | 'system') => void): void;
+}
+declare const Remote: Remote;
+export = Remote;

package/dist/remote.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e={288(e){e.exports=require("electron")},684(e,n,r){var t=this&&this.__awaiter||function(e,n,r,t){return new(r||(r=Promise))(function(o,c){function i(e){try{d(t.next(e))}catch(e){c(e)}}function a(e){try{d(t.throw(e))}catch(e){c(e)}}function d(e){var n;e.done?o(e.value):(n=e.value,n instanceof r?n:new r(function(e){e(n)})).then(i,a)}d((t=t.apply(e,n||[])).next())})};const o=r(288),c={getLastState:()=>t(void 0,void 0,void 0,function*(){return o.ipcRenderer.invoke("electron-findbar/last-state")}),inputChange:e=>{o.ipcRenderer.send("electron-findbar/input-change",e)},matchCase:e=>{o.ipcRenderer.send("electron-findbar/match-case",e)},previous:()=>{o.ipcRenderer.send("electron-findbar/previous")},next:()=>{o.ipcRenderer.send("electron-findbar/next")},open:()=>{o.ipcRenderer.send("electron-findbar/open")},close:()=>{o.ipcRenderer.send("electron-findbar/close")},onMatchesChange:e=>{o.ipcRenderer.on("electron-findbar/matches",e)},onInputFocus:e=>{o.ipcRenderer.on("electron-findbar/input-focus",e)},onTextChange:e=>{o.ipcRenderer.on("electron-findbar/text-change",e)},onMatchCaseChange:e=>{o.ipcRenderer.on("electron-findbar/match-case-change",e)},onForceTheme:e=>{o.ipcRenderer.on("electron-findbar/force-theme",e)}};e.exports=c}},n={},r=function r(t){var o=n[t];if(void 0!==o)return o.exports;var c=n[t]={exports:{}};return e[t].call(c.exports,c,c.exports,r),c.exports}(684);module.exports=r})();

package/package.json

@@ -1,28 +1,44 @@
 {
   "name": "electron-findbar",
-  "version": "3.1.1",
+  "version": "3.3.2",
   "description": "Chrome-like findbar for your Electron app.",
-  "main": "index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "default": "./dist/main.js"
+    },
+    "./remote": {
+      "types": "./dist/remote.d.ts",
+      "default": "./dist/remote.js"
+    }
+  },
   "files": [
-    "index.js",
-    "remote.js",
+    "dist/**/*",
     "LICENSE",
-    "web/**"
+    "!dist/preload.d.ts"
   ],
   "scripts": {
-    "sample": "electron test/sample.js"
+    "clean": "rm -rf dist",
+    "build": "npm run clean && webpack",
+    "build:dev": "npm run clean && NODE_ENV=development webpack",
+    "dev": "webpack --mode development --watch",
+    "sample": "electron test/sample.js",
+    "publish": "npm run build && npm publish --access public"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ECRomaneli/electron-findbar.git"
   },
   "keywords": [
+    "find",
     "findbar",
     "find-bar",
     "find bar",
+    "electron-find",
     "electron-findbar",
     "electron-find-bar",
     "electron",
+    "chrome-find",
     "chrome-findbar",
     "chrome-find-bar",
     "search",
@@ -38,6 +54,19 @@
     "node": ">=12.0.0"
   },
   "devDependencies": {
-    "electron": ">=12.0.0"
+    "@types/electron": "^1.6.12",
+    "@types/node": "^25.1.0",
+    "clean-css": "^5.3.3",
+    "css-loader": "^7.1.3",
+    "cssnano": "^7.1.2",
+    "electron": ">=12.0.0",
+    "html-webpack-plugin": "^5.6.6",
+    "mini-css-extract-plugin": "^2.10.0",
+    "postcss-loader": "^8.2.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1"
   }
 }

package/index.js

@@ -1,484 +0,0 @@
-const { BaseWindow, BrowserWindow, WebContents, BrowserWindowConstructorOptions, Rectangle } = require('electron')
-
-/**
- * Chrome-like findbar for Electron applications.
- */
-class Findbar {
-    /** @type {BaseWindow} */
-    #parent
-
-    /** @type {BrowserWindow} */
-    #window
-
-    /** @type {WebContents} */
-    #findableContents
-
-    /** @type { { active: number, total: number } } */
-    #matches = { active: 0, total: 0 }
-
-    /** @type {(findbarWindow: BrowserWindow) => void} */
-    #windowHandler
-
-    /** @type {{parentBounds: Rectangle, findbarBounds: Rectangle} => Rectangle} */
-    #boundsHandler = Findbar.#setDefaultPosition
-
-    /** @type {BrowserWindowConstructorOptions} */
-    #customOptions
-
-    /** @type {string} */
-    #lastText = ''
-
-    /** @type {boolean} */
-    #matchCase = false
-
-    /** @type {boolean} */
-    #isMovable = false
-
-    /**
-     * Workaround to fix "findInPage" bug - double-click to loop
-     * @type {boolean | null}
-     */
-    #fixMove = null
-
-    /**
-     * Configure the findbar and link to the web contents.
-     * 
-     * @overload
-     * @param {WebContents} webContents Findable web contents. The parent window will be defined by using BaseWindow.getAllWindows() and
-     * matching the webContents with the webContents of the window or its contentView children.
-     * @returns {Findbar} The findbar instance if it exists.
-     * @throws {Error} If no webContents is provided.
-     * 
-     * @overload
-     * @param {BrowserWindow} browserWindow Parent window.
-     * @param {WebContents} [customWebContents] Custom findable web contents. If not provided, the browserWindow.webContents will be used.
-     * @returns {Findbar} The findbar instance if it exists.
-     *
-     * @overload
-     * @param {BaseWindow} baseWindow Parent window.
-     * @param {WebContents} [webContents] Custom findable web contents. If not provided, the win.contentView.children[0] will be used.
-     * @returns {Findbar} The findbar instance if it exists.
-     * @throws {Error} If no webContents is provided.
-     */
-    constructor (parent, webContents) {
-        if (isFindable(parent)) {
-            this.#findableContents = parent
-            this.#parent = Findbar.#getBaseWindowFromWebContents(this.#findableContents)
-        } else {
-            this.#parent = parent
-            this.#findableContents = webContents ?? Findbar.#retrieveWebContents(parent)
-        }
-
-        if (!this.#findableContents) {
-            throw new Error('There are no searchable web contents.')
-        }
-
-        this.#findableContents._findbar = this
-
-        this.#findableContents.once('destroyed', () => { this.detach() })
-    }
-
-    /**
-     * Open the findbar. If the findbar is already opened, focus the input text.
-     * @returns {void}
-     */
-    open() {
-        if (this.#window) {
-            this.#focusWindowAndHighlightInput()
-            return
-        }
-        const options = Findbar.#mergeStandardOptions(this.#customOptions, this.#parent)
-        this.#isMovable = options.movable
-        this.#window = new BrowserWindow(options)
-        this.#window.webContents._findbar = this
-
-        this.#registerListeners()
-
-        this.#windowHandler && this.#windowHandler(this.#window)
-        this.#window.loadFile(`${__dirname}/web/findbar.html`)
-    }
-
-    /**
-     * Close the findbar.
-     * @returns {void}
-     */
-    close() {
-        if (this.#window && !this.#window.isDestroyed()) {
-            this.#window.close()
-        }
-    }
-
-    /**
-     * Detach the findbar from the web contents and close it if opened. After detaching, the findbar instance will be unusable.
-     * @returns {void}
-     */
-    detach() {
-        this.close()
-        this.#findableContents._findbar = void 0
-        if (this.#window) { this.#window.webContents._findbar = void 0 }
-    }
-
-    /**
-     * Update the parent window of the findbar.
-     * @param {BaseWindow} [newParent] - The new parent window. If not provided, the parent will be set to the window containing the web contents.
-     * @returns {void}
-     */
-    updateParentWindow(newParent) {
-        if (this.#parent === newParent) { return }
-        this.close()
-        this.#parent = newParent ?? Findbar.#getBaseWindowFromWebContents(this.#findableContents)
-    }
-
-    /**
-     * Get the last state of the findbar.
-     * @returns {{ text: string, matchCase: boolean, movable: boolean }} Last state of the findbar.
-     */
-    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} [skipRendererEvent=false] - Skip update renderer event.
-     * @returns {void}
-     */
-    startFind(text, skipRendererEvent) {
-        skipRendererEvent || this.#window?.webContents.send('electron-findbar/text-change', text)
-        if (this.#lastText = text) {
-            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() {
-        if (this.#matches.total < 2) { return }
-        this.#matches.active === 1 && (this.#fixMove = false)
-        this.isOpen() && this.#findInContent({ forward: false })
-    }
-
-    /**
-     * Select next match if any.
-     * @returns {void}
-     */
-    findNext() {
-        if (this.#matches.total < 2) { return }
-        this.#matches.active === this.#matches.total && (this.#fixMove = true)
-        this.isOpen() && this.#findInContent({ forward: true })
-    }
-
-    /**
-     * Stops the find request and clears selection.
-     * @returns {void}
-     */
-    stopFind() {
-        this.isOpen() && this.#sendMatchesCount(0, 0)
-        this.#findableContents.isDestroyed() || this.#stopFindInContent()
-    }
-
-    /**
-     * 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
-     * be overridden:
-     * - options.parent (value: parentWindow)
-     * - options.frame (value: false)
-     * - options.transparent (value: true)
-     * - options.maximizable (value: false)
-     * - options.minimizable (value: false)
-     * - options.skipTaskbar (value: true)
-     * - options.fullscreenable (value: false)
-     * - options.webPreferences.nodeIntegration (value: true)
-     * - options.webPreferences.contextIsolation (value: false)
-     * 
-     * @param {BrowserWindowConstructorOptions} customOptions - Custom window options.
-     * @returns {void}
-     */
-    setWindowOptions(customOptions) {
-        this.#customOptions = customOptions
-    }
-
-    /**
-     * Set a window handler capable of changing the findbar window settings after opening.
-     * @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 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.#boundsHandler = boundsHandler
-    }
-
-    #registerKeyboardShortcuts(event, input) {
-        if (input.meta || input.control || input.alt) { return }
-
-        const key = input.key.toLowerCase()
-
-        if (input.shift) {
-            if (key === 'enter') {
-                this.findPrevious()
-                event.preventDefault()
-            }
-            return;
-        }
-
-        if (key === 'enter') {
-            this.findNext()
-            event.preventDefault()
-            return;
-        }
-
-        if (key === 'escape') {
-            if (this.isOpen()) {
-                this.close()
-                event.preventDefault()
-            }
-        }
-    }
-    /**
-     * @param {Electron.FindInPageOptions} options 
-     */
-    #findInContent(options) {
-        options.matchCase = this.#matchCase
-        this.#findableContents.findInPage(this.#lastText, options)
-    }
-
-    #stopFindInContent() {
-        this.#findableContents.stopFindInPage('clearSelection')
-    }
-
-    /**
-     * Register all event listeners.
-     */
-    #registerListeners() {
-        const showCascade = () => this.#window.isVisible() || this.#window.show()
-        const hideCascade = () => this.#window.isVisible() && this.#window.hide()
-        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)
-        }
-        
-        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('closed', () => {
-            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()
-        })
-
-        this.#window.prependOnceListener('ready-to-show', () => { this.#window.show() })
-        this.#window.webContents.prependListener('before-input-event', this.#registerKeyboardShortcuts.bind(this))
-
-        this.#findableContents.prependOnceListener('destroyed', () => { this.close() })
-        this.#findableContents.prependListener('found-in-page', (_e, result) => { this.#sendMatchesCount(result.activeMatchOrdinal, result.matches) })
-    }
-
-    /**
-     * Send to renderer the active match and the total.
-     * @param {number} active Active match.
-     * @param {number} total Total matches.
-     */
-    #sendMatchesCount(active, total) {
-        if (this.#fixMove !== null) {
-            this.#fixMove ? this.findNext() : this.findPrevious()
-            this.#fixMove = null
-        }
-
-        this.#matches.active = active
-        this.#matches.total = total
-
-        this.#window.webContents.send('electron-findbar/matches', this.#matches)
-    }
-
-    /**
-     * Focus the findbar and highlight the input text.
-     */
-    #focusWindowAndHighlightInput() {
-        this.#window.focus()
-        this.#window.webContents.send('electron-findbar/input-focus')
-    }
-
-    /**
-     * Retrieve web contents from a BrowserWindow or BaseWindow.
-     * @param {BrowserWindow | BaseWindow} window 
-     * @returns {WebContents | undefined} The web contents if any.
-     */
-    static #retrieveWebContents(window) {
-        return window.webContents ?? window.contentView?.children[0]?.webContents
-    }
-
-    /**
-     * Get the parent window from web contents.
-     * @param {WebContents} w 
-     * @returns {BaseWindow | undefined} Parent window if any.
-     */
-    static #getBaseWindowFromWebContents(w) {
-        return BaseWindow.getAllWindows().find(win => win.webContents === w || win.contentView.children.some(child => child.webContents === w))
-    }
-
-    /**
-     * 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.show = false
-        options.frame = false
-        options.roundedCorners = true
-        options.transparent = process.platform === 'linux'
-        options.maximizable = false
-        options.minimizable = false
-        options.skipTaskbar = true
-        options.fullscreenable = false
-        options.autoHideMenuBar = true
-        if (!options.webPreferences) { options.webPreferences = {} }
-        options.webPreferences.nodeIntegration = false
-        options.webPreferences.contextIsolation = true
-        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 {WebContents} webContents Findable web contents. The parent window will be defined by using BaseWindow.getAllWindows() and
-     * matching the webContents with the webContents of the window or its contentView children.
-     * @returns {Findbar} The findbar instance if it exists.
-     * @throws {Error} If no webContents is provided.
-     * 
-     * @overload
-     * @param {BrowserWindow} browserWindow Parent window.
-     * @param {WebContents} [customWebContents] Custom findable web contents. If not provided, the browserWindow.webContents will be used.
-     * @returns {Findbar} The findbar instance if it exists.
-     *
-     * @overload
-     * @param {BaseWindow} baseWindow Parent window.
-     * @param {WebContents} [webContents] Custom findable web contents. If not provided, the win.contentView.children[0] will be used.
-     * @returns {Findbar} The findbar instance if it exists.
-     * @throws {Error} If no webContents is provided.
-     */
-     static from(windowOrWebContents, customWebContents) {
-        const webContents = isFindable(windowOrWebContents) ? windowOrWebContents : customWebContents ?? Findbar.#retrieveWebContents(windowOrWebContents)
-        if (!webContents) { throw new Error('[Findbar] There are no searchable web contents.') }
-        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) {
-        const webContents = isFindable(windowOrWebContents) ? windowOrWebContents : Findbar.#retrieveWebContents(windowOrWebContents)
-        if (!webContents) { throw new Error('[Findbar] There are no searchable web contents.') }
-        return webContents._findbar
-    }
-}
-
-const isFindable = (obj) => obj && typeof obj.findInPage === 'function' && typeof obj.stopFindInPage === 'function';
-
-/**
- * Define IPC events.
- */
-(ipc => {
-    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())
-    ipc.on('electron-findbar/close', e => {
-        const findbar = e.sender._findbar
-        findbar.stopFind()
-        findbar.close()
-    })
-}) (require('electron').ipcMain)
-
-module.exports = Findbar

package/remote.js

@@ -1,44 +0,0 @@
-/**
- * Remote IPC events to control the findbar through the renderer.
- */
-const Remote = (ipc => ({
-    /**
-     * Get last queried text and the "match case" status.
-     * @returns {Promise<{ text: string, matchCase: boolean, movable: boolean }>}
-     */
-    getLastState: async () => ipc.invoke('electron-findbar/last-state'),
-
-    /**
-     * Change the input value and find it.
-     * @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)
-
-module.exports = Remote

package/web/app.css

@@ -1,141 +0,0 @@
-*, *:before, *:after {
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    font-weight: normal;
-    height: 100vh;
-}
-
-nav {
-    --bg-color: #fff;
-    --border: #ddd;
-    --color: #626262;
-    --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: .5rem;
-}
-
-@media (prefers-color-scheme: dark) {
-    nav {
-        --bg-color: #1f1f1f;
-        --border: #3f3f3f;
-        --color: #a9a9aa;
-        --input-color: #eee;
-        --btn-hover-color: #333;
-        --btn-active-color: #444;
-    }
-}
-
-#match-case {
-    fill: var(--color);
-    user-select: none;
-}
-
-#match-case > svg {
-    width: 20px;
-}
-
-#previous, #next, #close {
-    fill: none;
-    stroke: var(--color);
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-nav {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    padding: var(--spacing);
-    background-color: var(--bg-color);
-    color: var(--color);
-}
-
-.linux nav {
-    border-radius: 10px;
-    border: 1px solid var(--border);
-}
-
-nav, .btn-group {
-    gap: var(--spacing);
-}
-
-span, input {
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-}
-
-span {
-    color: var(--input-color);
-    user-select: none;
-}
-
-input {
-    width: 100%;
-    background-color: transparent;
-    color: var(--input-color);
-    font-weight: 500;
-    border: none;
-    outline: none;
-}
-
-.divider {
-    width: 2px;
-    height: 100%;
-    background-color: var(--btn-hover-color);
-}
-
-.btn-group {
-    display: flex;
-}
-
-button {
-    background-color: transparent;
-    border: none;
-    border-radius: 50%;
-    cursor: default;
-    width: 26px;
-    height: 26px;
-    padding: 3px;
-    text-align: center;
-    transition: .2s linear all;
-}
-
-button:hover {
-    background-color: var(--btn-hover-color);
-}
-
-button:active {
-    background-color: var(--btn-active-color);
-}
-
-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

@@ -1,43 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-    <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>Find in page</title>
-    <link rel="stylesheet" href="app.css">
-<body class="movable">
-    <nav>
-        <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">
-            
-            <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>
-            </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>
-            </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>
-            </button>
-        </div>
-    </nav>
-</body>
-
-</html>

package/web/preload.js

@@ -1,82 +0,0 @@
-const $remote = (ipc => ({
-    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) },
-    onMatchCaseChange: (listener) => { ipc.on('electron-findbar/match-case-change', listener) }
-})) (require('electron').ipcRenderer)
-
-let canRequest = true, canMove = false
-
-function inputChange(e) {
-    canRequest = false
-    $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
-        next ? $remote.next() : $remote.previous()
-    }
-}
-
-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 = [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.onTextChange((_, text) => { inputEl.value = text })
-
-    $remote.onInputFocus(() => {
-        inputEl.setSelectionRange(0, inputEl.value.length)
-        inputEl.focus()
-    })
-
-    $remote.onMatchCaseChange((_, status) => { console.log('Match case:', status);toggleButton(matchCaseBtn, status) })
-
-    $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()
-})