Improve display of storage stats

This commit is contained in:
toasted-nutbread 2019-10-11 19:22:46 -04:00
parent 6014fe5344
commit 70bceb5b56
2 changed files with 23 additions and 6 deletions

View File

@ -711,7 +711,7 @@ function storageBytesToLabeledString(size) {
size /= base;
++labelIndex;
}
const label = size.toFixed(1);
const label = labelIndex === 0 ? `${size}` : size.toFixed(1);
return `${label}${labels[labelIndex]}`;
}
@ -723,6 +723,13 @@ async function storageEstimate() {
}
storageEstimate.mostRecent = null;
async function isStoragePeristent() {
try {
return await navigator.storage.persisted();
} catch (e) { }
return false;
}
async function storageInfoInitialize() {
storagePersistInitialize();
const browser = await getBrowser();
@ -741,9 +748,15 @@ async function storageUpdateStats() {
const valid = (estimate !== null);
if (valid) {
// Firefox reports usage as 0 when persistent storage is enabled.
const finite = (estimate.usage > 0 || !(await isStoragePeristent()));
if (finite) {
document.querySelector('#storage-usage').textContent = storageBytesToLabeledString(estimate.usage);
document.querySelector('#storage-quota').textContent = storageBytesToLabeledString(estimate.quota);
}
document.querySelector('#storage-use-finite').classList.toggle('storage-hidden', !finite);
document.querySelector('#storage-use-infinite').classList.toggle('storage-hidden', finite);
}
storageUpdateStats.isUpdating = false;
return valid;
@ -782,7 +795,7 @@ async function storagePersistInitialize() {
info.classList.remove('storage-hidden');
button.classList.remove('storage-hidden');
let persisted = await navigator.storage.persisted();
let persisted = await isStoragePeristent();
if (persisted) {
checkbox.checked = true;
}
@ -794,6 +807,7 @@ async function storagePersistInitialize() {
if (await navigator.storage.persist()) {
persisted = true;
checkbox.checked = true;
storageShowInfo();
}
}, false);
}

View File

@ -410,9 +410,12 @@
</div>
<div id="storage-use" class="storage-hidden">
<p class="help-block">
<p class="help-block storage-hidden" id="storage-use-finite">
Yomichan is using approximately <strong id="storage-usage"></strong> of <strong id="storage-quota"></strong>.
</p>
<p class="help-block storage-hidden" id="storage-use-infinite">
Yomichan is permitted <strong>unlimited storage</strong>.
</p>
</div>
<div id="storage-error" class="storage-hidden">