@theia/debug 1.29.0-next.9 → 1.29.1

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

@@ -18,7 +18,7 @@
 
 import * as React from '@theia/core/shared/react';
 import { LabelProvider } from '@theia/core/lib/browser';
-import { DebugProtocol } from 'vscode-debugprotocol';
+import { DebugProtocol } from '@vscode/debugprotocol';
 import { Emitter, Event, DisposableCollection, Disposable, MessageClient, MessageType, Mutable, ContributionProvider } from '@theia/core/lib/common';
 import { TerminalService } from '@theia/terminal/lib/browser/base/terminal-service';
 import { EditorManager } from '@theia/editor/lib/browser';
@@ -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/disassembly-view/disassembly-view-instruction-renderer.ts

@@ -29,7 +29,7 @@ import { createStringBuilder } from '@theia/monaco-editor-core/esm/vs/editor/com
 import { ITextModel } from '@theia/monaco-editor-core/esm/vs/editor/common/model';
 import { ITextModelService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/resolverService';
 import { IThemeService } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
-import { DebugProtocol } from 'vscode-debugprotocol';
+import { DebugProtocol } from '@vscode/debugprotocol';
 import { DebugSource } from '../model/debug-source';
 import { DisassembledInstructionEntry, DisassemblyViewRendererReference, InstructionColumnTemplateData } from './disassembly-view-utilities';
 

package/src/browser/disassembly-view/disassembly-view-utilities.ts

@@ -16,7 +16,7 @@
 
 import { IDisposable, IEvent } from '@theia/monaco-editor-core';
 import { BareFontInfo } from '@theia/monaco-editor-core/esm/vs/editor/common/config/fontInfo';
-import { DebugProtocol } from 'vscode-debugprotocol';
+import { DebugProtocol } from '@vscode/debugprotocol';
 
 export interface DisassemblyViewRendererReference {
     onDidChangeStackFrame: IEvent<void>;

package/src/browser/disassembly-view/disassembly-view-widget.ts

@@ -17,7 +17,7 @@
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { BaseWidget, LabelProvider, Message, OpenerService, Widget } from '@theia/core/lib/browser';
 import { ArrayUtils } from '@theia/core/lib/common/types';
-import { DebugProtocol } from 'vscode-debugprotocol';
+import { DebugProtocol } from '@vscode/debugprotocol';
 import { InstructionBreakpoint } from '../breakpoint/breakpoint-marker';
 import { BreakpointManager } from '../breakpoint/breakpoint-manager';
 import { DebugSessionManager } from '../debug-session-manager';

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

@@ -15,8 +15,8 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import * as ReactDOM from '@theia/core/shared/react-dom';
-import { DebugProtocol } from 'vscode-debugprotocol';
+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';
 import URI from '@theia/core/lib/common/uri';
@@ -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-editor-model.ts

@@ -32,7 +32,7 @@ import { DebugEditor } from './debug-editor';
 import { DebugHoverWidget, createDebugHoverWidgetContainer } from './debug-hover-widget';
 import { DebugBreakpointWidget } from './debug-breakpoint-widget';
 import { DebugExceptionWidget } from './debug-exception-widget';
-import { DebugProtocol } from 'vscode-debugprotocol';
+import { DebugProtocol } from '@vscode/debugprotocol';
 import { DebugInlineValueDecorator, INLINE_VALUE_DECORATION_KEY } from './debug-inline-value-decorator';
 
 export const DebugEditorModelFactory = Symbol('DebugEditorModelFactory');

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

@@ -250,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/model/debug-breakpoint.tsx

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import { DebugProtocol } from 'vscode-debugprotocol/lib/debugProtocol';
+import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
 import URI from '@theia/core/lib/common/uri';
 import { EditorManager } from '@theia/editor/lib/browser';
 import { LabelProvider, DISABLED_CLASS } from '@theia/core/lib/browser';

package/src/browser/model/debug-source-breakpoint.tsx

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import { DebugProtocol } from 'vscode-debugprotocol/lib/debugProtocol';
+import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
 import { RecursivePartial } from '@theia/core';
 import URI from '@theia/core/lib/common/uri';
 import { Range } from '@theia/editor/lib/browser';

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

@@ -17,7 +17,7 @@
 import { LabelProvider } from '@theia/core/lib/browser';
 import { EditorManager, EditorOpenerOptions, EditorWidget } from '@theia/editor/lib/browser';
 import URI from '@theia/core/lib/common/uri';
-import { DebugProtocol } from 'vscode-debugprotocol/lib/debugProtocol';
+import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
 import { DebugSession } from '../debug-session';
 import { URI as Uri } from '@theia/core/shared/vscode-uri';
 import { DEBUG_SCHEME, SCHEME_PATTERN } from '../../common/debug-uri-utils';

package/src/browser/model/debug-stack-frame.tsx

@@ -23,7 +23,7 @@
 import * as React from '@theia/core/shared/react';
 import { WidgetOpenerOptions, DISABLED_CLASS } from '@theia/core/lib/browser';
 import { EditorWidget, Range, Position } from '@theia/editor/lib/browser';
-import { DebugProtocol } from 'vscode-debugprotocol/lib/debugProtocol';
+import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
 import { TreeElement } from '@theia/core/lib/browser/source-tree';
 import { DebugScope } from '../console/debug-console-items';
 import { DebugSource } from './debug-source';

package/src/browser/model/debug-thread.tsx

@@ -16,7 +16,7 @@
 
 import * as React from '@theia/core/shared/react';
 import { CancellationTokenSource, Emitter, Event } from '@theia/core';
-import { DebugProtocol } from 'vscode-debugprotocol/lib/debugProtocol';
+import { DebugProtocol } from '@vscode/debugprotocol/lib/debugProtocol';
 import { TreeElement } from '@theia/core/lib/browser/source-tree';
 import { DebugStackFrame } from './debug-stack-frame';
 import { DebugSession } from '../debug-session';

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>

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

@@ -16,7 +16,7 @@
 
 import * as React from '@theia/core/shared/react';
 import { inject, postConstruct, injectable } from '@theia/core/shared/inversify';
-import { Disposable, MenuPath } from '@theia/core';
+import { Disposable, DisposableCollection, MenuPath } from '@theia/core';
 import { ReactWidget } from '@theia/core/lib/browser/widgets';
 import { DebugViewModel } from './debug-view-model';
 import { DebugState } from '../debug-session';
@@ -31,6 +31,8 @@ export class DebugToolBar extends ReactWidget {
     @inject(DebugViewModel)
     protected readonly model: DebugViewModel;
 
+    protected readonly onRender = new DisposableCollection();
+
     @postConstruct()
     protected init(): void {
         this.id = 'debug:toolbar:' + this.model.id;
@@ -55,7 +57,10 @@ export class DebugToolBar extends ReactWidget {
         return true;
     }
     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();
+    };
 
     protected render(): React.ReactNode {
         const { state } = this.model;

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

@@ -17,7 +17,7 @@
 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 { DebugProtocol } from '@vscode/debugprotocol';
 
 export class DebugWatchExpression extends ExpressionItem {
 

package/src/common/debug-adapter-session.ts

@@ -25,7 +25,7 @@ import {
     DebugAdapter,
     DebugAdapterSession
 } from './debug-model';
-import { DebugProtocol } from 'vscode-debugprotocol';
+import { DebugProtocol } from '@vscode/debugprotocol';
 import { DebugChannel } from './debug-service';
 
 /**

package/src/common/debug-compound.ts

@@ -0,0 +1,32 @@
+// *****************************************************************************
+// Copyright (C) 2022 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { TaskIdentifier } from '@theia/task/lib/common';
+
+export const defaultCompound: DebugCompound = { name: 'Compound', configurations: [] };
+
+export interface DebugCompound {
+    name: string;
+    stopAll?: boolean;
+    preLaunchTask?: string | TaskIdentifier;
+    configurations: (string | { name: string, folder: string })[];
+}
+
+export namespace DebugCompound {
+    export function is(arg: unknown): arg is DebugCompound {
+        return !!arg && typeof arg === 'object' && 'name' in arg && 'configurations' in arg;
+    }
+}