Skip to content

Add tour infrastructure#966

Open
srzeszut wants to merge 16 commits intolive-debugger-tourfrom
live-debugger-tour-dev
Open

Add tour infrastructure#966
srzeszut wants to merge 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 from d05a5b5 to d969f1f Compare April 16, 2026 11:26
@srzeszut srzeszut force-pushed the live-debugger-tour-dev branch from a53c7e7 to 96a99de Compare April 16, 2026 12:10
@srzeszut srzeszut force-pushed the live-debugger-tour-dev branch from 96a99de to 55ffed1 Compare April 17, 2026 10:17
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