6ca8519250
- Device breakpoint toggles (mobile 375px / tablet 768px / desktop 100%) - Editor theme selector with 6 themes (VS Dark/Light, High Contrast, Monokai, Dracula, GitHub Dark) - Starter template gallery with 8 pre-built templates (Todo, API Fetch, CSS Animation, etc.) - Code autocomplete with DOM/React type definitions and snippet completions - Devtools panels: console, network, elements, performance - Code formatter (Prettier), diff view, and linter integration
55 lines
1.9 KiB
JavaScript
55 lines
1.9 KiB
JavaScript
import { registerClearHandler } from './devtools.js';
|
|
|
|
function timeColor(ms, thresholds) {
|
|
if (ms < thresholds[0]) return 'perf-green';
|
|
if (ms < thresholds[1]) return 'perf-yellow';
|
|
return 'perf-red';
|
|
}
|
|
|
|
function renderCard(label, value, unit, colorClass) {
|
|
return `<div class="perf-card">
|
|
<div class="perf-card-label">${label}</div>
|
|
<div class="perf-card-value ${colorClass}">${value}<span style="font-size:12px;font-weight:400;margin-left:2px">${unit}</span></div>
|
|
</div>`;
|
|
}
|
|
|
|
function render(metrics) {
|
|
const out = document.getElementById('performance-output');
|
|
let html = '';
|
|
|
|
if (metrics.scriptDuration !== undefined) {
|
|
html += renderCard('Script Execution', Math.round(metrics.scriptDuration), 'ms',
|
|
timeColor(metrics.scriptDuration, [50, 200]));
|
|
}
|
|
if (metrics.domContentLoaded !== undefined) {
|
|
html += renderCard('DOM Content Loaded', Math.round(metrics.domContentLoaded), 'ms',
|
|
timeColor(metrics.domContentLoaded, [100, 500]));
|
|
}
|
|
if (metrics.loadEvent !== undefined) {
|
|
html += renderCard('Page Load', Math.round(metrics.loadEvent), 'ms',
|
|
timeColor(metrics.loadEvent, [200, 1000]));
|
|
}
|
|
if (metrics.domNodes !== undefined) {
|
|
html += renderCard('DOM Nodes', metrics.domNodes, '',
|
|
metrics.domNodes > 1500 ? 'perf-red' : metrics.domNodes > 800 ? 'perf-yellow' : 'perf-neutral');
|
|
}
|
|
if (metrics.resourceCount !== undefined) {
|
|
html += renderCard('Resources Loaded', metrics.resourceCount, '', 'perf-neutral');
|
|
}
|
|
|
|
out.innerHTML = html;
|
|
}
|
|
|
|
export function clearPerformance() {
|
|
document.getElementById('performance-output').innerHTML = '';
|
|
}
|
|
|
|
export function initPerformance() {
|
|
registerClearHandler('performance', clearPerformance);
|
|
|
|
window.addEventListener('message', (e) => {
|
|
if (!e.data || e.data.type !== 'devtools' || e.data.tab !== 'performance') return;
|
|
if (e.data.metrics) render(e.data.metrics);
|
|
});
|
|
}
|