Add storage information to settings page

This commit is contained in:
toasted-nutbread 2019-05-04 12:57:55 -04:00
parent 884be644ec
commit 2328d61a81
2 changed files with 127 additions and 1 deletions

View File

@ -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();
}
}

View File

@ -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>