71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
/**
|
||
* Development diagnostics utility
|
||
*
|
||
* Provides opt-in debugging helpers for visual issues.
|
||
* No automatic DOM manipulation — CSS is the single source of truth.
|
||
*
|
||
* Available console commands (DEV only):
|
||
* __enableCleanMode() — disable all decorative pseudo-elements
|
||
* __disableCleanMode() — re-enable them
|
||
* __findVerticalLines() — highlight narrow full-height elements
|
||
*/
|
||
|
||
import { logger } from './logger';
|
||
|
||
export function fixDisplayIssues(): void {
|
||
if (typeof window === 'undefined') return;
|
||
|
||
// Remove grid overlay if accidentally left on (e.g. from devtools)
|
||
const gridOverlay = document.getElementById('grid-overlay');
|
||
if (gridOverlay) {
|
||
gridOverlay.remove();
|
||
}
|
||
|
||
// Register opt-in diagnostic tools (DEV only, never auto-executed)
|
||
if (import.meta.env.DEV) {
|
||
/** Toggle "clean mode": hides body::before/after noise texture */
|
||
(window as any).__enableCleanMode = () => {
|
||
const id = 'fix-display-clean-mode';
|
||
if (document.getElementById(id)) return;
|
||
const style = document.createElement('style');
|
||
style.id = id;
|
||
style.textContent = `
|
||
body::before, body::after { display: none !important; }
|
||
`;
|
||
document.head.appendChild(style);
|
||
logger.debug('[Diagnostics] Clean mode ON — noise texture hidden.');
|
||
};
|
||
|
||
(window as any).__disableCleanMode = () => {
|
||
document.getElementById('fix-display-clean-mode')?.remove();
|
||
logger.debug('[Diagnostics] Clean mode OFF.');
|
||
};
|
||
|
||
/** Highlight narrow full-height elements that could be stray lines */
|
||
(window as any).__findVerticalLines = () => {
|
||
const results: Array<{ el: HTMLElement; w: number; h: number }> = [];
|
||
document.querySelectorAll('*').forEach((el) => {
|
||
const r = (el as HTMLElement).getBoundingClientRect();
|
||
if (r.width > 0 && r.width < 10 && r.height > window.innerHeight * 0.3) {
|
||
results.push({ el: el as HTMLElement, w: r.width, h: r.height });
|
||
}
|
||
});
|
||
results.forEach(({ el, w, h }, i) => {
|
||
el.style.outline = `3px solid ${i % 2 === 0 ? 'red' : 'yellow'}`;
|
||
el.style.outlineOffset = '2px';
|
||
logger.debug(`[Diagnostics] ${i + 1}. ${el.tagName}${el.id ? `#${el.id}` : ''} — ${w.toFixed(1)}×${h.toFixed(0)}px`);
|
||
});
|
||
logger.debug(`[Diagnostics] Found ${results.length} narrow vertical elements.`);
|
||
return results;
|
||
};
|
||
}
|
||
}
|
||
|
||
// Auto-run once on import (DEV only) — grid overlay cleanup only
|
||
if (import.meta.env.DEV && typeof window !== 'undefined') {
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', fixDisplayIssues, { once: true });
|
||
} else {
|
||
fixDisplayIssues();
|
||
}
|
||
}
|