debug: fix watch expression errors

The commit updates `watch` expressions so we respect the proper error
from the DAP and not hardcode to a value we define. The changes also
update the styling to align with VS Code.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>

packages/debug/src/browser/style/index.css

@@ -195,6 +195,11 @@
     color: var(--theia-variable-name-color);
 }
 
+.theia-debug-console-variable .watch-error {
+    font-style: italic;
+    color: var(--theia-debugConsole-errorForeground);
+}
+
 /** Editor **/
 
 .theia-debug-breakpoint-icon {

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

@@ -22,6 +22,7 @@ import { DebugProtocol } from '@vscode/debugprotocol';
 export class DebugWatchExpression extends ExpressionItem {
 
     readonly id: number;
+    protected isError: boolean;
 
     constructor(protected readonly options: {
         id: number,
@@ -37,16 +38,16 @@ 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 {
+        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>
+            <span title={this._value} ref={this.setValueRef} className={this.isError ? 'watch-error' : ''}>{this._value}</span>
         </div >;
     }