@theia/monaco 1.73.0-next.9 → 1.73.0

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

@@ -0,0 +1,74 @@
+// *****************************************************************************
+// Copyright (C) 2026 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+let 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 { };
+}
+
+import { expect } from 'chai';
+import { getColorRegistry } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/colorRegistry';
+import { MonacoQuickInputImplementation } from './monaco-quick-input-service';
+
+disableJSDOM();
+
+/**
+ * The quick input styles mirror VS Code's, referencing theme colors by id. Each
+ * id is turned into a `var(--theia-<id>)` CSS custom property; a mis-cased or
+ * misspelled id yields an undefined variable, silently breaking the styling
+ * (e.g. the Command Palette hover highlight). This test guards against such
+ * typos by checking every referenced color id against the registered colors.
+ */
+describe('MonacoQuickInputImplementation styles', () => {
+
+    before(() => disableJSDOM = enableJSDOM());
+    after(() => disableJSDOM());
+
+    it('should only reference registered color ids', () => {
+        const registeredIds = new Set(getColorRegistry().getColors().map(color => color.id));
+
+        // Mirror ColorRegistry.toCssVariableName without the full DI graph.
+        const colorRegistry = { toCssVariableName: (id: string) => `--theia-${id.replace(/\./g, '-')}` };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const instance: any = Object.create(MonacoQuickInputImplementation.prototype);
+        instance.colorRegistry = colorRegistry;
+        const styles = instance.computeStyles();
+
+        const referencedIds = new Set<string>();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const collect = (value: any): void => {
+            if (typeof value === 'string') {
+                const match = /^var\(--theia-(.+)\)$/.exec(value);
+                if (match) {
+                    // No registered color id contains a dash, so dashes were dots.
+                    referencedIds.add(match[1].replace(/-/g, '.'));
+                }
+            } else if (value && typeof value === 'object') {
+                Object.values(value).forEach(collect);
+            }
+        };
+        collect(styles);
+
+        const unregistered = [...referencedIds].filter(id => !registeredIds.has(id)).sort();
+        expect(unregistered, `Unregistered color ids referenced by computeStyles: ${unregistered.join(', ')}`).to.be.empty;
+    });
+});

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

