Editor: Hides irrelevant tabs for better ux

[ycw]

The PR hides irrelevant properties tabs for the actively selected object ... which is less confusing ... for example, Scene doesn't have geometry and material, so GEOMETRY and MATERIAL (tabs) should be hidden when it's being selected:

hide_irrelevant.mp4

Preview: https://raw.githack.com/ycw/three.js/editor-hide-properties-tabbedpanel/editor/index.html

[mrdoob]

I think this could be done in a more clean way in this file:

https://github.com/mrdoob/three.js/blob/dev/editor/js/Sidebar.Properties.js

[mrdoob]

Almost there...

const objectTab = new SidebarObject( editor );
const geometryTab = new SidebarGeometry( editor );
const materialTab = new SidebarMaterial( editor );
const scriptTab = new SidebarScript( editor );

container.addTab( 'objectTab', strings.getKey( 'sidebar/properties/object' ), objectTab );
container.addTab( 'geometryTab', strings.getKey( 'sidebar/properties/geometry' ), geometryTab );
container.addTab( 'materialTab', strings.getKey( 'sidebar/properties/material' ), materialTab );
container.addTab( 'scriptTab', strings.getKey( 'sidebar/properties/script' ), scriptTab );

No need for getTabByTabId.

[ycw]

new SidebarObject( editor ); is the panel under the tab, not the tab,

so getTabByTabId is needed to get the tab, then hide/show based on selected object.

[mrdoob]

Oh! We probably do not need this line anymore?

[ycw]

It is needed for initializing, otherwise last option is selected, in our case the SCRIPT tab is picked by default.

If without this line, then:

1. Examples>Arkanoid
2. Select 'Ground' in outliner
3. You should see active tab in properties is SCRIPT, not OBJECT <<