From 7097b4a0166e8a8c6a300f2b605b112bb47da443 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Gran=C3=A1t?=
 <granat.stepan@gmail.com>
Date: Fri, 2 Sep 2022 14:41:58 +0200
Subject: [PATCH] feat: devtools to shadow dom to avoid css influence

---
 .../ui/src/KeyContextMenu/KeyContextMenu.tsx  |  2 +-
 packages/ui/src/ThemeProvider.tsx             | 20 ++++++++++++++++---
 packages/ui/src/common/BodyEnd.tsx            |  5 ++++-
 packages/ui/src/index.ts                      | 13 +++++++-----
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx b/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx
index 4624fbbb7d..f766afd73b 100644
--- a/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx
+++ b/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx
@@ -4,8 +4,8 @@ import MenuItem from '@mui/material/MenuItem';
 import { styled } from '@mui/material/styles';
 import type { TranslationService } from '@tolgee/core/lib/services/TranslationService';
 
-import { ThemeProvider } from '../ThemeProvider';
 import { DEVTOOLS_ID, DEVTOOLS_Z_INDEX } from '../constants';
+import { ThemeProvider } from '../ThemeProvider';
 
 const ScMenuItem = styled(MenuItem)`
   display: flex;
diff --git a/packages/ui/src/ThemeProvider.tsx b/packages/ui/src/ThemeProvider.tsx
index df0de51071..daafbf2098 100644
--- a/packages/ui/src/ThemeProvider.tsx
+++ b/packages/ui/src/ThemeProvider.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {
   createTheme,
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
-import { DEVTOOLS_Z_INDEX } from './constants';
+import { DEVTOOLS_ID, DEVTOOLS_Z_INDEX } from './constants';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 
 let theme = createTheme({
   typography: {
@@ -53,5 +55,17 @@ theme = createTheme(theme, {
 });
 
 export const ThemeProvider: React.FC = ({ children }) => {
-  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+  const cache = useRef(
+    createCache({
+      key: 'css',
+      prepend: true,
+      container: document.getElementById(DEVTOOLS_ID).shadowRoot,
+    })
+  );
+
+  return (
+    <CacheProvider value={cache.current!}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </CacheProvider>
+  );
 };
diff --git a/packages/ui/src/common/BodyEnd.tsx b/packages/ui/src/common/BodyEnd.tsx
index 0d5ab68fcf..2d519efa41 100644
--- a/packages/ui/src/common/BodyEnd.tsx
+++ b/packages/ui/src/common/BodyEnd.tsx
@@ -10,7 +10,10 @@ export class BodyEnd extends React.PureComponent<{ document?: Document }> {
   }
 
   get devTools() {
-    return this.document.getElementById(DEVTOOLS_ID) || this.document.body;
+    return (
+      this.document.getElementById(DEVTOOLS_ID)?.shadowRoot ||
+      this.document.body
+    );
   }
 
   componentDidMount() {
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 4097061946..62e33e9749 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -10,15 +10,18 @@ export class UI {
   private keyContextMenu: KeyContextMenu;
 
   constructor(private dependencies: ComponentDependencies) {
-    const devTools = document.createElement('div');
-    devTools.id = DEVTOOLS_ID;
-    document.body.append(devTools);
+    const rootElement = document.createElement('div');
+    rootElement.id = DEVTOOLS_ID;
+    rootElement.attachShadow({ mode: 'open' });
+    const devTools = rootElement.shadowRoot;
+
+    document.body.appendChild(rootElement);
 
     const tolgeeModalContainer = document.createElement('div');
-    devTools.append(tolgeeModalContainer);
+    devTools.appendChild(tolgeeModalContainer);
 
     const contextMenuContainer = document.createElement('div');
-    devTools.append(contextMenuContainer);
+    devTools.appendChild(contextMenuContainer);
 
     const viewerElement = createElement(KeyDialog, {
       dependencies: this.dependencies,