From 119c2251d29661fc330bbf4f97f29938eb8abae2 Mon Sep 17 00:00:00 2001
From: Benedikt Ziemons <ben@rs485.network>
Date: Sat, 30 Apr 2022 16:28:24 +0200
Subject: [PATCH] Remove Element elements by CSS injection

instead of DOM manipulation.
React does not like external DOM manipulation.
---
 src/Ticket.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/Ticket.vue b/src/Ticket.vue
index 47e39f4..7635e9a 100644
--- a/src/Ticket.vue
+++ b/src/Ticket.vue
@@ -136,18 +136,20 @@ export default {
 					room_id: matrixInfoResponse.data.matrixChatRoom,
 				}, true)
 
-				// removes left panel by DOM manipulation
-				const matrixchat = elementWebFrame.contentDocument.getElementById('matrixchat')
-				console.debug(matrixchat)
-				const observerConfig = { attributes: false, childList: true, subtree: true }
-				const observer = new MutationObserver((mutationsList, observer) => {
-					console.debug('observer kicked', observer)
-					const leftPanelsByClass = elementWebFrame.contentDocument.getElementsByClassName('mx_LeftPanel_outerWrapper')
-					for (const leftPanel of leftPanelsByClass) {
-						leftPanel.remove()
-					}
-				})
-				observer.observe(matrixchat, observerConfig)
+				// remove elements by CSS injection
+				const styleElement = elementWebFrame.contentDocument.createElement('style')
+				styleElement.innerText = `
+.mx_LeftPanel_outerWrapper {
+  display: none !important;
+}
+.mx_NewRoomIntro {
+  display: none !important;
+}
+.mx_ToastContainer {
+  display: none !important;
+}
+`
+				elementWebFrame.contentDocument.head.appendChild(styleElement)
 			}).catch(console.error)
 		},
 	},