';
/* ── Overview Tab ───────────────────────────────────── */
html += '
';
html += '
';
html += '
';
html += '
PHP Generation
';
html += '
' + D.page.total_time + 'ms
';
html += '
Widget render: ' + (isEditorPreview ? 'client-side' : D.widgets.total_render_time + 'ms') + '
';
html += '
';
html += '
';
html += '
Memory Usage
';
html += '
' + fmt(D.page.memory_usage) + '
';
html += '
Peak: ' + fmt(D.page.memory_peak) + ' / Limit: ' + esc(D.page.memory_limit_raw) + '
';
html += '
';
html += '
';
html += '
';
html += '
Database Queries
';
html += '
' + D.page.db_queries_total + '
';
html += '
EP widget queries: ' + D.widgets.total_queries + '
';
html += '
';
html += '
';
html += '
Widgets on Page
';
html += '
' + effectiveWidgetCount + '
';
var epDomCount = 0;
for (var ci = 0; ci < domWidgets.length; ci++) { if (domWidgets[ci].isEP) epDomCount++; }
if (D.widgets.count > 0 && domWidgets.length > D.widgets.count) {
html += '
' + D.widgets.count + ' PHP-profiled / ' + (domWidgets.length - D.widgets.count) + ' cached — ' + epDomCount + ' EP
';
} else if (isEditorPreview) {
html += '
' + epDomCount + ' Element Pack / ' + (domWidgets.length - epDomCount) + ' other (DOM scan)
';
} else {
html += '
Total memory delta: ' + fmt(D.widgets.total_memory) + '
';
}
html += '
';
html += '
';
html += '
Browser Timing
';
html += '
';
if (timing.domReady) html += '' + timing.domReady + 'ms';
html += '
';
html += '
';
if (timing.ttfb) html += 'TTFB: ' + timing.ttfb + 'ms | ';
if (timing.fcp) html += 'FCP: ' + timing.fcp + 'ms | ';
html += 'DOM nodes: ' + timing.domNodes;
html += '
';
html += '
';
html += '
';
html += '
Loaded Assets
';
html += '
' + D.assets.scripts_total + ' JS / ' + D.assets.styles_total + ' CSS
';
html += '
EP: ' + D.assets.ep_scripts.length + ' scripts, ' + D.assets.ep_styles.length + ' styles
';
html += '
';
html += '
'; // grid
html += '
'; // pane
/* ── Widgets Tab ────────────────────────────────────── */
html += '
';
if (domWidgets.length > 0) {
var widgetRows = domWidgets.slice().sort(function (a, b) {
var pa = phpLookup[a.id], pb = phpLookup[b.id];
var ma = pa ? pa.memory_delta : -1, mb = pb ? pb.memory_delta : -1;
return mb - ma;
});
var phpProfiled = 0;
for (var pc = 0; pc < domWidgets.length; pc++) { if (phpLookup[domWidgets[pc].id]) phpProfiled++; }
var unprofiled = domWidgets.length - phpProfiled;
html += '
';
if (isEditorPreview) {
html += 'ⓘ Editor preview — click a widget name to scroll & highlight it on the page.';
} else if (unprofiled > 0) {
html += 'ⓘ ' + phpProfiled + ' widgets PHP-profiled, ' + unprofiled + ' served from cache (no PHP metrics). Click a name to scroll & highlight.';
} else {
html += 'ⓘ Click a widget name to scroll & highlight it on the page. Click a row to expand query details.';
}
html += '
';
html += '
';
} else {
html += '
No widgets detected on this page.
';
}
html += '
';
/* ── JS Timing Tab ──────────────────────────────────── */
html += '
';
html += '
';
if (timing.domReady) {
html += '
DOM Ready
' + timing.domReady + 'ms
';
}
if (timing.windowLoad) {
html += '
Window Load
' + timing.windowLoad + 'ms
';
}
if (timing.fcp) {
html += '
First Contentful Paint
' + timing.fcp + 'ms
';
}
if (timing.domInteractive) {
html += '
DOM Interactive
' + timing.domInteractive + 'ms
';
}
html += '
DOM Nodes
' + timing.domNodes + '
';
if (performance.memory) {
html += '
JS Heap
' + fmt(performance.memory.usedJSHeapSize) + ' / ' + fmt(performance.memory.jsHeapSizeLimit) + '
';
}
html += '
';
if (jsData.widgets.length > 0) {
var jsSorted = jsData.widgets.slice().sort(function (a, b) { return b.ms - a.ms; });
html += '
Widget JS Init Times
';
html += '
';
html += '| Widget ▲ | ';
html += 'Init Time ▼ | ';
html += 'DOM Nodes ▲ | ';
html += 'Element ID | ';
html += '
';
for (var j = 0; j < jsSorted.length; j++) {
var jw = jsSorted[j];
var displayName = jw.widgetType || jw.tag.replace('frontend/element_ready/', '');
var jwNodes = jw.nodes || 0;
html += '';
html += '| ';
html += '' + esc(displayName) + '';
if (jw.elId) html += '⌖';
html += ' | ';
html += '' + jw.ms.toFixed(2) + 'ms | ';
html += '' + jwNodes + ' | ';
html += '' + esc(jw.elId || '—') + ' | ';
html += '
';
}
html += '
';
} else {
html += '
No widget JS init timing captured.
';
}
html += '
';
/* ── Assets Tab ─────────────────────────────────────── */
html += '
';
var allAssets = [];
var totalTransfer = 0, totalDecoded = 0, cacheHits = 0, networkLoads = 0;
function pushAssets(list, type) {
for (var ai = 0; ai < list.length; ai++) {
var a = list[ai];
var r = findResource(a.src, resDetails);
var row = {
handle: a.handle,
src: a.src || '',
ver: a.ver || '',
deps: a.deps || 0,
type: type,
source: a.source || 'other',
inFooter: a.in_footer || false,
transfer: r ? r.transferSize : -1,
decoded: r ? r.decodedSize : -1,
encoded: r ? r.encodedSize : -1,
duration: r ? r.duration : -1,
cached: r ? r.cached : false,
protocol: r ? r.protocol : '',
hasPerf: !!r,
};
if (row.hasPerf) {
totalTransfer += row.transfer;
totalDecoded += row.decoded;
if (row.cached) cacheHits++; else networkLoads++;
}
allAssets.push(row);
}
}
pushAssets(D.assets.scripts_detail || [], 'JS');
pushAssets(D.assets.styles_detail || [], 'CSS');
var epAssets = 0, elAssets = 0;
for (var ac = 0; ac < allAssets.length; ac++) {
if (allAssets[ac].source === 'ep') epAssets++;
else if (allAssets[ac].source === 'elementor') elAssets++;
}
// Summary cards
html += '
';
html += '
Total Assets
';
html += '
' + D.assets.scripts_total + ' JS / ' + D.assets.styles_total + ' CSS
';
html += '
EP: ' + epAssets + ' | Elementor: ' + elAssets + ' | Other: ' + (allAssets.length - epAssets - elAssets) + '
';
html += '
Network Transfer
';
html += '
' + fmt(totalTransfer) + '
';
html += '
Decoded: ' + fmt(totalDecoded);
if (totalDecoded > 0 && totalTransfer > 0 && totalTransfer < totalDecoded) {
html += ' (saved ' + Math.round((1 - totalTransfer / totalDecoded) * 100) + '% via compression)';
}
html += '
';
html += '
Cache Performance
';
var totalMeasured = cacheHits + networkLoads;
html += '
' + cacheHits + ' cached / ' + networkLoads + ' network
';
if (totalMeasured > 0) {
var cachePct = Math.round(cacheHits / totalMeasured * 100);
html += '
';
}
html += '
';
html += '
';
// Assets table
html += '
';
html += '
';
html += '';
html += '| Handle ▲ | ';
html += 'Type ▲ | ';
html += 'Transfer ▼ | ';
html += 'Original ▲ | ';
html += 'Load Time ▲ | ';
html += 'Status ▲ | ';
html += 'Source ▲ | ';
html += '
';
var assetsSorted = allAssets.slice().sort(function (a, b) { return b.transfer - a.transfer; });
for (var at = 0; at < assetsSorted.length; at++) {
var ar = assetsSorted[at];
var statusVal = ar.cached ? 0 : (ar.hasPerf ? 1 : 2);
var sourceVal = ar.source === 'ep' ? 0 : (ar.source === 'elementor' ? 1 : 2);
html += '';
if (ar.src) html += '' + shortenSrc(ar.src) + '
';
if (ar.ver) html += 'v' + esc(ar.ver) + '';
html += '';
// Type
html += '' + ar.type + ' | ';
// Transfer size
if (ar.hasPerf) {
var saved = ar.decoded > 0 && ar.transfer < ar.decoded ? Math.round((1 - ar.transfer / ar.decoded) * 100) : 0;
html += '' + fmt(ar.transfer) + '';
if (saved > 0) html += ' -' + saved + '%';
html += ' | ';
} else {
html += '— | ';
}
// Original (decoded) size
if (ar.hasPerf && ar.decoded > 0) {
html += '' + fmt(ar.decoded) + ' | ';
} else {
html += '— | ';
}
// Load time
if (ar.hasPerf && ar.duration >= 0) {
html += '' + ar.duration + 'ms | ';
} else {
html += '— | ';
}
// Cache status
if (ar.hasPerf) {
if (ar.cached) {
html += 'Cached | ';
} else {
html += 'Network';
if (ar.protocol) html += ' ' + esc(ar.protocol) + '';
html += ' | ';
}
} else {
html += 'Inline | ';
}
// Source
if (ar.source === 'ep') {
html += 'EP | ';
} else if (ar.source === 'elementor') {
html += 'Elementor | ';
} else {
html += 'Other | ';
}
html += '
';
}
html += '
';
html += '
';
/* ── Environment Tab ────────────────────────────────── */
html += '
';
html += '
';
var envRows = [
['PHP Version', D.page.php_version],
['WordPress Version', D.page.wp_version],
['Elementor Version', D.page.elementor_version],
['Element Pack Version', D.page.ep_version],
['PHP Memory Limit', D.page.memory_limit_raw],
['Max Execution Time', D.server.max_execution_time + 's'],
['PHP SAPI', D.server.php_sapi],
['OPcache', D.server.opcache_enabled ? 'Enabled' : 'Disabled', D.server.opcache_enabled],
['Object Cache', D.server.object_cache ? 'Enabled' : 'Disabled', D.server.object_cache],
['Asset Optimization', D.page.asset_optimization ? 'Enabled' : 'Disabled', D.page.asset_optimization],
['SAVEQUERIES', D.page.savequeries ? 'Enabled' : 'Disabled', D.page.savequeries],
['User Agent', navigator.userAgent],
['Screen', window.screen.width + 'x' + window.screen.height + ' @' + window.devicePixelRatio + 'x'],
['Viewport', window.innerWidth + 'x' + window.innerHeight],
];
for (var e = 0; e < envRows.length; e++) {
var cls = '';
if (envRows[e].length === 3) cls = envRows[e][2] ? ' epd-on' : ' epd-off';
html += '
' + esc(envRows[e][0]) + '
';
html += '
' + esc(envRows[e][1]) + '
';
}
html += '
';
html += '