Combine ejectCss and injectCss into a single function

src/ext/lib/comms/CommsServer.js

@@ -224,6 +224,9 @@ class CommsServer {
       this.server.removeCss(message.cssString, sender);
       return;
     }
+    if (message.cmd === 'replace-css') {
+      this.server.replaceCss(message.oldCssString, message.newCssString, sender);
+    }
 
     if (message.forwardToContentScript) {
       if (Debug.debug && Debug.comms) {

src/ext/lib/video-data/PageInfo.js

@@ -55,6 +55,14 @@ class PageInfo {
     });
   }
 
+  replaceCss(oldCssString, newCssString) {
+    this.comms.sendMessage({
+      cmd: 'replace-css',
+      newCssString,
+      oldCssString
+    });
+  }
+
   destroy() {
     if(Debug.debug || Debug.init){
       console.log("[PageInfo::destroy] destroying all videos!")

src/ext/lib/video-transform/Resizer.js

@@ -77,6 +77,10 @@ class Resizer {
   ejectCss(css) {
     this.conf.pageInfo.ejectCss(css);
   }
+  
+  replaceCss(oldCss, newCss) {
+    this.conf.pageInfo.replaceCss(oldCss, newCss);
+  }
 
   prepareCss(css) {
     return `.${this.userCssClassName} {${css}}`;
@@ -639,20 +643,21 @@ class Resizer {
   }
 
   setStyleString (styleString) {
-    // this.video.setAttribute("style", styleString);
+    this.currentCssValidFor = this.conf.player.dimensions;
+    const newCssString = this.prepareCss(styleString);
 
-    // remove old CSS
+    // inject new CSS or replace existing one
-    if (this.userCss) {
+    if (!this.userCss) {
-      this.ejectCss(this.userCss);
+      this.injectCss(newCssString);
+      this.userCss = newCssString;
+    } else {
+      this.replaceCss(this.userCss, newCssString);
+      this.userCss = newCssString;
     }
 
-    // this.currentStyleString = styleString;
+    // browser checks and ignores duplicate classes, so no point in checking whether we've already
-    this.currentCssValidFor = this.conf.player.dimensions;
+    // added the extra class ourselves on top of that. Twice the work, but not much benefit
-    this.userCss = this.prepareCss(styleString);
+    this.video.classList.add(this.userCssClassName); 
-
-    // inject new CSS
-    this.injectCss(this.userCss);
-    this.video.classList.add(this.userCssClassName);
 
     if (this.restore_wd) {
       if (!this.video){

src/ext/uw-bg.js

@@ -58,7 +58,7 @@ class UWServer {
         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});
+        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});
       }
@@ -68,7 +68,7 @@ class UWServer {
       }
     }
   }
-  removetCss(css, sender) {
+  async removeCss(css, sender) {
     if (BrowserDetect.firefox || BrowserDetect.edge) {
       browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
     } else if (BrowserDetect.chrome) {
@@ -76,6 +76,11 @@ class UWServer {
     }
   }
 
+  async replaceCss(oldCss, newCss, sender) {
+    this.injectCss(newCss, sender);
+    this.removeCss(oldCss, sender);
+  }
+
   scheduleGc(timeout) {
     if (this._gctimeout) {
       return;