Administrator/Multi-Hoster-Upload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 47 Wiki Activity

feat: show update download telemetry

Browse Source 
Calculate download throughput and remaining time from verified installer bytes and display downloaded size, total size, speed, and ETA beneath the progress track while retaining the last values after cancellation.
This commit is contained in:
Sucukdeluxe
2026-08-21 00:28:48 +02:00
parent e7d30edab5
commit 4d3a4f1a8a
7 changed files with 67 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/updater.js
+8 -1
View File
@@ -241,6 +241,7 @@ async function prepareUpdate(onProgress, options = {}) {
activeAbort = new AbortController();
const signal = activeAbort.signal;
const fetchImpl = options.fetchImpl || fetch;
const now = typeof options.now === 'function' ? options.now : Date.now;
let stagedInstallerPath = '';
try {
@@ -284,6 +285,7 @@ async function prepareUpdate(onProgress, options = {}) {
const totalBytes = manifest.size;
let downloadedBytes = 0;
let lastReportedPercent = -1;
const downloadStartedAt = now();
const chunks = [];
const DOWNLOAD_STALL_MS = 45000;
@@ -312,12 +314,17 @@ async function prepareUpdate(onProgress, options = {}) {
downloadedBytes += value.length;
const percent = Math.max(0, Math.min(100, Math.floor((downloadedBytes / totalBytes) * 100)));
if (onProgress && percent !== lastReportedPercent) {
const elapsedMs = Math.max(1, now() - downloadStartedAt);
const bytesPerSecond = Math.round((downloadedBytes * 1000) / elapsedMs);
const etaSeconds = bytesPerSecond > 0 ? Math.ceil(Math.max(0, totalBytes - downloadedBytes) / bytesPerSecond) : null;
lastReportedPercent = percent;
onProgress({
stage: 'downloading',
percent,
bytesDownloaded: downloadedBytes,
bytesTotal: totalBytes
bytesTotal: totalBytes,
bytesPerSecond,
etaSeconds
});
await new Promise(resolve => setImmediate(resolve));
}
renderer/app.js
+19
View File
@@ -7497,6 +7497,7 @@ function showUpdateBanner(info) {
installButton.textContent = 'Jetzt installieren';
}
_setUpdateProgress(0, 'Bereit zum Download', 'ready');
_setUpdateProgressDetails(null);
_setUpdateDialogBusy(false);
_syncHeaderUpdateState();
_setUpdateDialogVisible(true);
@@ -7517,6 +7518,7 @@ function handleUpdateProgress(data) {
_updateInstallBusy = true;
_setUpdateDialogBusy(true, true);
_setUpdateProgress(percent, `Download ${percent}%`, 'downloading');
_setUpdateProgressDetails(progress);
if (button) button.textContent = `Download ${percent}%`;
} else if (progress.stage === 'verifying') {
_updateInstallBusy = true;
@@ -7708,6 +7710,22 @@ function _setUpdateProgress(percent, text, state = 'ready') {
}
}
function _setUpdateProgressDetails(progress) {
const details = document.getElementById('updateProgressDetails');
if (!details) return;
const downloaded = Math.max(0, Number(progress?.bytesDownloaded) || 0);
const total = Math.max(0, Number(progress?.bytesTotal) || 0);
if (total <= 0) {
details.textContent = '';
details.hidden = true;
return;
}
const bytesPerSecond = Math.max(0, Number(progress?.bytesPerSecond) || 0);
const etaSeconds = Number.isFinite(Number(progress?.etaSeconds)) ? Math.max(0, Number(progress.etaSeconds)) : 0;
details.textContent = `${formatSize(downloaded)} / ${formatSize(total)} · ${formatSize(bytesPerSecond)}/s · ETA ${formatTime(etaSeconds)}`;
details.hidden = false;
}
async function installKnownUpdate() {
if (_updateInstallBusy) return;
if (!_knownUpdateInfo || !_knownUpdateInfo.available) {
@@ -7717,6 +7735,7 @@ async function installKnownUpdate() {
_updateInstallBusy = true;
_setUpdateDialogBusy(true, true);
_setUpdateProgress(0, 'Download 0%', 'downloading');
_setUpdateProgressDetails(null);
const message = document.getElementById('updateMessage');
const button = document.getElementById('installUpdateBtn');
if (message) message.hidden = true;
renderer/index.html
+4 -1
View File
@@ -161,7 +161,10 @@
</div>
<div class="update-progress" aria-live="polite">
<div class="update-progress-track"><span id="updateProgressBar" role="progressbar" aria-label="Update-Fortschritt" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0%"></span></div>
<span id="updateProgressText"></span>
<div class="update-progress-footer">
<span id="updateProgressDetails" hidden></span>
<span id="updateProgressText"></span>
</div>
</div>
<div class="update-dialog-actions">
<button class="btn btn-secondary" id="dismissUpdateBtn">Abbrechen</button>
renderer/styles.css
+20 -1
View File
@@ -2515,10 +2515,29 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
background: var(--danger);
}
.update-progress-footer {
min-width: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
#updateProgressDetails {
min-width: 0;
overflow: hidden;
color: var(--text-dim);
font-size: 11px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
#updateProgressText {
min-width: 34px;
max-width: 100%;
justify-self: end;
margin-left: auto;
flex: 0 0 auto;
color: var(--text-dim);
font-size: 11px;
line-height: 1.35;
tests/startup-renderer.test.js
+1
View File
@@ -176,4 +176,5 @@ test('header occupies its final geometry before asynchronous initialization', ()
assert.match(css, /\.header-update-button\.update-available:hover\s*\{[^}]*background:\s*var\(--success-end\);[^}]*color:\s*#000;/su);
assert.match(css, /\.update-dialog\s*\{[^}]*width:\s*min\(576px,\s*100%\);/su);
assert.match(css, /\.update-release-notes\s*\{[^}]*height:\s*min\(220px,\s*42vh\);/su);
assert.match(html, /class="update-progress-footer"[\s\S]*id="updateProgressDetails"[\s\S]*id="updateProgressText"/u);
});
tests/ui-smoke.js
+3 -1
View File
@@ -2460,7 +2460,7 @@ setTimeout(async () => {
const busyUpdateState = await wc.executeJavaScript(\`(() => {
showUpdateBanner({ remoteVersion: '9.9.9' });
handleUpdateProgress({ stage: 'downloading', percent: 50 });
handleUpdateProgress({ stage: 'downloading', percent: 50, bytesDownloaded: 40 * 1024 * 1024, bytesTotal: 100 * 1024 * 1024, bytesPerSecond: 8 * 1024 * 1024, etaSeconds: 8 });
const overlay = document.getElementById('updateBanner');
document.getElementById('updateCloseBtn').click();
document.getElementById('dismissUpdateBtn').click();
@@ -2480,6 +2480,7 @@ setTimeout(async () => {
messageText: document.getElementById('updateMessage').textContent,
progressLabel: progress.getAttribute('aria-label'),
progressText: progress.getAttribute('aria-valuetext'),
progressDetails: document.getElementById('updateProgressDetails').textContent,
progressState: progress.dataset.state,
progressColor: getComputedStyle(progress).backgroundColor,
progressTrackWidth: progress.parentElement.getBoundingClientRect().width,
@@ -2489,6 +2490,7 @@ setTimeout(async () => {
})()\`);
check('Busy update keeps its progress dialog open with a dangerous download cancellation action', busyUpdateState.display === 'flex' && busyUpdateState.hidden === 'false' && busyUpdateState.closeDisabled === true && busyUpdateState.dismissDisabled === false && busyUpdateState.dismissText === 'Download abbrechen' && busyUpdateState.dismissDanger === true && busyUpdateState.headerHidden === false);
check('Update progress exposes an accessible live value', busyUpdateState.progressLabel === 'Update-Fortschritt' && busyUpdateState.progressText === 'Download 50%');
check('Update progress shows downloaded size, total size, speed, and ETA', busyUpdateState.progressDetails === '40.0 MB / 100.0 MB · 8.0 MB/s · ETA 00:08');
check('Update download progress is green, wide, and places its status below the line', busyUpdateState.progressState === 'downloading' && busyUpdateState.progressColor === 'rgb(117, 211, 155)' && busyUpdateState.progressTrackWidth >= 390 && busyUpdateState.progressTextTop >= busyUpdateState.progressTrackBottom);
check('Busy update preserves the available version subtitle while progress stays below the bar', busyUpdateState.messageHidden === false && busyUpdateState.messageText === 'Update v9.9.9 verfügbar');
tests/updater-version.test.js
+12 -3
View File
@@ -103,6 +103,7 @@ test('buffered installer downloads yield between progress updates so the rendere
let preparationFinished = false;
let rendererObservedProgressBeforeFinish = false;
let rendererObservationScheduled = false;
let nowMs = 0;
try {
await prepareUpdate(value => {
@@ -121,6 +122,7 @@ test('buffered installer downloads yield between progress updates so the rendere
latestYmlUrl: 'https://update.invalid/latest.yml'
},
tempDir,
now: () => nowMs,
fetchImpl: async url => url.endsWith('latest.yml')
? {
ok: true,
@@ -132,9 +134,12 @@ test('buffered installer downloads yield between progress updates so the rendere
status: 200,
body: {
getReader: () => ({
read: async () => readerIndex < chunks.length
? { done: false, value: chunks[readerIndex++] }
: { done: true }
read: async () => {
nowMs += 1000;
return readerIndex < chunks.length
? { done: false, value: chunks[readerIndex++] }
: { done: true };
}
})
}
}
@@ -147,6 +152,10 @@ test('buffered installer downloads yield between progress updates so the rendere
progress.filter(value => value.stage === 'downloading').map(value => value.percent),
[25, 50, 75, 100]
);
assert.deepEqual(
progress.filter(value => value.stage === 'downloading').map(value => [value.bytesPerSecond, value.etaSeconds]),
[[32768, 3], [32768, 2], [32768, 1], [32768, 0]]
);
} finally {
fs.rmSync(tempDir, { recursive: true, force: true });
}