Add a Live Watch Window for the debug extension (#577)

Adds CMSIS Debug view container.
Added a live watch window that gets updated every 500ms.

Author: omarArm

__mocks__/vscode.js

@@ -30,6 +30,23 @@ const StatusBarAlignment = {
     Right: 2
 };
 
+const MockTreeItemCollapsibleState = { 
+    None: 0, 
+    Collapsed: 1, 
+    Expanded: 2 
+};
+
+class MockTreeItem {
+    label;
+    description;
+    contextValue;
+    collapsibleState;
+    constructor(label, collapsibleState) {
+        this.label = label;
+        this.collapsibleState = collapsibleState;
+    }
+}
+
 module.exports = {
     EventEmitter: jest.fn(() => {
         const callbacks = [];
@@ -43,6 +60,8 @@ module.exports = {
         };
     }),
     Uri: URI,
+    TreeItem: MockTreeItem,
+    TreeItemCollapsibleState: MockTreeItemCollapsibleState,
     window: {
         createOutputChannel: jest.fn(() => ({
             appendLine: jest.fn(),

package.json

@@ -47,6 +47,23 @@
     "onStartupFinished"
   ],
   "contributes": {
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "cmsis-debugger",
+          "title": "CMSIS Debug",
+          "icon": "$(rocket)"
+        }
+      ]
+    },
+    "views": {
+      "cmsis-debugger": [
+        {
+          "id": "cmsis-debugger.liveWatch",
+          "name": "Live Watch"
+        }
+      ]
+    },
     "commands": [
       {
         "title": "CPU Time",
@@ -61,6 +78,31 @@
         "command": "vscode-cmsis-debugger.resetCpuTimeHistory",
         "category": "Run and Debug",
         "when": "inDebugMode"
+      },
+      {
+        "command": "cmsis-debugger.liveWatch.add",
+        "title": "Add Expression",
+        "icon": "$(add)"
+      },
+      {
+        "command": "cmsis-debugger.liveWatch.deleteAll",
+        "title": "Delete All Expressions",
+        "icon": "$(close-all)"
+      },
+      {
+        "command": "cmsis-debugger.liveWatch.delete",
+        "title": "Delete Expression",
+        "icon": "$(close)"
+      },
+      {
+        "command": "cmsis-debugger.liveWatch.refresh",
+        "title": "Refresh",
+        "icon": "$(refresh)"
+      },
+      {
+        "command": "cmsis-debugger.liveWatch.modify",
+        "title": "Modify Expression",
+        "icon": "$(pencil)"
       }
     ],
     "menus": {
@@ -73,6 +115,35 @@
           "command": "vscode-cmsis-debugger.resetCpuTimeHistory",
           "when": "inDebugMode"
         }
+      ],
+      "view/title": [
+        {
+          "command": "cmsis-debugger.liveWatch.add",
+          "when": "view == cmsis-debugger.liveWatch",
+          "group": "navigation@1"
+        },
+        {
+          "command": "cmsis-debugger.liveWatch.deleteAll",
+          "when": "view == cmsis-debugger.liveWatch",
+          "group": "navigation@3"
+        },
+        {
+          "command": "cmsis-debugger.liveWatch.refresh",
+          "when": "view == cmsis-debugger.liveWatch",
+          "group": "navigation@2"
+        }
+      ],
+      "view/item/context": [
+        {
+          "command": "cmsis-debugger.liveWatch.modify",
+          "when": "view == cmsis-debugger.liveWatch && viewItem == expression",
+          "group": "inline@1"
+        },
+        {
+          "command": "cmsis-debugger.liveWatch.delete",
+          "when": "view == cmsis-debugger.liveWatch && viewItem == expression",
+          "group": "inline@2"
+        }
       ]
     },
     "debuggers": [

src/debug-session/gdbtarget-debug-session.test.ts

@@ -76,12 +76,12 @@ describe('GDBTargetDebugSession', () => {
         (vscode.debug.activeStackItem as unknown) = undefined;
     });
 
-    it('returns undefined if evaluating a global expression fails', async () => {
+    it('returns a string if evaluating a global expression fails', async () => {
         // Only mock relevant properties, return value is body of EvaluateResponse
         const logDebugSpy = jest.spyOn(logger, 'debug');
         (debugSession.customRequest as jest.Mock).mockRejectedValueOnce(new Error('myError'));
         const result = await gdbTargetSession.evaluateGlobalExpression('myGlobalVariable');
-        expect(result).toBeUndefined();
+        expect(result).toBe('myError');
         expect(debugSession.customRequest as jest.Mock).toHaveBeenCalledWith('evaluate', { expression: 'myGlobalVariable', frameId: 0, context: 'hover' });
         expect(logDebugSpy).toHaveBeenCalledWith('Session \'session-name\': Failed to evaluate global expression \'myGlobalVariable\' - \'myError\'');
     });

src/debug-session/gdbtarget-debug-session.ts

@@ -54,21 +54,21 @@ export class GDBTargetDebugSession {
         this._cbuildRunParsePromise = undefined;
     }
 
-    public async evaluateGlobalExpression(expression: string): Promise<string|undefined> {
+    public async evaluateGlobalExpression(expression: string, context = 'hover'): Promise<string> {
         try {
             const frameId = (vscode.debug.activeStackItem as vscode.DebugStackFrame)?.frameId ?? 0;
             const args: DebugProtocol.EvaluateArguments = {
                 expression,
                 frameId, // Currently required by CDT GDB Adapter
-                context: 'hover'
+                context: context
             };
             const response = await this.session.customRequest('evaluate', args) as DebugProtocol.EvaluateResponse['body'];
-            return response.result.match(/\d+/) ? response.result : undefined;
+            return response.result;
         } catch (error: unknown) {
             const errorMessage = (error as Error)?.message;
             logger.debug(`Session '${this.session.name}': Failed to evaluate global expression '${expression}' - '${errorMessage}'`);
+            return errorMessage === 'custom request failed' ? 'No active session' : errorMessage;
         }
-        return undefined;
     }
 
     public async readMemory(address: number, length = 4): Promise<ArrayBuffer|undefined> {

src/desktop/extension.ts

@@ -22,18 +22,23 @@ import { addToolsToPath } from './add-to-path';
 import { CpuStatesStatusBarItem } from '../features/cpu-states/cpu-states-statusbar-item';
 import { CpuStates } from '../features/cpu-states/cpu-states';
 import { CpuStatesCommands } from '../features/cpu-states/cpu-states-commands';
+import { LiveWatchTreeDataProvider } from '../views/live-watch/live-watch';
 
 const BUILTIN_TOOLS_PATHS = [
     'tools/pyocd/pyocd',
     'tools/gdb/bin/arm-none-eabi-gdb'
 ];
 
+let liveWatchTreeDataProvider: LiveWatchTreeDataProvider;
+
 export const activate = async (context: vscode.ExtensionContext): Promise<void> => {
     const gdbtargetDebugTracker = new GDBTargetDebugTracker();
     const gdbtargetConfigurationProvider = new GDBTargetConfigurationProvider();
     const cpuStates = new CpuStates();
     const cpuStatesCommands = new CpuStatesCommands();
     const cpuStatesStatusBarItem = new CpuStatesStatusBarItem();
+    // Register the Tree View under the id from package.json
+    liveWatchTreeDataProvider = new LiveWatchTreeDataProvider(context);
 
     addToolsToPath(context, BUILTIN_TOOLS_PATHS);
     // Activate components
@@ -43,6 +48,16 @@ export const activate = async (context: vscode.ExtensionContext): Promise<void>
     cpuStates.activate(gdbtargetDebugTracker);
     cpuStatesCommands.activate(context, cpuStates);
     cpuStatesStatusBarItem.activate(context, cpuStates);
+    // Live Watch view
+    liveWatchTreeDataProvider.activate(gdbtargetDebugTracker);
 
     logger.debug('Extension Pack activated');
 };
+
+export const deactivate = async (): Promise<void> => {
+    // Call deactivate of Live Watch to save its state
+    if (liveWatchTreeDataProvider) {
+        await liveWatchTreeDataProvider.deactivate();
+    }
+    logger.debug('Extension Pack deactivated');
+};

src/features/cpu-states/cpu-states.ts

@@ -44,6 +44,7 @@ interface SessionCpuStates {
 }
 
 export class CpuStates {
+    // onRefresh event to notify GUI components of the cpu states updates (This is different than that of the periodic refresh timer)
     private readonly _onRefresh: vscode.EventEmitter<number> = new vscode.EventEmitter<number>();
     public readonly onRefresh: vscode.Event<number> = this._onRefresh.event;
 
@@ -213,7 +214,8 @@ export class CpuStates {
     }
 
     protected async getFrequency(): Promise<number|undefined> {
-        const frequencyString = await this.activeSession?.evaluateGlobalExpression('SystemCoreClock');
+        const result = await this.activeSession?.evaluateGlobalExpression('SystemCoreClock');
+        const frequencyString = result?.match(/\d+/) ? result : undefined;
         if (!frequencyString) {
             return undefined;
         }