Merge branch 'style-editor2'

#253

1 files changed, 24 insertions, 1 deletions

diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 53a5f1d0..7ccdc7f3 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -21,6 +21,7 @@ class SettingsPopupPreview {
     constructor() {
         this.frontend = null;
         this.apiOptionsGetOld = apiOptionsGet;
+        this.popupInjectOuterStylesheetOld = Popup.injectOuterStylesheet;
         this.popupShown = false;
         this.themeChangeTimeout = null;
     }
@@ -56,6 +57,9 @@ class SettingsPopupPreview {
 
         await this.frontend.isPrepared();
 
+        // Overwrite popup
+        Popup.injectOuterStylesheet = (...args) => this.popupInjectOuterStylesheet(...args);
+
         // Update search
         this.updateSearch();
     }
@@ -76,6 +80,19 @@ class SettingsPopupPreview {
         return options;
     }
 
+    popupInjectOuterStylesheet(...args) {
+        // This simulates the stylesheet priorities when injecting using the web extension API.
+        const result = this.popupInjectOuterStylesheetOld(...args);
+
+        const outerStylesheet = Popup.outerStylesheet;
+        const node = document.querySelector('#client-css');
+        if (node !== null && outerStylesheet !== null) {
+            node.parentNode.insertBefore(outerStylesheet, node);
+        }
+
+        return result;
+    }
+
     onWindowResize() {
         if (this.frontend === null) { return; }
         const textSource = this.frontend.textSourceLast;
@@ -127,6 +144,11 @@ class SettingsPopupPreview {
         this.frontend.popup.setCustomCss(css);
     }
 
+    setCustomOuterCss(css) {
+        if (this.frontend === null) { return; }
+        this.frontend.popup.setCustomOuterCss(css, true);
+    }
+
     async updateSearch() {
         const exampleText = document.querySelector('#example-text');
         if (exampleText === null) { return; }
@@ -152,7 +174,8 @@ class SettingsPopupPreview {
 
 SettingsPopupPreview.messageHandlers = {
     setText: (self, {text}) => self.setText(text),
-    setCustomCss: (self, {css}) => self.setCustomCss(css)
+    setCustomCss: (self, {css}) => self.setCustomCss(css),
+    setCustomOuterCss: (self, {css}) => self.setCustomOuterCss(css)
 };
 
 SettingsPopupPreview.instance = SettingsPopupPreview.create();