feat: add remote browser controls help tip - #107
Conversation
Show mouse, keyboard, and touch gestures from a header question mark on hover or tap so the long screen title tooltip is unnecessary.
|
Warning Review limit reached
Next review available in: 17 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe remote browser panel replaces its long screen tooltip with an accessible help popover. The popover documents mouse and touch controls, supports open and close interactions, and uses responsive toolbar styling. ChangesRemote browser controls help
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant HelpButton
participant HelpPopover
participant Document
User->>HelpButton: Activate help control
HelpButton->>HelpPopover: Toggle open state
Document->>HelpPopover: Detect outside pointer or Escape
HelpPopover->>HelpButton: Close popover
``<fixed_issue_severity>Low</fixed_issue_severity>
</details>
<!-- walkthrough_end -->
<!-- pre_merge_checks_walkthrough_start -->
<details>
<summary>🚥 Pre-merge checks | ✅ 5</summary>
<details>
<summary>✅ Passed checks (5 passed)</summary>
| Check name | Status | Explanation |
| :------------------------: | :------- | :--------------------------------------------------------------------------------------------------------- |
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly and concisely describes the new help tip for remote browser controls. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
</details>
</details>
<!-- pre_merge_checks_walkthrough_end -->
<!-- finishing_touch_checkbox_start -->
<details>
<summary>✨ Finishing Touches</summary>
<details>
<summary>📝 Generate docstrings</summary>
- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> Create stacked PR
- [ ] <!-- {"checkboxId": "3e1879ae-f29b-4d0d-8e06-d12b7ba33d98"} --> Commit on current branch
</details>
<details>
<summary>🧪 Generate unit tests (beta)</summary>
- [ ] <!-- {"checkboxId": "f47ac10b-58cc-4372-a567-0e02b2c3d479", "radioGroupId": "utg-output-choice-group-5262909337"} --> Create PR with unit tests
- [ ] <!-- {"checkboxId": "6ba7b810-9dad-11d1-80b4-00c04fd430c8", "radioGroupId": "utg-output-choice-group-5262909337"} --> Commit unit tests in branch `remote-browser-controls-help`
</details>
</details>
<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->
---
<sub>Comment `@coderabbitai help` to get the list of available commands.</sub>
<!-- tips_end -->
|
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@webui/src/components/RemoteBrowserPanel.tsx`:
- Around line 125-132: Update the onKeyDown listener in RemoteBrowserPanel so it
is registered and removed in the capture phase, and when Escape closes the help
popover, stop propagation to prevent later listeners from invoking onClose.
Preserve existing behavior for non-Escape keys and keep the pointerdown listener
unchanged.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f7a6d277-1ff8-4ea4-bf30-ee3d71b2bed0
📒 Files selected for processing (2)
webui/src/components/RemoteBrowserPanel.csswebui/src/components/RemoteBrowserPanel.tsx
Handle Escape for the controls tip in the capture phase so it does not also dismiss the panel.
1 participant
The remote browser control gestures were only documented in a long native
titletooltip on the screen, which is easy to miss and awkward on mobile.Add a small
?control next to the Remote Browser header title that shows mouse/keyboard/touch shortcuts on hover (desktop) or tap (mobile). Outside tap or Escape closes the pinned tip.Test plan
?— tip appears with mouse and touch sections?on a narrow/touch viewport — tip toggles open and closes on outside tap or Escape?Made with Cursor (Composer)
Summary by CodeRabbit