Inspector v2: Playground integration (#16741)

This is an initial integration of the inspector v2 into Playground. Some
notes on this:

- Using the inspectorv2 query param (distinct from the newux param
@georginahalpern is using for the UI overhaul work, so that we can
enable/disable these separately).
- In a later PR (probably after a bit more inspector v2 feature work is
done), we'll add a button in the Playground toolbar that adds the query
param for you.
- Inspector v2 does not have debugLayer integration yet, so the code
uses the inspector v2 API directly. Additionally, we'll want Playground
to be able to use new inspector v2 APIs (e.g. adding additional
Playground specific inspector features), in which case it will need to
directly call the inspector v2 APIs anyway.
- This required a change to prevent Fluent focus management from
stealing tab keys when focus is in the code editor (which should insert
tabs, not move focus!). More details in the comments.
- Inspector v2 does not have "embed" mode yet (scene explorer stacked on
top of the right pane), so in Playground it shows up as a left pane and
a right pane for now.

![image](https://github.com/user-attachments/assets/b831ce14-11bd-4521-9d8b-a049a4ce860b)

Author: ryantrem

packages/dev/inspector-v2/src/inspector.tsx

@@ -59,7 +59,7 @@ function _ShowInspector(scene: Nullable<Scene>, options: Partial<IInspectorOptio
         scene = EngineStore.LastCreatedScene;
     }
 
-    if (!scene) {
+    if (!scene || scene.isDisposed) {
         return;
     }
 
@@ -198,14 +198,27 @@ function _ShowInspector(scene: Nullable<Scene>, options: Partial<IInspectorOptio
     });
     disposeActions.push(() => modularTool.dispose());
 
+    let disposed = false;
     CurrentInspectorToken = {
         dispose: () => {
+            if (disposed) {
+                return;
+            }
+
             disposeActions.reverse().forEach((dispose) => dispose());
             if (options.handleResize) {
                 scene.getEngine().resize();
             }
+
+            disposed = true;
         },
     };
+
+    const sceneDisposedObserver = scene.onDisposeObservable.addOnce(() => {
+        HideInspector();
+    });
+
+    disposeActions.push(() => sceneDisposedObserver.remove());
 }
 
 export function HideInspector() {

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

@@ -10,6 +10,7 @@ interface IMonacoComponentProps {
     globalState: GlobalState;
 }
 export class MonacoComponent extends React.Component<IMonacoComponentProps> {
+    private readonly _mutationObserver: MutationObserver;
     private _monacoManager: MonacoManager;
 
     public constructor(props: IMonacoComponentProps) {
@@ -26,14 +27,41 @@ export class MonacoComponent extends React.Component<IMonacoComponentProps> {
                 editorDiv.webkitRequestFullscreen();
             }
         });
+
+        // NOTE: This is a workaround currently needed when using Fluent. Specifically, Fluent currently manages focus (handling tab key events),
+        // and only excludes elements with `contentEditable` set to `"true"`. Monaco does not set this attribute on textareas by default. Probably
+        // Fluent should be checking `isContentEditable` instead as `contentEditable` can be set to `"inherit"`, in which case `isContentEditable`
+        // is inherited from the parent element. If it worked this way, then we could simply set `contentEditable` to `"true"` on the monacoHost
+        // div in this file.
+        this._mutationObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                for (const node of mutation.addedNodes) {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        // If the added node is a textarea
+                        if ((node as HTMLElement).tagName === "TEXTAREA") {
+                            (node as HTMLTextAreaElement).contentEditable = "true";
+                        }
+                        // If the added node contains textareas as descendants
+                        (node as HTMLElement).querySelectorAll?.("textarea").forEach((textArea) => {
+                            textArea.contentEditable = "true";
+                        });
+                    }
+                }
+            }
+        });
     }
 
     override componentDidMount() {
         const hostElement = this.props.refObject.current!;
+        this._mutationObserver.observe(hostElement, { childList: true, subtree: true });
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this._monacoManager.setupMonacoAsync(hostElement, true);
     }
 
+    override componentWillUnmount(): void {
+        this._mutationObserver.disconnect();
+    }
+
     public override render() {
         return <div id="monacoHost" ref={this.props.refObject} className={this.props.className}></div>;
     }

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

