Enhancement: isolate LiveDebugger injected assets from debugged app#964
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request isolates LiveDebugger's injected assets (UI elements and styles) from the debugged application by moving them into a Shadow DOM. Instead of serving the CSS as a separate HTTP request and injecting it into the page head, the CSS is now loaded directly into the shadow DOM, preventing style conflicts between LiveDebugger and the application's own stylesheets.
Changes:
- Removed CSS URL from server-side configuration and replaced with direct shadow DOM CSS loading
- Created shadow host with closed mode Shadow DOM to encapsulate debugger UI
- Updated all client-side functions to accept and use shadowRoot parameter for DOM manipulation
- Enhanced CSS with proper styling rules (box-sizing, font-family) for isolated rendering
- Implemented proper event handling for shadow DOM elements using composedPath for cross-boundary clicks
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| lib/live_debugger/client/config_component.ex | Removed css_url attribute and link tag injection |
| lib/live_debugger.ex | Removed @css_path constant and css_url variable assignment |
| assets/client/client.js | Created shadow DOM host with CSS link, passed shadowRoot to init functions |
| assets/client/components/debug_menu.js | Updated to mount elements in shadowRoot, added composedPath-based click handling |
| assets/client/services/inspect.js | Added debugButton parameter to avoid DOM queries |
| assets/client/services/highlight.js | Updated to use shadowRoot for DOM queries and element appending |
| assets/client/components/tooltip/tooltip.js | Updated to use shadowRoot for DOM queries and element appending |
| assets/client/components/tooltip/tooltip_creator.js | Updated to append tooltip to shadowRoot instead of document.body |
| assets/client/client.css | Added box-sizing and font-family rules for better isolation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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.
The goal here was to isolate assets injected via LiveDebugger to debugged application. Initially the idea was to do it via iframe, but since there is a problem of different origin (you cannot access
window.parent.documentfrom iframe that has different origin, and in our case it has, since LiveDebugger is hosted on different port) and our logic is not that big I decided to do it via shadow DOMExample: If user has aggressive styling (in this case font, color of button etc) or JS scripts (accessing LiveDebugger button element)
Main:
This branch:
