Open
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive tour infrastructure to LiveDebugger, enabling interactive guided tours/walkthroughs through the debugger UI. The implementation includes:
- A centralized tour elements mapping system that defines all tour-able UI elements
- Bidirectional communication between the debugged application and the debugger frontend for tour events
- A client-side Tour hook that handles visual highlighting, spotlighting, and user interaction
- Demo buttons for testing tour functionality
- Proper channel handling for tour-specific events
Changes:
- Added
TourElementsmodule to define and manage tour element IDs - Added tour event handling infrastructure in the client channel and client communication layer
- Implemented a
TourLiveView hook with support for "highlight" and "spotlight" actions and multiple dismiss strategies - Added CSS styling for tour visual elements (highlights and overlay)
- Integrated tour hook into the debugger app
- Added demo buttons in the development view to test tour functionality
Reviewed changes
Copilot reviewed 12 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| lib/tour_elements.ex | Centralized mapping of tour element names to HTML IDs |
| lib/live_debugger/client/channel.ex | Added handler for tour-prefixed messages from client |
| lib/live_debugger/client.ex | Added tour event subscription callback |
| lib/live_debugger/app/debugger/web/debugger_live.ex | Integrated tour event handling and storage |
| lib/live_debugger/app/debugger/web/hooks/async_lv_process.ex | Added tour step fetching on initialization |
| assets/app/hooks/tour.js | New hook implementing tour UI interactions |
| assets/app/app.js | Imported and registered Tour hook |
| assets/app/app.css | Added CSS styling for tour visual elements |
| assets/client/client.js | Added client-side tour event listeners |
| dev/live_views/main.ex | Added demo buttons for testing tour functionality |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
hhubert6
reviewed
Apr 7, 2026
Contributor
hhubert6
left a comment
There was a problem hiding this comment.
There is an issue with scroll and spotlight. When spotlighted element is out of view because of scroll whole page become frozen. Adding auto scroll to spotlighted element should fix that (and hightlight for consistency).
hhubert6
approved these changes
Apr 13, 2026
Contributor
hhubert6
left a comment
There was a problem hiding this comment.
🐬 please update assets before merging
d05a5b5 to
d969f1f
Compare
a53c7e7 to
96a99de
Compare
96a99de to
55ffed1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.