Skip to content

Add tour infrastructure#966

Merged
srzeszut merged 16 commits intolive-debugger-tourfrom
live-debugger-tour-dev
Apr 20, 2026
Merged

Add tour infrastructure#966
srzeszut merged 16 commits intolive-debugger-tourfrom
live-debugger-tour-dev

Conversation

@srzeszut
Copy link
Copy Markdown
Contributor

@srzeszut srzeszut commented Apr 3, 2026

No description provided.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 TourElements module to define and manage tour element IDs
  • Added tour event handling infrastructure in the client channel and client communication layer
  • Implemented a Tour LiveView 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.

Comment thread assets/app/app.css Outdated
Comment thread assets/app/hooks/tour.js Outdated
Copy link
Copy Markdown
Contributor

@hhubert6 hhubert6 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Comment thread lib/live_debugger/api/settings_storage.ex
Comment thread lib/live_debugger/app/settings/web/settings_live.ex
Comment thread lib/live_debugger/tour_elements.ex
Comment thread lib/live_debugger/app/discovery/web/discovery_live.ex
Comment thread lib/live_debugger/app/settings/web/settings_live.ex
Comment thread assets/app/hooks/tour.js
Copy link
Copy Markdown
Contributor

@hhubert6 hhubert6 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🐬 please update assets before merging

@srzeszut srzeszut force-pushed the live-debugger-tour-dev branch 4 times, most recently from 90590f8 to 587c1ae Compare April 20, 2026 13:22
@srzeszut srzeszut force-pushed the live-debugger-tour branch from 007909a to dd6a5eb Compare April 20, 2026 13:29
@srzeszut srzeszut force-pushed the live-debugger-tour-dev branch from 587c1ae to 950174e Compare April 20, 2026 13:44
@srzeszut srzeszut force-pushed the live-debugger-tour branch 2 times, most recently from dd6a5eb to 6f01892 Compare April 20, 2026 13:47
@srzeszut srzeszut force-pushed the live-debugger-tour-dev branch from 35f5cef to 21e235b Compare April 20, 2026 13:57
@srzeszut srzeszut force-pushed the live-debugger-tour-dev branch from 21e235b to bab11d2 Compare April 20, 2026 14:02
@srzeszut srzeszut merged commit d71d700 into live-debugger-tour Apr 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants