dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-19 12:35:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Phase B.1 - Add Connection View with socket grouping

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 03:07:07 +11:00
parent c6a9d914df
commit 0e29d75bc3
3 changed files with 183 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
waterfall.html
View File

@@ -298,13 +298,61 @@
.details-table th.sorted .sort-icon {
opacity: 1;
}
/* Connection View Styles */
.connection-group {
margin-bottom: 2rem;
border: 2px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
}
.connection-header {
background: var(--color-bg-secondary);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 2px solid var(--color-border);
}
.connection-label {
font-weight: 600;
color: var(--color-text-primary);
flex: 1;
}
.connection-badge {
padding: 0.25rem 0.5rem;
background: var(--color-bg-tertiary);
border-radius: 4px;
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.connection-count {
font-size: 0.9rem;
color: var(--color-text-secondary);
}
.connection-requests {
background: var(--color-bg-tertiary);
}
.connection-row {
border-bottom: 1px solid var(--color-border);
}
.connection-row:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="waterfall-container">
<h1>Request Waterfall</h1>
<div style="display: flex; gap: 2rem; margin-bottom: 1.5rem; align-items: center;">
<div style="display: flex; gap: 2rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap;">
<div class="filter-controls" id="filterControls">
<button class="filter-btn active" data-type="all">All</button>
<button class="filter-btn" data-type="Document">HTML</button>
@@ -314,6 +362,14 @@
<button class="filter-btn" data-type="Font">Fonts</button>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<label for="viewMode" style="color: var(--color-text-secondary); font-size: 0.9rem;">View:</label>
<select id="viewMode" 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="waterfall">Waterfall</option>
<option value="connection">Connection</option>
</select>
</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;">