Editor: Hides irrelevant tabs for better ux (#28287)

* hide irrelevant property tabs

* ci rerun

* Revert "hide irrelevant property tabs"

This reverts commit 3eb63a62eb87f1e722a357930fd371d8c841eaea.

* put logic in Sidebar.Properties

editor/css/main.css

@@ -2,6 +2,10 @@
 	color-scheme: light dark;
 }
 
+[hidden] {
+	display: none !important;
+}
+
 body {
 	font-family: Helvetica, Arial, sans-serif;
 	font-size: 14px;

editor/js/Sidebar.Properties.js

@@ -18,6 +18,54 @@ function SidebarProperties( editor ) {
 	container.addTab( 'scriptTab', strings.getKey( 'sidebar/properties/script' ), new SidebarScript( editor ) );
 	container.select( 'objectTab' );
 
+	function getTabByTabId( tabs, tabId ) {
+
+		return tabs.find( function ( tab ) {
+
+			return tab.dom.id === tabId;
+
+		} );
+
+	}
+
+	const geometryTab = getTabByTabId( container.tabs, 'geometryTab' );
+	const materialTab = getTabByTabId( container.tabs, 'materialTab' );
+	const scriptTab = getTabByTabId( container.tabs, 'scriptTab' );
+
+	function toggleTabs( object ) {
+
+		container.setHidden( object === null );
+
+		if ( object === null ) return;
+
+		geometryTab.setHidden( ! object.geometry );
+
+		materialTab.setHidden( ! object.material );
+
+		scriptTab.setHidden( object === editor.camera );
+
+		// set active tab
+
+		if ( container.selected === 'geometryTab' ) {
+
+			container.select( geometryTab.isHidden() ? 'objectTab' : 'geometryTab' );
+
+		} else if ( container.selected === 'materialTab' ) {
+
+			container.select( materialTab.isHidden() ? 'objectTab' : 'materialTab' );
+
+		} else if ( container.selected === 'scriptTab' ) {
+
+			container.select( scriptTab.isHidden() ? 'objectTab' : 'scriptTab' );
+
+		}
+
+	}
+
+	editor.signals.objectSelected.add( toggleTabs );
+
+	toggleTabs( editor.selected );
+
 	return container;
 
 }

editor/js/libs/ui.js

@@ -110,6 +110,18 @@ class UIElement {
 
 	}
 
+	setHidden( isHidden ) {
+
+		this.dom.hidden = isHidden;
+
+	}
+
+	isHidden() {
+
+		return this.dom.hidden;
+
+	}
+
 	setDisabled( value ) {
 
 		this.dom.disabled = value;