Preload safe debug shim (#29)

In https://github.com/ferdium/ferdium-app/pull/23 we removed usages of
the debug package due to an electron bug.

This patch aims to restore some debug functionality by introducing a
shim. The shim detect whether if it is being introduced in a preload
script where the electron but would be triggered, and falls back to a
simple replacement for debug. However, in the main and renderer
processes, where a preload script is not being used, we still get full
debug functionality.

In this way, a module can be used both in a preload script and outside
of it, while still preserving debug functionality whenever possible.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

8 files changed, 49 insertions, 57 deletions

diff --git a/src/webview/badge.ts b/src/webview/badge.ts
index 0ff1ecaf6..898f8cdcf 100644
--- a/src/webview/badge.ts
+++ b/src/webview/badge.ts
@@ -1,7 +1,6 @@
 import { ipcRenderer } from 'electron';
 
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:Plugin:BadgeHandler');
+const debug = require('../preload-safe-debug')('Ferdium:Plugin:BadgeHandler');
 
 export class BadgeHandler {
   // TODO: Need to extract this into a utility class and reuse outside of the recipes
@@ -27,7 +26,7 @@ export class BadgeHandler {
       indirect: this.safeParseInt(indirect),
     };
 
-    console.log('Sending badge count to host: %j', count);
+    debug('Sending badge count to host: %j', count);
     ipcRenderer.sendToHost('message-counts', count);
   }
 }
diff --git a/src/webview/darkmode.ts b/src/webview/darkmode.ts
index 99ee68757..34f987b51 100644
--- a/src/webview/darkmode.ts
+++ b/src/webview/darkmode.ts
@@ -1,8 +1,7 @@
 import { join } from 'path';
 import { pathExistsSync, readFileSync } from 'fs-extra';
 
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:DarkMode');
+const debug = require('../preload-safe-debug')('Ferdium:DarkMode');
 
 const chars = [...'abcdefghijklmnopqrstuvwxyz'];
 
@@ -27,7 +26,7 @@ export function injectDarkModeStyle(recipePath: string) {
 
     document.querySelector('head')?.appendChild(styles);
 
-    console.log('Injected Dark Mode style with ID', ID);
+    debug('Injected Dark Mode style with ID', ID);
   }
 }
 
@@ -37,7 +36,7 @@ export function removeDarkModeStyle() {
   if (style) {
     style.remove();
 
-    console.log('Removed Dark Mode Style with ID', ID);
+    debug('Removed Dark Mode Style with ID', ID);
   }
 }
 
