Hide not-initialized options page

piroor · Jan 10, 2020 · 6a4874d · 6a4874d
1 parent 866e096
commit 6a4874d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/webextensions/options/init.js b/webextensions/options/init.js
@@ -33,7 +33,7 @@ function onConfigChanged(key) {
 }
 
 configs.$addObserver(onConfigChanged);
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener('DOMContentLoaded', async () => {
   // remove accesskey mark
   for (const label of document.querySelectorAll('#menu-items label, #bookmarksPermissionCheck')) {
     label.lastChild.nodeValue = label.lastChild.nodeValue.replace(/\(&[a-z]\)|&([a-z])/i, '$1');
@@ -43,16 +43,18 @@ window.addEventListener('DOMContentLoaded', () => {
     document.getElementById('shortcuts').appendChild(aUI);
   });
 
-  configs.$loaded.then(() => {
-    Permissions.bindToCheckbox(
-      Permissions.BOOKMARKS,
-      document.querySelector('#bookmarksPermissionGranted')
-    );
+  await configs.$loaded;
 
-    options.buildUIForAllConfigs(document.querySelector('#debug-configs'));
-    onConfigChanged('debug');
-    initCollapsibleSections();
-  });
+  Permissions.bindToCheckbox(
+    Permissions.BOOKMARKS,
+    document.querySelector('#bookmarksPermissionGranted')
+  );
+
+  options.buildUIForAllConfigs(document.querySelector('#debug-configs'));
+  onConfigChanged('debug');
+  initCollapsibleSections();
+
+  document.documentElement.classList.add('initialized');
 }, { once: true });
 
 

diff --git a/webextensions/options/options.css b/webextensions/options/options.css
@@ -4,6 +4,13 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
+:root > * {
+  transition: opacity 0.25s ease-out;
+}
+:root:not(.initialized) > * {
+  opacity: 0;
+}
+
 body {
   background: var(--bg-color);
   color: var(--text-color);