2 files changed, 42 insertions, 8 deletions
diff --git a/ext/bg/js/settings/generic-setting-controller.js b/ext/bg/js/settings/generic-setting-controller.js
index 04cad67d..b669cab9 100644
--- a/ext/bg/js/settings/generic-setting-controller.js
+++ b/ext/bg/js/settings/generic-setting-controller.js
@@ -36,7 +36,8 @@ class GenericSettingController {
             ['splitTags', this._splitTags.bind(this)],
             ['joinTags', this._joinTags.bind(this)],
             ['toNumber', this._toNumber.bind(this)],
-            ['toString', this._toString.bind(this)]
+            ['toString', this._toString.bind(this)],
+            ['conditionalConvert', this._conditionalConvert.bind(this)]
         ]);
     }
 
@@ -208,4 +209,19 @@ class GenericSettingController {
     _toString(value) {
         return `${value}`;
     }
+
+    _conditionalConvert(value, data) {
+        const {cases} = data;
+        if (Array.isArray(cases)) {
+            for (const {op, value: value2, default: isDefault, result} of cases) {
+                if (isDefault === true) {
+                    value = result;
+                } else if (this._evaluateSimpleOperation(op, value, value2)) {
+                    value = result;
+                    break;
+                }
+            }
+        }
+        return value;
+    }
 }
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index be6e01e1..07bcb6ca 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -611,16 +611,34 @@
                 </div>
             </div>
         </div>
-        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+        <div class="settings-item"><div class="settings-item-inner">
             <div class="settings-item-left">
-                <div class="settings-item-label">Glossary layout</div>
-                <div class="settings-item-description">Configure how term glossaries are displayed.</div>
+                <div class="settings-item-label">Compact glossaries</div>
+                <div class="settings-item-description">Display term glossaries using a more compact layout.</div>
             </div>
             <div class="settings-item-right">
-                <select data-setting="general.glossaryLayoutMode">
-                    <option value="default">Default</option>
-                    <option value="compact">Compact</option>
-                </select>
+                <label class="toggle"><input type="checkbox" data-setting="general.glossaryLayoutMode"
+                    data-transform='[
+                        {
+                            "step": "pre",
+                            "type": "conditionalConvert",
+                            "cases": [
+                                {"op": "===", "value": false, "result": "default"},
+                                {"op": "===", "value": true, "result": "compact"},
+                                {"default": true, "result": "default"}
+                            ]
+                        },
+                        {
+                            "step": "post",
+                            "type": "conditionalConvert",
+                            "cases": [
+                                {"op": "===", "value": "default", "result": false},
+                                {"op": "===", "value": "compact", "result": true},
+                                {"default": true, "result": false}
+                            ]
+                        }
+                    ]'
+                ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
         <div class="settings-item"><div class="settings-item-inner">