feat: Implemented tech for enabling and disabling live diagnostics by tab

src/extension.ts

@@ -79,7 +79,7 @@ export function activate(context: vscode.ExtensionContext): void {
     });
 
     const liveDiagnosticsCommand = vscode.commands.registerCommand('minecraft-debugger.liveDiagnostics', () => {
-        MinecraftDiagnosticsPanel.render(context.extensionUri, liveStatsProvider, eventEmitter);
+        MinecraftDiagnosticsPanel.render(context.extensionUri, liveStatsProvider, eventEmitter, context.globalState);
     });
 
     const replayDiagnosticsCommand = vscode.commands.registerCommand(
@@ -98,7 +98,7 @@ export function activate(context: vscode.ExtensionContext): void {
                 return;
             }
             const replayStats = new ReplayStatsProvider(fileUri[0].fsPath);
-            MinecraftDiagnosticsPanel.render(context.extensionUri, replayStats, eventEmitter);
+            MinecraftDiagnosticsPanel.render(context.extensionUri, replayStats, eventEmitter, context.globalState);
         },
     );
 

src/panels/minecraft-diagnostics.ts

@@ -1,13 +1,16 @@
 // Copyright (C) Microsoft Corporation.  All rights reserved.
 
-import { Disposable, Webview, WebviewPanel, window, workspace, Uri, ViewColumn } from 'vscode';
+import { Disposable, Memento, Webview, WebviewPanel, window, workspace, Uri, ViewColumn } from 'vscode';
 import { EventEmitter } from 'stream';
 import { getUri } from '../utilities/getUri';
 import { getNonce } from '../utilities/getNonce';
 import { DebuggerRequestHandler } from '../requests/debugger-request-handler';
 import { StatData, StatsListener, StatsProvider } from '../stats/stats-provider';
 import { DiagnosticsTabDescriptor } from '../diagnostics-schema';
 
+const DIAGNOSTICS_TAB_STATES_KEY = 'minecraftDiagnosticsTabStates';
+type DiagnosticsTabStates = Record<string, boolean>;
+
 export class MinecraftDiagnosticsPanel {
     private static activeDiagnosticsPanels: MinecraftDiagnosticsPanel[] = [];
 
@@ -24,6 +27,7 @@
         statsTracker: StatsProvider,
         eventEmitter: EventEmitter,
         debuggerRequestHandler: DebuggerRequestHandler,
+        private readonly _globalState: Memento,
     ) {
         this._panel = panel;
         this._statsTracker = statsTracker;
@@ -39,6 +43,7 @@
             this._panel.webview,
             extensionUri,
             statsTracker.manualControl(),
+            this.getDiagnosticsTabStates(),
         );
 
         // Handle events from the webview panel
@@ -50,6 +55,7 @@
                         this._panel.webview,
                         extensionUri,
                         statsTracker.manualControl(),
+                        this.getDiagnosticsTabStates(),
                     );
                     break;
                 case 'pause':
@@ -75,6 +81,12 @@
                 case 'debugger-request':
                     this._debuggerRequestHandler.handleDebuggerRequest(message.request, message.args);
                     break;
+                case 'set-diagnostics-active':
+                    this.handleDiagnosticsActiveMessage(message);
+                    break;
+                case 'sync-diagnostics-tabs':
+                    this._eventEmitter.emit('sync-diagnostics-tabs', message.states);
+                    break;
                 case 'export-data':
                     void this.handleExportDataMessage(message);
                     break;
@@ -132,6 +144,33 @@
         this._statsTracker.addStatListener(this._statsCallback);
     }
 
+    private getDiagnosticsTabStates(): DiagnosticsTabStates {
+        const states = this._globalState.get<DiagnosticsTabStates>(DIAGNOSTICS_TAB_STATES_KEY, {});
+        if (states === null || typeof states !== 'object' || Array.isArray(states)) {
+            return {};
+        }
+
+        return Object.fromEntries(
+            Object.entries(states).filter(([tabName, active]) => tabName.trim() !== '' && typeof active === 'boolean'),
+        );
+    }
+
+    private handleDiagnosticsActiveMessage(message: any): void {
+        if (typeof message.tabName !== 'string' || message.tabName.trim() === '' || typeof message.active !== 'boolean') {
+            return;
+        }
+
+        const states = this.getDiagnosticsTabStates();
+        states[message.tabName] = message.active;
+        void this._globalState.update(DIAGNOSTICS_TAB_STATES_KEY, states);
+        this._eventEmitter.emit('set-diagnostics-active', message.tabName, message.active);
+        this._panel.webview.postMessage({
+            type: 'diagnostics-tab-state',
+            tabName: message.tabName,
+            active: message.active,
+        });
+    }
+
     private async handleExportDataMessage(message: any): Promise<void> {
         if (typeof message.content !== 'string') {
             console.error('Received export-data message without a valid content string.');
@@ -149,7 +188,7 @@
             saveLabel: 'Export',
             defaultUri: workspaceFolderUri ? Uri.joinPath(workspaceFolderUri, suggestedFileName) : undefined,
             filters: {
                 'CSV Files': ['csv'],
             },
         });
 
