@theia/monaco 1.77.0-next.0 → 1.77.0-next.101

package/src/browser/monaco-marker-collection.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { Diagnostic } from '@theia/core/shared/vscode-languageserver-protocol';
-import { ProtocolToMonacoConverter } from './protocol-to-monaco-converter';
+import { ProtocolToMonacoConverter } from './protocol-to-monaco-converter.js';
 import * as monaco from '@theia/monaco-editor-core';
 import { Marker } from '@theia/markers/lib/common/marker';
 import URI from '@theia/core/lib/common/uri';

package/src/browser/monaco-menu.ts

@@ -18,9 +18,9 @@ import { MAIN_MENU_BAR, MenuAction, MenuContribution, MenuModelRegistry, MenuPat
 import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { EDITOR_CONTEXT_MENU, EditorMainMenu } from '@theia/editor/lib/browser';
-import { IMenuItem, MenuId, MenuRegistry, isIMenuItem } from '@theia/monaco-editor-core/esm/vs/platform/actions/common/actions';
-import { MonacoCommands } from './monaco-command';
-import { MonacoCommandRegistry } from './monaco-command-registry';
+import { IMenuItem, MenuId, MenuRegistry, isIMenuItem } from '@theia/monaco-editor-core/esm/vs/platform/actions/common/actions.js';
+import { MonacoCommands } from './monaco-command.js';
+import { MonacoCommandRegistry } from './monaco-command-registry.js';
 
 export interface MonacoActionGroup {
     id: string;

package/src/browser/monaco-mime-service.ts

@@ -14,14 +14,14 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import debounce = require('@theia/core/shared/lodash.debounce');
+import debounce from '@theia/core/shared/lodash.debounce';
 import { injectable } from '@theia/core/shared/inversify';
 import { MimeAssociation, MimeService } from '@theia/core/lib/browser/mime-service';
-import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
-import { ILanguageService } from '@theia/monaco-editor-core/esm/vs/editor/common/languages/language';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices.js';
+import { ILanguageService } from '@theia/monaco-editor-core/esm/vs/editor/common/languages/language.js';
 import * as monaco from '@theia/monaco-editor-core';
-import { clearConfiguredLanguageAssociations, registerConfiguredLanguageAssociation } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languagesAssociations';
-import { LanguageService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languageService';
+import { clearConfiguredLanguageAssociations, registerConfiguredLanguageAssociation } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languagesAssociations.js';
+import { LanguageService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languageService.js';
 
 @injectable()
 export class MonacoMimeService extends MimeService {

package/src/browser/monaco-nls.ts

@@ -25,7 +25,7 @@
  */
 
 // Re-export the message store — imported via a path that is NOT aliased.
-export { getNLSLanguage, getNLSMessages } from '@theia/monaco-editor-core/esm/vs/nls.messages';
+export { getNLSLanguage, getNLSMessages } from '@theia/monaco-editor-core/esm/vs/nls.messages.js';
 
 import { nls } from '@theia/core/lib/common/nls';
 import { FormatType, Localization } from '@theia/core/lib/common/i18n/localization';

package/src/browser/monaco-outline-contribution.ts

@@ -21,13 +21,13 @@ import { DisposableCollection, Disposable } from '@theia/core';
 import { OutlineViewService } from '@theia/outline-view/lib/browser/outline-view-service';
 import { OutlineSymbolInformationNode } from '@theia/outline-view/lib/browser/outline-view-widget';
 import URI from '@theia/core/lib/common/uri';
-import { MonacoEditor } from './monaco-editor';
-import debounce = require('@theia/core/shared/lodash.debounce');
+import { MonacoEditor } from './monaco-editor.js';
+import debounce from '@theia/core/shared/lodash.debounce';
 import * as monaco from '@theia/monaco-editor-core';
-import { ILanguageFeaturesService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languageFeatures';
-import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
-import { ITextModel } from '@theia/monaco-editor-core/esm/vs/editor/common/model';
-import { DocumentSymbol } from '@theia/monaco-editor-core/esm/vs/editor/common/languages';
+import { ILanguageFeaturesService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languageFeatures.js';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices.js';
+import { ITextModel } from '@theia/monaco-editor-core/esm/vs/editor/common/model.js';
+import { DocumentSymbol } from '@theia/monaco-editor-core/esm/vs/editor/common/languages.js';
 
 @injectable()
 export class MonacoOutlineContribution implements FrontendApplicationContribution {
@@ -301,6 +301,7 @@ export class MonacoOutlineContribution implements FrontendApplicationContributio
             iconClass: monaco.languages.SymbolKind[symbol.kind].toString().toLowerCase(),
             name: this.getName(symbol),
             detail: this.getDetail(symbol),
+            deprecated: this.isDeprecated(symbol),
             parent,
             uri,
             range: this.getNameRange(symbol),
@@ -324,6 +325,10 @@ export class MonacoOutlineContribution implements FrontendApplicationContributio
         return symbol.detail;
     }
 
+    protected isDeprecated(symbol: monaco.languages.DocumentSymbol): boolean {
+        return !!symbol.tags?.includes(monaco.languages.SymbolTag.Deprecated);
+    }
+
     protected createId(name: string, ids: Map<string, number>): string {
         const counter = ids.get(name);
         const index = typeof counter === 'number' ? counter + 1 : 0;
@@ -370,6 +375,8 @@ export interface MonacoOutlineSymbolInformationNode extends OutlineSymbolInforma
     range: Range;
     fullRange: Range;
     detail?: string;
+    /** Whether the symbol is tagged as deprecated. */
+    deprecated?: boolean;
     parent: MonacoOutlineSymbolInformationNode | undefined;
     children: MonacoOutlineSymbolInformationNode[];
 }

package/src/browser/monaco-outline-decorator.spec.ts

@@ -0,0 +1,96 @@
+// *****************************************************************************
+// Copyright (C) 2026 Vinay Kaushal 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+import { expect } from 'chai';
+import URI from '@theia/core/lib/common/uri';
+import type { CompositeTreeNode, Tree } from '@theia/core/lib/browser/tree';
+import type { TreeDecoration } from '@theia/core/lib/browser/tree/tree-decorator';
+import type * as monaco from '@theia/monaco-editor-core';
+import type { MonacoOutlineSymbolInformationNode } from './monaco-outline-contribution.js';
+
+describe('MonacoOutlineDecorator', () => {
+
+    // The outline code uses the full monaco API at runtime. Load it only once this suite runs: loading it while
+    // the spec files are collected registers monaco's editor contributions before monaco-init.spec initializes
+    // the standalone services, which then need browser APIs that JSDOM does not provide.
+    let monacoApi: typeof monaco;
+    let outline: typeof import('./monaco-outline-contribution.js');
+    let decorator: typeof import('./monaco-outline-decorator.js');
+    let disableJSDOM: () => void;
+
+    before(async () => {
+        disableJSDOM = enableJSDOM();
+        // @lumino/dragdrop (pulled in transitively) extends the DragEvent DOM global at
+        // module load, which JSDOM does not provide; stub it so the import succeeds.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!(global as any).DragEvent) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (global as any).DragEvent = class DragEvent extends (global as any).Event { };
+        }
+        monacoApi = await import('@theia/monaco-editor-core');
+        outline = await import('./monaco-outline-contribution.js');
+        decorator = await import('./monaco-outline-decorator.js');
+    });
+    after(() => disableJSDOM());
+
+    const range: monaco.IRange = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 10 };
+
+    function symbol(name: string, detail: string, deprecated = false): monaco.languages.DocumentSymbol {
+        const tags = deprecated ? [monacoApi.languages.SymbolTag.Deprecated] : [];
+        return { name, detail, kind: monacoApi.languages.SymbolKind.Method, tags, range, selectionRange: range };
+    }
+
+    function createNode(documentSymbol: monaco.languages.DocumentSymbol): MonacoOutlineSymbolInformationNode {
+        return new outline.MonacoOutlineContribution()['createNode'](new URI('file:///test.ts'), documentSymbol, new Map());
+    }
+
+    function decorate(...nodes: MonacoOutlineSymbolInformationNode[]): Promise<Map<string, TreeDecoration.Data>> {
+        const root: CompositeTreeNode = { id: 'root', name: 'root', parent: undefined, children: nodes };
+        return new decorator.MonacoOutlineDecorator().decorations({ root } as unknown as Tree);
+    }
+
+    it('marks a symbol tagged as deprecated', () => {
+        expect(createNode(symbol('old', '', true)).deprecated).to.equal(true);
+        expect(createNode(symbol('current', '')).deprecated).to.equal(false);
+    });
+
+    it('strikes through a deprecated symbol', async () => {
+        const node = createNode(symbol('old', '', true));
+
+        const decorations = await decorate(node);
+
+        expect(decorations.get(node.id)?.fontData).to.deep.equal({ style: 'line-through' });
+        expect(decorations.get(node.id)?.captionSuffixes).to.equal(undefined);
+    });
+
+    it('keeps the detail suffix of a deprecated symbol', async () => {
+        const node = createNode(symbol('old', '(): void', true));
+
+        const decorations = await decorate(node);
+
+        expect(decorations.get(node.id)?.fontData).to.deep.equal({ style: 'line-through' });
+        expect(decorations.get(node.id)?.captionSuffixes?.map(suffix => suffix.data)).to.deep.equal(['(): void']);
+    });
+
+    it('does not decorate a symbol that is neither deprecated nor has a detail', async () => {
+        const node = createNode(symbol('current', ''));
+
+        const decorations = await decorate(node);
+
+        expect(decorations.has(node.id)).to.equal(false);
+    });
+});

package/src/browser/monaco-outline-decorator.ts

@@ -19,7 +19,7 @@ import { Event, Emitter } from '@theia/core/lib/common/event';
 import { Tree } from '@theia/core/lib/browser/tree/tree';
 import { DepthFirstTreeIterator } from '@theia/core/lib/browser/tree/tree-iterator';
 import { TreeDecorator, TreeDecoration } from '@theia/core/lib/browser/tree/tree-decorator';
-import { MonacoOutlineSymbolInformationNode } from './monaco-outline-contribution';
+import { MonacoOutlineSymbolInformationNode } from './monaco-outline-contribution.js';
 
 @injectable()
 export class MonacoOutlineDecorator implements TreeDecorator {
@@ -43,7 +43,7 @@ export class MonacoOutlineDecorator implements TreeDecorator {
         }
 
         for (const treeNode of new DepthFirstTreeIterator(tree.root)) {
-            if (MonacoOutlineSymbolInformationNode.is(treeNode) && treeNode.detail) {
+            if (MonacoOutlineSymbolInformationNode.is(treeNode) && (treeNode.detail || treeNode.deprecated)) {
                 result.set(treeNode.id, this.toDecoration(treeNode));
             }
         }
@@ -52,15 +52,18 @@ export class MonacoOutlineDecorator implements TreeDecorator {
     }
 
     protected toDecoration(node: MonacoOutlineSymbolInformationNode): TreeDecoration.Data {
-        const captionSuffixes: TreeDecoration.CaptionAffix[] = [{
-            data: (node.detail || ''),
+        const captionSuffixes: TreeDecoration.CaptionAffix[] | undefined = node.detail ? [{
+            data: node.detail,
             fontData: {
                 color: 'var(--theia-descriptionForeground)',
             }
-        }];
+        }] : undefined;
+        // Like VS Code, strike through the names of deprecated symbols.
+        const fontData: TreeDecoration.FontData | undefined = node.deprecated ? { style: 'line-through' } : undefined;
 
         return {
-            captionSuffixes
+            captionSuffixes,
+            fontData
         };
     }
 }

package/src/browser/monaco-quick-access-registry.ts

@@ -18,10 +18,10 @@ import { KeybindingRegistry, QuickPickItem, QuickPickSeparator } from '@theia/co
 import { QuickAccessProviderDescriptor, QuickAccessRegistry } from '@theia/core/lib/browser/quick-input/quick-access';
 import { CancellationToken, Disposable } from '@theia/core/lib/common';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { MonacoQuickPickItem } from './monaco-quick-input-service';
+import { MonacoQuickPickItem } from './monaco-quick-input-service.js';
 import {
     IPickerQuickAccessProviderOptions, PickerQuickAccessProvider, Picks, Pick, IPickerQuickAccessItem
-} from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/pickerQuickAccess';
+} from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/pickerQuickAccess.js';
 import {
     Extensions,
     IQuickAccessProvider,
@@ -29,9 +29,9 @@ import {
     IQuickAccessProviderHelp,
     IQuickAccessRegistry,
     QuickAccessRegistry as VSCodeQuickAccessRegistry,
-} from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickAccess';
-import { IQuickPickItem, IQuickPickItemWithResource } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickInput';
-import { Registry } from '@theia/monaco-editor-core/esm/vs/platform/registry/common/platform';
+} from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickAccess.js';
+import { IQuickPickItem, IQuickPickItemWithResource } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickInput.js';
+import { Registry } from '@theia/monaco-editor-core/esm/vs/platform/registry/common/platform.js';
 
 interface IAnythingQuickPickItem extends IPickerQuickAccessItem, IQuickPickItemWithResource { }
 

package/src/browser/monaco-quick-input-service.spec.ts

@@ -26,8 +26,8 @@ if (!(global as any).DragEvent) {
 }
 
 import { expect } from 'chai';
-import { getColorRegistry } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/colorRegistry';
-import { MonacoQuickInputImplementation } from './monaco-quick-input-service';
+import { getColorRegistry } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/colorRegistry.js';
+import { MonacoQuickInputImplementation } from './monaco-quick-input-service.js';
 
 disableJSDOM();
 

package/src/browser/monaco-quick-input-service.ts

@@ -25,29 +25,36 @@ import {
     IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInput, IQuickInputButton,
     IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, IQuickPickItemButtonEvent,
     IQuickPickSeparator, IQuickTree, IQuickTreeItem, IQuickWidget, QuickPickInput
-} from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickInput';
-import { IQuickInputOptions, IQuickInputStyles } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickInput';
-import { QuickInputController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickInputController';
-import { MonacoResolvedKeybinding } from './monaco-resolved-keybinding';
-import { IQuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickAccess';
-import { QuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickAccess';
-import { IContextKey, IContextKeyService, IScopedContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+} from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickInput.js';
+import { IQuickInputOptions, IQuickInputStyles } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickInput.js';
+import { QuickInputController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickInputController.js';
+import { MonacoResolvedKeybinding } from './monaco-resolved-keybinding.js';
+import { IQuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickAccess.js';
+import { QuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickAccess.js';
+import { IContextKey, IContextKeyService, IScopedContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey.js';
 import * as monaco from '@theia/monaco-editor-core';
-import { ResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/base/common/keybindings';
-import { IInstantiationService } from '@theia/monaco-editor-core/esm/vs/platform/instantiation/common/instantiation';
-import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
-import { IMatch } from '@theia/monaco-editor-core/esm/vs/base/common/filters';
+import { ResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/base/common/keybindings.js';
+import { IInstantiationService } from '@theia/monaco-editor-core/esm/vs/platform/instantiation/common/instantiation.js';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices.js';
+import { IMatch } from '@theia/monaco-editor-core/esm/vs/base/common/filters.js';
 import { CancellationToken, Event } from '@theia/core';
-import { MonacoColorRegistry } from './monaco-color-registry';
+import { MonacoColorRegistry } from './monaco-color-registry.js';
 import { ThemeService } from '@theia/core/lib/browser/theming';
-import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
-import { ILayoutService } from '@theia/monaco-editor-core/esm/vs/platform/layout/browser/layoutService';
-import { IHoverDelegate, IHoverDelegateOptions } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/hover/hoverDelegate';
-import { IHoverWidget } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/hover/hover';
-import MonacoSeverity from '@theia/monaco-editor-core/esm/vs/base/common/severity';
+import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme.js';
+import { ILayoutService } from '@theia/monaco-editor-core/esm/vs/platform/layout/browser/layoutService.js';
+import { IHoverDelegate, IHoverDelegateOptions } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/hover/hoverDelegate.js';
+import { IHoverWidget } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/hover/hover.js';
+import MonacoSeverityModule from '@theia/monaco-editor-core/esm/vs/base/common/severity.js';
 import { Severity } from '@theia/core/lib/common/severity';
-import { IStorageService } from '@theia/monaco-editor-core/esm/vs/platform/storage/common/storage';
-import { IContextMenuService } from '@theia/monaco-editor-core/esm/vs/platform/contextview/browser/contextView';
+import { IStorageService } from '@theia/monaco-editor-core/esm/vs/platform/storage/common/storage.js';
+import { IContextMenuService } from '@theia/monaco-editor-core/esm/vs/platform/contextview/browser/contextView.js';
+import { WindowFocusService } from '@theia/core/lib/browser/window/window-focus-service';
+import { SecondaryWindowService } from '@theia/core/lib/browser/window/secondary-window-service';
+
+// `@theia/monaco-editor-core` ships ES modules without declaring `"type": "module"`, so the compiler assumes CommonJS semantics
+// for their default exports. At runtime, the default export is the `Severity` enum.
+const MonacoSeverity = MonacoSeverityModule as unknown as typeof MonacoSeverityModule.default;
+type MonacoSeverity = MonacoSeverityModule.default;
 
 /**
  * Converts Theia's {@link Severity} to Monaco's {@link MonacoSeverity}.
@@ -112,8 +119,31 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     @inject(ThemeService)
     protected readonly themeService: ThemeService;
 
+    @inject(WindowFocusService)
+    protected readonly windowFocusService: WindowFocusService;
+
+    @inject(SecondaryWindowService)
+    protected readonly secondaryWindowService: SecondaryWindowService;
+
+    /**
+     * The container hosting the quick input in the main window.
+     */
     protected container: HTMLElement;
 
+    /**
+     * The containers hosting the quick input in secondary windows, see {@link getContainer}.
+     */
+    protected readonly secondaryContainers = new Map<Window, {
+        container: HTMLElement,
+        scopedContextKeyService: IScopedContextKeyService,
+        scopedInQuickOpen: IContextKey<boolean>
+    }>();
+
+    /**
+     * The element that had focus when the quick input was shown. Cleared when the quick input is hidden.
+     */
+    previousFocusElement: HTMLElement | undefined;
+
     protected inQuickOpen: IContextKey<boolean>;
 
     /**
@@ -144,19 +174,111 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
         this.scopedInQuickOpen = this.scopedContextKeyService.createKey<boolean>('inQuickOpen', false);
 
         this.controller.onShow(() => {
-            this.container.style.top = this.shell.mainPanel.node.getBoundingClientRect().top + 'px';
+            // The controller has moved the quick input to the container of the focused window, see `createLayoutService`.
+            const container = this.controller.container;
+            // `onShow` fires before focus moves into the quick input, and again whenever it switches to another picker.
+            const activeElement = container.ownerDocument.activeElement;
+            // not using `instanceof HTMLElement`, the element may have been created in a secondary window, i.e. in another JavaScript realm
+            if (activeElement && typeof (activeElement as HTMLElement).focus === 'function' && !container.contains(activeElement)) {
+                this.previousFocusElement = activeElement as HTMLElement;
+            }
+            container.style.top = container === this.container ? this.shell.mainPanel.node.getBoundingClientRect().top + 'px' : '0px';
             this.inQuickOpen.set(true);
-            this.scopedInQuickOpen.set(true);
+            this.getScopedInQuickOpen(container).set(true);
         });
         this.controller.onHide(() => {
+            this.previousFocusElement = undefined;
             this.inQuickOpen.set(false);
             this.scopedInQuickOpen.set(false);
+            this.secondaryContainers.forEach(({ scopedInQuickOpen }) => scopedInQuickOpen.set(false));
         });
 
         this.themeService.initialized.then(() => this.controller.applyStyles(this.computeStyles()));
         // Hook into the theming service of Monaco to ensure that the updates are ready.
         StandaloneServices.get(IStandaloneThemeService).onDidColorThemeChange(() => this.controller.applyStyles(this.computeStyles()));
         window.addEventListener('resize', () => this.updateLayout());
+        this.secondaryWindowService.onWindowClosed(win => {
+            const secondary = this.secondaryContainers.get(win);
+            if (!secondary) {
+                return;
+            }
+            if (this.controller.container === secondary.container) {
+                // Move the quick input back to the main window, as Monaco does on `onWillUnregisterWindow` for the windows registered with it.
+                this.controller['reparentUI'](this.container);
+                this.updateLayout();
+            }
+            secondary.scopedContextKeyService.dispose();
+            this.secondaryContainers.delete(win);
+        });
+    }
+
+    /**
+     * @returns the container hosting the quick input in the given window, which is created for secondary windows if necessary
+     */
+    protected getContainer(win: Window): HTMLElement {
+        if (win === window) {
+            return this.container;
+        }
+        let secondary = this.secondaryContainers.get(win);
+        if (!secondary) {
+            const container = win.document.createElement('div');
+            container.id = 'quick-input-container';
+            win.document.body.appendChild(container);
+            const scopedContextKeyService = StandaloneServices.get(IContextKeyService).createScoped(container);
+            secondary = { container, scopedContextKeyService, scopedInQuickOpen: scopedContextKeyService.createKey<boolean>('inQuickOpen', false) };
+            this.secondaryContainers.set(win, secondary);
+            win.addEventListener('resize', () => this.updateLayout());
+        }
+        return secondary.container;
+    }
+
+    protected getScopedInQuickOpen(container: HTMLElement): IContextKey<boolean> {
+        for (const secondary of this.secondaryContainers.values()) {
+            if (secondary.container === container) {
+                return secondary.scopedInQuickOpen;
+            }
+        }
+        return this.scopedInQuickOpen;
+    }
+
+    /**
+     * Creates the layout service of the quick input controller. The controller moves the quick input to the `activeContainer`
+     * of the layout service whenever it is shown, which is the container of the focused window, so that the quick input
+     * is shown in secondary windows as well.
+     */
+    protected createLayoutService(delegate: ILayoutService): ILayoutService {
+        const getActiveContainer = () => this.getContainer(this.windowFocusService.focusedWindow ?? window);
+        const getDimension = (container: HTMLElement) => this.getClientDimension(container.ownerDocument.defaultView ?? window);
+        const getMainContainer = () => this.container;
+        const getContainers = () => [this.container, ...Array.from(this.secondaryContainers.values(), secondary => secondary.container)];
+        return {
+            _serviceBrand: undefined,
+            onDidLayoutMainContainer: delegate.onDidLayoutMainContainer,
+            onDidLayoutContainer: delegate.onDidLayoutContainer,
+            onDidLayoutActiveContainer: delegate.onDidLayoutActiveContainer,
+            onDidAddContainer: delegate.onDidAddContainer,
+            onDidChangeActiveContainer: delegate.onDidChangeActiveContainer,
+            get mainContainer(): HTMLElement {
+                return getMainContainer();
+            },
+            get mainContainerDimension(): monaco.editor.IDimension {
+                return getDimension(getMainContainer());
+            },
+            get activeContainer(): HTMLElement {
+                return getActiveContainer();
+            },
+            get activeContainerDimension(): monaco.editor.IDimension {
+                return getDimension(getActiveContainer());
+            },
+            get containers(): Iterable<HTMLElement> {
+                return getContainers();
+            },
+            getContainer: win => this.getContainer(win),
+            whenContainerStylesLoaded: win => delegate.whenContainerStylesLoaded(win),
+            mainContainerOffset: delegate.mainContainerOffset,
+            activeContainerOffset: delegate.activeContainerOffset,
+            focus: () => delegate.focus()
+        };
     }
 
     setContextKey(key: string | undefined): void {
@@ -257,7 +379,7 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     private initController(): void {
         const contextKeyService = StandaloneServices.get(IContextKeyService);
         const instantiationService = StandaloneServices.get(IInstantiationService);
-        const layoutService = StandaloneServices.get(ILayoutService);
+        const layoutService = this.createLayoutService(StandaloneServices.get(ILayoutService));
         const storageService = StandaloneServices.get(IStorageService);
 
         const options: IQuickInputOptions = {
@@ -281,11 +403,11 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     private updateLayout(): void {
         // Initialize the layout using screen dimensions as monaco computes the actual sizing.
         // https://github.com/microsoft/vscode/blob/6261075646f055b99068d3688932416f2346dd3b/src/vs/base/parts/quickinput/browser/quickInput.ts#L1799
-        this.controller.layout(this.getClientDimension(), 0);
+        this.controller.layout(this.getClientDimension(this.controller.container.ownerDocument.defaultView ?? window), 0);
     }
 
-    private getClientDimension(): monaco.editor.IDimension {
-        return { width: window.innerWidth, height: window.innerHeight };
+    private getClientDimension(win: Window): monaco.editor.IDimension {
+        return { width: win.innerWidth, height: win.innerHeight };
     }
 
     /**
@@ -407,6 +529,7 @@ export class MonacoQuickInputService implements QuickInputService {
 
     get onShow(): Event<void> { return this.monacoService.onShow; }
     get onHide(): Event<void> { return this.monacoService.onHide; }
+    get previousFocusElement(): HTMLElement | undefined { return this.monacoService.previousFocusElement; }
 
     open(filter: string): void {
         this.monacoService.open(filter);

package/src/browser/monaco-resolved-keybinding.ts

@@ -14,17 +14,18 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { KeyCode as MonacoKeyCode } from '@theia/monaco-editor-core/esm/vs/base/common/keyCodes';
+import { KeyCode as MonacoKeyCode } from '@theia/monaco-editor-core/esm/vs/base/common/keyCodes.js';
 import {
     ResolvedKeybinding, ResolvedChord, SingleModifierChord, KeyCodeChord, Chord
-} from '@theia/monaco-editor-core/esm/vs/base/common/keybindings';
-import { ElectronAcceleratorLabelProvider, UILabelProvider, UserSettingsLabelProvider } from '@theia/monaco-editor-core/esm/vs/base/common/keybindingLabels';
-import { USLayoutResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/platform/keybinding/common/usLayoutResolvedKeybinding';
-import * as MonacoPlatform from '@theia/monaco-editor-core/esm/vs/base/common/platform';
+} from '@theia/monaco-editor-core/esm/vs/base/common/keybindings.js';
+import { ElectronAcceleratorLabelProvider, UILabelProvider, UserSettingsLabelProvider } from '@theia/monaco-editor-core/esm/vs/base/common/keybindingLabels.js';
+import { USLayoutResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/platform/keybinding/common/usLayoutResolvedKeybinding.js';
+import * as MonacoPlatform from '@theia/monaco-editor-core/esm/vs/base/common/platform.js';
 import { KeybindingRegistry } from '@theia/core/lib/browser/keybinding';
 import { KeyCode, KeySequence, Keystroke, Key, KeyModifier } from '@theia/core/lib/browser/keys';
+import { layoutModifiersIncludeShift } from '@theia/core/lib/common/keys';
 import { isOSX } from '@theia/core/lib/common/os';
-import { KEY_CODE_MAP } from './monaco-keycode-map';
+import { KEY_CODE_MAP } from './monaco-keycode-map.js';
 
 export class MonacoResolvedKeybinding extends ResolvedKeybinding {
 
@@ -33,12 +34,14 @@ export class MonacoResolvedKeybinding extends ResolvedKeybinding {
     constructor(protected readonly keySequence: KeySequence, keybindingService: KeybindingRegistry) {
         super();
         this.chords = keySequence.map(keyCode => {
+            const components = keybindingService.componentsForKeyCode(keyCode);
             // eslint-disable-next-line no-null/no-null
-            const keyLabel = keyCode.key ? keybindingService.acceleratorForKey(keyCode.key) : null;
+            const keyLabel = keyCode.key ? components[components.length - 1] : null;
             const keyAriaLabel = keyLabel;
+            // The label uses the logical character, so layout Shift only appears when it produced an uppercase letter.
             return new ResolvedChord(
                 keyCode.ctrl,
-                keyCode.shift,
+                keybindingService.displaysShift(keyCode),
                 keyCode.alt,
                 keyCode.meta,
                 keyLabel,
@@ -106,7 +109,7 @@ export class MonacoResolvedKeybinding extends ResolvedKeybinding {
     private toKeybinding(keyCode: KeyCode): KeyCodeChord {
         return new KeyCodeChord(
             keyCode.ctrl,
-            keyCode.shift,
+            keyCode.shift || layoutModifiersIncludeShift(keyCode.layoutModifiers),
             keyCode.alt,
             keyCode.meta,
             KEY_CODE_MAP[keyCode.key!.keyCode]

package/src/browser/monaco-snippet-suggest-provider.ts

@@ -25,7 +25,7 @@ import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposa
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { FileOperationError } from '@theia/filesystem/lib/common/files';
 import * as monaco from '@theia/monaco-editor-core';
-import { SnippetParser } from '@theia/monaco-editor-core/esm/vs/editor/contrib/snippet/browser/snippetParser';
+import { SnippetParser } from '@theia/monaco-editor-core/esm/vs/editor/contrib/snippet/browser/snippetParser.js';
 import { isObject } from '@theia/core/lib/common';
 import { ILogger } from '@theia/core';
 

package/src/browser/monaco-standalone-theme-service.ts

@@ -15,8 +15,8 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { IDisposable } from '@theia/monaco-editor-core/esm/vs/base/common/lifecycle';
-import { StandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneThemeService';
+import { IDisposable } from '@theia/monaco-editor-core/esm/vs/base/common/lifecycle.js';
+import { StandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneThemeService.js';
 
 export class MonacoStandaloneThemeService extends StandaloneThemeService {
     protected get styleElements(): HTMLStyleElement[] {

package/src/browser/monaco-status-bar-contribution.ts

@@ -18,7 +18,7 @@ import { injectable } from '@theia/core/shared/inversify';
 import { DisposableCollection, nls } from '@theia/core';
 import { StatusBar, StatusBarAlignment, Widget, WidgetStatusBarContribution } from '@theia/core/lib/browser';
 import { EditorCommands, EditorWidget } from '@theia/editor/lib/browser';
-import { MonacoEditor } from './monaco-editor';
+import { MonacoEditor } from './monaco-editor.js';
 import * as monaco from '@theia/monaco-editor-core';
 
 export const EDITOR_STATUS_TABBING_CONFIG = 'editor-status-tabbing-config';

package/src/browser/monaco-text-model-service.ts

@@ -18,17 +18,17 @@ import { inject, injectable, named, postConstruct } from '@theia/core/shared/inv
 import URI from '@theia/core/lib/common/uri';
 import { ResourceProvider, ReferenceCollection, Event, MaybePromise, Resource, ContributionProvider, OS, Emitter } from '@theia/core';
 import { EditorPreferences, EditorPreferenceChange } from '@theia/editor/lib/common/editor-preferences';
-import { MonacoEditorModel } from './monaco-editor-model';
-import { IDisposable, IReference } from '@theia/monaco-editor-core/esm/vs/base/common/lifecycle';
-import { MonacoToProtocolConverter } from './monaco-to-protocol-converter';
-import { ProtocolToMonacoConverter } from './protocol-to-monaco-converter';
+import { MonacoEditorModel } from './monaco-editor-model.js';
+import { IDisposable, IReference } from '@theia/monaco-editor-core/esm/vs/base/common/lifecycle.js';
+import { MonacoToProtocolConverter } from './monaco-to-protocol-converter.js';
+import { ProtocolToMonacoConverter } from './protocol-to-monaco-converter.js';
 import { ILogger } from '@theia/core/lib/common/logger';
 import * as monaco from '@theia/monaco-editor-core';
-import { ITextModelService, ITextModelContentProvider } from '@theia/monaco-editor-core/esm/vs/editor/common/services/resolverService';
-import { ITextModelUpdateOptions } from '@theia/monaco-editor-core/esm/vs/editor/common/model';
+import { ITextModelService, ITextModelContentProvider } from '@theia/monaco-editor-core/esm/vs/editor/common/services/resolverService.js';
+import { ITextModelUpdateOptions } from '@theia/monaco-editor-core/esm/vs/editor/common/model.js';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
-import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
-import { ITextResourcePropertiesService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/textResourceConfiguration';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices.js';
+import { ITextResourcePropertiesService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/textResourceConfiguration.js';
 
 export const MonacoEditorModelFactory = Symbol('MonacoEditorModelFactory');
 export interface MonacoEditorModelFactory {