Show warning messages if persistant storage fails

Only Firefox seems to support persistent storage properly.

3 files changed, 16 insertions, 6 deletions

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index f204681b..b3d5b884 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -141,10 +141,10 @@
 .btn-inner-middle {
     vertical-align: middle;
 }
-.storage-persist-button-inner {
+.storage-button-inner {
     pointer-events: none;
 }
-input[type=checkbox]#storage-persist-button-checkbox {
+input[type=checkbox].storage-button-checkbox {
     margin: 0 0.375em 0 0;
     padding: 0;
 }
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 1eed766c..2c77a0ed 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -912,9 +912,7 @@ async function storagePersistInitialize() {
     button.classList.remove('storage-hidden');
 
     let persisted = await isStoragePeristent();
-    if (persisted) {
-        checkbox.checked = true;
-    }
+    checkbox.checked = persisted;
 
     button.addEventListener('click', async () => {
         if (persisted) {
@@ -931,6 +929,8 @@ async function storagePersistInitialize() {
             persisted = true;
             checkbox.checked = true;
             storageShowInfo();
+        } else {
+            $('.storage-persist-fail-warning').removeClass('storage-hidden');
         }
     }, false);
 }
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 0eb8277d..41b94583 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -489,8 +489,18 @@
 
                 <div>
                     <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>
+                    <button class="btn btn-default storage-hidden ignore-form-changes" id="storage-persist-button"><span class="storage-button-inner"><input type="checkbox" class="btn-inner-middle storage-button-checkbox" id="storage-persist-button-checkbox" readonly /><span class="btn-inner-middle">Persistent Storage</span></span></button>
                 </div>
+
+                <p></p>
+
+                <div data-show-for-browser="firefox-mobile"><div class="alert alert-warning storage-persist-fail-warning storage-hidden">
+                    <p>It may not be possible to enable Persistent Storage on Firefox for Android.</p>
+                </div></div>
+
+                <div data-show-for-browser="chrome"><div class="alert alert-warning storage-persist-fail-warning storage-hidden">
+                    <p>It may not be possible to enable Persistent Storage on Chrome-based browsers.</p>
+                </div></div>
             </div>
 
             <div>