Add support for custom popup CSS

ext/bg/js/options.js

@@ -198,7 +198,8 @@ function optionsSetDefaults(options) {
             showGuide: true,
             compactTags: false,
             compactGlossaries: false,
-            mainDictionary: ''
+            mainDictionary: '',
+            customPopupCss: ''
         },
 
         scanning: {

ext/bg/js/settings.js

@@ -36,6 +36,7 @@ async function formRead() {
     optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10);
     optionsNew.general.popupHorizontalOffset = parseInt($('#popup-horizontal-offset').val(), 0);
     optionsNew.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10);
+    optionsNew.general.customPopupCss = $('#custom-popup-css').val();
 
     optionsNew.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked');
     optionsNew.scanning.touchInputEnabled = $('#touch-input-enabled').prop('checked');
@@ -169,6 +170,7 @@ async function onReady() {
     $('#popup-height').val(options.general.popupHeight);
     $('#popup-horizontal-offset').val(options.general.popupHorizontalOffset);
     $('#popup-vertical-offset').val(options.general.popupVerticalOffset);
+    $('#custom-popup-css').val(options.general.customPopupCss);
 
     $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse);
     $('#touch-input-enabled').prop('checked', options.scanning.touchInputEnabled);

ext/bg/settings.html

@@ -30,6 +30,15 @@
                 padding-bottom: 1em;
             }
 
+            #custom-popup-css {
+                width: 100%;
+                min-height: 34px;
+                height: 96px;
+                resize: vertical;
+                font-family: 'Courier New', Courier, monospace;
+                white-space: pre;
+            }
+
             [data-show-for-browser] {
                 display: none;
             }
@@ -123,6 +132,11 @@
                         <div class="col-xs-6"><input type="number" min="0" id="popup-vertical-offset" class="form-control"></div>
                     </div>
                 </div>
+
+                <div class="form-group options-advanced">
+                    <label for="custom-popup-css">Custom popup CSS</label>
+                    <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-css" class="form-control"></textarea></div>
+                </div>
             </div>
 
             <div>

ext/fg/js/float.js

@@ -21,6 +21,7 @@ class DisplayFloat extends Display {
     constructor() {
         super($('#spinner'), $('#definitions'));
         this.autoPlayAudioTimer = null;
+        this.styleNode = null;
 
         $(window).on('message', utilAsync(this.onMessage.bind(this)));
     }
@@ -62,6 +63,13 @@ class DisplayFloat extends Display {
 
             orphaned: () => {
                 this.onOrphaned();
+            },
+
+            setOptions: (options) => {
+                const css = options.general.customPopupCss;
+                if (css) {
+                    this.setStyle(css);
+                }
             }
         };
 
@@ -101,6 +109,20 @@ class DisplayFloat extends Display {
             this.autoPlayAudioTimer = null;
         }
     }
+
+    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);
+        }
+    }
 }
 
 window.yomichan_display = new DisplayFloat();

ext/fg/js/popup.js

@@ -29,10 +29,17 @@ class Popup {
         this.injected = null;
     }
 
-    inject() {
+    inject(options) {
         if (!this.injected) {
             this.injected = new Promise((resolve, reject) => {
-                this.container.addEventListener('load', resolve);
+                this.container.addEventListener('load', () => {
+                    this.invokeApi('setOptions', {
+                        general: {
+                            customPopupCss: options.general.customPopupCss
+                        }
+                    });
+                    resolve();
+                });
                 this.observeFullscreen();
                 this.onFullscreenChanged();
             });
@@ -42,7 +49,7 @@ class Popup {
     }
 
     async show(elementRect, options) {
-        await this.inject();
+        await this.inject(options);
 
         const containerStyle = window.getComputedStyle(this.container);
         const containerHeight = parseInt(containerStyle.height);