Inspector: Added scope for styles (#33456)

Author: sunag

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 );

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 );
 
 	}

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' );
 
 		//
 

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 = `
-<span id="builtin-tabs-container"></span>
-<span id="toggle-text">
-	<span id="fps-counter">-</span>
+<span class="builtin-tabs-container"></span>
+<span class="toggle-text">
+	<span class="fps-counter">-</span>
 	<span class="fps-label">FPS</span>
 </span>
-<span id="toggle-icon">
+<span class="toggle-icon">
 	<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M9 17h2" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>
 </span>
 `;
 		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 = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>';
 		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 = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
 		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 );