diff options
| -rw-r--r-- | ext/bg/js/settings.js | 81 | ||||
| -rw-r--r-- | ext/bg/settings.html | 47 |
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> |