Update how custom CSS is applied

ext/bg/js/search.js

@@ -118,6 +118,10 @@ class DisplaySearch extends Display {
         return this.optionsContext;
     }
 
+    setCustomCss() {
+        // No custom CSS
+    }
+
     setIntroVisible(visible, animate) {
         if (this.introVisible === visible) {
             return;

ext/fg/js/float.js

@@ -21,7 +21,6 @@ class DisplayFloat extends Display {
     constructor() {
         super(document.querySelector('#spinner'), document.querySelector('#definitions'));
         this.autoPlayAudioTimer = null;
-        this.styleNode = null;
 
         this.optionsContext = {
             depth: 0,
@@ -101,11 +100,6 @@ class DisplayFloat extends Display {
     async initialize(options, popupInfo, url, childrenSupported) {
         await super.initialize(options);
 
-        const css = options.general.customPopupCss;
-        if (css) {
-            this.setStyle(css);
-        }
-
         const {id, depth, parentFrameId} = popupInfo;
         this.optionsContext.depth = depth;
         this.optionsContext.url = url;
@@ -114,20 +108,6 @@ class DisplayFloat extends Display {
             popupNestedInitialize(id, depth, parentFrameId, url);
         }
     }
-
-    setStyle(css) {
-        const parent = document.head;
-
-        if (this.styleNode === null) {
-            this.styleNode = document.createElement('style');
-        }
-
-        this.styleNode.textContent = css;
-
-        if (this.styleNode.parentNode !== parent) {
-            parent.appendChild(this.styleNode);
-        }
-    }
 }
 
 DisplayFloat.onKeyDownHandlers = {
@@ -145,6 +125,7 @@ DisplayFloat.messageHandlers = {
     kanjiShow: (self, {definitions, context}) => self.kanjiShow(definitions, context),
     clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(),
     orphaned: (self) => self.onOrphaned(),
+    setCustomCss: (self, {css}) => self.setCustomCss(css),
     initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported)
 };
 

ext/fg/js/popup-proxy-host.js

@@ -45,6 +45,7 @@ class PopupProxyHost {
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
             termsShow: ({id, elementRect, writingMode, definitions, context}) => this.termsShow(id, elementRect, writingMode, definitions, context),
             kanjiShow: ({id, elementRect, writingMode, definitions, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, context),
+            setCustomCss: ({id, css}) => this.setCustomCss(id, css),
             clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id)
         });
     }
@@ -126,6 +127,11 @@ class PopupProxyHost {
         return await popup.kanjiShow(elementRect, writingMode, definitions, context);
     }
 
+    async setCustomCss(id, css) {
+        const popup = this.getPopup(id);
+        return popup.setCustomCss(css);
+    }
+
     async clearAutoPlayTimer(id) {
         const popup = this.getPopup(id);
         return popup.clearAutoPlayTimer();

ext/fg/js/popup-proxy.js

@@ -88,6 +88,11 @@ class PopupProxy {
         return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, context});
     }
 
+    async setCustomCss(css) {
+        const id = await this.getPopupId();
+        return await this.invokeHostApi('setCustomCss', {id, css});
+    }
+
     async clearAutoPlayTimer() {
         if (this.id === null) {
             return;

ext/fg/js/popup.js

@@ -292,6 +292,10 @@ class Popup {
         this.invokeApi('kanjiShow', {definitions, context});
     }
 
+    async setCustomCss(css) {
+        this.invokeApi('setCustomCss', {css});
+    }
+
     clearAutoPlayTimer() {
         if (this.isInjected) {
             this.invokeApi('clearAutoPlayTimer');

ext/mixed/js/display.js

@@ -29,6 +29,7 @@ class Display {
         this.audioPlaying = null;
         this.audioFallback = null;
         this.audioCache = {};
+        this.styleNode = null;
 
         this.eventListeners = [];
         this.persistentEventListeners = [];
@@ -195,6 +196,7 @@ class Display {
     async updateOptions(options) {
         this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
         this.updateTheme(this.options.general.popupTheme);
+        this.setCustomCss(this.options.general.customPopupCss);
     }
 
     updateTheme(themeName) {
@@ -207,6 +209,20 @@ class Display {
         }
     }
 
+    setCustomCss(css) {
+        if (this.styleNode === null) {
+            if (css.length === 0) { return; }
+            this.styleNode = document.createElement('style');
+        }
+
+        this.styleNode.textContent = css;
+
+        const parent = document.head;
+        if (this.styleNode.parentNode !== parent) {
+            parent.appendChild(this.styleNode);
+        }
+    }
+
     setInteractive(interactive) {
         interactive = !!interactive;
         if (this.interactive === interactive) { return; }