diff --git a/packages/repl/src/components/runner/Devtools.tsx b/packages/repl/src/components/runner/Devtools.tsx
index 0782ac0..501adda 100644
--- a/packages/repl/src/components/runner/Devtools.tsx
+++ b/packages/repl/src/components/runner/Devtools.tsx
@@ -19,18 +19,36 @@ const HTML = `
+
`
const INJECTED_SCRIPT = `
@@ -46,10 +64,17 @@ async function waitForElement(selector, container, waitForShadowRoot = false) {
}
function hideBySelector(root, selector) {
- const el = root.shadowRoot.querySelector(selector);
+ const el = root.querySelector(selector);
if (!el) return;
el.style.display = 'none';
}
+
+function hideBySelectorAll(root, selector) {
+ const els = root.querySelectorAll(selector);
+ for (const el of els) {
+ el.style.display = 'none';
+ }
+}
async function focusConsole(tabbedPane) {
const consoleTab = await waitForElement('#tab-console', tabbedPane.shadowRoot);
@@ -60,16 +85,21 @@ async function focusConsole(tabbedPane) {
}
(async () => {
+ localStorage.setItem('disableSelfXssWarning', 'true')
+
const tabbedPane = await waitForElement('.tabbed-pane', document.body);
await focusConsole(tabbedPane);
- hideBySelector(tabbedPane, '.tabbed-pane-header');
+
+ await waitForElement('.tabbed-pane-right-toolbar', tabbedPane.shadowRoot);
+ hideBySelectorAll(tabbedPane.shadowRoot, '.tabbed-pane-left-toolbar, .tabbed-pane-right-toolbar, .tabbed-pane-tab-slider');
+ hideBySelectorAll(tabbedPane.shadowRoot, '.tabbed-pane-header-tab:not(#tab-console, #tab-sources)');
+ tabbedPane.shadowRoot.appendChild(document.querySelector('#inject-css-tab-pane'));
const consoleToolbar = await waitForElement('.console-main-toolbar', document.body);
- hideBySelector(consoleToolbar, 'devtools-issue-counter');
+ hideBySelector(consoleToolbar.shadowRoot, 'devtools-issue-counter');
- const injectCss = await waitForElement('#inject-css', document.body);
const rootView = await waitForElement('.root-view', document.body);
- rootView.appendChild(injectCss);
+ rootView.appendChild(document.querySelector('#inject-css'));
// forward some keyboard shortcuts to the parent window
document.addEventListener('keydown', (e) => {
@@ -109,6 +139,7 @@ export function Devtools(props: {
function handleLoad() {
const _innerRef = innerRef()
if (!_innerRef) return
+
const script = document.createElement('script')
script.textContent = INJECTED_SCRIPT
_innerRef.contentWindow?.document.body.appendChild(script)