Add storage information to settings page
This commit is contained in:
toasted-nutbread
parent
884be644ec
commit
2328d61a81
@ -203,6 +203,8 @@ async function onReady() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
formUpdateVisibility(options);
|
formUpdateVisibility(options);
|
||||||
|
|
||||||
|
storageInfoInitialize();
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(utilAsync(onReady));
|
$(document).ready(utilAsync(onReady));
|
||||||
@ -520,3 +522,82 @@ async function onAnkiFieldTemplatesReset(e) {
|
|||||||
ankiErrorShow(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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
<style>
|
<style>
|
||||||
#anki-spinner, #anki-general, #anki-error,
|
#anki-spinner, #anki-general, #anki-error,
|
||||||
#dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
|
#dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
|
||||||
#debug, .options-advanced {
|
#debug, .options-advanced, .storage-hidden, #storage-spinner {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,6 +29,17 @@
|
|||||||
.bottom-links {
|
.bottom-links {
|
||||||
padding-bottom: 1em;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -197,6 +208,40 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<div>
|
<div>
|
||||||
<img src="/mixed/img/spinner.gif" class="pull-right" id="anki-spinner" alt>
|
<img src="/mixed/img/spinner.gif" class="pull-right" id="anki-spinner" alt>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user