8 files changed, 104 insertions, 57 deletions

diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index d3b976554..acd62d675 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -8,7 +8,7 @@ import {
 import { isDevMode, isMac } from '../environment';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 
-const debug = require('debug')('Franz:contextMenu');
+const debug = require('debug')('Ferdi:contextMenu');
 
 const { Menu } = remote;
 
diff --git a/src/webview/darkmode.js b/src/webview/darkmode.js
index 73c7007c6..ab629435c 100644
--- a/src/webview/darkmode.js
+++ b/src/webview/darkmode.js
@@ -3,7 +3,7 @@
 import path from 'path';
 import fs from 'fs-extra';
 
-const debug = require('debug')('Franz:DarkMode');
+const debug = require('debug')('Ferdi:DarkMode');
 
 const chars = [...'abcdefghijklmnopqrstuvwxyz'];
 
diff --git a/src/webview/darkmode/custom.js b/src/webview/darkmode/custom.js
new file mode 100644
index 000000000..f767f5755
--- /dev/null
+++ b/src/webview/darkmode/custom.js
@@ -0,0 +1,22 @@
+// CSS for pages that need custom styles to work correctly in darkmode
+export default {
+  'web.whatsapp.com': `
+    div.landing-window > div.landing-main {
+      background-color: #FFFFFF !important;
+    }
+    div.landing-window > div.landing-main * {
+      color: #212121 !important;
+    }
+  `,
+  'web.threema.ch': `
+    .scan {
+      background-color: #FFF;
+    }
+    .scan * {
+      color: #212121;
+    }
+    .scan input.md-input {
+      color: #212121;
+    }
+  `,
+};
diff --git a/src/webview/darkmode/ignore.js b/src/webview/darkmode/ignore.js
new file mode 100644
index 000000000..110df364f
--- /dev/null
+++ b/src/webview/darkmode/ignore.js
@@ -0,0 +1,3 @@
+export default [
+  'discordapp.com',
+];
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 859f7787f..74d05fc2d 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -42,9 +42,15 @@ class RecipeWebview {
     if (this.countCache.direct === direct
       && this.countCache.indirect === indirect) return;
 
+    // Parse number to integer
+    // This will correct errors that recipes may introduce, e.g.
+    // by sending a String instead of an integer
+    const directInt = parseInt(direct, 10);
+    const indirectInt = parseInt(indirect, 10);
+
     const count = {
-      direct: direct > 0 ? direct : 0,
-      indirect: indirect > 0 ? indirect : 0,
+      direct: directInt > 0 ? directInt : 0,
+      indirect: indirectInt > 0 ? indirectInt : 0,
     };
 
 
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index f8fe53e1b..021f05cc3 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -1,7 +1,7 @@
 import { ipcRenderer } from 'electron';
 import uuidV1 from 'uuid/v1';
 
-const debug = require('debug')('Franz:Notifications');
+const debug = require('debug')('Ferdi:Notifications');
 
 class Notification {
   static permission = 'granted';
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 027d22c0a..2bf8f757a 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,8 +1,16 @@
 import { ipcRenderer } from 'electron';
 import path from 'path';
 import { autorun, computed, observable } from 'mobx';
+import fs from 'fs-extra';
 import { loadModule } from 'cld3-asm';
 import { debounce } from 'lodash';
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+} from 'darkreader';
+
+import ignoreList from './darkmode/ignore';
+import customDarkModeCss from './darkmode/custom';
 
 import RecipeWebview from './lib/RecipeWebview';
 
@@ -14,7 +22,7 @@ import './notifications';
 import { DEFAULT_APP_SETTINGS } from '../config';
 import { isDevMode } from '../environment';
 
-const debug = require('debug')('Franz:Plugin');
+const debug = require('debug')('Ferdi:Plugin');
 
 class RecipeController {
   @observable settings = {
@@ -35,6 +43,8 @@ class RecipeController {
     'get-service-id': 'serviceIdEcho',
   };
 
+  universalDarkModeInjected = false;
+
   constructor() {
     this.initialize();
   }
@@ -112,10 +122,35 @@ class RecipeController {
 
     if (this.settings.service.isDarkModeEnabled) {
       debug('Enable dark mode');
-      injectDarkModeStyle(this.settings.service.recipe.path);
-    } else if (isDarkModeStyleInjected()) {
+
+      // Check if recipe has a darkmode.css
+      const darkModeStyle = path.join(this.settings.service.recipe.path, 'darkmode.css');
+      const darkModeExists = fs.pathExistsSync(darkModeStyle);
+
+      if (darkModeExists) {
+        injectDarkModeStyle(this.settings.service.recipe.path);
+      } else if (this.settings.app.universalDarkMode && !ignoreList.includes(window.location.host)) {
+        // Use darkreader instead
+        enableDarkMode({}, {
+          css: customDarkModeCss[window.location.host] || '',
+        });
+        this.universalDarkModeInjected = true;
+      }
+    } else {
       debug('Remove dark mode');
-      removeDarkModeStyle();
+
+      if (isDarkModeStyleInjected()) {
+        removeDarkModeStyle();
+      } else {
+        disableDarkMode();
+        this.universalDarkModeInjected = false;
+      }
+    }
+
+    // Remove dark reader if (universal) dark mode was just disabled
+    if (this.universalDarkModeInjected && (!this.settings.service.isDarkModeEnabled || !this.settings.app.universalDarkMode)) {
+      disableDarkMode();
+      this.universalDarkModeInjected = false;
     }
   }
 
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index d8f71f61f..47fc6dcd1 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,36 +1,21 @@
 import { webFrame } from 'electron';
-import { attachSpellCheckProvider, SpellCheckerProvider } from 'electron-hunspell';
-import path from 'path';
-import { readFileSync } from 'fs';
+import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
 
-import { DICTIONARY_PATH } from '../config';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 
 const debug = require('debug')('Franz:spellchecker');
 
-let provider;
+let handler;
 let currentDict;
+let contextMenuBuilder;
 let _isEnabled = false;
-let attached;
 
-const DEFAULT_LOCALE = 'en-us';
-
-async function loadDictionary(locale) {
-  try {
-    const fileLocation = path.join(DICTIONARY_PATH, `hunspell-dict-${locale}/${locale}`);
-    debug('Loaded dictionary', locale, 'from', fileLocation);
-    return provider.loadDictionary(locale, readFileSync(`${fileLocation}.dic`), readFileSync(`${fileLocation}.aff`));
-  } catch (err) {
-    console.error('Could not load dictionary', err);
-  }
-}
-
-export async function switchDict(locale = DEFAULT_LOCALE) {
+export async function switchDict(locale) {
   try {
     debug('Trying to load dictionary', locale);
 
-    if (!provider) {
-      console.warn('SpellcheckProvider not initialized');
+    if (!handler) {
+      console.warn('SpellcheckHandler not initialized');
 
       return;
     }
@@ -41,11 +26,7 @@ export async function switchDict(locale = DEFAULT_LOCALE) {
       return;
     }
 
-    if (currentDict) {
-      provider.unloadDictionary(locale);
-    }
-    await loadDictionary(locale);
-    await attached.switchLanguage(locale);
+    handler.switchLanguage(locale);
 
     debug('Switched dictionary to', locale);
 
@@ -56,34 +37,23 @@ export async function switchDict(locale = DEFAULT_LOCALE) {
   }
 }
 
-export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
-
-  if (locales.length >= 1) {
-    return locales[0];
-  }
-
-  return null;
-}
-
-export default async function initialize(languageCode = DEFAULT_LOCALE) {
+export default async function initialize(languageCode = 'en-us') {
   try {
-    provider = new SpellCheckerProvider();
-    const locale = getSpellcheckerLocaleByFuzzyIdentifier(languageCode);
+    handler = new SpellCheckHandler();
+    handler.attachToInput();
+    const locale = languageCode.toLowerCase();
 
     debug('Init spellchecker');
-    await provider.initialize();
-
-    debug('Attaching spellcheck provider');
-    attached = await attachSpellCheckProvider(provider);
-
-    const availableDictionaries = await provider.getAvailableDictionaries();
 
-    debug('Available spellchecker dictionaries', availableDictionaries);
+    switchDict(locale);
 
-    await switchDict(locale);
+    contextMenuBuilder = new ContextMenuBuilder(handler);
+    // eslint-disable-next-line no-new
+    new ContextMenuListener((info) => {
+      contextMenuBuilder.showPopupMenu(info);
+    });
 
-    return provider;
+    return handler;
   } catch (err) {
     console.error(err);
     return false;
@@ -96,8 +66,19 @@ export function isEnabled() {
 
 export function disable() {
   if (isEnabled()) {
+    handler.unsubscribe();
     webFrame.setSpellCheckProvider(currentDict, { spellCheck: () => true });
     _isEnabled = false;
     currentDict = null;
   }
 }
+
+export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+
+  if (locales.length >= 1) {
+    return locales[0];
+  }
+
+  return null;
+}