fix: custom css with New Teams (#1017)

* fix: custom css with New Teams

Fixes #1013

* chore: prepare release 1.3.20

app/customCSS/index.js

@@ -2,23 +2,60 @@ const fs = require('fs');
 const path = require('path');
 
 exports.onDidFinishLoad = function onDidFinishLoad(content, config) {
-	applyCustomCSSStyleIfPresent(content, config);
+	const customCssLocation = getCustomCssLocation(config);
+	if (customCssLocation) {
+		applyCustomCSSToContent(content, customCssLocation)
+	}
 	content.insertCSS('#download-mobile-app-button, #download-app-button, #get-app-button { display:none; }');
 	content.insertCSS('.zoetrope { animation-iteration-count: 1 !important; }');
 };
 
-function applyCustomCSSStyleIfPresent(content, config) {
+exports.onDidFrameFinishLoad = function onDidFrameFinishLoad(webFrame, config) {
+	const customCssLocation = getCustomCssLocation(config);
+	if (customCssLocation) {
+		applyCustomCSSToFrame(webFrame, customCssLocation);
+	}
+}
+
+function getCustomCssLocation(config) {
 	if (config.customCSSName) {
-		applyCustomCSSFromLocation(content, path.join(__dirname, 'assets', 'css', config.customCSSName + '.css'));
+		return path.join(__dirname, "assets", "css", config.customCSSName + ".css");
 	} else if (config.customCSSLocation) {
-		applyCustomCSSFromLocation(content, config.customCSSLocation);
+		return config.customCSSLocation;
 	}
+	return null;
 }
 
-function applyCustomCSSFromLocation(content, cssLocation) {
+function applyCustomCSSToContent(content, cssLocation) {
 	fs.readFile(cssLocation, 'utf-8', (error, data) => {
 		if (!error) {
 			content.insertCSS(data);
 		}
 	});
 }
+
+// Teams V2 use iframe for the main view. The content.insertCSS
+// does not work for that for some reason, so here, we listen for
+// on-did-frame-finish-load events, and inject additional <style>
+// element into them using JavaScript.
+function applyCustomCSSToFrame(webFrame, cssLocation) {
+	const customCssId = "tfl-custom-css-style";
+
+	fs.readFile(cssLocation, 'utf-8', (error, data) => {
+		if (error) {
+			return;
+		}
+
+		data = data.replace(/`/g, "\\u0060")
+
+		webFrame.executeJavaScript(`
+			if(!document.getElementById("${customCssId}")) {
+				var style = document.createElement('style');
+				style.id = "${customCssId}";
+				style.type = "text/css";
+				style.innerHTML = \u0060${data}\u0060;
+				document.head.appendChild(style);
+			}
+		`);
+	})
+}

app/mainAppWindow/index.js

@@ -1,5 +1,5 @@
 require('@electron/remote/main').initialize();
-const { shell, BrowserWindow, ipcMain, app, session, nativeTheme, powerSaveBlocker, dialog } = require('electron');
+const { shell, BrowserWindow, ipcMain, app, session, nativeTheme, powerSaveBlocker, dialog, webFrameMain } = require('electron');
 const isDarkMode = nativeTheme.shouldUseDarkColors;
 const windowStateKeeper = require('electron-window-state');
 const path = require('path');
@@ -155,6 +155,17 @@ function onDidFinishLoad() {
 	customCSS.onDidFinishLoad(window.webContents, config);
 }
 
+function onDidFrameFinishLoad(event, isMainFrame, frameProcessId, frameRoutingId) {
+	logger.debug('did-frame-finish-load', event, isMainFrame);
+
+	if (isMainFrame) {
+		return; // We want to insert CSS only into the Teams V2 content iframe
+	}
+
+	const wf = webFrameMain.fromId(frameProcessId, frameRoutingId);
+	customCSS.onDidFrameFinishLoad(wf, config)
+}
+
 function restoreWindow() {
 	// If minimized, restore.
 	if (window.isMinimized()) {
@@ -298,6 +309,7 @@ function addEventHandlers() {
 	window.webContents.session.webRequest.onBeforeSendHeaders(getWebRequestFilterFromURL(), onBeforeSendHeadersHandler);
 	login.handleLoginDialogTry(window);
 	window.webContents.on('did-finish-load', onDidFinishLoad);
+	window.webContents.on("did-frame-finish-load", onDidFrameFinishLoad);
 	window.on('closed', onWindowClosed);
 	window.webContents.addListener('before-input-event', onBeforeInput);
 }

com.github.IsmaelMartinez.teams_for_linux.appdata.xml

@@ -14,6 +14,13 @@
 	<url type="bugtracker">https://github.com/IsmaelMartinez/teams-for-linux/issues</url>
 	<launchable type="desktop-id">com.github.IsmaelMartinez.teams_for_linux.desktop</launchable>
 	<releases>
+		<release version="1.3.20" date="2023-11-14">
+			<description>
+				<ul>
+					<li>Fix: custom css compatibility with New Teams</li>
+				</ul>
+			</description>
+		</release>
 		<release version="1.3.19" date="2023-11-06">
 			<description>
 				<ul>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teams-for-linux",
-  "version": "1.3.19",
+  "version": "1.3.20",
   "main": "app/index.js",
   "description": "Unofficial client for Microsoft Teams for Linux",
   "homepage": "https://github.com/IsmaelMartinez/teams-for-linux",