Update the popup preview to show live updates to outer CSS changes

2 files changed, 13 insertions, 1 deletions

diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js
index 53a5f1d0..68655fc9 100644
--- a/ext/bg/js/settings-popup-preview.js
+++ b/ext/bg/js/settings-popup-preview.js
@@ -127,6 +127,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 +157,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();
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 7eee7bce..77815955 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -285,6 +285,7 @@ function showAppearancePreview() {
     const settings = $('#settings-popup-preview-settings');
     const text = $('#settings-popup-preview-text');
     const customCss = $('#custom-popup-css');
+    const customOuterCss = $('#custom-popup-outer-css');
 
     const frame = document.createElement('iframe');
     frame.src = '/bg/settings-popup-preview.html';
@@ -302,6 +303,11 @@ function showAppearancePreview() {
         const params = {css: customCss.val()};
         frame.contentWindow.postMessage({action, params}, '*');
     });
+    customOuterCss.on('input', () => {
+        const action = 'setCustomOuterCss';
+        const params = {css: customOuterCss.val()};
+        frame.contentWindow.postMessage({action, params}, '*');
+    });
 
     container.append(frame);
     buttonContainer.remove();