Update live preview custom CSS on input event

2 files changed, 20 insertions, 8 deletions

diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index ec21e7e1..6f64c240 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -107,6 +107,18 @@ class SettingsPopupPreview {
         this.updateSearch();
     }
 
+    setInfoVisible(visible) {
+        const node = document.querySelector('.placeholder-info');
+        if (node === null) { return; }
+
+        node.classList.toggle('placeholder-info-visible', visible);
+    }
+
+    setCustomCss(css) {
+        if (this.frontend === null) { return; }
+        this.frontend.popup.setCustomCss(css);
+    }
+
     async updateSearch() {
         const exampleText = document.querySelector('#example-text');
         if (exampleText === null) { return; }
@@ -128,17 +140,11 @@ class SettingsPopupPreview {
 
         this.setInfoVisible(!this.popupShown);
     }
-
-    setInfoVisible(visible) {
-        const node = document.querySelector('.placeholder-info');
-        if (node === null) { return; }
-
-        node.classList.toggle('placeholder-info-visible', visible);
-    }
 }
 
 SettingsPopupPreview.messageHandlers = {
-    setText: (self, {text}) => self.setText(text)
+    setText: (self, {text}) => self.setText(text),
+    setCustomCss: (self, {css}) => self.setCustomCss(css)
 };
 
 SettingsPopupPreview.instance = SettingsPopupPreview.create();
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index f09b35d9..b98754ab 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -280,6 +280,7 @@ function showAppearancePreview() {
     const buttonContainer = $('#settings-popup-preview-button-container');
     const settings = $('#settings-popup-preview-settings');
     const text = $('#settings-popup-preview-text');
+    const customCss = $('#custom-popup-css');
 
     const frame = document.createElement('iframe');
     frame.src = '/bg/settings-popup-preview.html';
@@ -292,6 +293,11 @@ function showAppearancePreview() {
         const params = {text: text.val()};
         frame.contentWindow.postMessage({action, params}, '*');
     });
+    customCss.on('input', () => {
+        const action = 'setCustomCss';
+        const params = {css: customCss.val()};
+        frame.contentWindow.postMessage({action, params}, '*');
+    });
 
     container.append(frame);
     buttonContainer.remove();