areibman / areibman/bottleneck
Bug: Enable native Electron find-in-page (Cmd/Ctrl+F) functionality
- Dominant language
- TypeScript
- Stars
- 156
- Forks
- 21
- PR merge metrics
- No merged PRs in 30d
Description
## Bug Report / Feature Request
Enable the native Electron find-in-page functionality (Cmd/Ctrl+F) which is currently not working. Users expect this standard keyboard shortcut to work for searching within the current page.
## Description
The standard Cmd/Ctrl+F keyboard shortcut for find-in-page doesn't work in the Electron app. This is a basic browser feature that users expect to have. Electron provides built-in support for this, but it needs to be explicitly enabled.
## Current Behavior
- Pressing Cmd+F (macOS) or Ctrl+F (Windows/Linux) does nothing
- No find bar appears
- Cannot search within PR descriptions, comments, or code
## Expected Behavior
- Pressing Cmd/Ctrl+F should open the native Electron find bar
- Should work exactly like find-in-page in Chrome/Chromium
- Standard keyboard shortcuts should work (Enter for next, Shift+Enter for previous, Esc to close)
## Simple Implementation
### Enable Default Find-in-Page
```javascript
// main.js or main.ts
const { app, BrowserWindow, globalShortcut } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
// Enable find-in-page with default Electron implementation
mainWindow.webContents.on('before-input-event', (event, input) => {
if (input.type === 'keyDown') {
// Cmd/Ctrl + F
if ((input.meta || input.control) && input.key === 'f') {
mainWindow.webContents.showFindBar();
event.preventDefault();
}
// Escape to close find bar
else if (input.key === 'Escape') {
mainWindow.webContents.closeFindBar();
}
}
});
}
```
### Alternative: Using Menu
```javascript
// Add to application menu
const template = [
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
{ type: 'separator' },
{
label: 'Find',
accelerator: 'CmdOrCtrl+F',
click: (menuItem, browserWindow) => {
browserWindow.webContents.showFindBar();
}
}
]
}
];
```
### Even Simpler: Use Built-in Role
```javascript
// Simplest approach - use Electron's built-in menu roles
const template = [
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
{ type: 'separator' },
{ role: 'find' }, // <-- This enables Cmd/Ctrl+F automatically
{ role: 'findNext' },
{ role: 'findPrevious' }
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
```
## Important Notes
- **Use Native Implementation**: Electron provides native find-in-page functionality that matches the OS behavior
- **No Custom UI Needed**: The native find bar looks and behaves like users expect from Chrome
- **Automatic Keyboard Shortcuts**: Native implementation handles all standard shortcuts automatically
- **Better Performance**: Native implementation is optimized and handles large documents well
- **Accessibility**: Native implementation includes proper accessibility support
## Benefits
- **Zero Custom Code**: Just enable the built-in functionality
- **Familiar UX**: Looks and works exactly like Chrome's find
- **No Maintenance**: Native implementation is maintained by Electron team
- **Cross-Platform**: Works consistently across Windows, macOS, and Linux
- **Full Feature Set**: Includes match counting, highlighting, case sensitivity, etc.
## Acceptance Criteria
- [ ] **MUST use native Electron find-in-page functionality** (not custom implementation)
- [ ] Cmd+F (macOS) / Ctrl+F (Windows/Linux) opens native find bar
- [ ] Find bar appears with native OS styling
- [ ] Enter/Return finds next match
- [ ] Shift+Enter finds previous match
- [ ] Escape closes find bar
- [ ] Matches are highlighted in the page
- [ ] Match counter shows "X of Y" results
- [ ] Works on all pages/views in the application
- [ ] No custom search UI is implemented
- [ ] Uses either `showFindBar()` method or menu `role: 'find'`
## NOT in Scope
- ❌ Custom search UI
- ❌ Custom highlighting logic
- ❌ Custom keyboard handling beyond enabling the feature
- ❌ Advanced search features
- ❌ Search history
- ❌ Regex support
## Testing
1. Open the application
2. Press Cmd/Ctrl+F
3. Native find bar should appear
4. Type search term
5. Verify highlighting works
6. Press Enter to go to next match
7. Press Escape to close
## Resources
- [Electron findInPage Documentation](https://www.electronjs.org/docs/latest/api/web-contents#contentsfindinpagesearchstring-options)
- [Electron Menu Roles](https://www.electronjs.org/docs/latest/api/menu-item#roles)
- [Electron showFindBar()](https://github.com/electron/electron/issues/7955)
🤖 Generated with [Claude Code](https://claude.ai/code)
Contributor guide
No contributing guide indexed for this repository
Research direction
Review the open linked pull request first, then inspect the Electron main-process entry point referenced in the issue (main.js or main.ts). Verify the chosen native approach against the listed Cmd/Ctrl+F, navigation, closing, highlighting, match-count, and all-pages acceptance criteria without adding custom UI.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- electron, typescript
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100