@@ -11,6 +11,9 @@ import type { Nullable, Scene } from "@dev/core";
 
 import "../scss/rendering.scss";
 
+// If the "inspectorv2" query parameter is present, preload (asynchronously) the new inspector v2 module.
+const InspectorV2ModulePromise = new URLSearchParams(window.location.search).has("inspectorv2") ? import("inspector-v2/inspector") : null;
+
 interface IRenderingComponentProps {
     globalState: GlobalState;
 }
@@ -54,29 +57,40 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             this._downloadManager.download(this._engine);
         });
 
-        this.props.globalState.onInspectorRequiredObservable.add(() => {
+        this.props.globalState.onInspectorRequiredObservable.add(async () => {
             if (!this._scene) {
                 return;
             }
 
-            // support for older versions
-            // openedPanes was not available until 7.44.0, so we need to fallback to the inspector's _OpenedPane property
-            if (this._scene.debugLayer.openedPanes === undefined) {
-                this._inspectorFallback = true;
-            }
+            if (InspectorV2ModulePromise) {
+                const inspectorV2Module = await InspectorV2ModulePromise;
+                if (inspectorV2Module.IsInspectorVisible()) {
+                    inspectorV2Module.HideInspector();
+                } else {
+                    inspectorV2Module.ShowInspector(this._scene, {
+                        embedMode: true,
+                    });
+                }
+            } else {
+                // support for older versions
+                // openedPanes was not available until 7.44.0, so we need to fallback to the inspector's _OpenedPane property
+                if (this._scene.debugLayer.openedPanes === undefined) {
+                    this._inspectorFallback = true;
+                }
 
-            // fallback?
-            if (this._inspectorFallback) {
-                const debugLayer: any = this._scene.debugLayer;
-                debugLayer.openedPanes = debugLayer.BJSINSPECTOR?.Inspector?._OpenedPane || 0;
-            }
+                // fallback?
+                if (this._inspectorFallback) {
+                    const debugLayer: any = this._scene.debugLayer;
+                    debugLayer.openedPanes = debugLayer.BJSINSPECTOR?.Inspector?._OpenedPane || 0;
+                }
 
-            if (this._scene.debugLayer.openedPanes === 0) {
-                this._scene.debugLayer.show({
-                    embedMode: true,
-                });
-            } else {
-                this._scene.debugLayer.hide();
+                if (this._scene.debugLayer.openedPanes === 0) {
+                    this._scene.debugLayer.show({
+                        embedMode: true,
+                    });
+                } else {
+                    this._scene.debugLayer.hide();
+                }
             }
         });
 
@@ -128,7 +142,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
 
         this.props.globalState.onErrorObservable.notifyObservers(null);
 
-        const displayInspector = this._scene?.debugLayer.isVisible();
+        const displayInspector = InspectorV2ModulePromise ? (await InspectorV2ModulePromise).IsInspectorVisible() : this._scene?.debugLayer.isVisible();
 
         const webgpuPromise = WebGPUEngine ? WebGPUEngine.IsSupportedAsync : Promise.resolve(false);
         const webGPUSupported = await webgpuPromise;

packages/tools/playground/tsconfig.build.json

@@ -8,6 +8,7 @@
             "core/*": ["dev/core/dist/*"],
             "gui/*": ["dev/gui/dist/*"],
             "shared-ui-components/*": ["dev/sharedUiComponents/dist/*"],
+            "inspector-v2/*": ["dev/inspector-v2/dist/*"],
             "playground/*": ["tools/playground/src/*"]
         }
     },

packages/tools/playground/webpack.config.js

@@ -19,7 +19,10 @@ module.exports = (env) => {
         resolve: {
             extensions: [".js", ".ts", ".tsx", ".scss", "*.svg"],
             alias: {
-                "shared-ui-components": path.resolve("../../dev/sharedUiComponents/src"),
+                "shared-ui-components": path.resolve("../../dev/sharedUiComponents/dist"),
+                "inspector-v2": path.resolve("../../dev/inspector-v2/dist"),
+                core: path.resolve("../../dev/core/dist"),
+                loaders: path.resolve("../../dev/loaders/dist"),
             },
         },
         externals: {