diff --git a/src/webview/dialogTitle.ts b/src/webview/dialogTitle.ts
index a5bcb4c41..12e007e26 100644
--- a/src/webview/dialogTitle.ts
+++ b/src/webview/dialogTitle.ts
@@ -1,7 +1,6 @@
 import { ipcRenderer } from 'electron';
 
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:Plugin:DialogTitleHandler');
+const debug = require('../preload-safe-debug')('Ferdium:Plugin:DialogTitleHandler');
 
 export class DialogTitleHandler {
   titleCache: { title: string };
@@ -26,7 +25,7 @@ export class DialogTitleHandler {
       return;
     }
 
-    console.log('Sending active dialog title to host %s', newTitle);
+    debug('Sending active dialog title to host %s', newTitle);
     ipcRenderer.sendToHost('active-dialog-title', newTitle);
 
     this.titleCache.title = newTitle;
diff --git a/src/webview/lib/RecipeWebview.ts b/src/webview/lib/RecipeWebview.ts
index cf70164ef..e7a39579b 100644
--- a/src/webview/lib/RecipeWebview.ts
+++ b/src/webview/lib/RecipeWebview.ts
@@ -2,8 +2,7 @@ import { ipcRenderer } from 'electron';
 import { BrowserWindow } from '@electron/remote';
 import { pathExistsSync, readFileSync, existsSync } from 'fs-extra';
 
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:Plugin:RecipeWebview');
+const debug = require('../../preload-safe-debug')('Ferdium:Plugin:RecipeWebview');
 
 class RecipeWebview {
   badgeHandler: any;
@@ -28,7 +27,7 @@ class RecipeWebview {
     ipcRenderer.on('poll', () => {
       this.loopFunc();
 
-      console.log('Poll event');
+      debug('Poll event');
 
       // This event is for checking if the service recipe is still actively
       // communicating with the client
@@ -110,7 +109,7 @@ class RecipeWebview {
 
         if (head) {
           head.append(styles);
-          console.log('Append styles', styles);
+          debug('Append styles', styles);
         }
       }
     });
@@ -122,13 +121,13 @@ class RecipeWebview {
         if (existsSync(file)) {
           return readFileSync(file, 'utf8');
         }
-        console.log('Script not found', file);
+        debug('Script not found', file);
         return null;
       }),
     ).then(scripts => {
       const scriptsFound = scripts.filter(script => script !== null);
       if (scriptsFound.length > 0) {
-        console.log('Inject scripts to main world', scriptsFound);
+        debug('Inject scripts to main world', scriptsFound);
         ipcRenderer.sendToHost('inject-js-unsafe', ...scriptsFound);
       }
     });
diff --git a/src/webview/notifications.ts b/src/webview/notifications.ts
index ff9c844d0..8b2831754 100644
--- a/src/webview/notifications.ts
+++ b/src/webview/notifications.ts
@@ -2,8 +2,7 @@ import { ipcRenderer } from 'electron';
 
 import { v1 as uuidV1 } from 'uuid';
 
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:Notifications');
+const debug = require('../preload-safe-debug')('Ferdium:Notifications');
 
 export class NotificationsHandler {
   onNotify = (data: { title: string; options: any; notificationId: string }) =>
@@ -11,7 +10,7 @@ export class NotificationsHandler {
 
   displayNotification(title: string, options: any) {
     return new Promise(resolve => {
-      console.log('New notification', title, options);
+      debug('New notification', title, options);
 
       const notificationId = uuidV1();
 
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 1f3017ccd..eff20c2d3 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -50,8 +50,7 @@ import {
 
 import { DEFAULT_APP_SETTINGS } from '../config';
 
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:Plugin');
+const debug = require('../preload-safe-debug')('Ferdium:Plugin');
 
 const badgeHandler = new BadgeHandler();
 
@@ -65,7 +64,7 @@ const notificationsHandler = new NotificationsHandler();
 const originalWindowOpen = window.open;
 
 window.open = (url, frameName, features) => {
-  console.log('window.open', url, frameName, features);
+  debug('window.open', url, frameName, features);
   if (!url) {
     // The service hasn't yet supplied a URL (as used in Skype).
     // Return a new dummy window object and wait for the service to change the properties
@@ -171,12 +170,12 @@ class RecipeController {
   async initialize() {
     for (const channel of Object.keys(this.ipcEvents)) {
       ipcRenderer.on(channel, (...args) => {
-        console.log('Received IPC event for channel', channel, 'with', ...args);
+        debug('Received IPC event for channel', channel, 'with', ...args);
         this[this.ipcEvents[channel]](...args);
       });
     }
 
-    console.log('Send "hello" to host');
+    debug('Send "hello" to host');
     setTimeout(() => ipcRenderer.sendToHost('hello'), 100);
 
     this.spellcheckingProvider = null;
@@ -199,9 +198,9 @@ class RecipeController {
   }
 
   loadRecipeModule(event, config, recipe) {
-    console.log('loadRecipeModule');
+    debug('loadRecipeModule');
     const modulePath = join(recipe.path, 'webview.js');
-    console.log('module path', modulePath);
+    debug('module path', modulePath);
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
     try {
@@ -214,7 +213,7 @@ class RecipeController {
       if (existsSync(modulePath)) {
         // eslint-disable-next-line import/no-dynamic-require
         require(modulePath)(this.recipe, { ...config, recipe });
-        console.log('Initialize Recipe', config, recipe);
+        debug('Initialize Recipe', config, recipe);
       }
 
       this.settings.service = Object.assign(config, { recipe });
@@ -266,18 +265,18 @@ class RecipeController {
   }
 
   update() {
-    console.log('enableSpellchecking', this.settings.app.enableSpellchecking);
-    console.log('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);
-    console.log(
+    debug('enableSpellchecking', this.settings.app.enableSpellchecking);
+    debug('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);
+    debug(
       'System spellcheckerLanguage',
       this.settings.app.spellcheckerLanguage,
     );
-    console.log(
+    debug(
       'Service spellcheckerLanguage',
       this.settings.service.spellcheckerLanguage,
     );
-    console.log('darkReaderSettigs', this.settings.service.darkReaderSettings);
-    console.log('searchEngine', this.settings.app.searchEngine);
+    debug('darkReaderSettigs', this.settings.service.darkReaderSettings);
+    debug('searchEngine', this.settings.app.searchEngine);
 
     if (this.userscript && this.userscript.internal_setSettings) {
       this.userscript.internal_setSettings(this.settings);
@@ -285,10 +284,10 @@ class RecipeController {
 
     if (this.settings.app.enableSpellchecking) {
       let { spellcheckerLanguage } = this;
-      console.log(`Setting spellchecker language to ${spellcheckerLanguage}`);
+      debug(`Setting spellchecker language to ${spellcheckerLanguage}`);
       if (spellcheckerLanguage.includes('automatic')) {
         this.automaticLanguageDetection();
-        console.log(
+        debug(
           'Found `automatic` locale, falling back to user locale until detected',
           this.settings.app.locale,
         );
@@ -296,14 +295,14 @@ class RecipeController {
       }
       switchDict(spellcheckerLanguage, this.settings.service.id);
     } else {
-      console.log('Disable spellchecker');
+      debug('Disable spellchecker');
     }
 
     if (!this.recipe) {
       this.hasUpdatedBeforeRecipeLoaded = true;
     }
 
-    console.log(
+    debug(
       'Darkmode enabled?',
       this.settings.service.isDarkModeEnabled,
       'Dark theme active?',
@@ -323,11 +322,11 @@ class RecipeController {
       this.settings.service.isDarkModeEnabled &&
       this.settings.app.isDarkThemeActive !== false
     ) {
-      console.log('Enable dark mode');
+      debug('Enable dark mode');
 
       // Check if recipe has a custom dark mode handler
       if (this.recipe && this.recipe.darkModeHandler) {
-        console.log('Using custom dark mode handler');
+        debug('Using custom dark mode handler');
 
         // Remove other dark mode styles if they were already loaded
         if (this.hasUpdatedBeforeRecipeLoaded) {
@@ -338,7 +337,7 @@ class RecipeController {
 
         this.recipe.darkModeHandler(true, handlerConfig);
       } else if (darkModeStyleExists(this.settings.service.recipe.path)) {
-        console.log('Injecting darkmode from recipe');
+        debug('Injecting darkmode from recipe');
         injectDarkModeStyle(this.settings.service.recipe.path);
 
         // Make sure universal dark mode is disabled
@@ -348,7 +347,7 @@ class RecipeController {
         this.settings.app.universalDarkMode &&
         !ignoreList.includes(window.location.host)
       ) {
-        console.log('Injecting Dark Reader');
+        debug('Injecting Dark Reader');
 
         // Use Dark Reader instead
         const { brightness, contrast, sepia } =
@@ -362,8 +361,8 @@ class RecipeController {
         this.universalDarkModeInjected = true;
       }
     } else {
-      console.log('Remove dark mode');
-      console.log('DarkMode disabled - removing remaining styles');
+      debug('Remove dark mode');
+      debug('DarkMode disabled - removing remaining styles');
 
       if (this.recipe && this.recipe.darkModeHandler) {
         // Remove other dark mode styles if they were already loaded
@@ -375,10 +374,10 @@ class RecipeController {
 
         this.recipe.darkModeHandler(false, handlerConfig);
       } else if (isDarkModeStyleInjected()) {
-        console.log('Removing injected darkmode from recipe');
+        debug('Removing injected darkmode from recipe');
         removeDarkModeStyle();
       } else {
-        console.log('Removing Dark Reader');
+        debug('Removing Dark Reader');
 
         disableDarkMode();
         this.universalDarkModeInjected = false;
@@ -406,7 +405,7 @@ class RecipeController {
   }
 
   serviceIdEcho(event) {
-    console.log('Received a service echo ping');
+    debug('Received a service echo ping');
     event.sender.send('service-id', this.settings.service.id);
   }
 
@@ -428,7 +427,7 @@ class RecipeController {
         // Force a minimum length to get better detection results
         if (value.length < 25) return;
 
-        console.log('Detecting language for', value);
+        debug('Detecting language for', value);
         const locale = await ipcRenderer.invoke('detect-language', {
           sample: value,
         });
@@ -438,7 +437,7 @@ class RecipeController {
 
         const spellcheckerLocale =
           getSpellcheckerLocaleByFuzzyIdentifier(locale);
-        console.log(
+        debug(
           'Language detected reliably, setting spellchecker language to',
           spellcheckerLocale,
         );
diff --git a/src/webview/sessionHandler.ts b/src/webview/sessionHandler.ts
index a2906113d..00eacdf50 100644
--- a/src/webview/sessionHandler.ts
+++ b/src/webview/sessionHandler.ts
@@ -1,5 +1,4 @@
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:Plugin:SessionHandler');
+const debug = require('../preload-safe-debug')('Ferdium:Plugin:SessionHandler');
 
 export class SessionHandler {
   async releaseServiceWorkers() {
@@ -8,10 +7,10 @@ export class SessionHandler {
         await window.navigator.serviceWorker.getRegistrations();
       for (const registration of registrations) {
         registration.unregister();
-        console.log('ServiceWorker unregistered');
+        debug('ServiceWorker unregistered');
       }
     } catch (error) {
-      console.log(error);
+      debug(error);
     }
   }
 }
diff --git a/src/webview/spellchecker.ts b/src/webview/spellchecker.ts
index 8cf16a7ba..8e452c791 100644
--- a/src/webview/spellchecker.ts
+++ b/src/webview/spellchecker.ts
@@ -2,8 +2,7 @@ import { ipcRenderer } from 'electron';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 import { isMac } from '../environment';
 
-// TODO: Go back to 'debug' from 'console.log' when https://github.com/electron/electron/issues/31689 is fixed
-// const debug = require('debug')('Ferdium:spellchecker');
+const debug = require('../preload-safe-debug')('Ferdium:spellchecker');
 
 export function getSpellcheckerLocaleByFuzzyIdentifier(identifier: string) {
   const locales = Object.keys(SPELLCHECKER_LOCALES).filter(
@@ -17,14 +16,14 @@ export function getSpellcheckerLocaleByFuzzyIdentifier(identifier: string) {
 
 export function switchDict(fuzzyLocale: string, serviceId: string) {
   if (isMac) {
-    console.log('Ignoring dictionary changes on macOS');
+    debug('Ignoring dictionary changes on macOS');
     return;
   }
 
-  console.log(`Setting spellchecker locale from: ${fuzzyLocale}`);
+  debug(`Setting spellchecker locale from: ${fuzzyLocale}`);
   const locale = getSpellcheckerLocaleByFuzzyIdentifier(fuzzyLocale);
   if (locale) {
-    console.log(`Sending spellcheck locales to host: ${locale}`);
+    debug(`Sending spellcheck locales to host: ${locale}`);
     ipcRenderer.send('set-spellchecker-locales', { locale, serviceId });
   }
 }