Remote control refinement and graphical UI

src/BrightScriptCommands.ts

@@ -17,6 +17,7 @@ import type { UserInputManager } from './managers/UserInputManager';
 import { clearNpmPackageCacheCommand } from './commands/ClearNpmPackageCacheCommand';
 import type { LocalPackageManager } from './managers/LocalPackageManager';
 import { profilingCommands } from './commands/ProfilingCommands';
+import type { WebviewViewProviderManager } from './managers/WebviewViewProviderManager';
 
 export class BrightScriptCommands {
 
@@ -36,6 +37,20 @@ export class BrightScriptCommands {
     public password: string;
     public workspacePath: string;
     private keypressNotifiers = [] as ((key: string, literalCharacter: boolean) => void)[];
+    private webviewViewProviderManager: WebviewViewProviderManager;
+
+    /**
+     * Set the WebviewViewProviderManager reference (called after construction)
+     */
+    public setWebviewViewProviderManager(manager: WebviewViewProviderManager) {
+        this.webviewViewProviderManager = manager;
+        this.remoteControlManager.setModeChangedCallback((isEnabled) => {
+            manager.onRemoteControlModeChanged(isEnabled);
+        });
+        this.registerKeypressNotifier((key, literalCharacter) => {
+            manager.onRemoteCommandSent(key, literalCharacter);
+        });
+    }
 
     public registerCommands() {
 
@@ -434,6 +449,7 @@ export class BrightScriptCommands {
                 throw new Error('Tried to set active device but failed.');
             } else {
                 await this.context.workspaceState.update('remoteHost', ip);
+                this.webviewViewProviderManager?.onRemoteHostChanged();
                 await vscode.window.showInformationMessage(`BrightScript Language extension active device set to: ${ip}`);
             }
         });
@@ -525,6 +541,7 @@ export class BrightScriptCommands {
 
         this.registerCommand('clearActiveDevice', async () => {
             await this.context.workspaceState.update('remoteHost', '');
+            this.webviewViewProviderManager?.onRemoteHostChanged();
             await vscode.window.showInformationMessage('BrightScript Language extension active device cleared');
         });
 
@@ -701,6 +718,7 @@ export class BrightScriptCommands {
             throw new Error('Can\'t send command: host is required.');
         } else {
             await this.context.workspaceState.update('remoteHost', this.host);
+            this.webviewViewProviderManager?.onRemoteHostChanged();
         }
         if (this.host) {
             //try resolving the hostname. (sometimes it fails for no reason, so just ignore the crash if it does)

src/commands/VscodeCommand.ts

@@ -22,5 +22,6 @@ export enum VscodeCommand {
     rokuFileSystemViewRefresh = 'extension.brightscript.rokuFileSystemView.refresh',
     disconnectFromDevice = 'extension.brightscript.disconnectFromDevice',
     openSceneGraphInspectorInPanel = 'extension.brightscript.openSceneGraphInspectorInPanel',
+    openRemoteControlPanelInPanel = 'extension.brightscript.openRemoteControlPanelInPanel',
     clearNpmPackageCache = 'extension.brightscript.clearNpmPackageCache'
 }

src/extension.ts

@@ -94,6 +94,7 @@ export class Extension {
         this.rtaManager = new RtaManager(context);
         this.webviewViewProviderManager = new WebviewViewProviderManager(context, this.rtaManager, this.brightScriptCommands);
         this.rtaManager.setWebviewViewProviderManager(this.webviewViewProviderManager);
+        this.brightScriptCommands.setWebviewViewProviderManager(this.webviewViewProviderManager);
 
         PerfettoEditorProvider.register(context);
 

src/managers/RemoteControlManager.ts

@@ -22,7 +22,12 @@ export class RemoteControlManager {
         this.isFlasherAllowedByUser = util.getConfiguration('brightscript')?.get('remoteControlMode.enableActiveAnimation') ?? true;
     }
 
-    private isEnabled = false;
+    public isEnabled = false;
+    private onModeChangedCallback?: (isEnabled: boolean) => void;
+
+    public setModeChangedCallback(callback: (isEnabled: boolean) => void) {
+        this.onModeChangedCallback = callback;
+    }
 
     private isFlasherAllowedByUser: boolean;
 
@@ -96,9 +101,11 @@ export class RemoteControlManager {
         this.isEnabled = isEnabled;
         if (this.isEnabled) {
             this.enableFlasher();
+            await vscode.commands.executeCommand(VscodeCommand.openRemoteControlPanelInPanel);
         } else {
             this.disableFlasher?.();
         }
+        this.onModeChangedCallback?.(isEnabled);
     }
 
     private disableFlasher: () => void;

src/managers/WebviewViewProviderManager.ts

@@ -11,6 +11,7 @@ import { RokuRegistryViewProvider } from '../viewProviders/RokuRegistryViewProvi
 import { SceneGraphInspectorViewProvider } from '../viewProviders/SceneGraphInspectorViewProvider';
 import { RokuAutomationViewViewProvider } from '../viewProviders/RokuAutomationViewViewProvider';
 import { RokuReplViewProvider } from '../viewProviders/RokuReplViewProvider';
+import { RemoteControlPanelProvider } from '../viewProviders/RemoteControlPanelProvider';
 
 export class WebviewViewProviderManager {
     constructor(
@@ -55,6 +56,9 @@ export class WebviewViewProviderManager {
     }, {
         constructor: RokuReplViewProvider,
         provider: undefined as RokuReplViewProvider
+    }, {
+        constructor: RemoteControlPanelProvider,
+        provider: undefined as RemoteControlPanelProvider
     }];
 
     public getWebviewViewProviders() {
@@ -100,4 +104,38 @@ export class WebviewViewProviderManager {
             }
         }
     }
+
+    /**
+     * Notify the Remote Control Panel that the remoteHost has changed
+     */
+    public onRemoteHostChanged() {
+        const remoteControlPanel = this.webviewViews.find(
+            view => view.provider instanceof RemoteControlPanelProvider
+        )?.provider as RemoteControlPanelProvider;
+
+        if (remoteControlPanel) {
+            remoteControlPanel.updateRemoteHost();
+        }
+    }
+
+    public onRemoteCommandSent(key: string, literalCharacter: boolean) {
+        const remoteControlPanel = this.webviewViews.find(
+            view => view.provider instanceof RemoteControlPanelProvider
+        )?.provider as RemoteControlPanelProvider;
+
+        remoteControlPanel?.notifyRemoteCommandSent(key, literalCharacter);
+    }
+
+    public onRemoteControlModeChanged(isEnabled: boolean) {
+        const remoteControlPanel = this.webviewViews.find(
+            view => view.provider instanceof RemoteControlPanelProvider
+        )?.provider as RemoteControlPanelProvider;
+
+        if (remoteControlPanel) {
+            remoteControlPanel.notifyRemoteControlModeChanged(isEnabled);
+            if (!isEnabled) {
+                remoteControlPanel.closePanel();
+            }
+        }
+    }
 }

src/viewProviders/BaseWebviewViewProvider.ts

@@ -114,7 +114,7 @@ export abstract class BaseWebviewViewProvider implements vscode.WebviewViewProvi
         this.messageCommandCallbacks[command] = callback;
     }
 
-    private setupViewMessageObserver(webview: vscode.Webview) {
+    protected setupViewMessageObserver(webview: vscode.Webview) {
         webview.onDidReceiveMessage(async (message) => {
             try {
                 const command = message.command;
@@ -217,7 +217,8 @@ export abstract class BaseWebviewViewProvider implements vscode.WebviewViewProvi
     * Get a webview-supported URI for the given path
     */
     private asWebviewUri(...parts: string[]) {
-        return this.view?.webview?.asWebviewUri?.(
+        const webview = this.view?.webview ?? this.panel?.webview;
+        return webview?.asWebviewUri?.(
             vscode.Uri.file(
                 path.join(...parts)
             )