'dev mode' is now saved under settings. 'debug' panel is only shown if dev mode is active

src/common/interfaces/SettingsInterface.ts

@@ -183,7 +183,8 @@ interface SettingsInterface {
         offsetX: number,                       // fed to translateX(offsetX + '%'). Valid range [-100,   0]
         offsetY: number                        // fed to translateY(offsetY + '%'). Valid range [-100, 100]
       },
-    }
+    },
+    devMode?: boolean,
   }
 
   restrictions?: RestrictionsSettings;

src/csui/src/PlayerUIWindow.vue

@@ -30,22 +30,26 @@
         <div
           v-for="tab of tabs"
           :key="tab.id"
-          class="tab"
-          :class="{
-            'active': tab.id === selectedTab,
-            'highlight-tab': tab.highlight,
-          }"
-          @click="selectTab(tab.id)"
         >
-          <div class="icon-container">
+          <div
-            <mdicon
+            v-if="!tab.hidden"
-              v-if="tab.icon"
+            class="tab"
-              :name="tab.icon"
+            :class="{
-              :size="32"
+              'active': tab.id === selectedTab,
-            />
+              'highlight-tab': tab.highlight,
-          </div>
+            }"
-          <div class="label">
+            @click="selectTab(tab.id)"
-            {{tab.label}}
+          >
+            <div class="icon-container">
+              <mdicon
+                v-if="tab.icon"
+                :name="tab.icon"
+                :size="32"
+              />
+            </div>
+            <div class="label">
+              {{tab.label}}
+            </div>
           </div>
         </div>
       </div>
@@ -171,7 +175,7 @@ export default {
         // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
         {id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
         {id: 'about', label: 'About', icon: 'information-outline'},
-        {id: 'debugging', label: 'Debugging', icon: 'bug-outline' },
+        {id: 'debugging', label: 'Debugging', icon: 'bug-outline', hidden: true},
       ],
       selectedTab: 'extensionSettings',
       BrowserDetect: BrowserDetect,
@@ -196,6 +200,8 @@ export default {
     }
   },
   created() {
+    this.settings.listenAfterChange(this.setDebugTabVisibility);
+
     if (this.defaultTab) {
       this.selectedTab = this.defaultTab;
     }
@@ -213,8 +219,10 @@ export default {
         },
       }
     )
+    this.setDebugTabVisibility();
   },
   destroyed() {
+    this.settings.removeListenerAfterChange(this.setDebugTabVisibility);
     this.eventBus.unsubscribeAll(this);
   },
   methods: {
@@ -230,6 +238,12 @@ export default {
     setPreventClose(bool) {
       this.preventClose = bool;
       this.$emit('preventClose', bool);
+    },
+    setDebugTabVisibility() {
+      const debugTab = this.tabs.find( x => x.id === 'debugging');
+      if (debugTab) {
+        debugTab.hidden = !this.settings.active.ui.devMode;
+      }
     }
   }
 }

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -90,11 +90,15 @@
 
         <div v-if="enableSettingsEditor" class="field">
           <div class="label">Show developer options</div>
-          <input v-model="showSettingsEditor" type="checkbox">
+          <input
+            type="checkbox"
+            v-model="settings.active.ui.devMode"
+            @change="settings.saveWithoutReload"
+          >
         </div>
       </div>
     </div>
-    <div v-if="enableSettingsEditor && showSettingsEditor" class="h-full grow">
+    <div v-if="enableSettingsEditor && settings.active.ui.devMode" class="h-full grow">
       <h2>Settings editor</h2>
       <div class="flex flex-row w-full">
         <div class="flex flex-row">
@@ -144,7 +148,6 @@ export default {
     return {
       tab: 'siteSettings',
       importSettingDialogConfig: {visible: false},
-      showSettingsEditor: false,
       allowSettingsEditing: false,
       editorSaveFinished: false,
       settingsJson: {},

src/ext/lib/Settings.ts

@@ -37,8 +37,8 @@ class Settings {
   onSettingsChanged: any;
   afterSettingsSaved: any;
 
-  onChangedCallbacks: any[] = [];
+  onChangedCallbacks: (() => void)[] = [];
-  afterSettingsChangedCallbacks: any[] = [];
+  afterSettingsChangedCallbacks: (() => void)[] = [];
   //#endregion
 
   constructor(options) {
@@ -398,9 +398,15 @@ class Settings {
   listenOnChange(fn: () => void): void {
     this.onChangedCallbacks.push(fn);
   }
+  removeOnChangeListener(fn: () => void): void {
+    this.onChangedCallbacks = this.afterSettingsChangedCallbacks.filter(x => x !== fn);
+  }
   listenAfterChange(fn: () => void): void {
     this.afterSettingsChangedCallbacks.push(fn);
   }
+  removeAfterChangeListener(fn: () => void): void {
+    this.afterSettingsChangedCallbacks = this.afterSettingsChangedCallbacks.filter(x => x !== fn);
+  }
 }
 
 export default Settings;