Simplify how option visibility is changed

3 files changed, 15 insertions, 28 deletions

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index b3d5b884..1036622d 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -17,9 +17,16 @@
  */
 
 
-#anki-spinner, #anki-general, #anki-error,
+#anki-spinner, #anki-error,
 #dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
-#debug, .options-advanced, .storage-hidden, #storage-spinner {
+.storage-hidden, #storage-spinner {
+    display: none;
+}
+
+html:root:not([data-options-anki-enable=true]) #anki-general,
+html:root:not([data-options-general-debug-info=true]) .debug,
+html:root:not([data-options-general-show-advanced=true]) .options-advanced,
+html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group {
     display: none;
 }
 
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 05a0604a..f2250911 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -171,36 +171,16 @@ function formSetupEventListeners() {
 }
 
 function formUpdateVisibility(options) {
-    const general = $('#anki-general');
-    if (options.anki.enable) {
-        general.show();
-    } else {
-        general.hide();
-    }
-
-    const advanced = $('.options-advanced');
-    if (options.general.showAdvanced) {
-        advanced.show();
-    } else {
-        advanced.hide();
-    }
+    document.documentElement.dataset.optionsAnkiEnable = `${!!options.anki.enable}`;
+    document.documentElement.dataset.optionsGeneralDebugInfo = `${!!options.general.debugInfo}`;
+    document.documentElement.dataset.optionsGeneralShowAdvanced = `${!!options.general.showAdvanced}`;
+    document.documentElement.dataset.optionsGeneralResultOutputMode = `${options.general.resultOutputMode}`;
 
-    const mainGroup = $('#dict-main-group');
-    if (options.general.resultOutputMode === 'merge') {
-        mainGroup.show();
-    } else {
-        mainGroup.hide();
-    }
-
-    const debug = $('#debug');
     if (options.general.debugInfo) {
         const temp = utilIsolate(options);
         temp.anki.fieldTemplates = '...';
         const text = JSON.stringify(temp, null, 4);
-        debug.html(handlebarsEscape(text));
-        debug.show();
-    } else {
-        debug.hide();
+        $('#debug').text(text);
     }
 }
 
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index a3b75576..b281501d 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -673,7 +673,7 @@
                 </p>
             </div>
 
-            <pre id="debug"></pre>
+            <pre id="debug" class="debug"></pre>
 
             <div class="pull-right bottom-links">
                 <small><span id="extension-info"></span> &bull; <a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small>