fix: extract inline <style> blocks in tab-cache for canvas toolbar rendering

The tab cache's extractContent() only collected <link> stylesheets, missing
inline <style> blocks. The canvas toolbar CSS is entirely inline, causing
unstyled toolbar when switching to the rSpace tab via tab cache.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-02 22:51:35 -08:00
parent 1635b08704
commit 4819852b14
1 changed files with 23 additions and 3 deletions

View File

@ -135,7 +135,7 @@ export class TabCache {
this.panes.set(moduleId, pane);
// Load module-specific assets
this.loadAssets(content.scripts, content.styles);
this.loadAssets(content.scripts, content.styles, content.inlineStyles, moduleId);
// Update shell state
this.currentModuleId = moduleId;
@ -159,6 +159,7 @@ export class TabCache {
title: string;
scripts: string[];
styles: string[];
inlineStyles: string[];
} | null {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
@ -197,11 +198,20 @@ export class TabCache {
styles.push(href);
});
return { body, title, scripts, styles };
// Extract inline <style> blocks (exclude shell-embedded styles)
const inlineStyles: string[] = [];
doc.querySelectorAll("head style").forEach((s) => {
const css = s.textContent || "";
// Skip the shell's own embedded styles (tab-pane, spinner, etc.)
if (css.includes(".rspace-tab-pane")) return;
if (css.trim()) inlineStyles.push(css);
});
return { body, title, scripts, styles, inlineStyles };
}
/** Load script and style assets (idempotent — browsers deduplicate module scripts) */
private loadAssets(scripts: string[], styles: string[]): void {
private loadAssets(scripts: string[], styles: string[], inlineStyles: string[] = [], moduleId?: string): void {
for (const src of scripts) {
const el = document.createElement("script");
el.type = "module";
@ -217,6 +227,16 @@ export class TabCache {
el.href = href;
document.head.appendChild(el);
}
// Inject inline <style> blocks (tagged for deduplication)
for (let i = 0; i < inlineStyles.length; i++) {
const tag = `tab-style-${moduleId || "unknown"}-${i}`;
if (document.querySelector(`style[data-tab-style="${tag}"]`)) continue;
const el = document.createElement("style");
el.dataset.tabStyle = tag;
el.textContent = inlineStyles[i];
document.head.appendChild(el);
}
}
/** Show a specific pane and update shell state */