Fix breakage when dom.storage.enabled is set to false (thanks DJ-Leith for report).

src/common/themes.js

@@ -51,17 +51,41 @@
     }
     addEventListener("load", onload, true);
   }
+
+
+  let root = document.documentElement;
+  root.classList.add("__NoScript_Theme__");
+
+  let update = toTheme => {
+    return root.dataset.theme = toTheme;
+  }
+
   var Themes = {
    setup(theme = null) {
       if (theme) {
+        if (window.localStorage) {
           localStorage.setItem("theme", theme);
+        }
+        if (browser && browser.storage) {
+          browser.storage.local.set({theme});
+        }
       } else {
+        if (localStorage) {
           theme = localStorage.getItem("theme") || "auto";
         }
-      let root = document.documentElement;
+        if (!theme && browser && browser.storage) {
-      root.classList.add("__NoScript_Theme__");
+          if (document.readyState === "loading") {
-      return root.dataset.theme = theme;
+            document.documentElement.style.visibility = "hidden";
+          }
+          return browser.storage.local.get(["theme"]).then(r => {
+              update(r.theme);
+              document.documentElement.style.visibility = "";
+              return r.theme;
+          });
         }
       }
-  Themes.setup();
+      return update(theme);
+    }
+  }
+  Promise.resolve(Themes.setup());
 }

src/nscl

@@ -1 +1 @@
-Subproject commit 8e753c290fcde4673a5ca2b4a2e5960f551c0e18
+Subproject commit b3fd54f17e394930cfd5801d0d5733290334f959

src/ui/options.css

@@ -54,17 +54,19 @@ body {
   font-size: 1em;
 }
 
-section form, section fieldset {
+section fieldset {
   margin: 1em 0;
   padding: .5em 1em;
 }
 
+section > form {
+  padding: 0 .5em;
+}
+
 fieldset:disabled {
   opacity: .5;
 }
 
-
-
 .sect-sites form {
   display: flex;
   align-items: baseline;

src/ui/options.html

@@ -28,7 +28,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div id="header">
 <div class="title">
 <h1>__MSG_OptionsLong__</h1>
-<span id="version"></span>
+<span id="version">&nbsp;</span>
 </div>
 
 <div class="buttons">
@@ -41,10 +41,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <a class="donate button" href="https://noscript.net/donate" title="__MSG_DonateLong__">__MSG_DonateShort__</a>
 </div>
 </div>
-<section id="sect-io">
-
-</section>
-
 <div id="main-tabs" class="flextabs">
 
 <h3 class="flextabs__tab"><button class="flextabs__toggle">__MSG_SectionGeneral__</button></h3>

src/ui/options.js

@@ -19,14 +19,16 @@
  */
 
 'use strict';
+
+document.querySelector("#version").textContent = _("Version",
+  browser.runtime.getManifest().version);
+
 (async () => {
 
   await UI.init();
 
   let policy = UI.policy;
 
-  let version = browser.runtime.getManifest().version;
-  document.querySelector("#version").textContent = _("Version", version);
   // simple general options
 
   let opt = UI.wireOption;

src/ui/ui.js

@@ -139,18 +139,20 @@ var UI = (() => {
         return;
       }
       if (typeof storage === "function") {
-        let value = storage(null);
+        (async() => {
+          let value = await storage(null);
           for (let i of inputs) {
             i.onchange = e => storage(i);
             i.checked = value === i.value;
           }
+        })();
       } else {
         let obj = UI[storage];
         let value = obj[name];
         for (let i of inputs) {
           if (i.value === value) i.checked = true;
           if (onchange) onchange(i);
-          i.onchange = async() => {
+          i.onchange = async () => {
             obj[name] = i.value;
             await UI.updateSettings({[storage]: obj});
             if (onchange) onchange(i);
@@ -167,7 +169,9 @@ var UI = (() => {
       }
       if (typeof storage === "function") {
         input.onchange = e => storage(input);
-        input.checked = storage(null);
+        (async () => {
+          input.checked = await storage(null);
+        })();
       } else {
         let obj = UI[storage];
         input.checked = obj[name];