Add storage information to settings page

1 files changed, 81 insertions, 0 deletions

diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 4bf7181f..579af085 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -203,6 +203,8 @@ async function onReady() {
     }
 
     formUpdateVisibility(options);
+
+    storageInfoInitialize();
 }
 
 $(document).ready(utilAsync(onReady));
@@ -520,3 +522,82 @@ async function onAnkiFieldTemplatesReset(e) {
         ankiErrorShow(e);
     }
 }
+
+
+/*
+ * Storage
+ */
+
+async function getBrowser() {
+    if (typeof chrome !== "undefined") {
+        if (typeof browser !== "undefined") {
+            try {
+                const info = await browser.runtime.getBrowserInfo();
+                if (info.name === "Fennec") {
+                    return "firefox-mobile";
+                }
+            } catch (e) { }
+            return "firefox";
+        } else {
+            return "chrome";
+        }
+    } else {
+        return "edge";
+    }
+}
+
+function storageBytesToLabeledString(size) {
+    const base = 1000;
+    const labels = ["bytes", "KB", "MB", "GB"];
+    let labelIndex = 0;
+    while (size >= base) {
+        size /= base;
+        ++labelIndex;
+    }
+    const label = size.toFixed(1).replace(/\.0+$/, "");
+    return `${label}${labels[labelIndex]}`;
+}
+
+async function storageEstimate() {
+    try {
+        return await navigator.storage.estimate();
+    } catch (e) { }
+    return null;
+}
+
+async function storageInfoInitialize() {
+    const browser = await getBrowser();
+    const container = document.querySelector("#storage-info");
+    container.setAttribute("data-browser", browser);
+
+    await storageShowInfo();
+
+    container.classList.remove("storage-hidden");
+
+    document.querySelector("#storage-refresh").addEventListener('click', () => storageShowInfo(), false);
+}
+
+async function storageShowInfo() {
+    storageSpinnerShow(true);
+
+    const estimate = await storageEstimate();
+    const valid = (estimate !== null);
+
+    if (valid) {
+        document.querySelector("#storage-usage").textContent = storageBytesToLabeledString(estimate.usage);
+        document.querySelector("#storage-quota").textContent = storageBytesToLabeledString(estimate.quota);
+    }
+    document.querySelector("#storage-use").classList.toggle("storage-hidden", !valid);
+    document.querySelector("#storage-error").classList.toggle("storage-hidden", valid);
+
+    storageSpinnerShow(false);
+}
+
+function storageSpinnerShow(show) {
+    const spinner = $('#storage-spinner');
+    if (show) {
+        spinner.show();
+    } else {
+        spinner.hide();
+    }
+}