Inspector: Improve UX (#32197)

* improve ux

* Tab: allowDetach

* improve no-tabs ux

* update z-index when resized

* cleanup

* restore original indexes

Author: sunag

examples/jsm/inspector/Inspector.js

@@ -53,18 +53,22 @@ class Inspector extends RendererInspector {
 		const performance = new Performance();
 		profiler.addTab( performance );
 
-		const console = new Console();
-		profiler.addTab( console );
+		const consoleTab = new Console();
+		profiler.addTab( consoleTab );
 
-		profiler.setActiveTab( performance.id );
+		profiler.loadLayout();
 
-		//
+		if ( ! profiler.activeTabId ) {
+
+			profiler.setActiveTab( performance.id );
+
+		}
 
 		this.statsData = new Map();
 		this.canvasNodes = new Map();
 		this.profiler = profiler;
 		this.performance = performance;
-		this.console = console;
+		this.console = consoleTab;
 		this.parameters = parameters;
 		this.viewer = viewer;
 		this.once = {};
@@ -200,7 +204,12 @@ class Inspector extends RendererInspector {
 		if ( this.parameters.isVisible === false ) {
 
 			this.parameters.show();
-			this.profiler.setActiveTab( this.parameters.id );
+
+			if ( this.parameters.isDetached === false ) {
+
+				this.profiler.setActiveTab( this.parameters.id );
+
+			}
 
 		}
 

examples/jsm/inspector/tabs/Console.js

@@ -2,9 +2,9 @@ import { Tab } from '../ui/Tab.js';
 
 class Console extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Console' );
+		super( 'Console', options );
 
 		this.filters = { info: true, warn: true, error: true };
 		this.filterText = '';

examples/jsm/inspector/tabs/Parameters.js

@@ -299,9 +299,9 @@ class ParametersGroup {
 
 class Parameters extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Parameters' );
+		super( 'Parameters', options );
 
 		const paramList = new List( 'Property', 'Value' );
 		paramList.domElement.classList.add( 'parameters' );

examples/jsm/inspector/tabs/Performance.js

@@ -6,9 +6,9 @@ import { createValueSpan, setText } from '../ui/utils.js';
 
 class Performance extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Performance' );
+		super( 'Performance', options );
 
 		const perfList = new List( 'Name', 'CPU', 'GPU', 'Total' );
 		perfList.setGridStyle( 'minmax(200px, 2fr) 80px 80px 80px' );

examples/jsm/inspector/tabs/Viewer.js

@@ -6,13 +6,13 @@ import { RendererUtils, NoToneMapping, LinearSRGBColorSpace } from 'three/webgpu
 
 class Viewer extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Viewer' );
+		super( 'Viewer', options );
 
 		const nodeList = new List( 'Viewer', 'Name' );
 		nodeList.setGridStyle( '150px minmax(200px, 2fr)' );
-		nodeList.domElement.style.minWidth = '600px';
+		nodeList.domElement.style.minWidth = '400px';
 
 		const scrollWrapper = document.createElement( 'div' );
 		scrollWrapper.className = 'list-scroll-wrapper';
@@ -70,7 +70,7 @@ class Viewer extends Tab {
 
 	update( renderer, canvasDataList ) {
 
-		if ( ! this.isActive ) return;
+		if ( ! this.isActive && ! this.isDetached ) return;
 
 		//