Skip to content

Use shadow dom to render the toolbar #2266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matthiask merged 9 commits into from
Apr 23, 2026
Merged

Use shadow dom to render the toolbar #2266

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
89960a5
Use shadow dom to render the toolbar
federicobond Nov 26, 2025
d75cd33
Change shadow root element ID for fetching debug element
tim-schilling Dec 3, 2025
46e3abf
Add USE_SHADOW_DOM setting to opt-out to shadow DOM toolbar rendering
federicobond Dec 10, 2025
9c5fe81
Use JSDoc format for comments
federicobond Apr 22, 2026
fd7bc05
Add a note about the changed selector for CSS variables
federicobond Apr 22, 2026
aef37bf
Update frontend tests for new shadow DOM structure
federicobond Apr 22, 2026
a5d6a9e
Update changelog
federicobond Apr 22, 2026
b86e123
Add lookups to spelling wordlist
federicobond Apr 22, 2026
d709c1e
Merge branch 'main' into shadowdom
matthiask Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update frontend tests for new shadow DOM structure
  • Loading branch information
@federicobond
federicobond committed Apr 22, 2026
commit aef37bff9de9480f6f27aa4b4d7f052c548b4446
26 changes: 17 additions & 9 deletions tests/js/utils.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,15 +153,21 @@ describe("utils.js", () => {

beforeEach(() => {
vi.stubGlobal("fetch", vi.fn());
const djDebugRoot = document.createElement("div");
djDebugRoot.id = "djDebugRoot";
const djDebug = document.createElement("div");
djDebug.id = "djDebug";
const win = document.createElement("div");
win.id = "djDebugWindow";
document.body.appendChild(win);
djDebug.appendChild(win);
djDebugRoot.appendChild(djDebug);
document.body.appendChild(djDebugRoot);
});

afterEach(() => {
vi.unstubAllGlobals();
const win = document.getElementById("djDebugWindow");
if (win) document.body.removeChild(win);
const djDebugRoot = document.getElementById("djDebugRoot");
if (djDebugRoot) document.body.removeChild(djDebugRoot);
});

it("returns json data on success", async () => {
Expand Down Expand Up @@ -246,17 +252,21 @@ describe("utils.js", () => {

describe("replaceToolbarState", () => {
it("replaces toolbar state and panels", () => {
const djDebugRoot = document.createElement("div");
djDebugRoot.id = "djDebugRoot";
const djDebug = document.createElement("div");
djDebug.id = "djDebug";
document.body.appendChild(djDebug);

const panel = document.createElement("div");
panel.id = "panel1";
document.body.appendChild(panel);
djDebug.appendChild(panel);

const buttonContainer = document.createElement("div");
buttonContainer.id = "djdt-panel1";
document.body.appendChild(buttonContainer);
djDebug.appendChild(buttonContainer);

djDebugRoot.appendChild(djDebug);
document.body.appendChild(djDebugRoot);

const data = {
panel1: {
Expand All @@ -275,9 +285,7 @@ describe("utils.js", () => {
"New Button"
);

document.body.removeChild(djDebug);
document.body.removeChild(document.getElementById("panel1"));
document.body.removeChild(document.getElementById("djdt-panel1"));
document.body.removeChild(djDebugRoot);
});
});

Expand Down
Loading