From 446d66384af5ff733402e1e99c5d9335a8f0f6b2 Mon Sep 17 00:00:00 2001 From: sunag Date: Fri, 24 Apr 2026 21:08:22 -0300 Subject: [PATCH] Inspector: Added scope for styles (#33456) --- examples/jsm/inspector/Inspector.js | 2 +- examples/jsm/inspector/tabs/Console.js | 2 +- examples/jsm/inspector/tabs/Performance.js | 5 +- examples/jsm/inspector/ui/Profiler.js | 39 +- examples/jsm/inspector/ui/Style.js | 2818 ++++++++++---------- examples/jsm/inspector/ui/Tab.js | 4 +- examples/jsm/inspector/ui/utils.js | 14 +- test/e2e/clean-page.js | 3 +- 8 files changed, 1442 insertions(+), 1445 deletions(-) diff --git a/examples/jsm/inspector/Inspector.js b/examples/jsm/inspector/Inspector.js index 97534de1851c34..ae09f9a0f96b09 100644 --- a/examples/jsm/inspector/Inspector.js +++ b/examples/jsm/inspector/Inspector.js @@ -466,7 +466,7 @@ class Inspector extends RendererInspector { if ( this.displayCycle.text.needsUpdate ) { - setText( 'fps-counter', this.fps.toFixed() ); + setText( this.profiler.toggleButton.querySelector('.fps-counter'), this.fps.toFixed() ); this.performance.updateText( this, frame ); this.memory.updateText( this ); diff --git a/examples/jsm/inspector/tabs/Console.js b/examples/jsm/inspector/tabs/Console.js index 2668c114bfc389..c9e71eae8bc1a8 100644 --- a/examples/jsm/inspector/tabs/Console.js +++ b/examples/jsm/inspector/tabs/Console.js @@ -12,7 +12,7 @@ class Console extends Tab { this.buildHeader(); this.logContainer = document.createElement( 'div' ); - this.logContainer.id = 'console-log'; + this.logContainer.classList.add( 'console-log' ); this.content.appendChild( this.logContainer ); } diff --git a/examples/jsm/inspector/tabs/Performance.js b/examples/jsm/inspector/tabs/Performance.js index a06ae566c336d0..8e3c8fea65e589 100644 --- a/examples/jsm/inspector/tabs/Performance.js +++ b/examples/jsm/inspector/tabs/Performance.js @@ -45,7 +45,8 @@ class Performance extends Tab { label.appendChild( checkmark ); */ - const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), createValueSpan( 'graph-fps-counter' ) ); + this.graphFpsCounter = createValueSpan(); + const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), this.graphFpsCounter ); perfList.add( graphStats ); const graphItem = new Item( graphContainer ); @@ -243,7 +244,7 @@ class Performance extends Tab { // - setText( 'graph-fps-counter', inspector.fps.toFixed() + ' FPS' ); + setText( this.graphFpsCounter, inspector.fps.toFixed() + ' FPS' ); // diff --git a/examples/jsm/inspector/ui/Profiler.js b/examples/jsm/inspector/ui/Profiler.js index 2ead024114f3c1..32d10caf9485a9 100644 --- a/examples/jsm/inspector/ui/Profiler.js +++ b/examples/jsm/inspector/ui/Profiler.js @@ -19,11 +19,11 @@ export class Profiler extends EventDispatcher { this.maxZIndex = 1002; // Track the highest z-index for detached windows (starts at base z-index from CSS) this.nextTabOriginalIndex = 0; // Track the original order of tabs as they are added - Style.init(); - this.setupShell(); this.setupResizing(); + Style.init( this.domElement ); + // Setup window resize listener and update mobile status this.setupWindowResizeListener(); @@ -237,31 +237,32 @@ export class Profiler extends EventDispatcher { setupShell() { this.domElement = document.createElement( 'div' ); - this.domElement.id = 'profiler-shell'; + + this.domElement.classList.add( 'three-inspector' ); this.toggleButton = document.createElement( 'button' ); - this.toggleButton.id = 'profiler-toggle'; + this.toggleButton.classList.add( 'profiler-toggle' ); this.toggleButton.innerHTML = ` - - - - + + + - FPS - + `; this.toggleButton.onclick = () => this.togglePanel(); - this.builtinTabsContainer = this.toggleButton.querySelector( '#builtin-tabs-container' ); + this.builtinTabsContainer = this.toggleButton.querySelector( '.builtin-tabs-container' ); // Create mini-panel for builtin tabs (shown when panel is hidden) this.miniPanel = document.createElement( 'div' ); - this.miniPanel.id = 'profiler-mini-panel'; + this.miniPanel.classList.add( 'profiler-mini-panel' ); this.miniPanel.className = 'profiler-mini-panel'; this.panel = document.createElement( 'div' ); - this.panel.id = 'profiler-panel'; + this.panel.classList.add( 'profiler-panel' ); const header = document.createElement( 'div' ); header.className = 'profiler-header'; @@ -285,7 +286,7 @@ export class Profiler extends EventDispatcher { controls.className = 'profiler-controls'; this.floatingBtn = document.createElement( 'button' ); - this.floatingBtn.id = 'floating-btn'; + this.floatingBtn.classList.add( 'floating-btn' ); this.floatingBtn.title = 'Switch to Right Side'; this.floatingBtn.innerHTML = ''; this.floatingBtn.onclick = () => this.togglePosition(); @@ -305,12 +306,12 @@ export class Profiler extends EventDispatcher { } this.maximizeBtn = document.createElement( 'button' ); - this.maximizeBtn.id = 'maximize-btn'; + this.maximizeBtn.classList.add( 'maximize-btn' ); this.maximizeBtn.innerHTML = ''; this.maximizeBtn.onclick = () => this.toggleMaximize(); const hideBtn = document.createElement( 'button' ); - hideBtn.id = 'hide-panel-btn'; + hideBtn.classList.add( 'hide-panel-btn' ); hideBtn.textContent = '-'; hideBtn.onclick = () => this.togglePanel(); @@ -877,15 +878,15 @@ export class Profiler extends EventDispatcher { if ( isDragging && hasMoved && previewWindow ) { + const finalX = parseInt( previewWindow.style.left ) + 200; + const finalY = parseInt( previewWindow.style.top ) + 20; + if ( previewWindow.parentNode ) { previewWindow.parentNode.removeChild( previewWindow ); } - const finalX = parseInt( previewWindow.style.left ) + 200; - const finalY = parseInt( previewWindow.style.top ) + 20; - this.detachTab( tab, finalX, finalY ); } else if ( ! hasMoved ) { @@ -975,7 +976,7 @@ export class Profiler extends EventDispatcher { windowPanel.appendChild( windowHeader ); windowPanel.appendChild( windowContent ); - document.body.appendChild( windowPanel ); + this.domElement.appendChild( windowPanel ); return windowPanel; @@ -1189,7 +1190,7 @@ export class Profiler extends EventDispatcher { windowPanel.appendChild( windowHeader ); windowPanel.appendChild( windowContent ); - document.body.appendChild( windowPanel ); + this.domElement.appendChild( windowPanel ); // Setup window dragging this.setupDetachedWindowDrag( windowPanel, windowHeader, tab ); diff --git a/examples/jsm/inspector/ui/Style.js b/examples/jsm/inspector/ui/Style.js index 39aea377ea210c..fdf6e530576c94 100644 --- a/examples/jsm/inspector/ui/Style.js +++ b/examples/jsm/inspector/ui/Style.js @@ -1,1666 +1,1668 @@ export class Style { - static init() { - - if ( document.getElementById( 'profiler-styles' ) ) return; - - const css = ` -:root { - --profiler-bg: #1e1e24f5; - --profiler-header-bg: #2a2a33aa; - --profiler-header: #2a2a33; - --profiler-border: #4a4a5a; - --text-primary: #e0e0e0; - --text-secondary: #9a9aab; - --accent-color: #00aaff; - --color-green: #4caf50; - --color-yellow: #ffc107; - --color-red: #f44336; - --color-fps: rgb(63, 81, 181); - --color-call: rgba(255, 185, 34, 1); - --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - --font-mono: 'Fira Code', 'Courier New', Courier, monospace; -} + static init( container ) { + + const css = /* css */` +@scope (.three-inspector) { + + :scope { + --profiler-background: #1e1e24f5; + --profiler-header-background: #2a2a33aa; + --profiler-header: #2a2a33; + --profiler-border: #4a4a5a; + --text-primary: #e0e0e0; + --text-secondary: #9a9aab; + --color-accent: #00aaff; + --color-green: #4caf50; + --color-yellow: #ffc107; + --color-red: #f44336; + --color-fps: rgb(63, 81, 181); + --color-call: rgba(255, 185, 34, 1); + --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + --font-mono: 'Courier New', Courier, monospace; + } -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Fira+Code&display=swap'); + .profiler-panel *, .profiler-toggle * { + text-transform: initial; + line-height: normal; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } -#profiler-panel *, #profiler-toggle * { - text-transform: initial; - line-height: normal; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} + .profiler-toggle { + position: fixed; + top: 15px; + right: 15px; + background-color: rgba(30, 30, 36, 0.85); + border: 1px solid #4a4a5a54; + border-radius: 12px 6px 6px 12px; + color: var(--text-primary); + cursor: pointer; + z-index: 1001; + transition: all 0.2s ease-in-out; + /*font-size: 14px;*/ + font-size: 15px; + backdrop-filter: blur(8px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + display: flex; + align-items: stretch; + padding: 0; + overflow: hidden; + font-family: var(--font-family); + } -#profiler-toggle { - position: fixed; - top: 15px; - right: 15px; - background-color: rgba(30, 30, 36, 0.85); - border: 1px solid #4a4a5a54; - border-radius: 12px 6px 6px 12px; - color: var(--text-primary); - cursor: pointer; - z-index: 1001; - transition: all 0.2s ease-in-out; - /*font-size: 14px;*/ - font-size: 15px; - backdrop-filter: blur(8px); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); - display: flex; - align-items: stretch; - padding: 0; - overflow: hidden; - font-family: var(--font-family); -} + .profiler-toggle.position-right.panel-open { + right: auto; + left: 15px; + border-radius: 6px 12px 12px 6px; + flex-direction: row-reverse; + } -#profiler-toggle.position-right.panel-open { - right: auto; - left: 15px; - border-radius: 6px 12px 12px 6px; - flex-direction: row-reverse; -} + .profiler-toggle.position-right.panel-open .builtin-tabs-container { + border-right: none; + border-left: 1px solid #262636; + } -#profiler-toggle.position-right.panel-open #builtin-tabs-container { - border-right: none; - border-left: 1px solid #262636; -} + .profiler-toggle:hover { + border-color: var(--color-accent); + } -#profiler-toggle:hover { - border-color: var(--accent-color); -} + .profiler-toggle.panel-open .toggle-icon { + background-color: rgba(0, 170, 255, 0.2); + color: var(--color-accent); + } -#profiler-toggle.panel-open #toggle-icon { - background-color: rgba(0, 170, 255, 0.2); - color: var(--accent-color); -} + .toggle-icon { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + font-size: 20px; + transition: background-color 0.2s; + } -#toggle-icon { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - font-size: 20px; - transition: background-color 0.2s; -} + .profiler-toggle:hover .toggle-icon { + background-color: rgba(255, 255, 255, 0.05); + } -#profiler-toggle:hover #toggle-icon { - background-color: rgba(255, 255, 255, 0.05); -} + .profiler-toggle.panel-open:hover .toggle-icon { + background-color: rgba(0, 170, 255, 0.3); + } -#profiler-toggle.panel-open:hover #toggle-icon { - background-color: rgba(0, 170, 255, 0.3); -} + .toggle-separator { + width: 1px; + background-color: var(--profiler-border); + } -.toggle-separator { - width: 1px; - background-color: var(--profiler-border); -} + .toggle-text { + display: flex; + align-items: baseline; + padding: 8px 14px; + min-width: 80px; + justify-content: right; + } -#toggle-text { - display: flex; - align-items: baseline; - padding: 8px 14px; - min-width: 80px; - justify-content: right; -} + .toggle-text .fps-label { + font-size: 0.7em; + margin-left: 10px; + color: #999; + } -#toggle-text .fps-label { - font-size: 0.7em; - margin-left: 10px; - color: #999; -} + .builtin-tabs-container { + display: flex; + align-items: stretch; + gap: 0; + border-right: 1px solid #262636; + order: -1; + } -#builtin-tabs-container { - display: flex; - align-items: stretch; - gap: 0; - border-right: 1px solid #262636; - order: -1; -} + .builtin-tab-btn { + background: transparent; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 8px 14px; + font-family: var(--font-family); + font-size: 13px; + font-weight: 600; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + min-width: 32px; + position: relative; + } -.builtin-tab-btn { - background: transparent; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 8px 14px; - font-family: var(--font-family); - font-size: 13px; - font-weight: 600; - transition: all 0.2s; - display: flex; - align-items: center; - justify-content: center; - min-width: 32px; - position: relative; -} + .builtin-tab-btn svg { + width: 20px; + height: 20px; + stroke: currentColor; + } -.builtin-tab-btn svg { - width: 20px; - height: 20px; - stroke: currentColor; -} + .builtin-tab-btn:hover { + background-color: rgba(255, 255, 255, 0.08); + color: var(--color-accent); + } -.builtin-tab-btn:hover { - background-color: rgba(255, 255, 255, 0.08); - color: var(--accent-color); -} + .builtin-tab-btn:active { + background-color: rgba(255, 255, 255, 0.12); + } -.builtin-tab-btn:active { - background-color: rgba(255, 255, 255, 0.12); -} + .builtin-tab-btn.active { + background-color: rgba(0, 170, 255, 0.2); + color: var(--color-accent); + } -.builtin-tab-btn.active { - background-color: rgba(0, 170, 255, 0.2); - color: var(--accent-color); -} + .builtin-tab-btn.active:hover { + background-color: rgba(0, 170, 255, 0.3); + } -.builtin-tab-btn.active:hover { - background-color: rgba(0, 170, 255, 0.3); -} + .profiler-mini-panel { + position: fixed; + top: 60px; + right: 15px; + background-color: rgba(30, 30, 36, 0.85); + border: 1px solid #4a4a5a54; + border-radius: 8px; + color: var(--text-primary); + z-index: 9999; + backdrop-filter: blur(8px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); + font-family: var(--font-family); + font-size: 11px; + width: 350px; + max-height: calc(100vh - 100px); + overflow-y: auto; + overflow-x: hidden; + display: none; + opacity: 0; + transform: translateY(-10px) scale(0.98); + transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); + } -#profiler-mini-panel { - position: fixed; - top: 60px; - right: 15px; - background-color: rgba(30, 30, 36, 0.85); - border: 1px solid #4a4a5a54; - border-radius: 8px; - color: var(--text-primary); - z-index: 9999; - backdrop-filter: blur(8px); - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); - font-family: var(--font-family); - font-size: 11px; - width: 350px; - max-height: calc(100vh - 100px); - overflow-y: auto; - overflow-x: hidden; - display: none; - opacity: 0; - transform: translateY(-10px) scale(0.98); - transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); -} + .profiler-mini-panel.position-right.panel-open { + right: auto; + left: 15px; + } -#profiler-mini-panel.position-right.panel-open { - right: auto; - left: 15px; -} + .profiler-mini-panel.visible { + display: block; + opacity: 1; + transform: translateY(0) scale(1); + } -#profiler-mini-panel.visible { - display: block; - opacity: 1; - transform: translateY(0) scale(1); -} + .profiler-mini-panel::-webkit-scrollbar { + width: 6px; + } -#profiler-mini-panel::-webkit-scrollbar { - width: 6px; -} + .profiler-mini-panel::-webkit-scrollbar-track { + background: transparent; + } -#profiler-mini-panel::-webkit-scrollbar-track { - background: transparent; -} + .profiler-mini-panel::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.15); + border-radius: 3px; + transition: background 0.2s; + } -#profiler-mini-panel::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.15); - border-radius: 3px; - transition: background 0.2s; -} + .profiler-mini-panel::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.25); + } -#profiler-mini-panel::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.25); -} + .mini-panel-content { + padding: 0; + font-size: 11px; + line-height: 1.5; + font-family: var(--font-mono); + letter-spacing: 0.3px; + user-select: none; + -webkit-user-select: none; + } -.mini-panel-content { - padding: 0; - font-size: 11px; - line-height: 1.5; - font-family: var(--font-mono); - letter-spacing: 0.3px; - user-select: none; - -webkit-user-select: none; -} + .mini-panel-content .profiler-content { + display: block !important; + background: transparent; + } -.mini-panel-content .profiler-content { - display: block !important; - background: transparent; -} + .mini-panel-content .list-scroll-wrapper { + max-height: calc(100vh - 120px); + overflow-y: auto; + overflow-x: hidden; + width: 100%; + } -.mini-panel-content .list-scroll-wrapper { - max-height: calc(100vh - 120px); - overflow-y: auto; - overflow-x: hidden; - width: 100%; -} + .mini-panel-content .list-scroll-wrapper::-webkit-scrollbar { + width: 4px; + } -.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar { - width: 4px; -} + .mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-track { + background: transparent; + } -.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-track { - background: transparent; -} + .mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + } -.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.1); - border-radius: 2px; -} + .mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.2); + } -.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.2); -} + .mini-panel-content .parameters { + background: transparent; + border: none; + box-shadow: none; + padding: 4px; + } -.mini-panel-content .parameters { - background: transparent; - border: none; - box-shadow: none; - padding: 4px; -} + .mini-panel-content .list-container.parameters { + padding: 2px 6px 0px 6px !important; + } -.mini-panel-content .list-container.parameters { - padding: 2px 6px 0px 6px !important; -} + .mini-panel-content .list-header { + display: none; + padding: 2px 4px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + } -.mini-panel-content .list-header { - display: none; - padding: 2px 4px; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} + .mini-panel-content .list-item { + border-bottom: 1px solid rgba(74, 74, 90, 0.2); + transition: background-color 0.15s; + } -.mini-panel-content .list-item { - border-bottom: 1px solid rgba(74, 74, 90, 0.2); - transition: background-color 0.15s; -} + .mini-panel-content .list-item:last-child { + border-bottom: none; + } -.mini-panel-content .list-item:last-child { - border-bottom: none; -} + .mini-panel-content .list-item:hover { + background-color: rgba(255, 255, 255, 0.04); + } -.mini-panel-content .list-item:hover { - background-color: rgba(255, 255, 255, 0.04); -} + .mini-panel-content .list-item.actionable:hover { + background-color: rgba(255, 255, 255, 0.06); + cursor: pointer; + } -.mini-panel-content .list-item.actionable:hover { - background-color: rgba(255, 255, 255, 0.06); - cursor: pointer; -} + /* Style adjustments for lil-gui look */ + .mini-panel-content .item-row { + padding: 3px 8px; + min-height: 24px; + } -/* Style adjustments for lil-gui look */ -.mini-panel-content .item-row { - padding: 3px 8px; - min-height: 24px; -} + .mini-panel-content .list-item-row { + padding: 1px 4px; + gap: 8px; + min-height: 21px; + align-items: center; + } -.mini-panel-content .list-item-row { - padding: 1px 4px; - gap: 8px; - min-height: 21px; - align-items: center; -} + .mini-panel-content input[type="checkbox"] { + width: 12px; + height: 12px; + } -.mini-panel-content input[type="checkbox"] { - width: 12px; - height: 12px; -} + .mini-panel-content input[type="range"] { + height: 18px; + } -.mini-panel-content input[type="range"] { - height: 18px; -} + .mini-panel-content .value-number input, + .mini-panel-content .value-slider input { + background-color: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(74, 74, 90, 0.5); + font-size: 10px; + } -.mini-panel-content .value-number input, -.mini-panel-content .value-slider input { - background-color: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(74, 74, 90, 0.5); - font-size: 10px; -} + .mini-panel-content .value-number input:focus, + .mini-panel-content .value-slider input:focus { + border-color: var(--color-accent); + } -.mini-panel-content .value-number input:focus, -.mini-panel-content .value-slider input:focus { - border-color: var(--accent-color); -} + .mini-panel-content .value-slider { + gap: 6px; + } -.mini-panel-content .value-slider { - gap: 6px; -} + /* Compact nested items */ + .mini-panel-content .list-item .list-item { + margin-left: 8px; + } -/* Compact nested items */ -.mini-panel-content .list-item .list-item { - margin-left: 8px; -} + .mini-panel-content .list-item .list-item .item-row, + .mini-panel-content .list-item .list-item .list-item-row { + padding: 2px 6px; + min-height: 22px; + } -.mini-panel-content .list-item .list-item .item-row, -.mini-panel-content .list-item .list-item .list-item-row { - padding: 2px 6px; - min-height: 22px; -} + /* Compact collapsible headers */ + .mini-panel-content .collapsible .item-row, + .mini-panel-content .list-item-row.collapsible { + padding: 2px 8px; + font-weight: 600; + min-height: 16px; + display: flex; + align-items: center; + } -/* Compact collapsible headers */ -.mini-panel-content .collapsible .item-row, -.mini-panel-content .list-item-row.collapsible { - padding: 2px 8px; - font-weight: 600; - min-height: 16px; - display: flex; - align-items: center; -} + .mini-panel-content .collapsible-icon { + font-size: 10px; + width: 14px; + height: 14px; + } -.mini-panel-content .collapsible-icon { - font-size: 10px; - width: 14px; - height: 14px; -} + .mini-panel-content .param-control input[type="range"] { + height: 12px; + margin-top: 1px; + padding-top: 5px; + user-select: none; + -webkit-user-select: none; + outline: none; + } -.mini-panel-content .param-control input[type="range"] { - height: 12px; - margin-top: 1px; - padding-top: 5px; - user-select: none; - -webkit-user-select: none; - outline: none; -} + .mini-panel-content .param-control input[type="range"]::-webkit-slider-thumb { + width: 14px; + height: 14px; + margin-top: -5px; + user-select: none; + -webkit-user-select: none; + } -.mini-panel-content .param-control input[type="range"]::-webkit-slider-thumb { - width: 14px; - height: 14px; - margin-top: -5px; - user-select: none; - -webkit-user-select: none; -} + .mini-panel-content .param-control input[type="range"]::-moz-range-thumb { + width: 14px; + height: 14px; + user-select: none; + -moz-user-select: none; + } -.mini-panel-content .param-control input[type="range"]::-moz-range-thumb { - width: 14px; - height: 14px; - user-select: none; - -moz-user-select: none; -} + .mini-panel-content .list-children-container { + padding-left: 0; + } -.mini-panel-content .list-children-container { - padding-left: 0; -} + .mini-panel-content .param-control input[type="number"] { + flex-basis: 60px !important; + } -.mini-panel-content .param-control input[type="number"] { - flex-basis: 60px !important; -} + .mini-panel-content .param-control { + align-items: center; + } -.mini-panel-content .param-control { - align-items: center; -} + .mini-panel-content .param-control select { + font-size: 11px; + } -.mini-panel-content .param-control select { - font-size: 11px; -} + .mini-panel-content .list-item-wrapper { + margin-top: 0; + margin-bottom: 0; + } -.mini-panel-content .list-item-wrapper { - margin-top: 0; - margin-bottom: 0; -} + .profiler-panel { + position: fixed; + z-index: 1001 !important; + bottom: 0; + left: 0; + right: 0; + height: 350px; + background-color: var(--profiler-background); + backdrop-filter: blur(8px); + border-top: 2px solid var(--profiler-border); + color: var(--text-primary); + display: flex; + flex-direction: column; + z-index: 1000; + /*box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);*/ + transform: translateY(100%); + transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s ease-out, width 0.3s ease-out; + font-family: var(--font-mono); + } -#profiler-panel { - position: fixed; - z-index: 1001 !important; - bottom: 0; - left: 0; - right: 0; - height: 350px; - background-color: var(--profiler-bg); - backdrop-filter: blur(8px); - border-top: 2px solid var(--profiler-border); - color: var(--text-primary); - display: flex; - flex-direction: column; - z-index: 1000; - /*box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);*/ - transform: translateY(100%); - transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s ease-out, width 0.3s ease-out; - font-family: var(--font-mono); -} + .profiler-panel.resizing, + .profiler-panel.dragging { + transition: none; + } -#profiler-panel.resizing, -#profiler-panel.dragging { - transition: none; -} + .profiler-panel.visible { + transform: translateY(0); + } -#profiler-panel.visible { - transform: translateY(0); -} + .profiler-panel.maximized { + height: 100vh; + } -#profiler-panel.maximized { - height: 100vh; -} + /* Position-specific styles */ + .profiler-panel.position-top { + bottom: auto; + top: 0; + border-top: none; + border-bottom: 2px solid var(--profiler-border); + transform: translateY(-100%); + } -/* Position-specific styles */ -#profiler-panel.position-top { - bottom: auto; - top: 0; - border-top: none; - border-bottom: 2px solid var(--profiler-border); - transform: translateY(-100%); -} + .profiler-panel.position-top.visible { + transform: translateY(0); + } -#profiler-panel.position-top.visible { - transform: translateY(0); -} + .profiler-panel.position-bottom { + /* Default position - already defined above */ + } -#profiler-panel.position-bottom { - /* Default position - already defined above */ -} + .profiler-panel.position-left { + top: 0; + bottom: 0; + left: 0; + right: auto; + width: 350px; + height: 100%; + border-top: none; + border-right: 2px solid var(--profiler-border); + transform: translateX(-100%); + } -#profiler-panel.position-left { - top: 0; - bottom: 0; - left: 0; - right: auto; - width: 350px; - height: 100%; - border-top: none; - border-right: 2px solid var(--profiler-border); - transform: translateX(-100%); -} + .profiler-panel.position-left.visible { + transform: translateX(0); + } -#profiler-panel.position-left.visible { - transform: translateX(0); -} + .profiler-panel.position-right { + top: 0; + bottom: 0; + left: auto; + right: 0; + width: 350px; + height: 100%; + border-top: none; + border-left: 2px solid var(--profiler-border); + transform: translateX(100%); + } -#profiler-panel.position-right { - top: 0; - bottom: 0; - left: auto; - right: 0; - width: 350px; - height: 100%; - border-top: none; - border-left: 2px solid var(--profiler-border); - transform: translateX(100%); -} + .profiler-panel.position-right.visible { + transform: translateX(0); + } -#profiler-panel.position-right.visible { - transform: translateX(0); -} + .profiler-panel.position-floating { + border: 2px solid var(--profiler-border); + border-radius: 8px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); + transform: none !important; + overflow: hidden; + } -#profiler-panel.position-floating { - border: 2px solid var(--profiler-border); - border-radius: 8px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); - transform: none !important; - overflow: hidden; -} + .profiler-panel.position-floating.visible { + transform: none !important; + } -#profiler-panel.position-floating.visible { - transform: none !important; -} + .profiler-panel.position-floating .profiler-header { + border-radius: 6px 6px 0 0; + } -#profiler-panel.position-floating .profiler-header { - border-radius: 6px 6px 0 0; -} + .profiler-panel.position-floating .panel-resizer { + bottom: 0; + right: 0; + top: auto; + left: auto; + width: 16px; + height: 16px; + cursor: nwse-resize; + border-radius: 0 0 6px 0; + } -#profiler-panel.position-floating .panel-resizer { - bottom: 0; - right: 0; - top: auto; - left: auto; - width: 16px; - height: 16px; - cursor: nwse-resize; - border-radius: 0 0 6px 0; -} + .profiler-panel.position-floating .panel-resizer::after { + content: ''; + position: absolute; + right: 2px; + bottom: 2px; + width: 10px; + height: 10px; + background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--profiler-border) 45%, var(--profiler-border) 55%, transparent 55%); + } -#profiler-panel.position-floating .panel-resizer::after { - content: ''; - position: absolute; - right: 2px; - bottom: 2px; - width: 10px; - height: 10px; - background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--profiler-border) 45%, var(--profiler-border) 55%, transparent 55%); -} + .panel-resizer { + position: absolute; + top: -2px; + left: 0; + width: 100%; + height: 5px; + cursor: ns-resize; + z-index: 1001; + touch-action: none; + } -.panel-resizer { - position: absolute; - top: -2px; - left: 0; - width: 100%; - height: 5px; - cursor: ns-resize; - z-index: 1001; - touch-action: none; -} + .profiler-panel.position-top .panel-resizer { + top: auto; + bottom: -2px; + } -#profiler-panel.position-top .panel-resizer { - top: auto; - bottom: -2px; -} + .profiler-panel.position-left .panel-resizer { + top: 0; + left: auto; + right: -2px; + width: 5px; + height: 100%; + cursor: ew-resize; + } -#profiler-panel.position-left .panel-resizer { - top: 0; - left: auto; - right: -2px; - width: 5px; - height: 100%; - cursor: ew-resize; -} + .profiler-panel.position-right .panel-resizer { + top: 0; + left: -2px; + right: auto; + width: 5px; + height: 100%; + cursor: ew-resize; + } -#profiler-panel.position-right .panel-resizer { - top: 0; - left: -2px; - right: auto; - width: 5px; - height: 100%; - cursor: ew-resize; -} + .profiler-header { + display: flex; + background-color: var(--profiler-header-background); + border-bottom: 1px solid var(--profiler-border); + flex-shrink: 0; + justify-content: space-between; + align-items: stretch; + + overflow-x: auto; + overflow-y: hidden; + width: calc(100% - 134px); + height: 38px; + user-select: none; + -webkit-user-select: none; + } -.profiler-header { - display: flex; - background-color: var(--profiler-header-bg); - border-bottom: 1px solid var(--profiler-border); - flex-shrink: 0; - justify-content: space-between; - align-items: stretch; - - overflow-x: auto; - overflow-y: hidden; - width: calc(100% - 134px); - height: 38px; - user-select: none; - -webkit-user-select: none; -} + /* Adjust header width based on panel position */ + .profiler-panel.position-right .profiler-header, + .profiler-panel.position-left .profiler-header { + width: calc(100% - 134px); + } -/* Adjust header width based on panel position */ -#profiler-panel.position-right .profiler-header, -#profiler-panel.position-left .profiler-header { - width: calc(100% - 134px); -} + .profiler-panel.position-bottom .profiler-header, + .profiler-panel.position-top .profiler-header { + width: calc(100% - 134px); + } -#profiler-panel.position-bottom .profiler-header, -#profiler-panel.position-top .profiler-header { - width: calc(100% - 134px); -} + /* Adjust header width when position toggle button is hidden (mobile) */ + .profiler-panel.hide-position-toggle .profiler-header { + width: calc(100% - 90px); + } -/* Adjust header width when position toggle button is hidden (mobile) */ -#profiler-panel.hide-position-toggle .profiler-header { - width: calc(100% - 90px); -} + /* ===== RULES FOR WHEN THERE ARE NO TABS ===== */ -/* ===== RULES FOR WHEN THERE ARE NO TABS ===== */ + /* Horizontal mode (bottom/top) without tabs */ + .profiler-panel.position-bottom.no-tabs:not(.maximized), + .profiler-panel.position-top.no-tabs:not(.maximized) { + height: 38px !important; + min-height: 38px !important; + } -/* Horizontal mode (bottom/top) without tabs */ -#profiler-panel.position-bottom.no-tabs:not(.maximized), -#profiler-panel.position-top.no-tabs:not(.maximized) { - height: 38px !important; - min-height: 38px !important; -} + .profiler-panel.position-bottom.no-tabs .profiler-header, + .profiler-panel.position-top.no-tabs .profiler-header { + width: 100%; + height: 38px; + border-bottom: none; + } -#profiler-panel.position-bottom.no-tabs .profiler-header, -#profiler-panel.position-top.no-tabs .profiler-header { - width: 100%; - height: 38px; - border-bottom: none; -} + .profiler-panel.position-bottom.no-tabs .profiler-content-wrapper, + .profiler-panel.position-top.no-tabs .profiler-content-wrapper { + display: none; + } -#profiler-panel.position-bottom.no-tabs .profiler-content-wrapper, -#profiler-panel.position-top.no-tabs .profiler-content-wrapper { - display: none; -} + .profiler-panel.position-bottom.no-tabs .panel-resizer, + .profiler-panel.position-top.no-tabs .panel-resizer { + display: none; + } -#profiler-panel.position-bottom.no-tabs .panel-resizer, -#profiler-panel.position-top.no-tabs .panel-resizer { - display: none; -} + /* Vertical mode (right/left) without tabs */ + .profiler-panel.position-right.no-tabs:not(.maximized), + .profiler-panel.position-left.no-tabs:not(.maximized) { + width: 45px !important; + min-width: 45px !important; + } -/* Vertical mode (right/left) without tabs */ -#profiler-panel.position-right.no-tabs:not(.maximized), -#profiler-panel.position-left.no-tabs:not(.maximized) { - width: 45px !important; - min-width: 45px !important; -} + /* Vertical layout for header when no tabs */ + .profiler-panel.position-right.no-tabs .profiler-header, + .profiler-panel.position-left.no-tabs .profiler-header { + width: 100%; + flex-direction: column; + height: 100%; + border-bottom: none; + } -/* Vertical layout for header when no tabs */ -#profiler-panel.position-right.no-tabs .profiler-header, -#profiler-panel.position-left.no-tabs .profiler-header { - width: 100%; - flex-direction: column; - height: 100%; - border-bottom: none; -} + /* Vertical layout for controls when no tabs */ + .profiler-panel.position-right.no-tabs .profiler-controls, + .profiler-panel.position-left.no-tabs .profiler-controls { + position: static; + flex-direction: column-reverse; + justify-content: flex-end; + width: 100%; + height: 100%; + border-bottom: none; + border-left: none; + background: transparent; + } -/* Vertical layout for controls when no tabs */ -#profiler-panel.position-right.no-tabs .profiler-controls, -#profiler-panel.position-left.no-tabs .profiler-controls { - position: static; - flex-direction: column-reverse; - justify-content: flex-end; - width: 100%; - height: 100%; - border-bottom: none; - border-left: none; - background: transparent; -} + .profiler-panel.position-right.no-tabs .profiler-controls button, + .profiler-panel.position-left.no-tabs .profiler-controls button { + width: 100%; + height: 45px; + border-left: none; + border-top: none; + border-bottom: 1px solid var(--profiler-border); + } -#profiler-panel.position-right.no-tabs .profiler-controls button, -#profiler-panel.position-left.no-tabs .profiler-controls button { - width: 100%; - height: 45px; - border-left: none; - border-top: none; - border-bottom: 1px solid var(--profiler-border); -} + .profiler-panel.position-right.no-tabs .profiler-content-wrapper, + .profiler-panel.position-left.no-tabs .profiler-content-wrapper { + display: none; + } -#profiler-panel.position-right.no-tabs .profiler-content-wrapper, -#profiler-panel.position-left.no-tabs .profiler-content-wrapper { - display: none; -} + .profiler-panel.position-right.no-tabs .profiler-tabs, + .profiler-panel.position-left.no-tabs .profiler-tabs { + display: none; + } -#profiler-panel.position-right.no-tabs .profiler-tabs, -#profiler-panel.position-left.no-tabs .profiler-tabs { - display: none; -} + .profiler-panel.position-right.no-tabs .panel-resizer, + .profiler-panel.position-left.no-tabs .panel-resizer { + display: none; + } -#profiler-panel.position-right.no-tabs .panel-resizer, -#profiler-panel.position-left.no-tabs .panel-resizer { - display: none; -} + /* Hide position toggle on mobile without tabs */ + .profiler-panel.hide-position-toggle.position-right.no-tabs:not(.maximized), + .profiler-panel.hide-position-toggle.position-left.no-tabs:not(.maximized) { + width: 45px !important; + min-width: 45px !important; + } -/* Hide position toggle on mobile without tabs */ -#profiler-panel.hide-position-toggle.position-right.no-tabs:not(.maximized), -#profiler-panel.hide-position-toggle.position-left.no-tabs:not(.maximized) { - width: 45px !important; - min-width: 45px !important; -} + /* Hide drag indicator on mobile devices */ + .profiler-panel.is-mobile .tab-btn.active::before { + display: none; + } -/* Hide drag indicator on mobile devices */ -#profiler-panel.is-mobile .tab-btn.active::before { - display: none; -} + .profiler-header::-webkit-scrollbar { + width: 8px; + height: 8px; + } -.profiler-header::-webkit-scrollbar { - width: 8px; - height: 8px; -} + .profiler-header::-webkit-scrollbar-track { + background: transparent; + } -.profiler-header::-webkit-scrollbar-track { - background: transparent; -} + .profiler-header::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.25); + border-radius: 10px; + transition: background 0.3s ease; + } -.profiler-header::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.25); - border-radius: 10px; - transition: background 0.3s ease; -} + .profiler-header::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.4); + } -.profiler-header::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.4); -} + .profiler-header::-webkit-scrollbar-corner { + background: transparent; + } -.profiler-header::-webkit-scrollbar-corner { - background: transparent; -} + .profiler-panel.dragging .profiler-header { + cursor: grabbing !important; + } -#profiler-panel.dragging .profiler-header { - cursor: grabbing !important; -} + .profiler-panel.dragging { + opacity: 0.8; + } -#profiler-panel.dragging { - opacity: 0.8; -} + .profiler-tabs { + display: flex; + cursor: grab; + position: relative; + } -.profiler-tabs { - display: flex; - cursor: grab; - position: relative; -} + .profiler-tabs:active { + cursor: grabbing; + } -.profiler-tabs:active { - cursor: grabbing; -} + .profiler-tabs::-webkit-scrollbar { + width: 8px; + height: 8px; + } -.profiler-tabs::-webkit-scrollbar { - width: 8px; - height: 8px; -} + .profiler-tabs::-webkit-scrollbar-track { + background: transparent; + } -.profiler-tabs::-webkit-scrollbar-track { - background: transparent; -} + .profiler-tabs::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.25); + border-radius: 10px; + transition: background 0.3s ease; + } -.profiler-tabs::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.25); - border-radius: 10px; - transition: background 0.3s ease; -} + .profiler-tabs::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.4); + } -.profiler-tabs::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.4); -} + .profiler-tabs::-webkit-scrollbar-corner { + background: transparent; + } -.profiler-tabs::-webkit-scrollbar-corner { - background: transparent; -} + .profiler-controls { + display: flex; + position: absolute; + right: 0; + top: 0; + height: 38px; + background: var(--profiler-header-background); + border-bottom: 1px solid var(--profiler-border); + } -.profiler-controls { - display: flex; - position: absolute; - right: 0; - top: 0; - height: 38px; - background: var(--profiler-header-bg); - border-bottom: 1px solid var(--profiler-border); -} + .tab-btn { + position: relative; + background: transparent; + border: none; + /*border-right: 1px solid var(--profiler-border);*/ + color: var(--text-secondary); + padding: 8px 18px; + cursor: default; + display: flex; + align-items: center; + font-family: var(--font-family); + font-weight: 600; + font-size: 14px; + user-select: none; + transition: opacity 0.2s, transform 0.2s; + touch-action: pan-x; + white-space: nowrap; + } -.tab-btn { - position: relative; - background: transparent; - border: none; - /*border-right: 1px solid var(--profiler-border);*/ - color: var(--text-secondary); - padding: 8px 18px; - cursor: default; - display: flex; - align-items: center; - font-family: var(--font-family); - font-weight: 600; - font-size: 14px; - user-select: none; - transition: opacity 0.2s, transform 0.2s; - touch-action: pan-x; -} + .tab-btn.active { + border-bottom: 2px solid var(--color-accent); + color: white; + } -.tab-btn.active { - border-bottom: 2px solid var(--accent-color); - color: white; -} + .tab-btn.active::before { + content: '⋮⋮'; + position: absolute; + left: 3px; + top: calc(50% - .1rem); + transform: translateY(-50%); + color: var(--profiler-border); + font-size: 18px; + letter-spacing: -2px; + opacity: 0.6; + } -.tab-btn.active::before { - content: '⋮⋮'; - position: absolute; - left: 3px; - top: calc(50% - .1rem); - transform: translateY(-50%); - color: var(--profiler-border); - font-size: 18px; - letter-spacing: -2px; - opacity: 0.6; -} + .tab-btn.no-detach.active::before { + display: none; + } -.tab-btn.no-detach.active::before { - display: none; -} + .floating-btn, + .maximize-btn, + .hide-panel-btn { + background: transparent; + border: none; + border-left: 1px solid var(--profiler-border); + color: var(--text-secondary); + width: 45px; + height: 100%; + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } -#floating-btn, -#maximize-btn, -#hide-panel-btn { - background: transparent; - border: none; - border-left: 1px solid var(--profiler-border); - color: var(--text-secondary); - width: 45px; - height: 100%; - cursor: pointer; - transition: all 0.2s; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} + /* Disable transitions in vertical mode to avoid broken animations */ + .profiler-panel.position-right .floating-btn, + .profiler-panel.position-right .maximize-btn, + .profiler-panel.position-right .hide-panel-btn, + .profiler-panel.position-left .floating-btn, + .profiler-panel.position-left .maximize-btn, + .profiler-panel.position-left .hide-panel-btn { + transition: background-color 0.2s, color 0.2s; + } -/* Disable transitions in vertical mode to avoid broken animations */ -#profiler-panel.position-right #floating-btn, -#profiler-panel.position-right #maximize-btn, -#profiler-panel.position-right #hide-panel-btn, -#profiler-panel.position-left #floating-btn, -#profiler-panel.position-left #maximize-btn, -#profiler-panel.position-left #hide-panel-btn { - transition: background-color 0.2s, color 0.2s; -} + .floating-btn:hover, + .maximize-btn:hover, + .hide-panel-btn:hover { + background-color: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + } -#floating-btn:hover, -#maximize-btn:hover, -#hide-panel-btn:hover { - background-color: rgba(255, 255, 255, 0.1); - color: var(--text-primary); -} + /* Hide maximize button when there are no tabs */ + .profiler-panel.position-right.no-tabs .maximize-btn, + .profiler-panel.position-left.no-tabs .maximize-btn, + .profiler-panel.position-bottom.no-tabs .maximize-btn, + .profiler-panel.position-top.no-tabs .maximize-btn { + display: none !important; + } -/* Hide maximize button when there are no tabs */ -#profiler-panel.position-right.no-tabs #maximize-btn, -#profiler-panel.position-left.no-tabs #maximize-btn, -#profiler-panel.position-bottom.no-tabs #maximize-btn, -#profiler-panel.position-top.no-tabs #maximize-btn { - display: none !important; -} + .profiler-content-wrapper { + flex-grow: 1; + overflow: hidden; + position: relative; + } -.profiler-content-wrapper { - flex-grow: 1; - overflow: hidden; - position: relative; -} + .profiler-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-y: auto; + font-size: 13px; + visibility: hidden; + opacity: 0; + transition: opacity 0.2s, visibility 0.2s; + box-sizing: border-box; + display: flex; + flex-direction: column; + user-select: none; + -webkit-user-select: none; + } -.profiler-content { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow-y: auto; - font-size: 13px; - visibility: hidden; - opacity: 0; - transition: opacity 0.2s, visibility 0.2s; - box-sizing: border-box; - display: flex; - flex-direction: column; - user-select: none; - -webkit-user-select: none; -} + .profiler-content.active { + visibility: visible; + opacity: 1; + } -.profiler-content.active { - visibility: visible; - opacity: 1; -} + .profiler-content { + overflow: auto; /* make sure scrollbars can appear */ + } -.profiler-content { - overflow: auto; /* make sure scrollbars can appear */ -} + .profiler-content::-webkit-scrollbar { + width: 8px; + height: 8px; + } -.profiler-content::-webkit-scrollbar { - width: 8px; - height: 8px; -} + .profiler-content::-webkit-scrollbar-track { + background: transparent; + } -.profiler-content::-webkit-scrollbar-track { - background: transparent; -} + .profiler-content::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.25); + border-radius: 10px; + transition: background 0.3s ease; + } -.profiler-content::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.25); - border-radius: 10px; - transition: background 0.3s ease; -} + .profiler-content::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.4); + } -.profiler-content::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.4); -} + .profiler-content::-webkit-scrollbar-corner { + background: transparent; + } -.profiler-content::-webkit-scrollbar-corner { - background: transparent; -} + .profiler-content { + scrollbar-width: thin; /* "auto" | "thin" */ + scrollbar-color: rgba(0, 0, 0, 0.25) transparent; + } -.profiler-content { - scrollbar-width: thin; /* "auto" | "thin" */ - scrollbar-color: rgba(0, 0, 0, 0.25) transparent; -} + .list-item-row { + display: grid; + align-items: center; + padding: 4px 8px; + border-radius: 3px; + transition: background-color 0.2s; + gap: 10px; + border-bottom: none; + user-select: none; + -webkit-user-select: none; + } -.list-item-row { - display: grid; - align-items: center; - padding: 4px 8px; - border-radius: 3px; - transition: background-color 0.2s; - gap: 10px; - border-bottom: none; - user-select: none; - -webkit-user-select: none; -} + .parameters .list-item-row { + min-height: 31px; + } -.parameters .list-item-row { - min-height: 31px; -} + .mini-panel-content .parameters .list-item-row { + min-height: 21px; + } -.mini-panel-content .parameters .list-item-row { - min-height: 21px; -} + .list-item-wrapper { + margin-top: 2px; + margin-bottom: 2px; + user-select: none; + -webkit-user-select: none; + } -.list-item-wrapper { - margin-top: 2px; - margin-bottom: 2px; - user-select: none; - -webkit-user-select: none; -} + .list-item-wrapper:first-child { + /*margin-top: 0;*/ + } -.list-item-wrapper:first-child { - /*margin-top: 0;*/ -} + .list-item-wrapper:not(.header-wrapper):nth-child(odd) > .list-item-row { + background-color: rgba(0,0,0,0.1); + } -.list-item-wrapper:not(.header-wrapper):nth-child(odd) > .list-item-row { - background-color: rgba(0,0,0,0.1); -} + .list-item-wrapper.header-wrapper>.list-item-row { + color: var(--color-accent); + background-color: rgba(0, 170, 255, 0.1); + } -.list-item-wrapper.header-wrapper>.list-item-row { - color: var(--accent-color); - background-color: rgba(0, 170, 255, 0.1); -} + .list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child { + font-weight: 600; + line-height: 1; + } -.list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child { - font-weight: 600; - line-height: 1; -} + .list-item-row.collapsible, + .list-item-row.actionable { + cursor: pointer; + } -.list-item-row.collapsible, -.list-item-row.actionable { - cursor: pointer; -} + .list-item-row.collapsible { + background-color: rgba(0, 170, 255, 0.15) !important; + min-height: 23px; + } -.list-item-row.collapsible { - background-color: rgba(0, 170, 255, 0.15) !important; - min-height: 23px; -} + .list-item-row.collapsible.alert, + .list-item-row.alert { + background-color: rgba(244, 67, 54, 0.1) !important; + } -.list-item-row.collapsible.alert, -.list-item-row.alert { - background-color: rgba(244, 67, 54, 0.1) !important; -} + @media (hover: hover) { -@media (hover: hover) { + .list-item-row:hover:not(.collapsible):not(.no-hover), + .list-item-row:hover:not(.no-hover), + .list-item-row.actionable:hover, + .list-item-row.collapsible.actionable:hover { + background-color: rgba(255, 255, 255, 0.05) !important; + } - .list-item-row:hover:not(.collapsible):not(.no-hover), - .list-item-row:hover:not(.no-hover), - .list-item-row.actionable:hover, - .list-item-row.collapsible.actionable:hover { - background-color: rgba(255, 255, 255, 0.05) !important; - } + .list-item-row.collapsible:hover { + background-color: rgba(0, 170, 255, 0.25) !important; + } - .list-item-row.collapsible:hover { - background-color: rgba(0, 170, 255, 0.25) !important; } -} + .list-item-cell { + white-space: pre; + display: flex; + align-items: center; + user-select: none; + -webkit-user-select: none; + } -.list-item-cell { - white-space: pre; - display: flex; - align-items: center; - user-select: none; - -webkit-user-select: none; -} + .list-item-cell:not(:first-child) { + justify-content: flex-end; + font-weight: 600; + } -.list-item-cell:not(:first-child) { - justify-content: flex-end; - font-weight: 600; -} + .list-header { + display: grid; + align-items: center; + padding: 4px 8px; + font-weight: 600; + color: var(--text-secondary); + padding-bottom: 6px; + border-bottom: 1px solid var(--profiler-border); + margin-bottom: 5px; + gap: 10px; + user-select: none; + -webkit-user-select: none; + } -.list-header { - display: grid; - align-items: center; - padding: 4px 8px; - font-weight: 600; - color: var(--text-secondary); - padding-bottom: 6px; - border-bottom: 1px solid var(--profiler-border); - margin-bottom: 5px; - gap: 10px; - user-select: none; - -webkit-user-select: none; -} + .list-item-wrapper.section-start { + margin-top: 5px; + margin-bottom: 5px; + } -.list-item-wrapper.section-start { - margin-top: 5px; - margin-bottom: 5px; -} + .list-header .list-header-cell:not(:first-child) { + text-align: right; + } -.list-header .list-header-cell:not(:first-child) { - text-align: right; -} + .list-children-container { + padding-left: 1.5em; + overflow: hidden; + transition: max-height 0.1s ease-out; + margin-top: 2px; + } -.list-children-container { - padding-left: 1.5em; - overflow: hidden; - transition: max-height 0.1s ease-out; - margin-top: 2px; -} + .list-children-container.closed { + max-height: 0; + } -.list-children-container.closed { - max-height: 0; -} + .item-toggler { + display: inline-block; + margin-right: 0.8em; + text-align: left; + } -.item-toggler { - display: inline-block; - margin-right: 0.8em; - text-align: left; -} + .list-item-row.open .item-toggler::before { + content: '-'; + } -.list-item-row.open .item-toggler::before { - content: '-'; -} + .list-item-row:not(.open) .item-toggler::before { + content: '+'; + } -.list-item-row:not(.open) .item-toggler::before { - content: '+'; -} + .list-item-cell .value.good { + color: var(--color-green); + } -.list-item-cell .value.good { - color: var(--color-green); -} + .list-item-cell .value.warn { + color: var(--color-yellow); + } -.list-item-cell .value.warn { - color: var(--color-yellow); -} + .list-item-cell .value.bad { + color: var(--color-red); + } -.list-item-cell .value.bad { - color: var(--color-red); -} + .list-scroll-wrapper { + width: max-content; + min-width: 100%; + display: flex; + flex-direction: column; + min-height: 100%; + } -.list-scroll-wrapper { - width: max-content; - min-width: 100%; - display: flex; - flex-direction: column; - min-height: 100%; -} + .list-container.parameters .list-item-row:not(.collapsible) { + } -.list-container.parameters .list-item-row:not(.collapsible) { -} + .graph-container { + width: 100%; + box-sizing: border-box; + padding: 8px 0; + position: relative; + } -.graph-container { - width: 100%; - box-sizing: border-box; - padding: 8px 0; - position: relative; -} + .graph-svg { + width: 100%; + height: 80px; + background-color: var(--profiler-header); + border: 1px solid var(--profiler-border); + border-radius: 4px; + } -.graph-svg { - width: 100%; - height: 80px; - background-color: var(--profiler-header); - border: 1px solid var(--profiler-border); - border-radius: 4px; -} + .graph-path { + stroke-width: 2; + fill-opacity: 0.4; + } -.graph-path { - stroke-width: 2; - fill-opacity: 0.4; -} + .console-header { + padding: 10px; + border-bottom: 1px solid var(--profiler-border); + display: flex; + gap: 20px; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + } -.console-header { - padding: 10px; - border-bottom: 1px solid var(--profiler-border); - display: flex; - gap: 20px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; -} + .console-buttons-group { + display: flex; + gap: 20px; + } -.console-buttons-group { - display: flex; - gap: 20px; -} + .console-filter-input { + background-color: var(--profiler-background); + border: 1px solid var(--profiler-border); + color: var(--text-primary); + border-radius: 4px; + padding: 4px 8px; + font-family: var(--font-mono); + flex-grow: 1; + max-width: 300px; + border-radius: 15px; + } -.console-filter-input { - background-color: var(--profiler-bg); - border: 1px solid var(--profiler-border); - color: var(--text-primary); - border-radius: 4px; - padding: 4px 8px; - font-family: var(--font-mono); - flex-grow: 1; - max-width: 300px; - border-radius: 15px; -} + .console-filter-input:focus { + outline: none; + border-color: var(--text-secondary); + } -.console-filter-input:focus { - outline: none; - border-color: var(--text-secondary); -} + .console-copy-button { + background: transparent; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 4px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + transition: color 0.2s, background-color 0.2s; + } -.console-copy-button { - background: transparent; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 4px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 4px; - transition: color 0.2s, background-color 0.2s; -} + .console-copy-button:hover { + color: var(--text-primary); + background-color: var(--profiler-hover); + } -.console-copy-button:hover { - color: var(--text-primary); - background-color: var(--profiler-hover); -} + .console-copy-button.copied { + color: var(--color-green); + } -.console-copy-button.copied { - color: var(--color-green); -} + .console-log { + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px; + overflow-y: auto; + flex-grow: 1; + user-select: text; + -webkit-user-select: text; + } -#console-log { - display: flex; - flex-direction: column; - gap: 4px; - padding: 10px; - overflow-y: auto; - flex-grow: 1; - user-select: text; - -webkit-user-select: text; -} + .log-message { + padding: 2px 5px; + white-space: pre-wrap; + word-break: break-all; + border-radius: 3px; + line-height: 1.5 !important; + } -.log-message { - padding: 2px 5px; - white-space: pre-wrap; - word-break: break-all; - border-radius: 3px; - line-height: 1.5 !important; -} + .log-message.hidden { + display: none; + } -.log-message.hidden { - display: none; -} + .log-message.info { + color: var(--text-primary); + } -.log-message.info { - color: var(--text-primary); -} + .log-message.warn { + color: var(--color-yellow); + } -.log-message.warn { - color: var(--color-yellow); -} + .log-message.error { + color: #f9dedc; + background-color: rgba(244, 67, 54, 0.1); + } -.log-message.error { - color: #f9dedc; - background-color: rgba(244, 67, 54, 0.1); -} + .log-prefix { + color: var(--text-secondary); + margin-right: 8px; + } -.log-prefix { - color: var(--text-secondary); - margin-right: 8px; -} + .log-code { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 3px; + padding: 1px 4px; + } -.log-code { - background-color: rgba(255, 255, 255, 0.1); - border-radius: 3px; - padding: 1px 4px; -} + .thumbnail-container { + display: flex; + align-items: center; + } -.thumbnail-container { - display: flex; - align-items: center; -} + .thumbnail-svg { + width: 40px; + height: 22.5px; + flex-shrink: 0; + margin-right: 8px; + } -.thumbnail-svg { - width: 40px; - height: 22.5px; - flex-shrink: 0; - margin-right: 8px; -} + .param-control { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + width: 100%; + } -.param-control { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 10px; - width: 100%; -} + .param-control input, + .param-control select, + .param-control button { + background-color: var(--profiler-background); + border: 1px solid var(--profiler-border); + color: var(--text-primary); + border-radius: 4px; + padding: 4px 6px; + padding-bottom: 2px; + font-family: var(--font-mono); + width: 100%; + box-sizing: border-box; + } -.param-control input, -.param-control select, -.param-control button { - background-color: var(--profiler-bg); - border: 1px solid var(--profiler-border); - color: var(--text-primary); - border-radius: 4px; - padding: 4px 6px; - padding-bottom: 2px; - font-family: var(--font-mono); - width: 100%; - box-sizing: border-box; -} + .param-control input:focus { + outline: none; + border-color: var(--color-accent); + } -.param-control input:focus { - outline: none; - border-color: var(--accent-color); -} + .param-control select { + padding-top: 3px; + padding-bottom: 1px; + } -.param-control select { - padding-top: 3px; - padding-bottom: 1px; -} + .param-control input[type="number"] { + cursor: ns-resize; + } -.param-control input[type="number"] { - cursor: ns-resize; -} + .param-control input[type="color"] { + padding: 2px; + } -.param-control input[type="color"] { - padding: 2px; -} + .param-control button { + cursor: pointer; + transition: background-color 0.2s; + } -.param-control button { - cursor: pointer; - transition: background-color 0.2s; -} + .param-control button:hover { + background-color: var(--profiler-header); + } -.param-control button:hover { - background-color: var(--profiler-header); -} + .param-control-vector { + display: flex; + gap: 5px; + } -.param-control-vector { - display: flex; - gap: 5px; -} + .custom-checkbox { + display: inline-flex; + align-items: center; + cursor: pointer; + gap: 8px; + will-change: transform; + } -.custom-checkbox { - display: inline-flex; - align-items: center; - cursor: pointer; - gap: 8px; - will-change: transform; -} + .custom-checkbox input { + display: none; + } -.custom-checkbox input { - display: none; -} + .custom-checkbox .checkmark { + width: 14px; + height: 14px; + border: 1px solid var(--color-accent); + border-radius: 3px; + display: inline-flex; + justify-content: center; + align-items: center; + transition: background-color 0.2s, border-color 0.2s; + } -.custom-checkbox .checkmark { - width: 14px; - height: 14px; - border: 1px solid var(--accent-color); - border-radius: 3px; - display: inline-flex; - justify-content: center; - align-items: center; - transition: background-color 0.2s, border-color 0.2s; -} + .custom-checkbox .checkmark::after { + content: ''; + width: 6px; + height: 6px; + background-color: var(--color-accent); + border-radius: 1px; + display: block; + transform: scale(0); + transition: transform 0.2s; + } -.custom-checkbox .checkmark::after { - content: ''; - width: 6px; - height: 6px; - background-color: var(--accent-color); - border-radius: 1px; - display: block; - transform: scale(0); - transition: transform 0.2s; -} + .custom-checkbox input:checked+.checkmark { + border-color: var(--color-accent); + } -.custom-checkbox input:checked+.checkmark { - border-color: var(--accent-color); -} + .custom-checkbox input:checked+.checkmark::after { + transform: scale(1); + } -.custom-checkbox input:checked+.checkmark::after { - transform: scale(1); -} + .param-control input[type="range"] { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 16px; + background: var(--profiler-header); + border-radius: 5px; + border: 1px solid var(--profiler-border); + outline: none; + padding: 0px; + padding-top: 8px; + } -.param-control input[type="range"] { - -webkit-appearance: none; - appearance: none; - width: 100%; - height: 16px; - background: var(--profiler-header); - border-radius: 5px; - border: 1px solid var(--profiler-border); - outline: none; - padding: 0px; - padding-top: 8px; -} + .param-control input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 18px; + height: 18px; + background: var(--profiler-background); + border: 1px solid var(--color-accent); + border-radius: 3px; + cursor: pointer; + margin-top: -8px; + } -.param-control input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 18px; - height: 18px; - background: var(--profiler-bg); - border: 1px solid var(--accent-color); - border-radius: 3px; - cursor: pointer; - margin-top: -8px; -} + .param-control input[type="range"]::-moz-range-thumb { + width: 18px; + height: 18px; + background: var(--profiler-background); + border: 2px solid var(--color-accent); + border-radius: 3px; + cursor: pointer; + } -.param-control input[type="range"]::-moz-range-thumb { - width: 18px; - height: 18px; - background: var(--profiler-bg); - border: 2px solid var(--accent-color); - border-radius: 3px; - cursor: pointer; -} + .param-control input[type="range"]::-moz-range-track { + width: 100%; + height: 16px; + background: var(--profiler-header); + border-radius: 5px; + border: 1px solid var(--profiler-border); + } -.param-control input[type="range"]::-moz-range-track { - width: 100%; - height: 16px; - background: var(--profiler-header); - border-radius: 5px; - border: 1px solid var(--profiler-border); -} + /* Override .param-control styles for mini-panel-content */ + .mini-panel-content input, + .mini-panel-content select, + .mini-panel-content button { + padding: 2px 4px; + height: 21px; + line-height: 1.4; + padding-top: 4px; + } -/* Override .param-control styles for mini-panel-content */ -.mini-panel-content input, -.mini-panel-content select, -.mini-panel-content button { - padding: 2px 4px; - height: 21px; - line-height: 1.4; - padding-top: 4px; -} + .mini-panel-content .param-control input, + .mini-panel-content .param-control select, + .mini-panel-content .param-control button { + background-color: #1e1e24c2; + line-height: 1.0; + } -.mini-panel-content .param-control input, -.mini-panel-content .param-control select, -.mini-panel-content .param-control button { - background-color: #1e1e24c2; - line-height: 1.0; -} + .mini-panel-content .param-control select { + padding: 2px 2px; + padding-top: 3px; + } -.mini-panel-content .param-control select { - padding: 2px 2px; - padding-top: 3px; -} + .mini-panel-content .param-control input[type="number"]::-webkit-outer-spin-button, + .mini-panel-content .param-control input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } -.mini-panel-content .param-control input[type="number"]::-webkit-outer-spin-button, -.mini-panel-content .param-control input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} + .mini-panel-content .param-control input[type="number"] { + -moz-appearance: textfield; + } -.mini-panel-content .param-control input[type="number"] { - -moz-appearance: textfield; -} + .mini-panel-content .list-item-cell span { + position: relative; + top: 1px; + margin-left: 2px; + } -.mini-panel-content .list-item-cell span { - position: relative; - top: 1px; - margin-left: 2px; -} + .mini-panel-content .custom-checkbox .checkmark { + width: 12px; + height: 12px; + margin-bottom: 2px; + will-change: transform; + } -.mini-panel-content .custom-checkbox .checkmark { - width: 12px; - height: 12px; - margin-bottom: 2px; - will-change: transform; -} + .mini-panel-content .list-container.parameters .list-item-row:not(.collapsible) { + margin-bottom: 2px; + } -.mini-panel-content .list-container.parameters .list-item-row:not(.collapsible) { - margin-bottom: 2px; -} + @media screen and (max-width: 450px) and (orientation: portrait) { -@media screen and (max-width: 450px) and (orientation: portrait) { + .console-filter-input { + max-width: 100px; + } - .console-filter-input { - max-width: 100px; } -} + /* Touch device optimizations */ + @media (hover: none) and (pointer: coarse) { + + .panel-resizer { + top: -10px !important; + height: 20px !important; + } + + .profiler-panel.position-top .panel-resizer { + top: auto !important; + bottom: -10px !important; + height: 20px !important; + } + + .profiler-panel.position-left .panel-resizer { + right: -10px !important; + width: 20px !important; + height: 100% !important; + } + + .profiler-panel.position-right .panel-resizer { + left: -10px !important; + width: 20px !important; + height: 100% !important; + } + + .detached-tab-resizer-top, + .detached-tab-resizer-bottom { + height: 10px !important; + } + + .detached-tab-resizer-left, + .detached-tab-resizer-right { + width: 10px !important; + } -/* Touch device optimizations */ -@media (hover: none) and (pointer: coarse) { - - .panel-resizer { - top: -10px !important; - height: 20px !important; } - #profiler-panel.position-top .panel-resizer { - top: auto !important; - bottom: -10px !important; - height: 20px !important; + .drag-preview-indicator { + position: fixed; + background-color: rgba(0, 170, 255, 0.2); + border: 2px dashed var(--color-accent); + z-index: 999; + pointer-events: none; + transition: all 0.2s ease-out; } - #profiler-panel.position-left .panel-resizer { - right: -10px !important; - width: 20px !important; - height: 100% !important; + /* Detached Tab Windows */ + .detached-tab-panel { + position: fixed; + width: 500px; + height: 400px; + background: var(--profiler-background); + border: 1px solid var(--profiler-border); + border-radius: 8px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + z-index: 1002; + display: flex; + flex-direction: column; + backdrop-filter: blur(10px); + overflow: hidden; + opacity: 1; + visibility: visible; + transition: opacity 0.2s, visibility 0.2s; } - #profiler-panel.position-right .panel-resizer { - left: -10px !important; - width: 20px !important; - height: 100% !important; + .profiler-panel:not(.visible) ~ * .detached-tab-panel, + body:has(.profiler-panel:not(.visible)) .detached-tab-panel { + opacity: 0; + visibility: hidden; + pointer-events: none; } - .detached-tab-resizer-top, - .detached-tab-resizer-bottom { - height: 10px !important; + .detached-tab-header { + background: var(--profiler-header-background); + padding: 0 7px 0 15px; + font-family: var(--font-family); + font-size: 14px; + color: var(--text-primary); + font-weight: 600; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--profiler-border); + cursor: grab; + user-select: none; + height: 38px; + flex-shrink: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + touch-action: none; } - .detached-tab-resizer-left, - .detached-tab-resizer-right { - width: 10px !important; + .detached-tab-header:active { + cursor: grabbing; } -} - -.drag-preview-indicator { - position: fixed; - background-color: rgba(0, 170, 255, 0.2); - border: 2px dashed var(--accent-color); - z-index: 999; - pointer-events: none; - transition: all 0.2s ease-out; -} - -/* Detached Tab Windows */ -.detached-tab-panel { - position: fixed; - width: 500px; - height: 400px; - background: var(--profiler-bg); - border: 1px solid var(--profiler-border); - border-radius: 8px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); - z-index: 1002; - display: flex; - flex-direction: column; - backdrop-filter: blur(10px); - overflow: hidden; - opacity: 1; - visibility: visible; - transition: opacity 0.2s, visibility 0.2s; -} - -#profiler-panel:not(.visible) ~ * .detached-tab-panel, -body:has(#profiler-panel:not(.visible)) .detached-tab-panel { - opacity: 0; - visibility: hidden; - pointer-events: none; -} - -.detached-tab-header { - background: var(--profiler-header-bg); - padding: 0 7px 0 15px; - font-family: var(--font-family); - font-size: 14px; - color: var(--text-primary); - font-weight: 600; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid var(--profiler-border); - cursor: grab; - user-select: none; - height: 38px; - flex-shrink: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - touch-action: none; -} - -.detached-tab-header:active { - cursor: grabbing; -} + .detached-header-controls { + display: flex; + gap: 5px; + } -.detached-header-controls { - display: flex; - gap: 5px; -} + .detached-reattach-btn { + background: transparent; + border: none; + color: var(--text-secondary); + font-family: var(--font-family); + font-size: 18px; + line-height: 1; + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } -.detached-reattach-btn { - background: transparent; - border: none; - color: var(--text-secondary); - font-family: var(--font-family); - font-size: 18px; - line-height: 1; - cursor: pointer; - padding: 4px 8px; - border-radius: 4px; - transition: all 0.2s; - display: flex; - align-items: center; - justify-content: center; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} + .detached-reattach-btn:hover { + background: rgba(0, 170, 255, 0.2); + color: var(--color-accent); + } -.detached-reattach-btn:hover { - background: rgba(0, 170, 255, 0.2); - color: var(--accent-color); -} + .detached-tab-content { + flex: 1; + overflow: auto; + position: relative; + background: var(--profiler-background); + } -.detached-tab-content { - flex: 1; - overflow: auto; - position: relative; - background: var(--profiler-bg); -} + .detached-tab-content::-webkit-scrollbar { + width: 8px; + height: 8px; + } -.detached-tab-content::-webkit-scrollbar { - width: 8px; - height: 8px; -} + .detached-tab-content::-webkit-scrollbar-track { + background: transparent; + } -.detached-tab-content::-webkit-scrollbar-track { - background: transparent; -} + .detached-tab-content::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.25); + border-radius: 10px; + transition: background 0.3s ease; + } -.detached-tab-content::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.25); - border-radius: 10px; - transition: background 0.3s ease; -} + .detached-tab-content::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.4); + } -.detached-tab-content::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.4); -} + .detached-tab-content::-webkit-scrollbar-corner { + background: transparent; + } -.detached-tab-content::-webkit-scrollbar-corner { - background: transparent; -} + .detached-tab-content .profiler-content { + display: block !important; + height: 100%; + visibility: visible !important; + opacity: 1 !important; + position: relative !important; + } -.detached-tab-content .profiler-content { - display: block !important; - height: 100%; - visibility: visible !important; - opacity: 1 !important; - position: relative !important; -} + .detached-tab-content .profiler-content > * { + font-family: var(--font-mono); + color: var(--text-primary); + } -.detached-tab-content .profiler-content > * { - font-family: var(--font-mono); - color: var(--text-primary); -} + .detached-tab-resizer { + position: absolute; + bottom: 0; + right: 0; + width: 20px; + height: 20px; + cursor: nwse-resize; + z-index: 10; + touch-action: none; + } -.detached-tab-resizer { - position: absolute; - bottom: 0; - right: 0; - width: 20px; - height: 20px; - cursor: nwse-resize; - z-index: 10; - touch-action: none; -} + .detached-tab-resizer::after { + content: ''; + position: absolute; + bottom: 2px; + right: 2px; + width: 12px; + height: 12px; + border-right: 2px solid var(--profiler-border); + border-bottom: 2px solid var(--profiler-border); + border-bottom-right-radius: 6px; + opacity: 0.5; + } -.detached-tab-resizer::after { - content: ''; - position: absolute; - bottom: 2px; - right: 2px; - width: 12px; - height: 12px; - border-right: 2px solid var(--profiler-border); - border-bottom: 2px solid var(--profiler-border); - border-bottom-right-radius: 6px; - opacity: 0.5; -} + .detached-tab-resizer:hover::after { + opacity: 1; + border-color: var(--color-accent); + } -.detached-tab-resizer:hover::after { - opacity: 1; - border-color: var(--accent-color); -} + /* Edge resizers */ + .detached-tab-resizer-top { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 5px; + cursor: ns-resize; + z-index: 10; + touch-action: none; + } -/* Edge resizers */ -.detached-tab-resizer-top { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 5px; - cursor: ns-resize; - z-index: 10; - touch-action: none; -} + .detached-tab-resizer-right { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 5px; + cursor: ew-resize; + z-index: 10; + touch-action: none; + } -.detached-tab-resizer-right { - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 5px; - cursor: ew-resize; - z-index: 10; - touch-action: none; -} + .detached-tab-resizer-bottom { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 5px; + cursor: ns-resize; + z-index: 10; + touch-action: none; + } -.detached-tab-resizer-bottom { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 5px; - cursor: ns-resize; - z-index: 10; - touch-action: none; -} + .detached-tab-resizer-left { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 5px; + cursor: ew-resize; + z-index: 10; + touch-action: none; + } -.detached-tab-resizer-left { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 5px; - cursor: ew-resize; - z-index: 10; - touch-action: none; -} + /* Input number spin buttons - hide arrows */ + /* Chrome, Safari, Edge, Opera */ + .profiler-panel input[type="number"]::-webkit-outer-spin-button, + .profiler-panel input[type="number"]::-webkit-inner-spin-button, + .detached-tab-content input[type="number"]::-webkit-outer-spin-button, + .detached-tab-content input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } -/* Input number spin buttons - hide arrows */ -/* Chrome, Safari, Edge, Opera */ -#profiler-panel input[type="number"]::-webkit-outer-spin-button, -#profiler-panel input[type="number"]::-webkit-inner-spin-button, -.detached-tab-content input[type="number"]::-webkit-outer-spin-button, -.detached-tab-content input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} + /* Firefox */ + .profiler-panel input[type="number"], + .detached-tab-content input[type="number"] { + -moz-appearance: textfield; + } -/* Firefox */ -#profiler-panel input[type="number"], -.detached-tab-content input[type="number"] { - -moz-appearance: textfield; -} + .panel-action-btn { + background: transparent; + color: var(--text-primary); + border: 1px solid var(--profiler-border); + border-radius: 4px; + padding: 6px 12px; + cursor: pointer; + font-family: var(--font-family); + font-size: 12px; + transition: background-color 0.2s; + display: flex; + align-items: center; + justify-content: center; + } -.panel-action-btn { - background: transparent; - color: var(--text-primary); - border: 1px solid var(--profiler-border); - border-radius: 4px; - padding: 6px 12px; - cursor: pointer; - font-family: var(--font-family); - font-size: 12px; - transition: background-color 0.2s; - display: flex; - align-items: center; - justify-content: center; -} + .panel-action-btn:hover { + background-color: rgba(255, 255, 255, 0.05); + } -.panel-action-btn:hover { - background-color: rgba(255, 255, 255, 0.05); } `; + const styleElement = document.createElement( 'style' ); - styleElement.id = 'profiler-styles'; styleElement.textContent = css; - document.head.appendChild( styleElement ); + + container.appendChild( styleElement ); } diff --git a/examples/jsm/inspector/ui/Tab.js b/examples/jsm/inspector/ui/Tab.js index 837d582ce11c93..4ed87d297abec0 100644 --- a/examples/jsm/inspector/ui/Tab.js +++ b/examples/jsm/inspector/ui/Tab.js @@ -31,13 +31,13 @@ export class Tab extends EventDispatcher { super(); - this.id = title.toLowerCase(); + this.id = title.toLowerCase().replace( /\s+/g, '-' ); this.button = document.createElement( 'button' ); this.button.className = 'tab-btn'; this.button.textContent = title; this.content = document.createElement( 'div' ); - this.content.id = `${this.id}-content`; + this.content.classList.add( `${this.id}-content` ); this.content.className = 'profiler-content'; this._isActive = false; diff --git a/examples/jsm/inspector/ui/utils.js b/examples/jsm/inspector/ui/utils.js index a33f0e3c77519d..53c3c450604df4 100644 --- a/examples/jsm/inspector/ui/utils.js +++ b/examples/jsm/inspector/ui/utils.js @@ -1,21 +1,17 @@ -export function createValueSpan( id = null ) { +export function createValueSpan() { const span = document.createElement( 'span' ); span.className = 'value'; - if ( id !== null ) span.id = id; - return span; } export function setText( element, text ) { - const el = element instanceof HTMLElement ? element : document.getElementById( element ); - - if ( el && el.textContent !== text ) { + if ( element && element.textContent !== text ) { - el.textContent = text; + element.textContent = text; } @@ -23,9 +19,7 @@ export function setText( element, text ) { export function getText( element ) { - const el = element instanceof HTMLElement ? element : document.getElementById( element ); - - return el ? el.textContent : null; + return element ? element.textContent : null; } diff --git a/test/e2e/clean-page.js b/test/e2e/clean-page.js index f29e8d2af38617..d4e4fe3bd4b26e 100644 --- a/test/e2e/clean-page.js +++ b/test/e2e/clean-page.js @@ -8,8 +8,7 @@ /* Remove gui and fonts */ const style = document.createElement( 'style' ); - style.type = 'text/css'; - style.innerHTML = '#info, #profiler-shell, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }'; + style.innerHTML = '#info, .three-inspector, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }'; document.querySelector( 'head' ).appendChild( style );