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

Add waterfall sorting controls - default slowest to fastest

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 02:42:49 +11:00
parent 1d39e77fd6
commit d2a695ac36
2 changed files with 58 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
waterfall.html
View File

@@ -253,13 +253,28 @@
<div class="waterfall-container"> <div class="waterfall-container">
<h1>Request Waterfall</h1> <h1>Request Waterfall</h1>
<div class="filter-controls" id="filterControls"> <div style="display: flex; gap: 2rem; margin-bottom: 1.5rem; align-items: center;">
<button class="filter-btn active" data-type="all">All</button> <div class="filter-controls" id="filterControls">
<button class="filter-btn" data-type="Document">HTML</button> <button class="filter-btn active" data-type="all">All</button>
<button class="filter-btn" data-type="Script">JS</button> <button class="filter-btn" data-type="Document">HTML</button>
<button class="filter-btn" data-type="Stylesheet">CSS</button> <button class="filter-btn" data-type="Script">JS</button>
<button class="filter-btn" data-type="Image">Images</button> <button class="filter-btn" data-type="Stylesheet">CSS</button>
<button class="filter-btn" data-type="Font">Fonts</button> <button class="filter-btn" data-type="Image">Images</button>
<button class="filter-btn" data-type="Font">Fonts</button>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<label for="sortSelect" style="color: var(--color-text-secondary); font-size: 0.9rem;">Sort:</label>
<select id="sortSelect" style="padding: 0.5rem; border-radius: 6px; background: var(--color-bg-secondary); color: var(--color-text-primary); border: 2px solid var(--color-border); cursor: pointer;">
<option value="time-desc">Slowest → Fastest</option>
<option value="time-asc">Fastest → Slowest</option>
<option value="size-desc">Largest → Smallest</option>
<option value="size-asc">Smallest → Largest</option>
<option value="name-asc">Name (A → Z)</option>
<option value="name-desc">Name (Z → A)</option>
<option value="sequence">Original Sequence</option>
</select>
</div>
</div> </div>
<div class="waterfall-canvas" id="waterfallCanvas"></div> <div class="waterfall-canvas" id="waterfallCanvas"></div>

36
waterfall.js
View File

@@ -5,6 +5,7 @@
let currentHarData = null; let currentHarData = null;
let currentFilter = 'all'; let currentFilter = 'all';
let currentSort = 'time-desc'; // Default: slowest to fastest
// Load HAR data from URL parameter // Load HAR data from URL parameter
async function init() { async function init() {
@@ -48,6 +49,9 @@ function renderWaterfall() {
? entries ? entries
: entries.filter(e => e.resourceType === currentFilter); : entries.filter(e => e.resourceType === currentFilter);
// Sort entries based on current sort
sortEntries(filteredEntries);
let html = ''; let html = '';
// Add time scale header with grid lines // Add time scale header with grid lines
@@ -112,6 +116,32 @@ function getResourceTypeBadge(type) {
return badges[type] || 'OTHER'; return badges[type] || 'OTHER';
} }
function sortEntries(entries) {
switch(currentSort) {
case 'time-desc': // Slowest to fastest
entries.sort((a, b) => b.timing.total - a.timing.total);
break;
case 'time-asc': // Fastest to slowest
entries.sort((a, b) => a.timing.total - b.timing.total);
break;
case 'size-desc': // Largest to smallest
entries.sort((a, b) => b.size.transferSize - a.size.transferSize);
break;
case 'size-asc': // Smallest to largest
entries.sort((a, b) => a.size.transferSize - b.size.transferSize);
break;
case 'name-asc': // A to Z
entries.sort((a, b) => a.url.localeCompare(b.url));
break;
case 'name-desc': // Z to A
entries.sort((a, b) => b.url.localeCompare(a.url));
break;
case 'sequence': // Original sequence
entries.sort((a, b) => a.requestId - b.requestId);
break;
}
}
function renderTimingBars(timing, scale) { function renderTimingBars(timing, scale) {
let html = ''; let html = '';
let currentOffset = timing.startTime * scale; let currentOffset = timing.startTime * scale;
@@ -241,6 +271,12 @@ function setupEventListeners() {
}); });
}); });
// Sort dropdown
document.getElementById('sortSelect').addEventListener('change', (e) => {
currentSort = e.target.value;
renderWaterfall();
});
// Close dialog // Close dialog
document.getElementById('closeDialog').addEventListener('click', closeDialog); document.getElementById('closeDialog').addEventListener('click', closeDialog);
document.getElementById('dialogOverlay').addEventListener('click', closeDialog); document.getElementById('dialogOverlay').addEventListener('click', closeDialog);