feat: Support tracpeoints with editor insets in vscode insiders extension

Author: pxor

libs/codetracer

@@ -14,6 +14,10 @@
   "engines": {
     "vscode": "^1.92.0"
   },
+  "enabledApiProposals": [
+    "editorInsets"
+  ],
+  "preview": true,
   "categories": [
     "Other"
   ],
@@ -59,6 +63,10 @@
         "command": "ct-vscode.toggleCT",
         "title": "Toggle CodeTracer"
       },
+      {
+        "command": "ct-vscode.addTracepoint",
+        "title": "Add Tracepoint"
+      },
       {
         "command": "ct-vscode.loadCurrentFile",
         "title": "Record and run current active editor file"
@@ -138,6 +146,11 @@
           "command": "ct-vscode.addToScratchpad",
           "when": "codetracer:active",
           "group": "codetracerSpecific"
+        },
+        {
+          "command": "ct-vscode.addTracepoint",
+          "when": "codetracer:active",
+          "group": "codetracerSpecific"
         }
       ]
     },
@@ -175,6 +188,7 @@
     "@types/vscode": "^1.92.0",
     "@typescript-eslint/eslint-plugin": "^8.28.0",
     "@typescript-eslint/parser": "^8.28.0",
+    "@vscode/dts": "^0.4.1",
     "@vscode/test-cli": "^0.0.10",
     "@vscode/test-electron": "^2.4.1",
     "eslint": "^9.23.0",
@@ -184,4 +198,4 @@
     "build": "^0.1.4",
     "just": "^0.1.8"
   }
-}
+}

package-lock.json

@@ -1,5 +1,6 @@
+/// <reference path="../vscode.proposed.editorInsets.d.ts" />
 import * as vscode from "vscode";
-import { initPanels, disposePanels, disposeCommands } from "./initPanels";
+import { initPanels, disposePanels, disposeCommands, addTracepoint } from "./initPanels";
 import * as utils from "./utils";
 import * as os from "os";
 import * as fs from "fs";
@@ -22,7 +23,9 @@ import {
   MediatorWithSubscribers,
 } from "./ct_vscode.js";
 
+const insets = new Map<number, vscode.WebviewEditorInset>();
 let ctStarted = false;
