2 files changed, 127 insertions, 1 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();
+    }
+}
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 53d17855..d41d442b 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -9,7 +9,7 @@
         <style>
             #anki-spinner, #anki-general, #anki-error,
             #dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
-            #debug, .options-advanced {
+            #debug, .options-advanced, .storage-hidden, #storage-spinner {
                 display: none;
             }
 
@@ -29,6 +29,17 @@
             .bottom-links {
                 padding-bottom: 1em;
             }
+
+            [data-show-for-browser] {
+                display: none;
+            }
+
+            [data-browser=edge] [data-show-for-browser~=edge],
+            [data-browser=chrome] [data-show-for-browser~=chrome],
+            [data-browser=firefox] [data-show-for-browser~=firefox],
+            [data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
+                display: initial;
+            }
         </style>
     </head>
     <body>
@@ -197,6 +208,40 @@
                 </div>
             </div>
 
+            <div id="storage-info" class="storage-hidden">
+                <div>
+                    <img src="/mixed/img/spinner.gif" class="pull-right" id="storage-spinner" />
+                    <h3>Storage</h3>
+                </div>
+
+                <div id="storage-use" class="storage-hidden">
+                    <p class="help-block">
+                        Yomichan is using approximately <strong id="storage-usage"></strong> of <strong id="storage-quota"></strong>.
+                    </p>
+                </div>
+
+                <div id="storage-error" class="storage-hidden">
+                    <p class="help-block">
+                        Could not detect how much storage Yomichan is using.
+                    </p>
+                    <div data-show-for-browser="firefox firefox-mobile"><div class="alert alert-danger options-advanced">
+                        On Firefox and Firefox for Android, the storage information feature may be hidden behind a browser flag.
+
+                        If you would like to enable this flag, open <a href="about:config" target="_blank">about:config</a> and search for the
+                        <strong>dom.storageManager.enabled</strong> option. If this option has a value of <strong>false</strong>, toggling it to
+                        <strong>true</strong> may allow storage information to be calculated.
+                    </div></div>
+                </div>
+
+                <div data-show-for-browser="firefox-mobile"><div class="alert alert-warning">
+                    If you are using Firefox for Android, you will have to make sure you have enough free space on your device to install dictionaries.
+                </div></div>
+
+                <div>
+                    <input type="button" value="Refresh" id="storage-refresh" />
+                </div>
+            </div>
+
             <div>
                 <div>
                     <img src="/mixed/img/spinner.gif" class="pull-right" id="anki-spinner" alt>