demo

proposed-api-sample/package.json

@@ -1,5 +1,16 @@
 {
-	"enabledApiProposals": [],
+	"enabledApiProposals": [
+		"debugVisualization"
+	],
+	"contributes": {
+		"debugVisualizers": [
+			{
+				"id": "base64Decoder",
+				"when": "variableValue =~ /^['\"]?[A-Za-z0-9=\\/+]+['\"]?$/ && variableType == string"
+			}
+		]
+	},
+
 	"name": "proposed-api-sample",
 	"displayName": "proposed-api-sample",
 	"description": "Sample showing how to use Proposed API",
@@ -16,14 +27,6 @@
 	],
 	"activationEvents": [],
 	"main": "./out/extension.js",
-	"contributes": {
-		"commands": [
-			{
-				"command": "extension.helloWorld",
-				"title": "Hello World"
-			}
-		]
-	},
 	"scripts": {
 		"vscode:prepublish": "npm run compile",
 		"compile": "tsc -p ./",
@@ -41,4 +44,4 @@
 		"typescript": "^5.3.2",
 		"@vscode/dts": "^0.4.0"
 	}
-}
+}

proposed-api-sample/src/extension.ts

@@ -8,9 +8,26 @@ export function activate(context: vscode.ExtensionContext) {
 	 * Proposed API as defined in vscode.proposed.<proposalName>.d.ts.
 	 */
 
-	const disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
-		vscode.window.showInformationMessage('Hello World!');
+	vscode.commands.registerCommand('openBase64Variable', encoded => {
+		openUntitledEditor(Buffer.from(encoded, 'base64').toString());
 	});
 
-	context.subscriptions.push(disposable);
+	context.subscriptions.push(vscode.debug.registerDebugVisualizationProvider('base64Decoder', {
+		provideDebugVisualization(context, token) {
+			const v = new vscode.DebugVisualization('base64');
+			v.iconPath = new vscode.ThemeIcon('rocket');
+			v.visualization = {
+				title: 'Decode base64',
+				command: 'openBase64Variable',
+				arguments: [context.variable.value],
+			};
+
+			return [v]
+		},
+	}));
 }
+
+const openUntitledEditor = async (contents: string) => {
+  const untitledDoc = await vscode.workspace.openTextDocument({ content: contents });
+  await vscode.window.showTextDocument(untitledDoc);
+};

proposed-api-sample/vscode.proposed.debugVisualization.d.ts

@@ -0,0 +1,100 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+
+declare module 'vscode' {
+	export namespace debug {
+		/**
+		 * Registers a custom data visualization for variables when debugging.
+		 *
+		 * @param id The corresponding ID in the package.json `debugVisualizers` contribution point.
+		 * @param provider The {@link DebugVisualizationProvider} to register
+		 */
+		export function registerDebugVisualizationProvider<T extends DebugVisualization>(
+			id: string,
+			provider: DebugVisualizationProvider<T>
+		): Disposable;
+	}
+
+	export class DebugVisualization {
+		/**
+		 * The name of the visualization to show to the user.
+		 */
+		name: string;
+
+		/**
+		 * An icon for the view when it's show in inline actions.
+		 */
+		iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;
+
+		/**
+		 * Visualization to use for the variable. This may be either:
+		 * - A command to run when the visualization is selected for a variable.
+		 * - A {@link TreeDataProvider} which is used to display the data in-line
+		 *   where the variable is shown. If a single root item is returned from
+		 *   the data provider, it will replace the variable in its tree.
+		 *   Otherwise, the items will be shown as children of the variable.
+		 */
+		visualization?: Command | TreeDataProvider<unknown>;
+
+		/**
+		 * Creates a new debug visualization object.
+		 * @param name Name of the visualization to show to the user.
+		 */
+		constructor(name: string);
+	}
+
+	export interface DebugVisualizationProvider<T extends DebugVisualization = DebugVisualization> {
+		/**
+		 * Called for each variable when the debug session stops. It should return
+		 * any visualizations the extension wishes to show to the user.
+		 *
+		 * Note that this is only called when its `when` clause defined under the
+		 * `debugVisualizers` contribution point in the `package.json` evaluates
+		 * to true.
+		 */
+		provideDebugVisualization(context: DebugVisualizationContext, token: CancellationToken): ProviderResult<T[]>;
+
+		/**
+		 * Invoked for a variable when a user picks the visualizer.
+		 *
+		 * It may return a {@link TreeView} that's shown in the Debug Console or
+		 * inline in a hover. A visualizer may choose to return `undefined` from
+		 * this function and instead trigger other actions in the UI, such as opening
+		 * a custom {@link WebviewView}.
+		 */
+		resolveDebugVisualization?(visualization: T, token: CancellationToken): ProviderResult<T>;
+	}
+
+	export interface DebugVisualizationContext {
+		/**
+		 * The Debug Adapter Protocol Variable to be visualized.
+		 * @see https://microsoft.github.io/debug-adapter-protocol/specification#Types_Variable
+		 */
+		variable: any;
+		/**
+		 * The Debug Adapter Protocol variable reference the type (such as a scope
+		 * or another variable) that contained this one. Empty for variables
+		 * that came from user evaluations in the Debug Console.
+		 * @see https://microsoft.github.io/debug-adapter-protocol/specification#Types_Variable
+		 */
+		containerId?: string;
+		/**
+		 * The ID of the Debug Adapter Protocol StackFrame in which the variable was found,
+		 * for variables that came from scopes in a stack frame.
+		 * @see https://microsoft.github.io/debug-adapter-protocol/specification#Types_StackFrame
+		 */
+		frameId?: number;
+		/**
+		 * The ID of the Debug Adapter Protocol Thread in which the variable was found.
+		 * @see https://microsoft.github.io/debug-adapter-protocol/specification#Types_StackFrame
+		 */
+		threadId: number;
+		/**
+		 * The debug session the variable belongs to.
+		 */
+		session: DebugSession;
+	}
+}

proposed-api-sample/x.js

@@ -0,0 +1,4 @@
+(() => {
+  const foo = 'SGVsbG8gd29ybGQh';
+  debugger;
+})();