@@ -161,7 +200,12 @@
         window.showInformationMessage(`Exported diagnostics data to ${outputUri.fsPath}.`);
     }
 
-    public static render(extensionUri: Uri, statsTracker: StatsProvider, eventEmitter: EventEmitter): void {
+    public static render(
+        extensionUri: Uri,
+        statsTracker: StatsProvider,
+        eventEmitter: EventEmitter,
+        globalState: Memento,
+    ): void {
         const statsTrackerId = statsTracker.uniqueId;
         const existingPanel = MinecraftDiagnosticsPanel.activeDiagnosticsPanels.find(
             panel => panel._statsTracker.uniqueId === statsTrackerId,
@@ -189,6 +233,7 @@
                     statsTracker,
                     eventEmitter,
                     new DebuggerRequestHandler(panel.webview),
+                    globalState,
                 ),
             );
         }
@@ -217,7 +262,12 @@
         }
     }
 
-    private _getWebviewContent(webview: Webview, extensionUri: Uri, showReplayControls: boolean) {
+    private _getWebviewContent(
+        webview: Webview,
+        extensionUri: Uri,
+        showReplayControls: boolean,
+        diagnosticsTabStates: DiagnosticsTabStates,
+    ) {
         // The CSS file from the React build output
         const stylesUri = getUri(webview, extensionUri, ['webview-ui', 'build', 'assets', 'diagnosticsPanel.css']);
         // The JS file from the React build output
@@ -231,11 +281,11 @@
             <head>
                 <meta charset="UTF-8" />
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource}; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
                 <link rel="stylesheet" type="text/css" href="${stylesUri}">
                 <title>Minecraft Diagnostics</title>
                 <script nonce="${nonce}">
-                    window.initialParams = { showReplayControls: ${showReplayControls} };
+                    window.initialParams = ${JSON.stringify({ showReplayControls, diagnosticsTabStates })};
                 </script>
             </head>
             <body>

src/protocol-events.ts

@@ -16,6 +16,7 @@ import { DiagnosticsTabDescriptor } from './diagnostics-schema';
 // 8 - New serialization tech (use Cereal)
 // 9 - Added support for MC C++/native driven stat descriptors/schemas for UI display
 // 10 - Added is_empty_tab to DiagnosticsTabDescriptor
+// 11 - Added per-tab diagnostics activation
 
 export enum ProtocolVersion {
     _Unknown = 0,
@@ -29,9 +30,10 @@ export enum ProtocolVersion {
     SupportCerealSerialization = 8,
     SupportNativeDescriptors = 9,
     SupportEmptyTabs = 10,
+    SupportDiagnosticsSetActive = 11,
 }
 
-export const DEBUGGER_PROTOCOL_VERSION = ProtocolVersion.SupportEmptyTabs;
+export const DEBUGGER_PROTOCOL_VERSION = ProtocolVersion.SupportDiagnosticsSetActive;
 
 // -------------------------------------------------------------------------
 // Interfaces for event message payloads (received from the debugee)
@@ -131,7 +133,8 @@ export enum OutgoingEventType {
     Resume = 'resume',
     Request = 'request',
     Breakpoints = 'breakpoints',
-    DebuggerRequest = 'debugger-request'
+    DebuggerRequest = 'debugger-request',
+    DiagnosticsSetActive = 'diagnostics-set-active',
 }
 
 export interface ProtocolResponse {
@@ -182,6 +185,12 @@ export interface ResumeMessage {
     type: OutgoingEventType.Resume;
 }
 
+export interface DiagnosticsSetActiveMessage {
+    type: OutgoingEventType.DiagnosticsSetActive;
+    tab_name: string;
+    active: boolean;
+}
+
 export interface RequestMessage {
     type: OutgoingEventType.Request;
     request: { request_seq: number; command: string; args: unknown };
@@ -224,6 +233,7 @@ export type OutgoingDebuggeeMessage =
     | StopProfilerMessage
     | StopOnExceptionMessage
     | ResumeMessage
+    | DiagnosticsSetActiveMessage
     | RequestMessage
     | BreakpointsLegacyMessage
     | BreakpointsMessage

src/session.ts

@@ -172,6 +172,8 @@ export class Session extends DebugSession implements IDebuggeeMessageSender {
         this._eventEmitter.on('start-profiler', this.onStartProfiler.bind(this));
         this._eventEmitter.on('stop-profiler', this.onStopProfiler.bind(this));
         this._eventEmitter.on('request-debugger-status', this.onRequestDebuggerStatus.bind(this));
+        this._eventEmitter.on('set-diagnostics-active', this.onSetDiagnosticsActive.bind(this));
+        this._eventEmitter.on('sync-diagnostics-tabs', this.onSyncDiagnosticsTabs.bind(this));
     }
 
     // Use this to register new events that are handled from the debugee (Minecraft)
@@ -212,6 +214,8 @@ export class Session extends DebugSession implements IDebuggeeMessageSender {
         this._eventEmitter.removeAllListeners('start-profiler');
         this._eventEmitter.removeAllListeners('stop-profiler');
         this._eventEmitter.removeAllListeners('request-debugger-status');
+        this._eventEmitter.removeAllListeners('set-diagnostics-active');
+        this._eventEmitter.removeAllListeners('sync-diagnostics-tabs');
 
         if (this._sourceFileWatcher) {
             this._sourceFileWatcher.dispose();
@@ -277,6 +281,40 @@ export class Session extends DebugSession implements IDebuggeeMessageSender {
         }
     }
 
+    private onSetDiagnosticsActive(tabName: unknown, active: unknown): void {
+        if (typeof tabName !== 'string' || tabName.trim() === '' || typeof active !== 'boolean') {
+            return;
+        }
+
+        this.sendDiagnosticsSetActive(tabName, active);
+    }
+
+    private onSyncDiagnosticsTabs(tabStates: unknown): void {
+        if (tabStates === null || typeof tabStates !== 'object' || Array.isArray(tabStates)) {
+            return;
+        }
+
+        for (const [tabName, active] of Object.entries(tabStates)) {
+            if (typeof active !== 'boolean' || tabName.trim() === '') {
+                continue;
+            }
+
+            this.sendDiagnosticsSetActive(tabName, active);
+        }
+    }
+
+    private sendDiagnosticsSetActive(tabName: string, active: boolean): void {
+        if (this._clientProtocolVersion < ProtocolVersion.SupportDiagnosticsSetActive) {
+            return;
+        }
+
+        this.sendDebuggeeMessage({
+            type: OutgoingEventType.DiagnosticsSetActive,
+            tab_name: tabName,
+            active,
+        });
+    }
+
     private writeProfilerCaptureToFile(
         captureData: string,
         capturePath: string,

webview-ui/src/diagnostics_panel/App.css

@@ -23,6 +23,11 @@ main {
   border-right: 1px solid var(--vscode-editorGroup-border);
 }
 
+.vertical-tab-row {
+  display: flex;
+  align-items: stretch;
+}
+
 .vertical-tab-item {
   background: transparent;
   border: none;
@@ -35,13 +40,47 @@ main {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
+}
+
+.diagnostics-tab-toggle {
+  border: none;
+  border-left: 1px solid var(--vscode-editorGroup-border);
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  font-size: 10px;
+  min-width: 34px;
+}
+
+.diagnostics-tab-toggle:hover:not(:disabled) {
+  background-color: var(--vscode-list-hoverBackground);
+  color: var(--vscode-list-hoverForeground);
+}
+
+.diagnostics-tab-toggle:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.diagnostics-tab-disabled {
+  color: var(--vscode-descriptionForeground);
+  padding: 24px;
 }
 
 .vertical-tab-item:hover {
   background-color: var(--vscode-list-hoverBackground);
   color: var(--vscode-list-hoverForeground);
 }
 
+.vertical-tab-item.disabled {
+  color: var(--vscode-descriptionForeground);
+}
+
+.vertical-tab-item.disabled:hover {
+  color: var(--vscode-descriptionForeground);
+}
+
 .vertical-tab-item.active {
   background-color: var(--vscode-list-activeSelectionBackground);
   color: var(--vscode-list-activeSelectionForeground);