@@ -306,8 +306,8 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
                 inputActiveOptionBackground: this.asCssVariable('inputOption.activeBackground')
             },
             pickerGroup: {
-                pickerGroupBorder: this.asCssVariable('pickerGroup.Border'),
-                pickerGroupForeground: this.asCssVariable('pickerGroupForeground')
+                pickerGroupBorder: this.asCssVariable('pickerGroup.border'),
+                pickerGroupForeground: this.asCssVariable('pickerGroup.foreground')
             },
             widget: {
                 quickInputBackground: this.asCssVariable('quickInput.background'),
@@ -321,38 +321,38 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
                 listInactiveFocusForeground: this.asCssVariable('quickInputList.focusForeground'),
                 listInactiveSelectionIconForeground: this.asCssVariable('quickInputList.focusIconForeground'),
                 listInactiveFocusBackground: this.asCssVariable('quickInputList.focusBackground'),
-                listFocusOutline: this.asCssVariable('activeContrastBorder'),
-                listInactiveFocusOutline: this.asCssVariable('activeContrastBorder'),
+                listFocusOutline: this.asCssVariable('contrastActiveBorder'),
+                listInactiveFocusOutline: this.asCssVariable('contrastActiveBorder'),
 
                 listFocusBackground: this.asCssVariable('list.focusBackground'),
                 listFocusForeground: this.asCssVariable('list.focusForeground'),
                 listActiveSelectionBackground: this.asCssVariable('list.activeSelectionBackground'),
-                listActiveSelectionForeground: this.asCssVariable('list.ActiveSelectionForeground'),
-                listActiveSelectionIconForeground: this.asCssVariable('list.ActiveSelectionIconForeground'),
-                listFocusAndSelectionOutline: this.asCssVariable('list.FocusAndSelectionOutline'),
-                listFocusAndSelectionBackground: this.asCssVariable('list.ActiveSelectionBackground'),
-                listFocusAndSelectionForeground: this.asCssVariable('list.ActiveSelectionForeground'),
-                listInactiveSelectionBackground: this.asCssVariable('list.InactiveSelectionBackground'),
-                listInactiveSelectionForeground: this.asCssVariable('list.InactiveSelectionForeground'),
-                listHoverBackground: this.asCssVariable('list.HoverBackground'),
-                listHoverForeground: this.asCssVariable('list.HoverForeground'),
-                listDropOverBackground: this.asCssVariable('list.DropOverBackground'),
-                listDropBetweenBackground: this.asCssVariable('list.DropBetweenBackground'),
-                listSelectionOutline: this.asCssVariable('activeContrastBorder'),
-                listHoverOutline: this.asCssVariable('activeContrastBorder'),
+                listActiveSelectionForeground: this.asCssVariable('list.activeSelectionForeground'),
+                listActiveSelectionIconForeground: this.asCssVariable('list.activeSelectionIconForeground'),
+                listFocusAndSelectionOutline: this.asCssVariable('list.focusAndSelectionOutline'),
+                listFocusAndSelectionBackground: this.asCssVariable('list.activeSelectionBackground'),
+                listFocusAndSelectionForeground: this.asCssVariable('list.activeSelectionForeground'),
+                listInactiveSelectionBackground: this.asCssVariable('list.inactiveSelectionBackground'),
+                listInactiveSelectionForeground: this.asCssVariable('list.inactiveSelectionForeground'),
+                listHoverBackground: this.asCssVariable('list.hoverBackground'),
+                listHoverForeground: this.asCssVariable('list.hoverForeground'),
+                listDropOverBackground: this.asCssVariable('list.dropBackground'),
+                listDropBetweenBackground: this.asCssVariable('list.dropBetweenBackground'),
+                listSelectionOutline: this.asCssVariable('contrastActiveBorder'),
+                listHoverOutline: this.asCssVariable('contrastActiveBorder'),
                 treeIndentGuidesStroke: this.asCssVariable('tree.indentGuidesStroke'),
                 treeInactiveIndentGuidesStroke: this.asCssVariable('tree.inactiveIndentGuidesStroke'),
-                treeStickyScrollBackground: this.asCssVariable('tree.StickyScrollBackground'),
-                treeStickyScrollBorder: this.asCssVariable('tree.tickyScrollBorde'),
-                treeStickyScrollShadow: this.asCssVariable('tree.StickyScrollShadow'),
+                treeStickyScrollBackground: undefined,
+                treeStickyScrollBorder: undefined,
+                treeStickyScrollShadow: this.asCssVariable('scrollbar.shadow'),
                 tableColumnsBorder: this.asCssVariable('tree.tableColumnsBorder'),
                 tableOddRowsBackgroundColor: this.asCssVariable('tree.tableOddRowsBackground'),
 
             },
             inputBox: {
-                inputForeground: this.asCssVariable('inputForeground'),
-                inputBackground: this.asCssVariable('inputBackground'),
-                inputBorder: this.asCssVariable('inputBorder'),
+                inputForeground: this.asCssVariable('input.foreground'),
+                inputBackground: this.asCssVariable('input.background'),
+                inputBorder: this.asCssVariable('input.border'),
                 inputValidationInfoBackground: this.asCssVariable('inputValidation.infoBackground'),
                 inputValidationInfoForeground: this.asCssVariable('inputValidation.infoForeground'),
                 inputValidationInfoBorder: this.asCssVariable('inputValidation.infoBorder'),
@@ -373,7 +373,7 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
                 buttonBackground: this.asCssVariable('button.background'),
                 buttonHoverBackground: this.asCssVariable('button.hoverBackground'),
                 buttonBorder: this.asCssVariable('contrastBorder'),
-                buttonSeparator: this.asCssVariable('button.Separator'),
+                buttonSeparator: this.asCssVariable('button.separator'),
                 buttonSecondaryForeground: this.asCssVariable('button.secondaryForeground'),
                 buttonSecondaryBackground: this.asCssVariable('button.secondaryBackground'),
                 buttonSecondaryHoverBackground: this.asCssVariable('button.secondaryHoverBackground'),
@@ -480,6 +480,10 @@ export class MonacoQuickInputService implements QuickInputService {
                     wrapped.activeItems = [options.activeItem];
                 }
 
+                if (options.value) {
+                    wrapped.value = options.value;
+                }
+
                 wrapped.onDidChangeValue((filter: string) => {
                     if (options.onDidChangeValue) {
                         options.onDidChangeValue(wrapped, filter);

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

@@ -19,7 +19,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as jsoncparser from 'jsonc-parser';
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { injectable, inject, named } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
@@ -27,6 +27,7 @@ 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 { isObject } from '@theia/core/lib/common';
+import { ILogger } from '@theia/core';
 
 @injectable()
 export class MonacoSnippetSuggestProvider implements monaco.languages.CompletionItemProvider {
@@ -36,6 +37,9 @@ export class MonacoSnippetSuggestProvider implements monaco.languages.Completion
     @inject(FileService)
     protected readonly fileService: FileService;
 
+    @inject(ILogger) @named('monaco:MonacoSnippetSuggestProvider')
+    protected readonly logger: ILogger;
+
     protected readonly snippets = new Map<string, Snippet[]>();
     protected readonly pendingSnippets = new Map<string, Promise<void>[]>();
 
@@ -150,7 +154,7 @@ export class MonacoSnippetSuggestProvider implements monaco.languages.Completion
             toDispose.push(this.fromJSON(snippets, options));
         } catch (e) {
             if (!(e instanceof FileOperationError)) {
-                console.error(e);
+                this.logger.error(e);
             }
         }
     }

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

@@ -16,7 +16,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { injectable, inject, named } from '@theia/core/shared/inversify';
 import * as jsoncparser from 'jsonc-parser';
 import * as plistparser from 'fast-plist';
 import URI from '@theia/core/lib/common/uri';
@@ -25,6 +25,7 @@ import { MonacoThemeRegistry } from './textmate/monaco-theme-registry';
 import { getThemes, putTheme, MonacoThemeState, stateToTheme, ThemeServiceWithDB } from './monaco-indexed-db';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import * as monaco from '@theia/monaco-editor-core';
+import { ILogger } from '@theia/core';
 
 export interface MonacoTheme {
     id?: string;
@@ -61,6 +62,8 @@ export class MonacoThemingService {
     @inject(FileService) protected readonly fileService: FileService;
     @inject(MonacoThemeRegistry) protected readonly monacoThemeRegistry: MonacoThemeRegistry;
     @inject(ThemeServiceWithDB) protected readonly themeService: ThemeServiceWithDB;
+    @inject(ILogger) @named('monaco:MonacoThemingService')
+    protected readonly logger: ILogger;
 
     /** Register themes whose configuration needs to be loaded */
     register(theme: MonacoTheme, pending: { [uri: string]: Promise<any> } = {}): Disposable {
@@ -83,7 +86,7 @@ export class MonacoThemingService {
             const { id, description, uiTheme } = theme;
             toDispose.push(this.registerParsedTheme({ id, label, description, uiTheme: uiTheme, json, includes }));
         } catch (e) {
-            console.error('Failed to load theme from ' + theme.uri, e);
+            this.logger.error('Failed to load theme from ' + theme.uri, e);
         }
     }
 
@@ -180,7 +183,7 @@ export class MonacoThemingService {
                 this.doRegisterParsedTheme(state);
             }
         } catch (e) {
-            console.error('Failed to restore monaco themes', e);
+            this.logger.error('Failed to restore monaco themes', e);
         }
     }
 

package/src/browser/monaco-workspace.ts

@@ -17,9 +17,10 @@
 /* eslint-disable no-null/no-null */
 
 import { URI as Uri } from '@theia/core/shared/vscode-uri';
-import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import { injectable, inject, postConstruct, named } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { Emitter } from '@theia/core/lib/common/event';
+import { ILogger } from '@theia/core';
 import { FileSystemPreferences } from '@theia/filesystem/lib/common';
 import { EditorManager } from '@theia/editor/lib/browser';
 import { MonacoTextModelService } from './monaco-text-model-service';
@@ -126,6 +127,9 @@ export class MonacoWorkspace {
     @inject(SaveableService)
     protected readonly saveService: SaveableService;
 
+    @inject(ILogger) @named('monaco:MonacoWorkspace')
+    protected readonly logger: ILogger;
+
     @postConstruct()
     protected init(): void {
         this.resolveReady();
@@ -265,7 +269,7 @@ export class MonacoWorkspace {
             const ariaSummary = this.getAriaSummary(totalEdits, totalFiles);
             return { ariaSummary, isApplied: true };
         } catch (e) {
-            console.error('Failed to apply Resource edits:', e);
+            this.logger.error('Failed to apply Resource edits:', e);
             return {
                 ariaSummary: `Error applying Resource edits: ${e.toString()}`,
                 isApplied: false

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

@@ -50,7 +50,7 @@ export class MonacoTextmateService implements FrontendApplicationContribution {
     @inject(TextmateRegistry)
     protected readonly textmateRegistry: TextmateRegistry;
 
-    @inject(ILogger)
+    @inject(ILogger) @named('monaco:MonacoTextmateService')
     protected readonly logger: ILogger;
 
     @inject(OnigasmProvider)
@@ -70,7 +70,7 @@ export class MonacoTextmateService implements FrontendApplicationContribution {
 
     initialize(): void {
         if (!isBasicWasmSupported) {
-            console.log('Textmate support deactivated because WebAssembly is not detected.');
+            this.logger.info('Textmate support deactivated because WebAssembly is not detected.');
             return;
         }
 
@@ -78,7 +78,7 @@ export class MonacoTextmateService implements FrontendApplicationContribution {
             try {
                 grammarProvider.registerTextmateLanguage(this.textmateRegistry);
             } catch (err) {
-                console.error(err);
+                this.logger.error(err);
             }
         }
 

package/src/browser/textmate/monaco-theme-registry.ts

@@ -17,7 +17,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { inject, injectable } from '@theia/core/shared/inversify';
+import { inject, injectable, named } from '@theia/core/shared/inversify';
 import { IRawTheme } from 'vscode-textmate';
 import * as monaco from '@theia/monaco-editor-core';
 import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
@@ -25,12 +25,16 @@ import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/stan
 import { StandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneThemeService';
 import { Color } from '@theia/monaco-editor-core/esm/vs/base/common/color';
 import { MixStandaloneTheme, TextmateRegistryFactory, ThemeMix } from './monaco-theme-types';
+import { ILogger } from '@theia/core';
 
 @injectable()
 export class MonacoThemeRegistry {
 
     @inject(TextmateRegistryFactory) protected readonly registryFactory: TextmateRegistryFactory;
 
+    @inject(ILogger) @named('monaco:MonacoThemeRegistry')
+    protected readonly logger: ILogger;
+
     initializeDefaultThemes(): void {
         this.register(require('../../../data/monaco-themes/vscode/dark_theia.json'), {
             './dark_vs.json': require('../../../data/monaco-themes/vscode/dark_vs.json'),
@@ -87,7 +91,7 @@ export class MonacoThemeRegistry {
         };
         if (typeof json.include !== 'undefined') {
             if (!includes || !includes[json.include]) {
-                console.error(`Couldn't resolve includes theme ${json.include}.`);
+                this.logger.error(`Couldn't resolve includes theme ${json.include}.`);
             } else {
                 const parentTheme = this.register(includes[json.include], includes);
                 Object.assign(result.colors, parentTheme.colors);
@@ -161,7 +165,7 @@ export class MonacoThemeRegistry {
         const normalized = String(color).replace(/^\#/, '').slice(0, 6);
         if (normalized.length < 6 || !(normalized).match(/^[0-9A-Fa-f]{6}$/)) {
             // ignoring not normalized colors to avoid breaking token color indexes between monaco and vscode-textmate
-            console.error(`Color '${normalized}' is NOT normalized, it must have 6 positions.`);
+            this.logger.error(`Color '${normalized}' is NOT normalized, it must have 6 positions.`);
             return undefined;
         }
         return '#' + normalized;