display an informative message in settings page if IndexedDB cannot be accessed

1 files changed, 71 insertions, 24 deletions

diff --git a/html/settings.html b/html/settings.html
index 7abb870..e33f112 100644
--- a/html/settings.html
+++ b/html/settings.html
@@ -35,6 +35,15 @@
 #LOADCSS html/base.css
 #LOADCSS html/grid.css
     <style>
+      #loader, #indexeddb_error {
+	  margin: auto;
+	  padding: 1em;
+	  max-width: 800px;
+      }
+      #indexeddb_error p {
+	  margin-bottom: 1em;
+      }
+
       /* Style top menu items. */
       #tab_heads>* {
 	  background-color: #70AF70;
@@ -114,34 +123,72 @@
 #INCLUDE html/item_preview.html
 #INCLUDE html/text_entry_list.html
 #INCLUDE html/payload_create.html
-    <ul id="tab_heads">
-      <li id="blocking_head"> Blocking </li>
-      <li id="mappings_head"> Mappings </li>
-      <li id="resources_head"> Resources </li>
-      <li id="new_payload_head" class="active_head"> New payload </li>
-      <li id="repos_head"> Repositories </li>
-    </ul>
-    <div id="top_menu_line" class="top_line"></div>
-    <div id="blocking_tab" class="tab">
-      <div id="blocking_editable_container" class="grid_2">
-	<div id="blocking_list_container">
-	  <h3>Block scripts on</h3>
-	</div>
-	<div id="allowing_list_container">
-	  <h3>Allow scripts on</h3>
+    <div id="loader">
+      Loading settings page...
+    </div>
+    <div id="indexeddb_error" class="hide">
+      <p>
+	Cannot display settings page.
+      </p>
+      <p>
+	Haketilo could not access IndexedDB. IndexedDB is an in-browser
+	database in which Haketilo stores all its configuration. Without it, the
+	settings page is non-operational.
+      <p>
+#IF MOZILLA
+	<div id="indexeddb_private_mode_explanation" class="hide">
+	  <p>
+	    This issue is the result of using Haketilo in Private Browsing mode.
+	    For privacy reasons your browser blocks access to IndexedDB in
+	    private windows and this unfortunately also affects Haketilo's
+	    settings page.
+	  </p>
+	  <p>
+	    You can sacrifice this single privacy feature and enable IndexedDB
+	    access in private windows by navigating to "about:config" in the URL
+	    bar, agreeing to accept the risk and setting the
+	    "dom.indexedDB.privateBrowsing.enabled" preference to "true". Those
+	    pages that have their scripts blocked will still be unable to access
+	    IndexedDB.
+	  </p>
+	  <p>
+	    Alternatively, you can open Haketilo's settings in a separate,
+	    non-private window. The configuration you make there will take
+	    effect on pages opened in Private Browsing mode as well.
+	  </p>
 	</div>
-	<div id="default_policy_dialog" class="grid_col_both text_center">
+#ENDIF
+    </div>
+    <div id="main_view" class="hide">
+      <ul id="tab_heads">
+	<li id="blocking_head"> Blocking </li>
+	<li id="mappings_head"> Mappings </li>
+	<li id="resources_head"> Resources </li>
+	<li id="new_payload_head" class="active_head"> New payload </li>
+	<li id="repos_head"> Repositories </li>
+      </ul>
+      <div id="top_menu_line" class="top_line"></div>
+      <div id="blocking_tab" class="tab">
+	<div id="blocking_editable_container" class="grid_2">
+	  <div id="blocking_list_container">
+	    <h3>Block scripts on</h3>
+	  </div>
+	  <div id="allowing_list_container">
+	    <h3>Allow scripts on</h3>
+	  </div>
+	  <div id="default_policy_dialog" class="grid_col_both text_center">
 #INCLUDE html/default_blocking_policy.html
+	  </div>
 	</div>
+	<div id="blocking_dialog_container" class="hide"></div>
+      </div>
+      <div id="mappings_tab" class="tab"></div>
+      <div id="resources_tab" class="tab"></div>
+      <div id="new_payload_tab" class="tab active_tab"></div>
+      <div id="repos_tab" class="tab">
+	<div id="repos_list_container"></div>
+	<div id="repos_dialog_container" class="hide"></div>
       </div>
-      <div id="blocking_dialog_container" class="hide"></div>
-    </div>
-    <div id="mappings_tab" class="tab"></div>
-    <div id="resources_tab" class="tab"></div>
-    <div id="new_payload_tab" class="tab active_tab"></div>
-    <div id="repos_tab" class="tab">
-      <div id="repos_list_container"></div>
-      <div id="repos_dialog_container" class="hide"></div>
     </div>
 #LOADJS html/settings.js
   </body>