aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-13 11:51:59 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-13 12:12:52 -0400
commit42d67249c9d912cbb39700f55bb33051f69055c7 (patch)
treedb774794892db9569e8193181cc027b45ffa23cf
parentc9158a37b509ba58cd1e364e3d7a31cd43de5789 (diff)
Update the popup preview to show live updates to outer CSS changes
-rw-r--r--ext/bg/js/settings-popup-preview.js8
-rw-r--r--ext/bg/js/settings.js6
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();