areibman / areibman/bottleneck

Bug: Enable native Electron find-in-page (Cmd/Ctrl+F) functionality

Open
#32 0 comments 0 reactions 0 assignees Claimed by @areibman View on GitHub
in-progress
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.