@theia/debug 1.29.0-next.4 → 1.29.0-next.44

package/src/browser/debug-session-manager.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { DisposableCollection, Emitter, Event, MessageService, ProgressService, WaitUntilEvent } from '@theia/core';
+import { DisposableCollection, Emitter, Event, MessageService, nls, ProgressService, WaitUntilEvent } from '@theia/core';
 import { LabelProvider, ApplicationShell } from '@theia/core/lib/browser';
 import { ContextKey, ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import URI from '@theia/core/lib/common/uri';
@@ -29,7 +29,7 @@ import { BreakpointManager } from './breakpoint/breakpoint-manager';
 import { DebugConfigurationManager } from './debug-configuration-manager';
 import { DebugSession, DebugState } from './debug-session';
 import { DebugSessionContributionRegistry, DebugSessionFactory } from './debug-session-contribution';
-import { DebugSessionOptions, InternalDebugSessionOptions } from './debug-session-options';
+import { DebugCompoundRoot, DebugCompoundSessionOptions, DebugConfigurationSessionOptions, DebugSessionOptions, InternalDebugSessionOptions } from './debug-session-options';
 import { DebugStackFrame } from './model/debug-stack-frame';
 import { DebugThread } from './model/debug-thread';
 import { TaskIdentifier } from '@theia/task/lib/common';
@@ -191,7 +191,19 @@ export class DebugSessionManager {
         }
     }
 