+let adapterFactoryDisposable: vscode.Disposable | undefined;
 
 async function runCurrent(codetracerExe: string, isNixOS: boolean): Promise<string | undefined> {
   const trace: TraceInfo | undefined = await vscode.window.withProgress(
@@ -137,6 +140,14 @@ async function toggleCt(context: vscode.ExtensionContext, dapVsCodeApi: DapVsCod
     disposePanels();
     disposeCommands();
 
+    for (const [line, inset] of insets) {
+      inset.dispose();
+      insets.delete(line);
+    }
+
+    adapterFactoryDisposable?.dispose();
+    adapterFactoryDisposable = undefined;
+
     if (vscode.debug.activeDebugSession?.type === "codetracer-debug") {
       await vscode.commands.executeCommand("workbench.action.debug.stop");
     }
@@ -174,6 +185,7 @@ async function toggleCt(context: vscode.ExtensionContext, dapVsCodeApi: DapVsCod
     const panels = initPanels(context, viewsApi);
     (vscode.window as any).panels = panels; // easier debugging
 
+
     const debugConfig = {
       type: "codetracer-debug",
       request: "launch",
@@ -249,8 +261,8 @@ async function reinitCommands(context: vscode.ExtensionContext) {
   }
 
   // Set the codetracer executable and the args
-  context.subscriptions.push(
-    vscode.debug.registerDebugAdapterDescriptorFactory(
+  if (!adapterFactoryDisposable) {
+    adapterFactoryDisposable = vscode.debug.registerDebugAdapterDescriptorFactory(
       "codetracer-debug",
       new (class implements vscode.DebugAdapterDescriptorFactory {
         async createDebugAdapterDescriptor(session: vscode.DebugSession) {
@@ -261,7 +273,9 @@ async function reinitCommands(context: vscode.ExtensionContext) {
         }
       })
     )
-  );
+  }
+
+  context.subscriptions.push(adapterFactoryDisposable);
 
   const register = (id: string, fn: (...a: any[]) => any) =>
     commandDisposables.push(vscode.commands.registerCommand(id, fn));
@@ -293,6 +307,7 @@ async function reinitCommands(context: vscode.ExtensionContext) {
     stub('ct-vscode.forwardSourceLineJump');
     stub('ct-vscode.backwardSourceLineJump');
     stub('ct-vscode.addToScratchpad');
+    stub('ct-vscode.addTracepoint');
   } else {
     // ---- real registrations ----
     register('ct-vscode.toggleCT', async () => toggleCtReal(LoadMode.Trace));
@@ -323,6 +338,17 @@ async function reinitCommands(context: vscode.ExtensionContext) {
       ctAddToScratchpad(viewsApi, expr);
     });
 
+    register("ct-vscode.addTracepoint", async () => {
+      const editor = vscode.window.activeTextEditor;
+      if (!editor) {
+        vscode.window.showInformationMessage("Open a text file first.");
+        return;
+      }
+
+      const line = editor.selection.active.line;
+      const inset = addTracepoint(context, viewsApi, editor, line)
+      insets.set(line, inset);
+    })
   }
 
   if (miscDisposables.length === 0) {
@@ -354,4 +380,6 @@ export async function activate(context: vscode.ExtensionContext) {
 export function deactivate() {
   disposePanels();
   disposeCommands();
+  adapterFactoryDisposable?.dispose();
+  adapterFactoryDisposable = undefined;
 }

package.json

@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { getOrCreatePanel } from "./panelManager";
+import { getOrCreatePanel, createTracepointPanel } from "./panelManager";
 import * as utils from "./utils";
 import { receive, newWebviewSubscriber } from "./ct_vscode";
 
@@ -60,7 +60,7 @@ function dapRedirect(
   panel: any
 ) { }
 
-function createStatePanel(
+export function createStatePanel(
   context: vscode.ExtensionContext,
   viewsApi: any
 ): vscode.WebviewPanel {
@@ -155,6 +155,25 @@ function createTerminalPanel(
   );
 }
 
+export function addTracepoint(context: vscode.ExtensionContext, viewsApi: any, editor: vscode.TextEditor, line: number): vscode.WebviewEditorInset {
+  const inset = createTracepointPanel(
+    {
+      id: "tracepointComponent",
+      title: "tracepoint",
+      getTraceContent: utils.getTracepointWebviewContent,
+    },
+    editor,
+    line,
+    context,
+    (message: CtMessage, panel: any) => {
+      console.log("received from webview: ", message);
+      let webviewSubscriber = newWebviewSubscriber(panel.webview);
+      receive(viewsApi, message.kind, message.value, webviewSubscriber);
+    }
+  )
+  return inset;
+}
+
 export function initPanels(
   context: vscode.ExtensionContext,
   viewsApi: any

src/extension.ts

@@ -1,14 +1,48 @@
 import * as vscode from 'vscode';
 
-type PanelId = 'stateComponent' | 'calltraceComponent' | 'scratchpadComponent' | 'eventLogComponent' | 'terminalOutputComponent';
+type PanelId = 'stateComponent' | 'calltraceComponent' | 'scratchpadComponent' | 'eventLogComponent' | 'terminalOutputComponent' | 'tracepointComponent';
 
 export interface PanelConfig {
     id: PanelId;
     title: string;
-    getContent: (panel: vscode.WebviewPanel, context: vscode.ExtensionContext) => string;
+    getContent?: (panel: vscode.Webview, context: vscode.ExtensionContext) => string;
+    getTraceContent?: (panel: vscode.Webview, context: vscode.ExtensionContext, traceLine: number, traceFile: string, traceId: number) => string;
 }
 
 const panels: Map<PanelId, vscode.WebviewPanel> = new Map();
+let traceId = 0;
+
+export function createTracepointPanel(
+    config: PanelConfig,
+    editor: vscode.TextEditor,
+    line: number,
+    context: vscode.ExtensionContext,
+    onMessage?: (msg: any, panel: vscode.WebviewEditorInset) => void
+): vscode.WebviewEditorInset {
+    const inset = vscode.window.createWebviewTextEditorInset(
+        editor,
+        line,
+        20,
+        {
+            enableScripts: true,
+            localResourceRoots: [
+                vscode.Uri.joinPath(context.extensionUri, "media"),
+                vscode.Uri.joinPath(context.extensionUri, "public")
+            ],
+        }
+    );
+    if (onMessage) {
+        inset.webview.onDidReceiveMessage(
+            message => onMessage(message, inset),
+            undefined,
+            context.subscriptions
+        );
+    }
+
+    inset.webview.html = config.getTraceContent ? config.getTraceContent(inset.webview, context, line + 1, editor.document.fileName, traceId) : "";
+    traceId += 1;
+    return inset;
+}
 
 export function getOrCreatePanel(
     config: PanelConfig,
@@ -31,7 +65,7 @@ export function getOrCreatePanel(
         }
     );
 
-    panel.webview.html = config.getContent(panel, context);
+    panel.webview.html = config.getContent ? config.getContent(panel.webview, context) : "";
 
     if (onMessage) {
         panel.webview.onDidReceiveMessage(