dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-17 20:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Waterfall Phase 1.3 - Add resource type badges (HTML, CSS, JS, IMG)

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 02:34:02 +11:00
parent 600d231e7c
commit 1d39e77fd6
2 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
waterfall.html
View File

@@ -83,8 +83,22 @@
color: white; color: white;
} }
.type-badge {
width: 48px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.request-label { .request-label {
width: 250px; width: 220px;
padding: 0 8px; padding: 0 8px;
font-size: 11px; font-size: 11px;
color: var(--color-text-primary); color: var(--color-text-primary);

17
waterfall.js
View File

@@ -60,9 +60,10 @@ function renderWaterfall() {
html += '</div>'; html += '</div>';
filteredEntries.forEach((entry, index) => { filteredEntries.forEach((entry, index) => {
const label = truncateUrl(entry.url, 35); const label = truncateUrl(entry.url, 30);
const timingBars = renderTimingBars(entry.timing, scale); const timingBars = renderTimingBars(entry.timing, scale);
const statusColor = getStatusColor(entry.status); const statusColor = getStatusColor(entry.status);
const typeBadge = getResourceTypeBadge(entry.resourceType);
const sizeKB = (entry.size.transferSize / 1024).toFixed(1); const sizeKB = (entry.size.transferSize / 1024).toFixed(1);
const timeMS = entry.timing.total.toFixed(0); const timeMS = entry.timing.total.toFixed(0);
@@ -70,6 +71,7 @@ function renderWaterfall() {
<div class="waterfall-row" data-request-id="${entry.requestId}"> <div class="waterfall-row" data-request-id="${entry.requestId}">
<div class="request-number">${entry.requestId}</div> <div class="request-number">${entry.requestId}</div>
<div class="status-badge" style="background: ${statusColor}">${entry.status}</div> <div class="status-badge" style="background: ${statusColor}">${entry.status}</div>
<div class="type-badge">${typeBadge}</div>
<div class="request-label" title="${entry.url}">${label}</div> <div class="request-label" title="${entry.url}">${label}</div>
<div class="timeline">${timingBars}</div> <div class="timeline">${timingBars}</div>
<div class="request-size">${sizeKB} KB</div> <div class="request-size">${sizeKB} KB</div>
@@ -97,6 +99,19 @@ function getStatusColor(status) {
return '#9E9E9E'; // Grey for others return '#9E9E9E'; // Grey for others
} }
function getResourceTypeBadge(type) {
const badges = {
'Document': 'HTML',
'Stylesheet': 'CSS',
'Script': 'JS',
'Image': 'IMG',
'Font': 'FONT',
'XHR': 'XHR',
'Fetch': 'API'
};
return badges[type] || 'OTHER';
}
function renderTimingBars(timing, scale) { function renderTimingBars(timing, scale) {
let html = ''; let html = '';
let currentOffset = timing.startTime * scale; let currentOffset = timing.startTime * scale;