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

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

View File

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