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 @@ @@ -197,6 +208,40 @@ +
+
+ +

Storage

+
+ +
+

+ Yomichan is using approximately of . +

+
+ +
+

+ Could not detect how much storage Yomichan is using. +

+
+ 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 about:config and search for the + dom.storageManager.enabled option. If this option has a value of false, toggling it to + true may allow storage information to be calculated. +
+
+ +
+ If you are using Firefox for Android, you will have to make sure you have enough free space on your device to install dictionaries. +
+ +
+ +
+
+