summaryrefslogtreecommitdiff
path: root/ext/bg/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-13 12:14:53 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-10-13 12:15:25 -0400
commit2f88bcf82c4dd82d1dd2f035717effaa2673e3c2 (patch)
tree437f8f97629ea735089a8f7195b2cea09eadb894 /ext/bg/js
parent320af99b7676a37157e2d7207756dd502e6be608 (diff)
parent1b96e69ea2bfe26ded82e2f058d30500290e9d2d (diff)
Merge branch 'style-editor2'
#253
Diffstat (limited to 'ext/bg/js')
-rw-r--r--ext/bg/js/api.js29
-rw-r--r--ext/bg/js/backend.js1
-rw-r--r--ext/bg/js/options.js3
-rw-r--r--ext/bg/js/settings-popup-preview.js25
-rw-r--r--ext/bg/js/settings.js8
5 files changed, 64 insertions, 2 deletions
diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index f768e6f9..94a70c34 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -241,3 +241,32 @@ function apiFrameInformationGet(sender) {
const frameId = sender.frameId;
return Promise.resolve({frameId});
}
+
+function apiInjectStylesheet(css, sender) {
+ if (!sender.tab) {
+ return Promise.reject(new Error('Invalid tab'));
+ }
+
+ const tabId = sender.tab.id;
+ const frameId = sender.frameId;
+ const details = {
+ code: css,
+ runAt: 'document_start',
+ cssOrigin: 'user',
+ allFrames: false
+ };
+ if (typeof frameId === 'number') {
+ details.frameId = frameId;
+ }
+
+ return new Promise((resolve, reject) => {
+ chrome.tabs.insertCSS(tabId, details, () => {
+ const e = chrome.runtime.lastError;
+ if (e) {
+ reject(new Error(e.message));
+ } else {
+ resolve();
+ }
+ });
+ });
+}
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 453f4282..c1216d95 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -185,6 +185,7 @@ Backend.messageHandlers = {
screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender),
forward: ({action, params}, sender) => apiForward(action, params, sender),
frameInformationGet: (params, sender) => apiFrameInformationGet(sender),
+ injectStylesheet: ({css}, sender) => apiInjectStylesheet(css, sender)
};
window.yomichan_backend = new Backend();
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index cadc4443..fac17d68 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -278,7 +278,8 @@ function profileOptionsCreateDefaults() {
mainDictionary: '',
popupTheme: 'default',
popupOuterTheme: 'default',
- customPopupCss: ''
+ customPopupCss: '',
+ customPopupOuterCss: ''
},
audio: {
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();
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 900b89bb..77815955 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -42,6 +42,7 @@ async function formRead(options) {
options.general.popupTheme = $('#popup-theme').val();
options.general.popupOuterTheme = $('#popup-outer-theme').val();
options.general.customPopupCss = $('#custom-popup-css').val();
+ options.general.customPopupOuterCss = $('#custom-popup-outer-css').val();
options.audio.enabled = $('#audio-playback-enabled').prop('checked');
options.audio.autoPlay = $('#auto-play-audio').prop('checked');
@@ -112,6 +113,7 @@ async function formWrite(options) {
$('#popup-theme').val(options.general.popupTheme);
$('#popup-outer-theme').val(options.general.popupOuterTheme);
$('#custom-popup-css').val(options.general.customPopupCss);
+ $('#custom-popup-outer-css').val(options.general.customPopupOuterCss);
$('#audio-playback-enabled').prop('checked', options.audio.enabled);
$('#auto-play-audio').prop('checked', options.audio.autoPlay);
@@ -283,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';
@@ -300,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();