Add support for persistent storage

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;
 }

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

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>