From 2df3c3c9bef24bc8d8e57c3f56021f662e92936e Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Fri, 14 Jun 2019 02:15:24 +0200 Subject: [PATCH] Don't insert CSS on player element. Insert CSS into page instead. Popup doesn't work, still. --- src/ext/conf/ExtensionConf.js | 3 ++- src/ext/lib/comms/CommsClient.js | 4 +++ src/ext/lib/comms/CommsServer.js | 10 ++++++- src/ext/lib/video-data/PageInfo.js | 24 +++++++++++++++++ src/ext/lib/video-transform/Resizer.js | 23 ++-------------- src/ext/uw-bg.js | 24 +++++++++++++++++ src/popup/panels/SiteDetailsPanel.vue | 37 +++++++++++++++++--------- src/res/css/common.scss | 5 +++- 8 files changed, 94 insertions(+), 36 deletions(-) diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js index 48a2d3e..5d1dea1 100644 --- a/src/ext/conf/ExtensionConf.js +++ b/src/ext/conf/ExtensionConf.js @@ -940,7 +940,8 @@ var ExtensionConf = { videoAncestor: 1, // additionalCss: '', } - } + }, + css: '', // videoElement: { // extra stuff for video tag // querySelectors: [], // array of strings with css selectors // userCss: [], // additional styles that user can define for video element diff --git a/src/ext/lib/comms/CommsClient.js b/src/ext/lib/comms/CommsClient.js index 9493d92..82c7d78 100644 --- a/src/ext/lib/comms/CommsClient.js +++ b/src/ext/lib/comms/CommsClient.js @@ -151,6 +151,10 @@ class CommsClient { return Promise.resolve(true); } + async sendMessage(message) { + await this.sendMessage_nonpersistent(message); + } + registerVideo(){ if (Debug.debug && Debug.comms) { console.log(`[CommsClient::registerVideo] <${this.commsId}>`, "Registering video for current page."); diff --git a/src/ext/lib/comms/CommsServer.js b/src/ext/lib/comms/CommsServer.js index 9766aff..f56ca1f 100644 --- a/src/ext/lib/comms/CommsServer.js +++ b/src/ext/lib/comms/CommsServer.js @@ -13,7 +13,7 @@ class CommsServer { if (BrowserDetect.firefox) { browser.runtime.onConnect.addListener(p => ths.onConnect(p)); - browser.runtime.onMessage.addListener(m => ths.processReceivedMessage_nonpersistent(m)); + browser.runtime.onMessage.addListener((m, sender) => ths.processReceivedMessage_nonpersistent(m, sender)); } else { chrome.runtime.onConnect.addListener(p => ths.onConnect(p)); chrome.runtime.onMessage.addListener((m, sender, callback) => ths.processReceivedMessage_nonpersistent(m, sender, callback)); @@ -214,6 +214,14 @@ class CommsServer { processReceivedMessage_nonpersistent(message, sender, sendResponse){ if (Debug.debug && Debug.comms) { console.log("%c[CommsServer.js::processMessage_nonpersistent] Received message from background script!", "background-color: #11D; color: #aad", message, sender); + + if (message.cmd === 'inject-css') { + this.server.injectCss(message.cssString, sender); + return; + } + if (message.cmd === 'remove-css') { + this.server.removeCss(message.cssString, sender); + return; } if (message.forwardToContentScript) { diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js index 2f7cda9..9e31006 100644 --- a/src/ext/lib/video-data/PageInfo.js +++ b/src/ext/lib/video-data/PageInfo.js @@ -27,6 +27,18 @@ class PageInfo { this.scheduleUrlCheck(); this.currentZoomScale = 1; + + try { + const playerStyleString = this.settings.active.sites[window.location.host].css; + if (playerStyleString) { + this.comms.sendMessage({ + cmd: 'inject-css', + cssString: playerStyleString + }); + } + } catch (e) { + // do nothing. It's ok if there's no special settings for the player element + } } destroy() { @@ -40,6 +52,18 @@ class PageInfo { this.comms.unregisterVideo(video.id) video.destroy(); } + + try { + playerStyleString = this.settings.active.sites[window.location.host].css; + if (playerStyleString) { + this.comms.sendMessage({ + cmd: 'remove-css', + cssString: playerStyleString + }); + } + } catch (e) { + // do nothing. It's ok if there's no special settings for the player element + } } reset() { diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js index f3fed98..33977a3 100644 --- a/src/ext/lib/video-transform/Resizer.js +++ b/src/ext/lib/video-transform/Resizer.js @@ -621,32 +621,14 @@ class Resizer { } const styleString = this.buildStyleString(styleArray); - // see if we have any extra css for the player element: - let playerStyleString; - try { - playerStyleString = this.settings.active.sites[window.location.host].DOM.player.additionalCss; - if (playerStyleString) { - const playerStyleArrayString = this.player.eleemnt.getAttribute('style'); - const playerStyleArray = this.buildStyleArray(playerStyleString, playerStyleString); - playerStyleString = this.buildStyleString(playerStyleArray); - } - } catch (e) { - // do nothing. It's ok if there's no special settings for the player element - } - // build style string back - this.setStyleString(styleString, playerStyleString); + this.setStyleString(styleString); } - setStyleString (styleString, playerStyleString) { + setStyleString (styleString) { this.video.setAttribute("style", styleString); this.currentStyleString = styleString; - if (playerStyleString) { - this.player.element.setAttribute('style', styleString); - this.currentPlayerStyleString = playerStyleString; - } - this.currentCssValidFor = this.conf.player.dimensions; if (this.restore_wd) { @@ -713,7 +695,6 @@ class Resizer { // first, a quick test: cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width; - cssValid &= this.currentVideoSettings.validFor.height === this.conf.player.dimensions.height; if (cssValid) { const styleString = this.video.getAttribute('style'); diff --git a/src/ext/uw-bg.js b/src/ext/uw-bg.js index 2dad303..a05ddd0 100644 --- a/src/ext/uw-bg.js +++ b/src/ext/uw-bg.js @@ -52,6 +52,30 @@ class UWServer { }); } + async injectCss(css, sender) { + try { + if (Debug.debug) { + console.log("[uwbg::injectCss] Injecting CSS:", css, sender); + } + if (BrowserDetect.firefox || BrowserDetect.edge) { + await browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); + } else if (BrowserDetect.chrome) { + chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); + } + } catch (e) { + if (Debug.debug) { + console.error("Error while injecting css:", {error: e, css, sender}); + } + } + } + removetCss(css, sender) { + if (BrowserDetect.firefox || BrowserDetect.edge) { + browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId}); + } else if (BrowserDetect.chrome) { + chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId}); + } + } + scheduleGc(timeout) { if (this._gctimeout) { return; diff --git a/src/popup/panels/SiteDetailsPanel.vue b/src/popup/panels/SiteDetailsPanel.vue index e8b12b4..b536f42 100644 --- a/src/popup/panels/SiteDetailsPanel.vue +++ b/src/popup/panels/SiteDetailsPanel.vue @@ -72,15 +72,23 @@ type="number" /> -
-
Additional css
- + +
+ Additional css
for {{site}} +
+
+ This css will be inserted into webpage every time it loads. +
+
+
-
@@ -121,12 +129,17 @@ export default { try { this.playerManualQs = settings.active.sites[this.site].DOM.player.manual || this.playerManualQs; this.playerQs = settings.active.sites[this.site].DOM.player.querySelectors; - this.playerCss = settings.active.sites[this.site].DOM.player.additionalCss; - this.playerByNodeIndex = settings.active.sites[this.site].DOM.player.useRelativeAncestor; + this.playerByNodeIndex = settings.active.sites[this.site].DOM.player.useRelativeAncestor || this.playerByNodeIndex; this.playerParentNodeIndex = settings.active.sites[this.site].DOM.player.videoAncestor; } catch (e) { // that's here just in case relevant settings for this site don't exist yet } + + try { + this.playerCss = settings.active.sites[this.site].css || ''; + } catch (e) { + // that's here just in case relevant settings for this site don't exist yet + } }, methods: { ensureSettings(scope) { @@ -169,9 +182,9 @@ export default { this.settings.active.sites[this.site].DOM.player.querySelectors = this.playerQs; this.settings.save(); }, - updateVideoCss() { + updatePlayerCss() { this.ensureSettings('player'); - this.settings.active.sites[this.site].DOM.player.additionalCss = this.playerCss; + this.settings.active.sites[this.site].css = this.playerCss; this.settings.save(); }, updatePlayerParentNodeIndex() { @@ -181,20 +194,20 @@ export default { }, toggleVideoManualQs() { this.ensureSettings('video'); - this.settings.active.sites[this.site].DOM.video.enabled = !this.settings.active.sites[this.site].DOM.video.enabled; this.videoManualQs = !this.videoManualQs; + this.settings.active.sites[this.site].DOM.video.enabled = this.videoManualQs; this.settings.save(); }, togglePlayerManualQs() { this.ensureSettings('player'); - this.settings.active.sites[this.site].DOM.player.enabled = !this.settings.active.sites[this.site].DOM.player.enabled; this.playerManualQs = !this.playerManualQs; + this.settings.active.sites[this.site].DOM.player.enabled = this.playerManualQs; this.settings.save(); }, toggleByNodeIndex() { this.ensureSettings('player'); - this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = !this.settings.active.sites[this.site].DOM.player.useRelativeAncestor; this.playerByNodeIndex = !this.playerByNodeIndex; + this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = this.playerByNodeIndex; this.settings.save(); }, } diff --git a/src/res/css/common.scss b/src/res/css/common.scss index 375cdcd..3576c81 100644 --- a/src/res/css/common.scss +++ b/src/res/css/common.scss @@ -93,7 +93,6 @@ a:hover { } /* INPUT FORMATTING */ - input[type="number"], input[type="text"], input { outline: none; background-color: $input-background; @@ -105,6 +104,10 @@ input[type="number"], input[type="text"], input { border: 1px solid $input-border; } +input:disabled { + background: #444444; + color: darken($text-normal, 50%); +} /* ELEMENT POSITIONING */