feat: add zoom controls to key mappings and update key display in preferences#6765
Conversation
WalkthroughThree new zoom control hotkeys are added to the key mappings configuration: zoomIn, zoomOut, and resetZoom, with platform-specific key combinations for macOS and Windows. A trailing comma is added for formatting consistency. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/providers/Hotkeys/keyMappings.js:
- Around line 36-38: keyMappings defines zoomIn/zoomOut/resetZoom shortcuts
(keys: zoomIn/zoomOut/resetZoom in keyMappings) that conflict with the Electron
main-process global shortcut registered via globalShortcut.register('Ctrl+=',
...) in the Bruno Electron entry (globalShortcut.register call); decide whether
renderer Mousetrap handlers will bind these zoom actions—if the Hotkeys provider
will bind zoom via Mousetrap, remove or disable the Electron globalShortcut
registration to prevent duplicate handling, otherwise remove the zoom* entries
from keyMappings to avoid confusion; update either the main-process code that
calls globalShortcut.register for zoom or the Hotkeys provider (Mousetrap
bindings) and ensure the chosen approach is documented with a comment near
keyMappings and the globalShortcut.register call.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/components/Preferences/Keybindings/index.jspackages/bruno-app/src/providers/Hotkeys/keyMappings.js
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/components/Preferences/Keybindings/index.jspackages/bruno-app/src/providers/Hotkeys/keyMappings.js
🧠 Learnings (1)
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/components/Preferences/Keybindings/index.jspackages/bruno-app/src/providers/Hotkeys/keyMappings.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
- GitHub Check: CLI Tests
🔇 Additional comments (1)
packages/bruno-app/src/components/Preferences/Keybindings/index.js (1)
25-29: LGTM! Clean handling of the 'plus' key display.The ternary correctly transforms the string 'plus' into the '+' symbol for UI display. Since the minus key is already represented as '-' in the key mappings, no additional transformation is needed for other special keys.
| zoomIn: { mac: 'command+plus', windows: 'ctrl+plus', name: 'Zoom In' }, | ||
| zoomOut: { mac: 'command+-', windows: 'ctrl+-', name: 'Zoom Out' }, | ||
| resetZoom: { mac: 'command+0', windows: 'ctrl+0', name: 'Reset Zoom' } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, find the keyMappings.js file and examine the context
find . -name "keyMappings.js" -type f 2>/dev/null | head -5Repository: usebruno/bruno
Length of output: 115
🏁 Script executed:
# Search for zoom-related handlers and potential conflicts
rg -n -C3 'zoom|zoomIn|zoomOut|webContents\.setZoom' --type=js --max-count=20Repository: usebruno/bruno
Length of output: 2197
🏁 Script executed:
# Check for any other 'plus' or '0' key registrations that might conflict
rg -n -C3 "command\+plus|ctrl\+plus|command\+0|ctrl\+0" --type=jsRepository: usebruno/bruno
Length of output: 999
🏁 Script executed:
# Look for Electron menu or shortcut registration patterns
rg -n -C2 "accelerator|MenuItem|registerGlobalShortcut" --type=js --max-count=20Repository: usebruno/bruno
Length of output: 9803
🏁 Script executed:
# Understand how keyMappings are used/registered
rg -n "keyMappings|zoomIn|zoomOut|resetZoom" packages/bruno-app/src/providers/Hotkeys --type=js -A3 -B1 | head -50Repository: usebruno/bruno
Length of output: 1241
🏁 Script executed:
# Check if these keyMappings are registered as global shortcuts anywhere
rg -n "globalShortcut|registerShortcut|keyMappings" packages/bruno-electron --type=js | head -20Repository: usebruno/bruno
Length of output: 362
🏁 Script executed:
# Get the full keyMappings.js file to see the getKeyBindingsForActionAllOS function
cat packages/bruno-app/src/providers/Hotkeys/keyMappings.js | head -100Repository: usebruno/bruno
Length of output: 2662
🏁 Script executed:
# Check how getKeyBindingsForActionAllOS is used in the Hotkeys provider
cat packages/bruno-app/src/providers/Hotkeys/index.js | head -150Repository: usebruno/bruno
Length of output: 5466
Conflict with existing Electron zoom handler—clarify approach before proceeding.
Electron already registers a global shortcut for Ctrl+= (the zoom key) via globalShortcut.register('Ctrl+=', ...) in packages/bruno-electron/src/index.js:346. The keyMappings entries use ctrl+plus (same physical key), which will conflict if Mousetrap handlers are added to the Hotkeys provider.
Verify:
- Will zoom actions be bound via Mousetrap in the Hotkeys provider?
- If yes, both the Electron main process and renderer process will handle the same keystroke—consider disabling the Electron global shortcut to avoid duplicate zoom calls.
- If no, remove these entries from keyMappings to avoid confusion.
🤖 Prompt for AI Agents
In @packages/bruno-app/src/providers/Hotkeys/keyMappings.js around lines 36 -
38, keyMappings defines zoomIn/zoomOut/resetZoom shortcuts (keys:
zoomIn/zoomOut/resetZoom in keyMappings) that conflict with the Electron
main-process global shortcut registered via globalShortcut.register('Ctrl+=',
...) in the Bruno Electron entry (globalShortcut.register call); decide whether
renderer Mousetrap handlers will bind these zoom actions—if the Hotkeys provider
will bind zoom via Mousetrap, remove or disable the Electron globalShortcut
registration to prevent duplicate handling, otherwise remove the zoom* entries
from keyMappings to avoid confusion; update either the main-process code that
calls globalShortcut.register for zoom or the Hotkeys provider (Mousetrap
bindings) and ensure the chosen approach is documented with a comment near
keyMappings and the globalShortcut.register call.
dea49c3 to
8c97b93
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/providers/Hotkeys/keyMappings.js:
- Line 35: Remove the trailing comma after the collapseSidebar object entry in
keyMappings.js so the object literal conforms to the "No trailing commas"
guideline; locate the collapseSidebar mapping (collapseSidebar: { mac:
'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' }) and delete the
comma following that closing brace.
- Around line 36-38: The keyMappings.js entries for zoomIn, zoomOut, and
resetZoom are not wired to handlers in the Hotkeys provider; either add
Mousetrap bindings or remove them and document delegation to Electron. Fix by
updating the Hotkeys provider to register Mousetrap.bind handlers for the
actions named "zoomIn", "zoomOut", and "resetZoom" (matching the keyMappings.js
symbols) that call the existing zoom logic (or dispatch an action/service used
for zoom), or alternately delete those three mappings from keyMappings.js and
add a brief comment in the Hotkeys provider stating that zooming is handled
natively by Electron via menu roles so no Mousetrap handlers are required.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/providers/Hotkeys/keyMappings.js
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/providers/Hotkeys/keyMappings.js
🧠 Learnings (1)
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/providers/Hotkeys/keyMappings.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
| }, | ||
| closeAllTabs: { mac: 'command+shift+w', windows: 'ctrl+shift+w', name: 'Close All Tabs' }, | ||
| collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' } | ||
| collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' }, |
There was a problem hiding this comment.
Remove trailing comma to comply with coding guidelines.
The coding guidelines explicitly state "No trailing commas". Remove the comma after collapseSidebar.
🔧 Proposed fix
- collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' },
+ collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' }, | |
| collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' } |
🤖 Prompt for AI Agents
In @packages/bruno-app/src/providers/Hotkeys/keyMappings.js at line 35, Remove
the trailing comma after the collapseSidebar object entry in keyMappings.js so
the object literal conforms to the "No trailing commas" guideline; locate the
collapseSidebar mapping (collapseSidebar: { mac: 'command+\\', windows:
'ctrl+\\', name: 'Collapse Sidebar' }) and delete the comma following that
closing brace.
| zoomIn: { mac: 'command+=', windows: 'ctrl+=', name: 'Zoom In' }, | ||
| zoomOut: { mac: 'command+-', windows: 'ctrl+-', name: 'Zoom Out' }, | ||
| resetZoom: { mac: 'command+0', windows: 'ctrl+0', name: 'Reset Zoom' } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's examine the keyMappings.js file to see the context
cat -n packages/bruno-app/src/providers/Hotkeys/keyMappings.js | head -60Repository: usebruno/bruno
Length of output: 2518
🏁 Script executed:
# Search for handlers and implementations of zoom actions
rg -n 'zoomIn|zoomOut|resetZoom' --type=js --type=jsx --type=ts --type=tsx -C 2 -g '!keyMappings.js'Repository: usebruno/bruno
Length of output: 85
🏁 Script executed:
# Search for preferences-related zoom display logic
rg -n 'zoom' --type=js --type=jsx --type=ts --type=tsx -l | grep -i 'preference'Repository: usebruno/bruno
Length of output: 85
🏁 Script executed:
# Check if there's any preferences component that displays hotkey info
fd -e js -e jsx -e ts -e tsx | xargs grep -l 'hotkey\|keyMapping' | head -20Repository: usebruno/bruno
Length of output: 377
🏁 Script executed:
# Check the Hotkeys provider implementation
cat -n packages/bruno-app/src/providers/Hotkeys/index.js | head -100Repository: usebruno/bruno
Length of output: 4688
🏁 Script executed:
# Check the Keybindings preferences component
cat -n packages/bruno-app/src/components/Preferences/Keybindings/index.js | head -100Repository: usebruno/bruno
Length of output: 1639
🏁 Script executed:
# Search for zoom handler implementations more carefully
rg -n 'zoomIn|zoomOut|resetZoom' --type=js --type=ts -C 3Repository: usebruno/bruno
Length of output: 993
🏁 Script executed:
# Get the full Hotkeys provider file to check for zoom handlers
wc -l packages/bruno-app/src/providers/Hotkeys/index.jsRepository: usebruno/bruno
Length of output: 111
🏁 Script executed:
# Search for Mousetrap.bind calls to see all handlers
rg -n 'Mousetrap\.bind' packages/bruno-app/src/providers/Hotkeys/index.jsRepository: usebruno/bruno
Length of output: 1051
🏁 Script executed:
# Look for any zoom-related event handlers or window resize listeners
rg -n 'zoom|webFrame' --type=js --type=ts -C 2Repository: usebruno/bruno
Length of output: 1890
🏁 Script executed:
# Check if there's documentation or comments about zoom handling being delegated to Electron
rg -n 'zoom' packages/bruno-app/src/providers/Hotkeys/index.js -C 3Repository: usebruno/bruno
Length of output: 40
🏁 Script executed:
# Check the full menu-template to understand the zoom implementation
cat -n packages/bruno-electron/src/app/menu-template.js | grep -A 5 -B 5 'zoom'Repository: usebruno/bruno
Length of output: 410
Missing zoom hotkey handlers in Hotkeys provider.
The zoom mappings are defined in keyMappings.js and will display correctly in Preferences, but there are no Mousetrap.bind handlers for zoomIn, zoomOut, or resetZoom in the Hotkeys provider, unlike all other mapped actions (save, sendRequest, editEnvironment, etc.). Zoom is currently handled only by Electron's built-in menu roles (zoomin, zoomout, resetzoom), not through the keyboard shortcut system. Either implement the handlers in the Hotkeys provider or add a clarifying comment explaining that zoom is delegated to Electron natively and remove these mappings from keyMappings.js.
🤖 Prompt for AI Agents
In @packages/bruno-app/src/providers/Hotkeys/keyMappings.js around lines 36 -
38, The keyMappings.js entries for zoomIn, zoomOut, and resetZoom are not wired
to handlers in the Hotkeys provider; either add Mousetrap bindings or remove
them and document delegation to Electron. Fix by updating the Hotkeys provider
to register Mousetrap.bind handlers for the actions named "zoomIn", "zoomOut",
and "resetZoom" (matching the keyMappings.js symbols) that call the existing
zoom logic (or dispatch an action/service used for zoom), or alternately delete
those three mappings from keyMappings.js and add a brief comment in the Hotkeys
provider stating that zooming is handled natively by Electron via menu roles so
no Mousetrap handlers are required.
Addressing this comment
Description
Contribution Checklist:
Summary by CodeRabbit
New Features
✏️ Tip: You can customize this high-level summary in your review settings.