Add storage information to settings page

2019-05-04 12:57:55 -04:00 · 2019-05-04 12:57:55 -04:00 · 2328d61a81
commit 2328d61a81
parent 884be644ec
2 changed files with 127 additions and 1 deletions
--- 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();
+    }
+}
--- 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>