Improve display of storage stats

ext/bg/js/settings.js

@@ -705,13 +705,13 @@ async function getBrowser() {
 
 function storageBytesToLabeledString(size) {
     const base = 1000;
-    const labels = ['bytes', 'KB', 'MB', 'GB'];
+    const labels = [' bytes', 'KB', 'MB', 'GB'];
     let labelIndex = 0;
     while (size >= base) {
         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);
 }

ext/bg/settings.html

@@ -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">