-    async start(options: DebugSessionOptions): Promise<DebugSession | undefined> {
+    async start(options: DebugCompoundSessionOptions): Promise<boolean | undefined>;
+    async start(options: DebugConfigurationSessionOptions): Promise<DebugSession | undefined>;
+    async start(options: DebugSessionOptions): Promise<DebugSession | boolean | undefined>;
+    async start(name: string): Promise<DebugSession | boolean | undefined>;
+    async start(optionsOrName: DebugSessionOptions | string): Promise<DebugSession | boolean | undefined> {
+        if (typeof optionsOrName === 'string') {
+            const options = this.debugConfigurationManager.find(optionsOrName);
+            return !!options && this.start(options);
+        }
+        return optionsOrName.configuration ? this.startConfiguration(optionsOrName) : this.startCompound(optionsOrName);
+    }
+
+    protected async startConfiguration(options: DebugConfigurationSessionOptions): Promise<DebugSession | undefined> {
         return this.progressService.withProgress('Start...', 'debug', async () => {
             try {
                 if (!await this.saveAll()) {
@@ -200,7 +212,7 @@ export class DebugSessionManager {
                 await this.fireWillStartDebugSession();
                 const resolved = await this.resolveConfiguration(options);
 
-                if (!resolved) {
+                if (!resolved || !resolved.configuration) {
                     // As per vscode API: https://code.visualstudio.com/api/references/vscode-api#DebugConfigurationProvider
                     // "Returning the value 'undefined' prevents the debug session from starting.
                     // Returning the value 'null' prevents the debug session from starting and opens the
@@ -236,13 +248,70 @@ export class DebugSessionManager {
         });
     }
 
+    protected async startCompound(options: DebugCompoundSessionOptions): Promise<boolean | undefined> {
+        let configurations: DebugConfigurationSessionOptions[] = [];
+        try {
+            configurations = this.getCompoundConfigurations(options);
+        } catch (error) {
+            this.messageService.error(error.message);
+            return;
+        }
+
+        if (options.compound.preLaunchTask) {
+            const taskRun = await this.runTask(options.workspaceFolderUri, options.compound.preLaunchTask, true);
+            if (!taskRun) {
+                return undefined;
+            }
+        }
+
+        // Compound launch is a success only if each configuration launched successfully
+        const values = await Promise.all(configurations.map(configuration => this.startConfiguration(configuration)));
+        const result = values.every(success => !!success);
+        return result;
+    }
+
+    protected getCompoundConfigurations(options: DebugCompoundSessionOptions): DebugConfigurationSessionOptions[] {
+        const compound = options.compound;
+        if (!compound.configurations) {
+            throw new Error(nls.localizeByDefault('Compound must have "configurations" attribute set in order to start multiple configurations.'));
+        }
+
+        const compoundRoot = compound.stopAll ? new DebugCompoundRoot() : undefined;
+        const configurations: DebugConfigurationSessionOptions[] = [];
+        for (const configData of compound.configurations) {
+            const name = typeof configData === 'string' ? configData : configData.name;
+            if (name === compound.name) {
+                throw new Error(nls.localize('theia/debug/compound-cycle', "Launch configuration '{0}' contains a cycle with itself", name));
+            }
+
+            const workspaceFolderUri = typeof configData === 'string' ? options.workspaceFolderUri : configData.folder;
+            const matchingOptions = [...this.debugConfigurationManager.all]
+                .filter(option => option.name === name && !!option.configuration && option.workspaceFolderUri === workspaceFolderUri);
+            if (matchingOptions.length === 1) {
+                const match = matchingOptions[0];
+                if (DebugSessionOptions.isConfiguration(match)) {
+                    configurations.push({ ...match, compoundRoot, configuration: { ...match.configuration, noDebug: options.noDebug } });
+                } else {
+                    throw new Error(nls.localizeByDefault("Could not find launch configuration '{0}' in the workspace.", name));
+                }
+            } else {
+                throw new Error(matchingOptions.length === 0
+                    ? workspaceFolderUri
+                        ? nls.localizeByDefault("Can not find folder with name '{0}' for configuration '{1}' in compound '{2}'.", workspaceFolderUri, name, compound.name)
+                        : nls.localizeByDefault("Could not find launch configuration '{0}' in the workspace.", name)
+                    : nls.localizeByDefault("There are multiple launch configurations '{0}' in the workspace. Use folder name to qualify the configuration.", name));
+            }
+        }
+        return configurations;
+    }
+
     protected async fireWillStartDebugSession(): Promise<void> {
         await WaitUntilEvent.fire(this.onWillStartDebugSessionEmitter, {});
     }
 
     protected configurationIds = new Map<string, number>();
     protected async resolveConfiguration(
-        options: Readonly<DebugSessionOptions>
+        options: Readonly<DebugConfigurationSessionOptions>
     ): Promise<InternalDebugSessionOptions | undefined | null> {
         if (InternalDebugSessionOptions.is(options)) {
             return options;
@@ -275,10 +344,12 @@ export class DebugSessionManager {
         const key = configuration.name + workspaceFolderUri;
         const id = this.configurationIds.has(key) ? this.configurationIds.get(key)! + 1 : 0;
         this.configurationIds.set(key, id);
+
         return {
             id,
-            configuration,
-            workspaceFolderUri
+            ...options,
+            name: configuration.name,
+            configuration
         };
     }
 
@@ -301,7 +372,7 @@ export class DebugSessionManager {
         return this.debug.resolveDebugConfigurationWithSubstitutedVariables(configuration, workspaceFolderUri);
     }
 
-    protected async doStart(sessionId: string, options: DebugSessionOptions): Promise<DebugSession> {
+    protected async doStart(sessionId: string, options: DebugConfigurationSessionOptions): Promise<DebugSession> {
         const parentSession = options.configuration.parentSession && this._sessions.get(options.configuration.parentSession.id);
         const contrib = this.sessionContributionRegistry.get(options.configuration.type);
         const sessionFactory = contrib ? contrib.debugSessionFactory() : this.debugSessionFactory;

package/src/browser/debug-session-options.ts

@@ -14,44 +14,101 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
+import { Emitter } from '@theia/core';
 import { DebugConfiguration } from '../common/debug-common';
+import { DebugCompound } from '../common/debug-compound';
+
+export class DebugCompoundRoot {
+    private stopped = false;
+    private stopEmitter = new Emitter<void>();
+    onDidSessionStop = this.stopEmitter.event;
+
+    stopSession(): void {
+        if (!this.stopped) { // avoid sending extraneous terminate events
+            this.stopped = true;
+            this.stopEmitter.fire();
+        }
+    }
+}
 
 export interface DebugSessionOptionsBase {
     workspaceFolderUri?: string,
-    providerType?: string // Applicable to dynamic configurations
 }
 
-export interface DebugSessionOptions extends DebugSessionOptionsBase {
-    configuration: DebugConfiguration
+export interface DebugConfigurationSessionOptions extends DebugSessionOptionsBase {
+    name: string; // derived from the configuration
+    configuration: DebugConfiguration;
+    compound?: never;
+    compoundRoot?: DebugCompoundRoot;
+    providerType?: string // Applicable to dynamic configurations
 }
 
-export interface DebugSessionOptionsData extends DebugSessionOptionsBase, DebugConfiguration {
+export type DynamicDebugConfigurationSessionOptions = DebugConfigurationSessionOptions & { providerType: string };
+
+export interface DebugCompoundSessionOptions extends DebugSessionOptionsBase {
+    name: string; // derived from the compound
+    configuration?: never;
+    compound: DebugCompound;
+    noDebug?: boolean,
 }
 
-export interface InternalDebugSessionOptions extends DebugSessionOptions {
-    id: number
+export type DebugSessionOptions = DebugConfigurationSessionOptions | DebugCompoundSessionOptions;
+
+export namespace DebugSessionOptions {
+    export function isConfiguration(options?: DebugSessionOptions): options is DebugConfigurationSessionOptions {
+        return !!options && 'configuration' in options && !!options.configuration;
+    }
+
+    export function isDynamic(options?: DebugSessionOptions): options is DynamicDebugConfigurationSessionOptions {
+        return isConfiguration(options) && 'providerType' in options && !!options.providerType;
+    }
+
+    export function isCompound(options?: DebugSessionOptions): options is DebugCompoundSessionOptions {
+        return !!options && 'compound' in options && !!options.compound;
+    }
 }
+
+/**
+ * Flat and partial version of a debug session options usable to find the options later in the manager.
+ * @deprecated Not needed anymore, the recommended way is to serialize/deserialize the options directly using `JSON.stringify` and `JSON.parse`.
+ */
+export type DebugSessionOptionsData = DebugSessionOptionsBase & (DebugConfiguration | DebugCompound);
+
+export type InternalDebugSessionOptions = DebugSessionOptions & { id: number };
+
 export namespace InternalDebugSessionOptions {
 
     const SEPARATOR = '__CONF__';
+    const SEPARATOR_CONFIGS = '__COMP__';
 
     export function is(options: DebugSessionOptions): options is InternalDebugSessionOptions {
         return 'id' in options;
     }
 
-    export function toValue(debugSessionOptions: DebugSessionOptions): string {
-        return debugSessionOptions.configuration.name + SEPARATOR +
-            debugSessionOptions.configuration.type + SEPARATOR +
-            debugSessionOptions.configuration.request + SEPARATOR +
-            debugSessionOptions.workspaceFolderUri + SEPARATOR +
-            debugSessionOptions.providerType;
+    /** @deprecated Please use `JSON.stringify` to serialize the options. */
+    export function toValue(options: DebugSessionOptions): string {
+        if (DebugSessionOptions.isCompound(options)) {
+            return options.compound.name + SEPARATOR +
+                options.workspaceFolderUri + SEPARATOR +
+                options.compound?.configurations.join(SEPARATOR_CONFIGS);
+        }
+        return options.configuration.name + SEPARATOR +
+            options.configuration.type + SEPARATOR +
+            options.configuration.request + SEPARATOR +
+            options.workspaceFolderUri + SEPARATOR +
+            options.providerType;
     }
 
+    /** @deprecated Please use `JSON.parse` to restore previously serialized debug session options. */
+    // eslint-disable-next-line deprecation/deprecation
     export function parseValue(value: string): DebugSessionOptionsData {
         const split = value.split(SEPARATOR);
-        if (split.length !== 5) {
-            throw new Error('Unexpected argument, the argument is expected to have been generated by the \'toValue\' function');
+        if (split.length === 5) {
+            return { name: split[0], type: split[1], request: split[2], workspaceFolderUri: split[3], providerType: split[4] };
+        }
+        if (split.length === 3) {
+            return { name: split[0], workspaceFolderUri: split[1], configurations: split[2].split(SEPARATOR_CONFIGS) };
         }
-        return {name: split[0], type: split[1], request: split[2], workspaceFolderUri: split[3], providerType: split[4]};
+        throw new Error('Unexpected argument, the argument is expected to have been generated by the \'toValue\' function');
     }
 }

package/src/browser/debug-session.tsx

@@ -33,7 +33,7 @@ import { DebugSourceBreakpoint } from './model/debug-source-breakpoint';
 import debounce = require('p-debounce');
 import URI from '@theia/core/lib/common/uri';
 import { BreakpointManager } from './breakpoint/breakpoint-manager';
-import { DebugSessionOptions, InternalDebugSessionOptions } from './debug-session-options';
+import { DebugConfigurationSessionOptions, InternalDebugSessionOptions } from './debug-session-options';
 import { DebugConfiguration, DebugConsoleMode } from '../common/debug-common';
 import { SourceBreakpoint, ExceptionBreakpoint } from './breakpoint/breakpoint-marker';
 import { TerminalWidgetOptions, TerminalWidget } from '@theia/terminal/lib/browser/base/terminal-widget';
@@ -76,7 +76,7 @@ export class DebugSession implements CompositeTreeElement {
 
     constructor(
         readonly id: string,
-        readonly options: DebugSessionOptions,
+        readonly options: DebugConfigurationSessionOptions,
         readonly parentSession: DebugSession | undefined,
         protected readonly connection: DebugSessionConnection,
         protected readonly terminalServer: TerminalService,
@@ -117,6 +117,9 @@ export class DebugSession implements CompositeTreeElement {
             this.connection.on('capabilities', event => this.updateCapabilities(event.body.capabilities)),
             this.breakpoints.onDidChangeMarkers(uri => this.updateBreakpoints({ uri, sourceModified: true }))
         ]);
+        if (this.options.compoundRoot) {
+            this.toDispose.push(this.options.compoundRoot.onDidSessionStop(() => this.stop(false, () => { })));
+        }
     }
 
     get onDispose(): Event<void> {
@@ -352,6 +355,9 @@ export class DebugSession implements CompositeTreeElement {
                     console.error('Error on disconnect', e);
                 }
             }
+            if (!isRestart) {
+                this.options.compoundRoot?.stopSession();
+            }
             callback();
         }
     }

package/src/browser/editor/debug-breakpoint-widget.tsx

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import * as ReactDOM from '@theia/core/shared/react-dom';
+import { createRoot, Root } from '@theia/core/shared/react-dom/client';
 import { DebugProtocol } from 'vscode-debugprotocol';
 import { injectable, postConstruct, inject } from '@theia/core/shared/inversify';
 import { Disposable, DisposableCollection, nls } from '@theia/core';
@@ -55,6 +55,7 @@ export class DebugBreakpointWidget implements Disposable {
     protected readonly editorProvider: MonacoEditorProvider;
 
     protected selectNode: HTMLDivElement;
+    protected selectNodeRoot: Root;
 
     protected zone: MonacoEditorZoneWidget;
 
@@ -99,6 +100,8 @@ export class DebugBreakpointWidget implements Disposable {
         const selectNode = this.selectNode = document.createElement('div');
         selectNode.classList.add('theia-debug-breakpoint-select');
         this.zone.containerNode.appendChild(selectNode);
+        this.selectNodeRoot = createRoot(this.selectNode);
+        this.toDispose.push(Disposable.create(() => this.selectNodeRoot.unmount()));
 
         const inputNode = document.createElement('div');
         inputNode.classList.add('theia-debug-breakpoint-input');
@@ -148,7 +151,6 @@ export class DebugBreakpointWidget implements Disposable {
             this.zone.layout(heightInLines);
             this.updatePlaceholder();
         }));
-        this.toDispose.push(Disposable.create(() => ReactDOM.unmountComponentAtNode(selectNode)));
     }
 
     dispose(): void {
@@ -213,14 +215,14 @@ export class DebugBreakpointWidget implements Disposable {
         if (this._input) {
             this._input.getControl().setValue(this._values[this.context] || '');
         }
-        ReactDOM.render(<SelectComponent
+        this.selectNodeRoot.render(<SelectComponent
             defaultValue={this.context} onChange={this.updateInput}
             options={[
                 { value: 'condition', label: nls.localizeByDefault('Expression') },
                 { value: 'hitCondition', label: nls.localizeByDefault('Hit Count') },
                 { value: 'logMessage', label: nls.localizeByDefault('Log Message') },
             ]}
-        />, this.selectNode);
+        />);
     }
 
     protected readonly updateInput = (option: SelectOption) => {

package/src/browser/editor/debug-exception-widget.tsx

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import * as ReactDOM from '@theia/core/shared/react-dom';
+import { createRoot, Root } from '@theia/core/shared/react-dom/client';
 import * as monaco from '@theia/monaco-editor-core';
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
@@ -54,6 +54,7 @@ export class DebugExceptionWidget implements Disposable {
     readonly editor: DebugEditor;
 
     protected zone: MonacoEditorZoneWidget;
+    protected containerNodeRoot: Root;
 
     protected readonly toDispose = new DisposableCollection();
 
@@ -61,7 +62,8 @@ export class DebugExceptionWidget implements Disposable {
     protected async init(): Promise<void> {
         this.toDispose.push(this.zone = new DebugExceptionMonacoEditorZoneWidget(this.editor.getControl()));
         this.zone.containerNode.classList.add('theia-debug-exception-widget');
-        this.toDispose.push(Disposable.create(() => ReactDOM.unmountComponentAtNode(this.zone.containerNode)));
+        this.containerNodeRoot = createRoot(this.zone.containerNode);
+        this.toDispose.push(Disposable.create(() => this.containerNodeRoot.unmount()));
         this.toDispose.push(this.editor.getControl().onDidLayoutChange(() => this.layout()));
     }
 
@@ -94,14 +96,14 @@ export class DebugExceptionWidget implements Disposable {
         const exceptionTitle = info.id ?
             nls.localizeByDefault('Exception has occurred: {0}', info.id) :
             nls.localizeByDefault('Exception has occurred.');
-        ReactDOM.render(<React.Fragment>
-            <div className='title'>
+        this.containerNodeRoot.render(<React.Fragment>
+            <div className='title' ref={cb}>
                 {exceptionTitle}
                 <span id="exception-close" className={codicon('close', true)} onClick={() => this.hide()} title={nls.localizeByDefault('Close')}></span>
             </div>
             {info.description && <div className='description'>{info.description}</div>}
             {stackTrace && <div className='stack-trace'>{stackTrace}</div>}
-        </React.Fragment>, this.zone.containerNode, cb);
+        </React.Fragment>);
     }
 
     protected layout(): void {

package/src/browser/editor/debug-hover-widget.ts

@@ -28,6 +28,11 @@ import { DebugExpressionProvider } from './debug-expression-provider';
 import { DebugHoverSource } from './debug-hover-source';
 import { DebugVariable } from '../console/debug-console-items';
 import * as monaco from '@theia/monaco-editor-core';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+import { ILanguageFeaturesService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languageFeatures';
+import { CancellationTokenSource } from '@theia/monaco-editor-core/esm/vs/base/common/cancellation';
+import { Position } from '@theia/monaco-editor-core/esm/vs/editor/common/core/position';
+import { ArrayUtils } from '@theia/core';
 
 export interface ShowDebugHoverOptions {
     selection: monaco.Range
@@ -146,6 +151,8 @@ export class DebugHoverWidget extends SourceTreeWidget implements monaco.editor.
     }
 
     protected async doShow(options: ShowDebugHoverOptions | undefined = this.options): Promise<void> {
+        const cancellationSource = new CancellationTokenSource();
+
         if (!this.isEditorFrame()) {
             this.hide();
             return;
@@ -162,7 +169,33 @@ export class DebugHoverWidget extends SourceTreeWidget implements monaco.editor.
         }
 
         this.options = options;
-        const matchingExpression = this.expressionProvider.get(this.editor.getControl().getModel()!, options.selection);
+        let matchingExpression: string | undefined;
+
+        const pluginExpressionProvider = StandaloneServices.get(ILanguageFeaturesService).evaluatableExpressionProvider;
+        const textEditorModel = this.editor.document.textEditorModel;
+
+        if (pluginExpressionProvider && pluginExpressionProvider.has(textEditorModel)) {
+            const registeredProviders = pluginExpressionProvider.ordered(textEditorModel);
+            const position = new Position(this.options!.selection.startLineNumber, this.options!.selection.startColumn);
+
+            const promises = registeredProviders.map(support =>
+                Promise.resolve(support.provideEvaluatableExpression(textEditorModel, position, cancellationSource.token))
+            );
+
+            const results = await Promise.all(promises).then(ArrayUtils.coalesce);
+            if (results.length > 0) {
+                matchingExpression = results[0].expression;
+                const range = results[0].range;
+
+                if (!matchingExpression) {
+                    const lineContent = textEditorModel.getLineContent(position.lineNumber);
+                    matchingExpression = lineContent.substring(range.startColumn - 1, range.endColumn - 1);
+                }
+            }
+        } else { // use fallback if no provider was registered
+            matchingExpression = this.expressionProvider.get(this.editor.getControl().getModel()!, options.selection);
+        }
+
         if (!matchingExpression) {
             this.hide();
             return;
@@ -217,14 +250,15 @@ export class DebugHoverWidget extends SourceTreeWidget implements monaco.editor.
             return undefined!;
         }
         const position = this.options && this.options.selection.getStartPosition();
-        const word = position && this.editor.getControl().getModel()!.getWordAtPosition(position);
-        return position && word ? {
-            position: new monaco.Position(position.lineNumber, word.startColumn),
-            preference: [
-                monaco.editor.ContentWidgetPositionPreference.ABOVE,
-                monaco.editor.ContentWidgetPositionPreference.BELOW
-            ]
-        } : undefined!;
+        return position
+            ? {
+                position: new monaco.Position(position.lineNumber, position.column),
+                preference: [
+                    monaco.editor.ContentWidgetPositionPreference.ABOVE,
+                    monaco.editor.ContentWidgetPositionPreference.BELOW,
+                ],
+            }
+            : undefined!;
     }
 
     protected override onUpdateRequest(msg: Message): void {

package/src/browser/view/debug-configuration-select.tsx

@@ -17,7 +17,7 @@
 import URI from '@theia/core/lib/common/uri';
 import * as React from '@theia/core/shared/react';
 import { DebugConfigurationManager } from '../debug-configuration-manager';
-import { DebugSessionOptions, InternalDebugSessionOptions } from '../debug-session-options';
+import { DebugSessionOptions } from '../debug-session-options';
 import { SelectComponent, SelectOption } from '@theia/core/lib/browser/widgets/select-component';
 import { QuickInputService } from '@theia/core/lib/browser';
 import { nls } from '@theia/core/lib/common/nls';
@@ -40,6 +40,7 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
     protected static readonly PICK = '__PICK__';
     protected static readonly NO_CONFIGURATION = '__NO_CONF__';
     protected static readonly ADD_CONFIGURATION = '__ADD_CONF__';
+    protected static readonly CONFIG_MARKER = '__CONFIG__';
 
     private readonly selectRef = React.createRef<SelectComponent>();
     private manager: DebugConfigurationManager;
@@ -65,7 +66,7 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
     override render(): React.ReactNode {
         return <SelectComponent
             options={this.renderOptions()}
-            defaultValue={this.currentValue}
+            defaultValue={this.state.currentValue}
             onChange={option => this.setCurrentConfiguration(option)}
             onFocus={() => this.refreshDebugConfigurations()}
             onBlur={() => this.refreshDebugConfigurations()}
@@ -75,7 +76,26 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
 
     protected get currentValue(): string {
         const { current } = this.manager;
-        return current ? InternalDebugSessionOptions.toValue(current) : DebugConfigurationSelect.NO_CONFIGURATION;
+        const matchingOption = this.getCurrentOption(current);
+        return matchingOption ? matchingOption.value! : current ? JSON.stringify(current) : DebugConfigurationSelect.NO_CONFIGURATION;
+    }
+
+    protected getCurrentOption(current: DebugSessionOptions | undefined): SelectOption | undefined {
+        if (!current || !this.selectRef.current) {
+            return;
+        }
+        const matchingOption = this.selectRef.current!.options.find(option =>
+            option.userData === DebugConfigurationSelect.CONFIG_MARKER
+            && this.matchesOption(JSON.parse(option.value!), current)
+        );
+        return matchingOption;
+    }
+
+    protected matchesOption(sessionOption: DebugSessionOptions, current: DebugSessionOptions): boolean {
+        const matchesNameAndWorkspace = sessionOption.name === current.name && sessionOption.workspaceFolderUri === current.workspaceFolderUri;
+        return DebugSessionOptions.isConfiguration(sessionOption) && DebugSessionOptions.isConfiguration(current)
+            ? matchesNameAndWorkspace && sessionOption.providerType === current.providerType
+            : matchesNameAndWorkspace;
     }
 
     protected readonly setCurrentConfiguration = (option: SelectOption) => {
@@ -88,12 +108,9 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
             const providerType = this.parsePickValue(value);
             this.selectDynamicConfigFromQuickPick(providerType);
         } else {
-            const { name, type, request, workspaceFolderUri, providerType } = InternalDebugSessionOptions.parseValue(value);
-            this.manager.current = this.manager.find(
-                { name, type, request },
-                workspaceFolderUri,
-                providerType === 'undefined' ? undefined : providerType
-            );
+            const data = JSON.parse(value) as DebugSessionOptions;
+            this.manager.current = data;
+            this.refreshDebugConfigurations();
         }
     };
 
@@ -151,13 +168,15 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
     protected refreshDebugConfigurations = async () => {
         const configsPerType = await this.manager.provideDynamicDebugConfigurations();
         const providerTypes = [];
-        for (const [ type, configurations ] of Object.entries(configsPerType)) {
+        for (const [type, configurations] of Object.entries(configsPerType)) {
             if (configurations.length > 0) {
                 providerTypes.push(type);
             }
         }
-        this.selectRef.current!.value = this.currentValue;
-        this.setState({ providerTypes, currentValue: this.currentValue });
+
+        const value = this.currentValue;
+        this.selectRef.current!.value = value;
+        this.setState({ providerTypes, currentValue: value });
     };
 
     protected renderOptions(): SelectOption[] {
@@ -165,10 +184,11 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
 
         // Add non dynamic debug configurations
         for (const config of this.manager.all) {
-            const value = InternalDebugSessionOptions.toValue(config);
+            const value = JSON.stringify(config);
             options.push({
                 value,
-                label: this.toName(config, this.props.isMultiRoot)
+                label: this.toName(config, this.props.isMultiRoot),
+                userData: DebugConfigurationSelect.CONFIG_MARKER
             });
         }
 
@@ -181,10 +201,11 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
                 });
             }
             for (const dynamicOption of recentDynamicOptions) {
-                const value = InternalDebugSessionOptions.toValue(dynamicOption);
+                const value = JSON.stringify(dynamicOption);
                 options.push({
                     value,
-                    label: this.toName(dynamicOption, this.props.isMultiRoot) + ' (' + dynamicOption.providerType + ')'
+                    label: this.toName(dynamicOption, this.props.isMultiRoot) + ' (' + dynamicOption.providerType + ')',
+                    userData: DebugConfigurationSelect.CONFIG_MARKER
                 });
             }
         }
@@ -225,10 +246,11 @@ export class DebugConfigurationSelect extends React.Component<DebugConfiguration
         return options;
     }
 
-    protected toName({ configuration, workspaceFolderUri }: DebugSessionOptions, multiRoot: boolean): string {
-        if (!workspaceFolderUri || !multiRoot) {
-            return configuration.name;
+    protected toName(options: DebugSessionOptions, multiRoot: boolean): string {
+        const name = options.configuration?.name ?? options.name;
+        if (!options.workspaceFolderUri || !multiRoot) {
+            return name;
         }
-        return `${configuration.name} (${new URI(workspaceFolderUri).path.base})`;
+        return `${name} (${new URI(options.workspaceFolderUri).path.base})`;
     }
 }

package/src/browser/view/debug-configuration-widget.tsx

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { ReactWidget, QuickInputService } from '@theia/core/lib/browser';
-import { CommandRegistry, Disposable, MessageService } from '@theia/core/lib/common';
+import { CommandRegistry, Disposable, DisposableCollection, MessageService } from '@theia/core/lib/common';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
@@ -55,6 +55,8 @@ export class DebugConfigurationWidget extends ReactWidget {
     @inject(MessageService)
     protected readonly messageService: MessageService;
 
+    protected readonly onRender = new DisposableCollection();
+
     @postConstruct()
     protected init(): void {
         this.addClass('debug-toolbar');
@@ -80,7 +82,10 @@ export class DebugConfigurationWidget extends ReactWidget {
     }
 
     protected stepRef: DebugAction | undefined;
-    protected setStepRef = (stepRef: DebugAction | null) => this.stepRef = stepRef || undefined;
+    protected setStepRef = (stepRef: DebugAction | null) => {
+        this.stepRef = stepRef || undefined;
+        this.onRender.dispose();
+    };
 
     render(): React.ReactNode {
         return <React.Fragment>