🎨 chore: normalize dashboard style

Signed-off-by: SimonShiki <[email protected]>
EurekaScratch · Nov 26, 2024 · e11c75f · e11c75f
1 parent 1918a8b
commit e11c75f
Show file tree

Hide file tree

Showing 5 changed files with 445 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -25,22 +25,22 @@ Eureka is a userscript which can load 3rd-party extensions in any Scratch-based
 
 | Platform                        | Load extension manually | Convert sideloaded blocks | Load extension from eureka-ify projects | Extended Scratch context | No mixin conflicts |
 |---------------------------------|-------------------------|---------------------------|-----------------------------------------|--------------------------|--------------------|
-| Scratch                         | ✅                      | ✅                       | ✅                                      | ✅                       | ✅                |
-| Scratch(Spork)                  | ✅                      | ✅                       | ✅                                      | ✅                       | ✅                |
-| Codingclip                      | ✅                      | ✅                       | ☣️(1)                                   | ✅                       | ❓                |
-| Cocrea                          | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| Aerfaying (阿儿法营)             | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| Co-Create World (共创世界)       | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| Xiaomawang (小码王)              | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| CodeLab                         | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| 40code                          | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| TurboWarp                       | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| Xueersi (学而思)                 | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| Creaticode                      | ✅                      | ✅                       | ✅                                      | ✅                       | ❓                |
-| Adacraft                        | ✅                      | ✅                       | ✅                                      | ✅                        | ❓               |
-| PenguinMod                      | ✅                      | ❓                       | ❓                                      | ❓                       | ❓                |
-| ElectraMod                      | ✅                      | ❓                       | ❓                                      | ❓                       | ❓                |
-| XPLab                           | ✅                      | ❓                       | ❓                                      | ❓                       | ❓                |
+| Scratch                         | ✅                      | ✅                       | ✅                                      | ✅                      | ✅                |
+| Scratch(Spork)                  | ✅                      | ✅                       | ✅                                      | ✅                      | ✅                |
+| Codingclip                      | ✅                      | ✅                       | ☣️(1)                                   | ✅                      | ❓                |
+| Cocrea                          | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| Aerfaying (阿儿法营)             | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| Co-Create World (共创世界)       | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| Xiaomawang (小码王)              | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| CodeLab                         | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| 40code                          | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| TurboWarp                       | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| Xueersi (学而思)                 | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| Creaticode                      | ✅                      | ✅                       | ✅                                      | ✅                      | ❓                |
+| Adacraft                        | ✅                      | ✅                       | ✅                                      | ✅                       | ❓               |
+| PenguinMod                      | ✅                      | ✅                       | ❌                                      | ✅                      | ❓                |
+| ElectraMod                      | ✅                      | ✅                       | ❌                                      | ✅                      | ❓                |
+| XPLab                           | ✅                      | ✅                       | ❌                                      | ✅                      | ❓                |
 
 (1): The initialize of the sideloaded blocks in workspace are broken
 

diff --git a/src/main/dashboard/app.tsx b/src/main/dashboard/app.tsx
@@ -5,6 +5,7 @@ import { render } from 'solid-js/web';
 import { eureka } from '../ctx';
 import close from './assets/icon--close.svg';
 import globalCss from './style.css';
+import normalizeCss from './normalize.css';
 import styles, { stylesheet } from './style.module.css';
 import formatMessage from 'format-message';
 import { loadedExtensions } from '../middleware/index';
@@ -493,16 +494,28 @@ if (document.readyState === 'loading') {
 }
 
 function initialize () {
-  const style = document.createElement('style');
-  style.id = 'eureka-styles';
-  style.innerHTML = `${globalCss}\n${stylesheet}`;
-  document.head.append(style);
-
-  render(() => (
-    <div id='eureka-dashboard'>
-      <Dashboard />
-    </div>
-  ), document.body);
+  const container = document.createElement('div');
+  container.id = 'eureka-dashboard-container';
+  document.body.appendChild(container);
+
+  const shadow = container.attachShadow({ mode: 'open' });
+
+  const globalStyle = document.createElement('style');
+  globalStyle.id = 'eureka-styles';
+  globalStyle.innerHTML = globalCss;
+
+  const normalizeStyle = document.createElement('style');
+  normalizeStyle.id = 'eureka-normalize';
+  normalizeStyle.innerHTML = `${normalizeCss}\n${stylesheet}`;
+
+  const content = document.createElement('div');
+  content.id = 'eureka-dashboard';
+
+  document.head.appendChild(globalStyle);
+  shadow.appendChild(normalizeStyle);
+  shadow.appendChild(content);
+
+  render(() => <Dashboard />, content);
 }
 
 eureka.openDashboard = (status: Exclude<DashboardStatus, DashboardStatus.NONE> = DashboardStatus.LOADER) => {