80 lines
3.6 KiB
HTML
80 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Debug Styles - Studio Panel</title>
|
|
<style>body{font-family:ui-sans-serif,system-ui,Arial;margin:20px;background:#fff;color:#111}pre{white-space:pre-wrap;word-break:break-word}code{display:block;background:#f3f4f6;padding:8px;border-radius:6px;margin-top:8px}</style>
|
|
</head>
|
|
<body>
|
|
<h1>Debug: document.styleSheets</h1>
|
|
<div id="out">Cargando...</div>
|
|
<div id="summary" style="margin-top:18px;padding:12px;border:1px solid #e5e7eb;border-radius:6px;background:#fafafa"></div>
|
|
<script>
|
|
function nodeAttrs(n){
|
|
if(!n) return null;
|
|
const attrs = {};
|
|
for(const a of Array.from(n.attributes||[])) attrs[a.name]=a.value;
|
|
return {
|
|
tagName: n.tagName,
|
|
id: n.id || null,
|
|
className: n.className || null,
|
|
attributes: attrs,
|
|
outerHTML: (n.outerHTML || '').slice(0,1200)
|
|
}
|
|
}
|
|
|
|
function detectTokensInSheetText(text, tokens){
|
|
if(!text) return {};
|
|
const res = {};
|
|
const low = text.toLowerCase();
|
|
tokens.forEach(t => { res[t] = low.indexOf(t.toLowerCase()) !== -1 });
|
|
return res;
|
|
}
|
|
|
|
function listSheets(){
|
|
try{
|
|
const tokensToCheck = ['--studio-bg-primary','--studio-accent','--primary-blue','--studio-accent-light','--studio-text-primary'];
|
|
|
|
const arr = Array.from(document.styleSheets).map((s, i) => ({
|
|
index: i,
|
|
href: s.href,
|
|
owner: s.ownerNode && s.ownerNode.tagName,
|
|
ownerText: (s.ownerNode && s.ownerNode.textContent) ? s.ownerNode.textContent.slice(0,400) : null,
|
|
ownerNode: nodeAttrs(s.ownerNode),
|
|
tokens: detectTokensInSheetText(s.ownerNode && s.ownerNode.textContent ? s.ownerNode.textContent : '', tokensToCheck)
|
|
}));
|
|
|
|
const out = document.getElementById('out');
|
|
out.innerHTML = '<pre>' + JSON.stringify(arr, null, 2) + '</pre>';
|
|
|
|
// nicer view
|
|
arr.forEach(it => {
|
|
const d = document.createElement('div');
|
|
d.style.padding='10px'; d.style.marginTop='8px'; d.style.border='1px solid #e5e7eb'; d.style.borderRadius='6px';
|
|
d.innerHTML = `<strong>sheet[${it.index}] href:</strong> ${it.href || '<inline>'} <br/>
|
|
<strong>owner:</strong> ${it.owner || '—'} <br/>
|
|
<strong>ownerNode outerHTML (slice):</strong> <code>${(it.ownerNode?.outerHTML||'').replace(/</g,'<')}</code>
|
|
<strong>tokens found:</strong> <code>${JSON.stringify(it.tokens)}</code>
|
|
`;
|
|
out.appendChild(d);
|
|
})
|
|
|
|
// summary: computed values on :root
|
|
const cs = getComputedStyle(document.documentElement || document.body || document.querySelector('html'));
|
|
const summaryEl = document.getElementById('summary');
|
|
const computed = {};
|
|
['--studio-bg-primary','--studio-accent','--primary-blue','--studio-text-primary'].forEach(t => {
|
|
try{ computed[t] = cs.getPropertyValue(t) || null }catch(e){ computed[t] = null }
|
|
});
|
|
|
|
summaryEl.innerHTML = '<strong>Computed CSS variables on :root (may be empty if variables not set):</strong> <pre>' + JSON.stringify(computed,null,2) + '</pre>';
|
|
|
|
}catch(e){ document.getElementById('out').textContent = 'Error: '+String(e) }
|
|
}
|
|
window.addEventListener('load', ()=> setTimeout(listSheets, 300));
|
|
setTimeout(listSheets, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|