diff options
| -rw-r--r-- | ext/bg/js/settings-popup-preview.js | 22 | ||||
| -rw-r--r-- | ext/bg/js/settings.js | 6 |
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(); |