diff options
| -rw-r--r-- | ext/bg/css/settings.css | 11 | ||||
| -rw-r--r-- | ext/bg/js/settings.js | 32 | ||||
| -rw-r--r-- | ext/bg/settings.html | 13 |
3 files changed, 52 insertions, 4 deletions
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css index 6284058a..100478aa 100644 --- a/ext/bg/css/settings.css +++ b/ext/bg/css/settings.css @@ -137,6 +137,17 @@ white-space: pre; } +.btn-inner-middle { + vertical-align: middle; +} +.storage-persist-button-inner { + pointer-events: none; +} +input[type=checkbox]#storage-persist-button-checkbox { + margin: 0 0.375em 0 0; + padding: 0; +} + [data-show-for-browser] { display: none; } diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 84b54ba9..7ad628ba 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -724,14 +724,13 @@ async function storageEstimate() { storageEstimate.mostRecent = null; async function storageInfoInitialize() { + storagePersistInitialize(); 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); } @@ -770,6 +769,35 @@ function storageSpinnerShow(show) { } } +async function storagePersistInitialize() { + if (!(navigator.storage && navigator.storage.persist)) { + // Not supported + return; + } + + const info = document.querySelector('#storage-persist-info'); + const button = document.querySelector('#storage-persist-button'); + const checkbox = document.querySelector('#storage-persist-button-checkbox'); + + info.classList.remove('storage-hidden'); + button.classList.remove('storage-hidden'); + + let persisted = await navigator.storage.persisted(); + if (persisted) { + checkbox.checked = true; + } + + button.addEventListener('click', async () => { + if (persisted) { + return; + } + if (await navigator.storage.persist()) { + persisted = true; + checkbox.checked = true; + } + }, false); +} + /* * Information diff --git a/ext/bg/settings.html b/ext/bg/settings.html index e4710283..19dee8b3 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -395,12 +395,20 @@ </div> </div> - <div id="storage-info" class="storage-hidden"> + <div id="storage-info"> <div> <img src="/mixed/img/spinner.gif" class="pull-right" id="storage-spinner" /> <h3>Storage</h3> </div> + <div id="storage-persist-info" class="storage-hidden"> + <p class="help-block"> + Web browsers may sometimes clear stored data if the device is running low on storage space. + This can result in the stored dictionary data being deleted unexpectedly, causing Yomichan to stop working for no apparent reason. + In order to prevent this, persistent storage must be enable by clicking the "Persistent Storage" button below. + </p> + </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>. @@ -425,7 +433,8 @@ </div></div> <div> - <button class="btn btn-default" id="storage-refresh">Refresh</button> + <button class="btn btn-default" id="storage-refresh"><span class="btn-inner-middle">Refresh</span></button> + <button class="btn btn-default storage-hidden ignore-form-changes" id="storage-persist-button"><span class="storage-persist-button-inner"><input type="checkbox" class="btn-inner-middle" id="storage-persist-button-checkbox" readonly /><span class="btn-inner-middle">Persistent Storage</span></span></button> </div> </div> |