@theia/debug 1.33.0-next.9 → 1.33.0

package/src/browser/style/index.css

@@ -169,7 +169,7 @@
 }
 
 .theia-debug-console-variable {
-    width: 100%;
+    display: flex;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -195,6 +195,20 @@
     color: var(--theia-variable-name-color);
 }
 
+.theia-TreeNode:not(:hover) .theia-debug-console-variable .action-label {
+    visibility: hidden;
+}
+
+.theia-debug-console-variable .action-label {
+    /* Vertically center the button in the tree node */
+    margin: auto;
+}
+
+.theia-debug-console-variable .watch-error {
+    font-style: italic;
+    color: var(--theia-debugConsole-errorForeground);
+}
+
 /** Editor **/
 
 .theia-debug-breakpoint-icon {

package/src/browser/view/debug-view-model.ts

@@ -165,11 +165,12 @@ export class DebugViewModel implements Disposable {
     }
 
     async addWatchExpression(expression: string = ''): Promise<DebugWatchExpression | undefined> {
-        const watchExpression = new DebugWatchExpression({
+        const watchExpression: DebugWatchExpression = new DebugWatchExpression({
             id: Number.MAX_SAFE_INTEGER,
             expression,
             session: () => this.currentSession,
-            onDidChange: () => { /* no-op */ }
+            remove: () => this.removeWatchExpression(watchExpression),
+            onDidChange: () => { /* no-op */ },
         });
         await watchExpression.open();
         if (!watchExpression.expression) {
@@ -194,10 +195,11 @@ export class DebugViewModel implements Disposable {
             toRemove.delete(id);
             if (!this._watchExpressions.has(id)) {
                 added = true;
-                const watchExpression = new DebugWatchExpression({
+                const watchExpression: DebugWatchExpression = new DebugWatchExpression({
                     id,
                     expression,
                     session: () => this.currentSession,
+                    remove: () => this.removeWatchExpression(watchExpression),
                     onDidChange: () => this.fireDidChangeWatchExpressions()
                 });
                 this._watchExpressions.set(id, watchExpression);

package/src/browser/view/debug-watch-expression.tsx

@@ -18,15 +18,19 @@ import * as React from '@theia/core/shared/react';
 import { SingleTextInputDialog } from '@theia/core/lib/browser/dialogs';
 import { ExpressionItem, DebugSessionProvider } from '../console/debug-console-items';
 import { DebugProtocol } from '@vscode/debugprotocol';
+import { codicon, TREE_NODE_SEGMENT_GROW_CLASS } from '@theia/core/lib/browser';
+import { nls } from '@theia/core';
 
 export class DebugWatchExpression extends ExpressionItem {
 
     readonly id: number;
+    protected isError: boolean;
 
     constructor(protected readonly options: {
         id: number,
         expression: string,
         session: DebugSessionProvider,
+        remove: () => void,
         onDidChange: () => void
     }) {
         super(options.expression, options.session);
@@ -37,17 +41,23 @@ export class DebugWatchExpression extends ExpressionItem {
         await super.evaluate('watch');
     }
 
-    protected override setResult(body?: DebugProtocol.EvaluateResponse['body']): void {
-        // overridden to ignore error
-        super.setResult(body);
+    protected override setResult(body?: DebugProtocol.EvaluateResponse['body'], error?: string): void {
+        if (!this.options.session()) {
+            return;
+        }
+        super.setResult(body, error);
+        this.isError = !!error;
         this.options.onDidChange();
     }
 
     override render(): React.ReactNode {
         return <div className='theia-debug-console-variable'>
-            <span title={this.type || this._expression} className='name'>{this._expression}: </span>
-            <span title={this._value} ref={this.setValueRef}>{this._value}</span>
-        </div >;
+            <div className={TREE_NODE_SEGMENT_GROW_CLASS}>
+                <span title={this.type || this._expression} className='name'>{this._expression}: </span>
+                <span title={this._value} ref={this.setValueRef} className={this.isError ? 'watch-error' : ''}>{this._value}</span>
+            </div>
+            <div className={codicon('close', true)} title={nls.localizeByDefault('Remove Expression')} onClick={this.options.remove} />
+        </div>;
     }
 
     async open(): Promise<void> {