Better inspector open/close management (#16079)

Co-authored-by: David Catuhe <[email protected]>

Author: deltakosh

packages/dev/core/src/Debug/debugLayer.ts

@@ -386,6 +386,17 @@ export class DebugLayer {
         }
     }
 
+    /**
+     * Get the number of opened panes in the inspector
+     */
+    public get openedPanes() {
+        if (this.BJSINSPECTOR) {
+            return this.BJSINSPECTOR.Inspector._OpenedPane;
+        }
+
+        return 0;
+    }
+
     /**
      * Update the scene in the inspector
      */

packages/dev/inspector/src/inspector.ts

@@ -582,6 +582,10 @@ export class Inspector {
             this._GlobalState.onSceneExplorerClosedObservable.notifyObservers();
         }
 
+        if (this._EmbedHostWindow && !this._EmbedHostWindow.closed) {
+            this._EmbedHostWindow.close();
+        }
+
         Inspector._OpenedPane = 0;
         this._Cleanup();
 

packages/tools/playground/src/components/commandBarComponent.tsx

@@ -80,7 +80,7 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
     }
 
     onInspector() {
-        this.props.globalState.onInspectorRequiredObservable.notifyObservers(!this.props.globalState.inspectorIsOpened);
+        this.props.globalState.onInspectorRequiredObservable.notifyObservers();
     }
 
     onExamples() {

packages/tools/playground/src/components/hamburgerMenu.tsx

@@ -59,7 +59,7 @@ export class HamburgerMenuComponent extends React.Component<IHamburgerMenuCompon
     }
 
     onInspector() {
-        this.props.globalState.onInspectorRequiredObservable.notifyObservers(!this.props.globalState.inspectorIsOpened);
+        this.props.globalState.onInspectorRequiredObservable.notifyObservers();
         this.setState({ isExpanded: false });
     }
 

packages/tools/playground/src/components/rendererComponent.tsx

@@ -50,19 +50,18 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             this._downloadManager.download(this._engine);
         });
 
-        this.props.globalState.onInspectorRequiredObservable.add((state) => {
+        this.props.globalState.onInspectorRequiredObservable.add(() => {
             if (!this._scene) {
                 return;
             }
 
-            if (state) {
+            if (this._scene.debugLayer.openedPanes === 0) {
                 this._scene.debugLayer.show({
                     embedMode: true,
                 });
             } else {
                 this._scene.debugLayer.hide();
             }
-            this.props.globalState.inspectorIsOpened = state;
         });
 
         this.props.globalState.onFullcreenRequiredObservable.add(() => {
@@ -359,7 +358,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             }
 
             if (this._engine.scenes[0] && displayInspector) {
-                this.props.globalState.onInspectorRequiredObservable.notifyObservers(true);
+                this.props.globalState.onInspectorRequiredObservable.notifyObservers();
             }
 
             if (checkCamera && this._engine.scenes[0].activeCamera == null) {
@@ -370,7 +369,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             } else if (globalObject.scene.then) {
                 globalObject.scene.then(() => {
                     if (this._engine!.scenes[0] && displayInspector) {
-                        this.props.globalState.onInspectorRequiredObservable.notifyObservers(true);
+                        this.props.globalState.onInspectorRequiredObservable.notifyObservers();
                     }
                 });
             } else {

packages/tools/playground/src/globalState.ts

@@ -31,7 +31,6 @@ export class GlobalState {
     public mobileDefaultMode = EditionMode.RenderingOnly;
 
     public runtimeMode = RuntimeMode.Editor;
-    public inspectorIsOpened = false;
 
     public currentSnippetTitle = "";
     public currentSnippetDescription = "";
@@ -55,7 +54,7 @@ export class GlobalState {
     public onMetadataUpdatedObservable = new Observable<void>();
     public onMetadataWindowHiddenObservable = new Observable<boolean>();
     public onDownloadRequiredObservable = new Observable<void>();
-    public onInspectorRequiredObservable = new Observable<boolean>();
+    public onInspectorRequiredObservable = new Observable<void>();
     public onFormatCodeRequiredObservable = new Observable<void>();
     public onFullcreenRequiredObservable = new Observable<void>();
     public onEditorFullcreenRequiredObservable = new Observable<void>();