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.
assets/app/app.css
Outdated
|
|
||
| /* Tour */ | ||
| .tour-highlight { | ||
| outline: 3px solid var( --swm-pink-100); |
There was a problem hiding this comment.
There is an extra space before the CSS variable name in the var() function. This should be removed for consistency with CSS best practices and the rest of the codebase.
Suggested change
| outline: 3px solid var( --swm-pink-100); | |
| outline: 3px solid var(--swm-pink-100); |
assets/app/hooks/tour.js
Outdated
Comment on lines
+66
to
+69
| console.log({ payload }); | ||
|
|
||
| const key = `${action}:${payload.target}:${payload.dismiss}`; | ||
| console.log({ key }); |
There was a problem hiding this comment.
Debug console.log statements should be removed before production. These are used to debug the tour functionality and should not be in the final code.
Suggested change
| console.log({ payload }); | |
| const key = `${action}:${payload.target}:${payload.dismiss}`; | |
| console.log({ key }); | |
| const key = `${action}:${payload.target}:${payload.dismiss}`; |
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.