Add support for opening SceneGraph Inspector in panel (#561)

* add support for opening scenegraph inspector in panel * switch back to private for setupViewMessageObserver * Change icon to link-external --------- Co-authored-by: Brian Leighty <[email protected]> Co-authored-by: Bronley Plumb <[email protected]>
rokucommunity · Apr 10, 2024 · abe1813 · abe1813
1 parent 7671c86
commit abe1813
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -384,9 +384,13 @@
                     "group": "navigation@1"
                 },
                 {
+                    "command": "extension.brightscript.openSceneGraphInspectorInPanel",
+                    "when": "view == sceneGraphInspectorView",
+                    "group": "navigation@1"
+                }, {
                     "command": "extension.brightscript.disconnectFromDevice",
                     "when": "view == sceneGraphInspectorView && brightscript.isOnDeviceComponentAvailable",
-                    "group": "navigation@1"
+                    "group": "navigation@2"
                 }
             ],
             "webview/context": [
@@ -3034,17 +3038,17 @@
                 "category": "BrighterScript",
                 "icon": "$(clippy)"
             },
-            {
-                "command": "extension.brightscript.sceneGraphInspectorView.refreshNodeTree",
-                "title": "Refresh Nodetree",
-                "category": "BrighterScript",
-                "icon": "$(refresh)"
-            },
             {
                 "command": "extension.brightscript.disconnectFromDevice",
                 "title": "Disconnect From Roku Device",
                 "category": "BrighterScript",
                 "icon": "$(debug-disconnect)"
+            },
+            {
+                "command": "extension.brightscript.openSceneGraphInspectorInPanel",
+                "title": "Open SceneGraph Inspector In New Window",
+                "category": "BrighterScript",
+                "icon": "$(link-external)"
             }
         ],
         "keybindings": [

diff --git a/src/commands/VscodeCommand.ts b/src/commands/VscodeCommand.ts
@@ -18,5 +18,6 @@ export enum VscodeCommand {
     rokuAppOverlaysViewAddNewOverlay = 'extension.brightscript.rokuAppOverlaysView.addNewOverlay',
     rokuAppOverlaysViewRemoveAllOverlays = 'extension.brightscript.rokuAppOverlaysView.removeAllOverlays',
     rokuFileSystemViewRefresh = 'extension.brightscript.rokuFileSystemView.refresh',
-    disconnectFromDevice = 'extension.brightscript.disconnectFromDevice'
+    disconnectFromDevice = 'extension.brightscript.disconnectFromDevice',
+    openSceneGraphInspectorInPanel = 'extension.brightscript.openSceneGraphInspectorInPanel'
 }
diff --git a/src/viewProviders/BaseWebviewViewProvider.ts b/src/viewProviders/BaseWebviewViewProvider.ts
@@ -31,6 +31,7 @@ export abstract class BaseWebviewViewProvider implements vscode.WebviewViewProvi
      */
     public readonly abstract id: string;
 
+    protected panel?: vscode.WebviewPanel;
     protected view?: vscode.WebviewView;
     protected webviewBasePath: string;
     private outDirWatcher: AsyncSubscription;
@@ -87,6 +88,10 @@ export abstract class BaseWebviewViewProvider implements vscode.WebviewViewProvi
         this.view?.webview.postMessage(message).then(null, (reason) => {
             console.log('postMessage failed: ', reason);
         });
+
+        this.panel?.webview.postMessage(message).then(null, (reason) => {
+            console.log('postMessage failed: ', reason);
+        });
     }
 
     private postQueuedMessages() {
@@ -258,4 +263,54 @@ export abstract class BaseWebviewViewProvider implements vscode.WebviewViewProvi
         };
         webview.html = await this.getHtmlForWebview();
     }
+
+    protected async createOrRevealWebviewPanel() {
+        // See if we need to make the panel or not
+        let createPanel = false;
+        if (!this.panel) {
+            createPanel = true;
+        } else {
+            try {
+                if (!this.panel.active) {
+                    // If we still exist and aren't active then reveal the panel
+                    this.panel.reveal();
+                }
+            } catch (e) {
+                createPanel = true;
+            }
+        }
+
+        if (createPanel) {
+            this.panel = vscode.window.createWebviewPanel(
+                this.id,
+                await this.getViewNameById(this.id),
+                vscode.ViewColumn.Active,
+                {
+                    // Enable javascript in the webview
+                    enableScripts: true,
+                    localResourceRoots: [
+                        vscode.Uri.file(this.webviewBasePath)
+                    ]
+                }
+            );
+
+            this.setupViewMessageObserver(this.panel.webview);
+
+            const html = await this.getHtmlForWebview();
+            this.panel.webview.html = html;
+        }
+    }
+
+    private async getViewNameById(viewId) {
+        const packageJsonPath = path.join(this.extensionContext.extensionPath, 'package.json');
+        const packageJson = JSON.parse(await fsExtra.readFile(packageJsonPath, 'utf8'));
+
+        for (const view of [...packageJson.contributes.views.debug, ...packageJson.contributes.views['vscode-brightscript-language']]) {
+            if (view.id === viewId) {
+                return view.name;
+            }
+        }
+
+        return null;
+    }
 }
diff --git a/src/viewProviders/SceneGraphInspectorViewProvider.ts b/src/viewProviders/SceneGraphInspectorViewProvider.ts
@@ -1,13 +1,16 @@
 import type * as vscode from 'vscode';
 import { BaseRdbViewProvider } from './BaseRdbViewProvider';
 import { ViewProviderId } from './ViewProviderId';
+import { VscodeCommand } from '../commands/VscodeCommand';
 
 export class SceneGraphInspectorViewProvider extends BaseRdbViewProvider {
     public readonly id = ViewProviderId.sceneGraphInspectorView;
 
     constructor(context: vscode.ExtensionContext, dependencies) {
         super(context, dependencies);
 
-        this.registerCommandWithWebViewNotifier(context, 'extension.brightscript.sceneGraphInspectorView.refreshNodeTree');
+        this.registerCommand(context, VscodeCommand.openSceneGraphInspectorInPanel, async () => {
+            await this.createOrRevealWebviewPanel();
+        });
     }
 }