From b2cd96982e4df08419dbcc8fa9edae30f5629029 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 4 May 2025 21:00:15 +0200
Subject: [PATCH] Further logging fixes

---
 src/csui/GlobalFrame.vue                   |  7 ---
 src/csui/PlayerOverlay.vue                 |  7 +--
 src/csui/Popup.vue                         |  5 +--
 src/csui/src/PlayerUiPanels/DebugPanel.vue | 16 ++++---
 src/ext/lib/logging/ComponentLogger.ts     |  7 ++-
 src/ext/lib/logging/LogAggregator.ts       | 52 ++++++++++++++--------
 src/ext/lib/video-data/PlayerData.ts       |  2 +-
 src/install/first-time/App.vue             |  5 +--
 src/install/updated/App.vue                |  6 +--
 src/options/App.vue                        | 10 +----
 10 files changed, 54 insertions(+), 63 deletions(-)

diff --git a/src/csui/GlobalFrame.vue b/src/csui/GlobalFrame.vue
index a7193f2..92849ba 100644
--- a/src/csui/GlobalFrame.vue
+++ b/src/csui/GlobalFrame.vue
@@ -44,13 +44,6 @@ export default {
   },
 
   async created() {
-    this.logger = new Logger();
-
-    // this prolly needs to be taken out
-    await this.logger.init({
-      allowLogging: true,
-    });
-
     /**
      * Setup the "companion" onMouseMove handler to the one in the content script.
      * We can handle events with the same function we use to handle events from
diff --git a/src/csui/PlayerOverlay.vue b/src/csui/PlayerOverlay.vue
index e418e28..2c3ac9b 100644
--- a/src/csui/PlayerOverlay.vue
+++ b/src/csui/PlayerOverlay.vue
@@ -213,6 +213,8 @@ import CommsMixin from '@csui/src/utils/CommsMixin';
 import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue';
 import TriggerZoneEditor from '@csui/src/components/TriggerZoneEditor.vue';
 import ZoomControl from '@csui/src/popup/player-menu/ZoomControl.vue';
+import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
 
 export default {
   components: {
@@ -329,11 +331,6 @@ export default {
     this.logAggregator = new LogAggregator('player-overlay');
     this.logger = new ComponentLogger(this.logAggregator, 'PlayerOverlay.vue');
 
-    // this prolly needs to be taken out
-    await this.logger.init({
-        allowLogging: true,
-    });
-
     this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
     this.settings.listenAfterChange(() => this.updateTriggerZones());
 
diff --git a/src/csui/Popup.vue b/src/csui/Popup.vue
index 28ad3e9..909aabe 100644
--- a/src/csui/Popup.vue
+++ b/src/csui/Popup.vue
@@ -176,11 +176,8 @@ export default {
     try {
       this.logAggregator = new LogAggregator('🔵ext-popup🔵');
       this.logger = new ComponentLogger(this.logAggregator, 'Popup');
-      await this.logger.init({
-          allowLogging: true,
-      });
 
-      this.settings = new Settings({afterSettingsSaved: () => this.updateConfig(), logger: this.logger});
+      this.settings = new Settings({afterSettingsSaved: () => this.updateConfig(), logAggregator: this.logAggregator});
       await this.settings.init();
       this.settingsInitialized = true;
 
diff --git a/src/csui/src/PlayerUiPanels/DebugPanel.vue b/src/csui/src/PlayerUiPanels/DebugPanel.vue
index 37d0de7..079704c 100644
--- a/src/csui/src/PlayerUiPanels/DebugPanel.vue
+++ b/src/csui/src/PlayerUiPanels/DebugPanel.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { LogAggregator, BLANK_LOGGER_CONFIG } from '@src/ext/lib/logging/LogAggregator';
 import JsonEditor from '@csui/src/components/JsonEditor';
 
 export default {
@@ -79,21 +79,23 @@ export default {
       ...this.loggerPanelRotation[Math.floor(Math.random() * this.loggerPanelRotation.length)],
       pasteConfMode: false,
     };
-    this.loadDefaultConfig();
+    this.getLoggerSettings();
   },
   methods: {
     loadDefaultConfig() {
-      this.lastSettings = baseLoggingOptions;
+      this.lastSettings = JSON.parse(JSON.stringify(BLANK_LOGGER_CONFIG));
     },
     async getLoggerSettings() {
-      this.lastSettings = await LogAggregator.getConfig() || baseLoggingOptions;
+      this.lastSettings = await LogAggregator.getConfig() || BLANK_LOGGER_CONFIG;
     },
-    saveLoggerSettings() {
-      LogAggregator.saveConfig({...this.lastSettings});
+    async saveLoggerSettings() {
+      console.log('Saving logger settings', this.lastSettings);
+      await LogAggregator.saveConfig({...this.lastSettings});
+      console.log('[ok] logger settings saved');
     },
     async startLogging(){
       this.logStringified = undefined;
-      await LogAggregator.saveConfig({...this.lastSettings, allowLogging: true});
+      await LogAggregator.saveConfig({...this.lastSettings});
       window.location.reload();
     },
   }
diff --git a/src/ext/lib/logging/ComponentLogger.ts b/src/ext/lib/logging/ComponentLogger.ts
index 762bb1a..6056e2e 100644
--- a/src/ext/lib/logging/ComponentLogger.ts
+++ b/src/ext/lib/logging/ComponentLogger.ts
@@ -27,7 +27,7 @@ export class ComponentLogger {
   private handleLog(logLevel: LogLevel, sourceFunction: string | LogSourceOptions, ...message: any) {
     let functionSource = typeof sourceFunction === 'string' ? sourceFunction : sourceFunction?.src;
 
-    let consoleMessageString = `[${this.component}${functionSource ? `::${functionSource}` : ''}] `;
+    let consoleMessageString = `[${this.component}${functionSource ? `::${functionSource}` : ''}]`;
     const consoleMessageData = []
 
     for (const m of message) {
@@ -35,10 +35,13 @@ export class ComponentLogger {
         consoleMessageString = `${consoleMessageString} ${m}`;
       } else if (typeof m === 'number') {
         consoleMessageString = `${consoleMessageString} %f`;
-      } else if (m instanceof HTMLElement) {
+        consoleMessageData.unshift(m);
+      } else if (typeof HTMLElement !== 'undefined' && m instanceof HTMLElement) { // HTMLElement does not exist in background script, but this class may
         consoleMessageString = `${consoleMessageString} %o`;
+        consoleMessageData.unshift(m);
       } else {
         consoleMessageString = `${consoleMessageString} %O`;
+        consoleMessageData.unshift(m);
       }
     }
 
diff --git a/src/ext/lib/logging/LogAggregator.ts b/src/ext/lib/logging/LogAggregator.ts
index 4f0505a..f9c0811 100644
--- a/src/ext/lib/logging/LogAggregator.ts
+++ b/src/ext/lib/logging/LogAggregator.ts
@@ -4,11 +4,6 @@ export const BLANK_LOGGER_CONFIG: LogConfig = {
   logToConsole: false,
   logToFile: false,
   component: {
-    aard: { enabled: false },
-    resizer: { enabled: false },
-    comms: { enabled: false },
-    settings: { enabled: false },
-    eventBus: { enabled: false },
   },
   origins: {
     videoRescan: { disabled: true},
@@ -36,6 +31,7 @@ export interface LogConfig {
   }
 }
 
+const STORAGE_LOG_SETTINGS_KEY = 'uw-log-config';
 
 export class LogAggregator {
   private segment: string;
@@ -46,29 +42,34 @@ export class LogAggregator {
   history: any[];
 
   static async getConfig() {
-    let ret = await chrome.storage.local.get('uw-log-config');
+    let ret = await chrome.storage.local.get(STORAGE_LOG_SETTINGS_KEY);
 
     if (process.env.CHANNEL === 'dev') {
       try {
-        console.info("[Logger::getSaved] Got settings:", JSON.parse(ret.uwLogger));
+        console.info("[LogAggregator::getSaved] Got settings:", JSON.parse(ret[STORAGE_LOG_SETTINGS_KEY]));
       } catch (e) {
-        console.info("[Logger::getSaved] No settings.")
+        console.info("[LogAggregator::getSaved] No settings.", ret)
       }
     }
 
     try {
-      return JSON.parse(ret['uw-log-config']);
+      return JSON.parse(ret[STORAGE_LOG_SETTINGS_KEY]);
     } catch (e) {
       return JSON.parse(JSON.stringify(BLANK_LOGGER_CONFIG));
     }
   }
 
-  static saveConfig(conf: LogConfig) {
-    if (process.env.CHANNEL === 'dev') {
-      console.info('Saving logger conf:', conf)
-    }
+  static async saveConfig(conf: LogConfig) {
+    try {
+      const confCp = JSON.parse(JSON.stringify(conf));
+      if (process.env.CHANNEL === 'dev') {
+        console.info('Saving logger conf:', confCp)
+      }
 
-    chrome.storage.local.set( {'uw-log-config': JSON.stringify(conf)});
+      await chrome.storage.local.set({[STORAGE_LOG_SETTINGS_KEY]: JSON.stringify(confCp)} );
+    } catch (e) {
+      console.warn('[LogAggregator::saveConfig] Error while trying to save logger config:', e);
+    }
   }
 
   static syncConfig(callback: (x) => void) {
@@ -89,26 +90,35 @@ export class LogAggregator {
     chrome.storage.onChanged.addListener((changes, area) => {
       this.storageChangeListener(changes, area)
     });
+
+    this.init();
   }
 
   private canLog(component: string, sourceOptions?: LogSourceOptions): boolean {
+    // component is not in config, so we add a blank entry
+    if (this.config && !this.config.component[component]) {
+      this.config.component[component] = {enabled: false};
+      LogAggregator.saveConfig(this.config);
+      return false;
+    }
     if (this.config?.component?.[component]?.enabled) {
       if (sourceOptions?.origin && this.config?.origins?.[sourceOptions.origin]?.disabled) {
         return false;
       }
       return true;
     }
+
     return false;
   }
 
   private storageChangeListener(changes, area) {
-    if (!changes.uwLogger) {
-      console.info('We dont have any logging settings, not processing frther');
+    if (!changes[STORAGE_LOG_SETTINGS_KEY]) {
+      console.info('We dont have any logging settings, not processing frther', changes);
       return;
     }
 
     try {
-      this.config = JSON.parse(changes['uw-log-config'].newValue);
+      this.config = JSON.parse(changes[STORAGE_LOG_SETTINGS_KEY].newValue);
     } catch (e) {
       console.warn('[uwLogger] Error while trying to parse new conf for logger:', e, '\nWe received the following changes:', changes, 'for area:', area);
     }
@@ -188,7 +198,11 @@ export class LogAggregator {
 
   }
 
-  async init(config: LogConfig) {
+  async init(config?: LogConfig) {
+    if (!config) {
+      config = await LogAggregator.getConfig();
+    }
+
     this.config = config;
     this.startTime = performance.now();
 
@@ -211,7 +225,7 @@ export class LogAggregator {
 
     }
 
-    if (this.config.logToConsole) {
+    if (this.config.logToConsole){
       console[logLevel](`[${this.segment}]>>${message}`, ...data, {stack: this.parseStack()});
     }
   }
diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index 1bb6fab..b5fc810 100644
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/src/ext/lib/video-data/PlayerData.ts
@@ -190,7 +190,7 @@ class PlayerData {
   constructor(videoData) {
     try {
       // set all our helper objects
-      this.logger = new ComponentLogger(videoData.logAggregator, 'PlayerData', {styles: Debug.getLoggingStyles()});
+      this.logger = new ComponentLogger(videoData.logAggregator, 'PlayerData', {styles: {}});
       this.videoData = videoData;
       this.videoElement = videoData.video;
       this.pageInfo = videoData.pageInfo;
diff --git a/src/install/first-time/App.vue b/src/install/first-time/App.vue
index 991f645..4538f07 100644
--- a/src/install/first-time/App.vue
+++ b/src/install/first-time/App.vue
@@ -85,11 +85,8 @@ export default {
   async created() {
     this.logAggregator = new LogAggregator('');
     this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
-    await this.logger.init({
-        allowLogging: true,
-    });
 
-    this.settings = new Settings({updateCallback: () => this.updateConfig(), logger: this.logger});
+    this.settings = new Settings({updateCallback: () => this.updateConfig(), logAggregator: this.logAggregator });
     await this.settings.init();
     this.settingsInitialized = true;
   },
diff --git a/src/install/updated/App.vue b/src/install/updated/App.vue
index f510fe7..3429943 100644
--- a/src/install/updated/App.vue
+++ b/src/install/updated/App.vue
@@ -87,11 +87,7 @@ export default {
     this.logAggregator = new LogAggregator('');
     this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
 
-    await this.logger.init({
-        allowLogging: true,
-    });
-
-    this.settings = new Settings({updateCallback: () => this.updateConfig(), logger: this.logger});
+    this.settings = new Settings({updateCallback: () => this.updateConfig(), logAggregator: this.logAggregator});
     await this.settings.init();
     this.settingsInitialized = true;
   },
diff --git a/src/options/App.vue b/src/options/App.vue
index 80cb9b9..c50ab54 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -111,10 +111,6 @@
 <script>
 import Donate from '../common/misc/Donate.vue';
 import SuperAdvancedSettings from './SuperAdvancedSettings.vue';
-import Debug from '../ext/conf/Debug';
-import BrowserDetect from '../ext/conf/BrowserDetect';
-import ExtensionConf from '../ext/conf/ExtensionConf';
-import ObjectCopy from '../ext/lib/ObjectCopy';
 import Settings from '../ext/lib/Settings';
 import GeneralSettings from './GeneralSettings';
 import ControlsSettings from './controls-settings/ControlsSettings';
@@ -122,7 +118,6 @@ import AddEditActionPopup from './controls-settings/AddEditActionPopup';
 import ConfirmPopup from './common/ConfirmationPopup';
 import About from './about'
 import AutodetectionSettings  from './AutodetectionSettings';
-// import SuperAdvancedSettings from './'
 import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
 import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
 
@@ -149,11 +144,8 @@ export default {
   async created () {
     this.logAggregator = new LogAggregator('');
     this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
-    await this.logger.init({
-        allowLogging: true,
-    });
 
-    this.settings = new Settings({updateCallback: this.updateSettings, logger: this.logger});
+    this.settings = new Settings({updateCallback: this.updateSettings, logAggregator: this.logAggregator});
     await this.settings.init();
 
     this.settingsInitialized = true;