Upgrade Monaco dependency to 1.83.1

CHANGELOG.md

@@ -4,13 +4,18 @@
 
 - [Previous Changelogs](https://github.com/eclipse-theia/theia/tree/master/doc/changelogs/)
 
-<!-- ## not yet released
+## v1.47.0 not yet released
 
 - [component] add here
 
 <a name="breaking_changes_not_yet_released">[Breaking Changes:](#breaking_changes_not_yet_released)</a>
-
-- [component] add here -->
+- [monaco] Upgrade Monaco dependency to 1.83.1 [#13217](https://github.com/eclipse-theia/theia/pull/13217)- contributed on behalf of STMicroelectronics\
+  There are a couple of breaking changes that come with this monaco update
+  - Moved `ThemaIcon` and `ThemeColor` to the common folder
+  - Minor typing adjustments in QuickPickService: in parti
+  - FileUploadService: moved id field from data transfer item to the corresponding file info
+  - The way we instantiate monaco services has changed completely: if you touch monaco services in your code, please read the description in the 
+    file comment in `monaco-init.ts`.
 
 ## v1.46.0 - 01/25/2024
 - [plugin] Add prefix to contributed view container ids [#13362](https://github.com/eclipse-theia/theia/pull/13362) - contributed on behalf of STMicroelectronics

dev-packages/application-manager/src/generator/frontend-generator.ts

@@ -108,7 +108,7 @@ ${Array.from(frontendPreloadModules.values(), jsModulePath => `\
 }
 
 module.exports = (async () => {
-    const { messagingFrontendModule } = require('@theia/core/lib/${!this.pck.isElectron()
+    const { messagingFrontendModule } = require('@theia/core/lib/${this.pck.isBrowser()
                 ? 'browser/messaging/messaging-frontend-module'
                 : 'electron-browser/messaging/electron-messaging-frontend-module'}');
     const container = new Container();
@@ -117,6 +117,11 @@ module.exports = (async () => {
     container.load(messagingFrontendOnlyModule);`)}
 
     await preload(container);
+
+    ${this.ifMonaco(() => `
+    const { MonacoInit } = require('@theia/monaco/lib/browser/monaco-init');
+    `)};
+
     const { FrontendApplication } = require('@theia/core/lib/browser');
     const { frontendApplicationModule } = require('@theia/core/lib/browser/frontend-application-module');    
     const { loggerFrontendModule } = require('@theia/core/lib/browser/logger-frontend-module');
@@ -132,6 +137,9 @@ module.exports = (async () => {
     try {
 ${Array.from(frontendModules.values(), jsModulePath => `\
         await load(container, ${this.importOrRequire()}('${jsModulePath}'));`).join(EOL)}
+        ${this.ifMonaco(() => `
+        MonacoInit.init(container);
+        `)};
         await start();
     } catch (reason) {
         console.error('Failed to start the frontend application.');

dev-packages/cli/src/test-page.ts

@@ -113,7 +113,8 @@ export default async function newTestPage(options: TestPageOptions): Promise<pup
                 reporter: 'spec',
                 ui: 'bdd',
                 color: true,
-                retries: 0
+                retries: 0,
+                timeout: 10000
             });
         });
 

examples/api-samples/package.json

@@ -8,7 +8,7 @@
     "@theia/file-search": "1.46.0",
     "@theia/filesystem": "1.46.0",
     "@theia/monaco": "1.46.0",
-    "@theia/monaco-editor-core": "1.72.3",
+    "@theia/monaco-editor-core": "1.83.101",
     "@theia/output": "1.46.0",
     "@theia/ovsx-client": "1.46.0",
     "@theia/search-in-workspace": "1.46.0",
@@ -59,4 +59,4 @@
   "devDependencies": {
     "@theia/ext-scripts": "1.46.0"
   }
-}
+}

examples/api-tests/src/monaco-api.spec.js

@@ -26,7 +26,7 @@ describe('Monaco API', async function () {
     const { MonacoResolvedKeybinding } = require('@theia/monaco/lib/browser/monaco-resolved-keybinding');
     const { MonacoTextmateService } = require('@theia/monaco/lib/browser/textmate/monaco-textmate-service');
     const { CommandRegistry } = require('@theia/core/lib/common/command');
-    const { SimpleKeybinding } = require('@theia/monaco-editor-core/esm/vs/base/common/keybindings');
+    const { KeyCodeChord, ResolvedChord } = require('@theia/monaco-editor-core/esm/vs/base/common/keybindings');
     const { IKeybindingService } = require('@theia/monaco-editor-core/esm/vs/platform/keybinding/common/keybinding');
     const { StandaloneServices } = require('@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices');
     const { TokenizationRegistry } = require('@theia/monaco-editor-core/esm/vs/editor/common/languages');
@@ -59,10 +59,10 @@ describe('Monaco API', async function () {
     });
 
     it('KeybindingService.resolveKeybinding', () => {
-        const simpleKeybinding = new SimpleKeybinding(true, true, true, true, 41 /* KeyCode.KeyK */);
-        const chordKeybinding = simpleKeybinding.toChord();
-        assert.equal(chordKeybinding.parts.length, 1);
-        assert.equal(chordKeybinding.parts[0], simpleKeybinding);
+        const chord = new KeyCodeChord(true, true, true, true, 41 /* KeyCode.KeyK */);
+        const chordKeybinding = chord.toKeybinding();
+        assert.equal(chordKeybinding.chords.length, 1);
+        assert.equal(chordKeybinding.chords[0], chord);
 
         const resolvedKeybindings = StandaloneServices.get(IKeybindingService).resolveKeybinding(chordKeybinding);
         assert.equal(resolvedKeybindings.length, 1);
@@ -74,9 +74,8 @@ describe('Monaco API', async function () {
             const electronAccelerator = resolvedKeybinding.getElectronAccelerator();
             const userSettingsLabel = resolvedKeybinding.getUserSettingsLabel();
             const WYSIWYG = resolvedKeybinding.isWYSIWYG();
-            const chord = resolvedKeybinding.isChord();
-            const parts = resolvedKeybinding.getParts();
-            const dispatchParts = resolvedKeybinding.getDispatchParts();
+            const parts = resolvedKeybinding.getChords();
+            const dispatchParts = resolvedKeybinding.getDispatchChords().map(str => str === null ? '' : str);
 
             const platform = window.navigator.platform;
             let expected;
@@ -89,14 +88,14 @@ describe('Monaco API', async function () {
                     userSettingsLabel: 'ctrl+shift+alt+cmd+K',
                     WYSIWYG: true,
                     chord: false,
-                    parts: [{
-                        altKey: true,
-                        ctrlKey: true,
-                        keyAriaLabel: 'K',
-                        keyLabel: 'K',
-                        metaKey: true,
-                        shiftKey: true
-                    }],
+                    parts: [new ResolvedChord(
+                        true,
+                        true,
+                        true,
+                        true,
+                        'K',
+                        'K',
+                    )],
                     dispatchParts: [
                         'ctrl+shift+alt+meta+K'
                     ]
@@ -108,23 +107,22 @@ describe('Monaco API', async function () {
                     electronAccelerator: 'Ctrl+Shift+Alt+K',
                     userSettingsLabel: 'ctrl+shift+alt+K',
                     WYSIWYG: true,
-                    chord: false,
-                    parts: [{
-                        altKey: true,
-                        ctrlKey: true,
-                        keyAriaLabel: 'K',
-                        keyLabel: 'K',
-                        metaKey: false,
-                        shiftKey: true
-                    }],
+                    parts: [new ResolvedChord(
+                        true,
+                        true,
+                        true,
+                        false,
+                        'K',
+                        'K'
+                    )],
                     dispatchParts: [
                         'ctrl+shift+alt+K'
                     ]
                 };
             }
 
             assert.deepStrictEqual({
-                label, ariaLabel, electronAccelerator, userSettingsLabel, WYSIWYG, chord, parts, dispatchParts
+                label, ariaLabel, electronAccelerator, userSettingsLabel, WYSIWYG, parts, dispatchParts
             }, expected);
         } else {
             assert.fail(`resolvedKeybinding must be of ${MonacoResolvedKeybinding.name} type`);
@@ -136,7 +134,7 @@ describe('Monaco API', async function () {
             const didChangeColorMap = new Promise(resolve => {
                 const toDispose = TokenizationRegistry.onDidChange(() => {
                     toDispose.dispose();
-                    resolve();
+                    resolve(undefined);
                 });
             });
             textmateService['themeService'].setCurrentTheme('light');
@@ -175,15 +173,15 @@ describe('Monaco API', async function () {
     });
 
     it('Supports setting contexts using the command registry', async () => {
-        const setContext = 'setContext';
+        const setContext = '_setContext';
         const key = 'monaco-api-test-context';
         const firstValue = 'first setting';
         const secondValue = 'second setting';
-        assert.isFalse(contextKeys.match(`${key} == ${firstValue}`));
+        assert.isFalse(contextKeys.match(`${key} == '${firstValue}'`));
         await commands.executeCommand(setContext, key, firstValue);
-        assert.isTrue(contextKeys.match(`${key} == ${firstValue}`));
+        assert.isTrue(contextKeys.match(`${key} == '${firstValue}'`));
         await commands.executeCommand(setContext, key, secondValue);
-        assert.isTrue(contextKeys.match(`${key} == ${secondValue}`));
+        assert.isTrue(contextKeys.match(`${key} == '${secondValue}'`));
     });
 
     it('Supports context key: inQuickOpen', async () => {

examples/api-tests/src/typescript.spec.js

@@ -119,19 +119,28 @@ describe('TypeScript', function () {
      */
     function waitForAnimation(condition, timeout, message) {
         const success = new Promise(async (resolve, reject) => {
+            if (timeout === undefined) {
+                timeout = 100000;
+            }
+
+            let timedOut = false;
+            const handle = setTimeout(() => {
+                console.log(message);
+                timedOut = true;
+            }, timeout);
+
             toTearDown.push({ dispose: () => reject(message ?? 'Test terminated before resolution.') });
             do {
                 await animationFrame();
-            } while (!condition());
-            resolve();
+            } while (!timedOut && !condition());
+            if (timedOut) {
+                reject(new Error(message ?? 'Wait for animation timed out.'));
+            } else {
+                clearTimeout(handle);
+                resolve(undefined);
+            }
+
         });
-        if (timeout !== undefined) {
-            const timedOut = new Promise((_, fail) => {
-                const toClear = setTimeout(() => fail(new Error(message ?? 'Wait for animation timed out.')), timeout);
-                toTearDown.push({ dispose: () => (fail(new Error(message ?? 'Wait for animation timed out.')), clearTimeout(toClear)) });
-            });
-            return Promise.race([success, timedOut]);
-        }
         return success;
     }
 
@@ -689,11 +698,10 @@ SPAN {
         editor.getControl().revealPosition({ lineNumber, column });
         assert.equal(currentChar(), ';', 'Failed at assert 1');
 
-        /** @type {import('@theia/monaco-editor-core/src/vs/editor/contrib/codeAction/browser/codeActionCommands').CodeActionController} */
+        /** @type {import('@theia/monaco-editor-core/src/vs/editor/contrib/codeAction/browser/codeActionController').CodeActionController} */
         const codeActionController = editor.getControl().getContribution('editor.contrib.codeActionController');
         const lightBulbNode = () => {
-            const ui = codeActionController['_ui'].rawValue;
-            const lightBulb = ui && ui['_lightBulbWidget'].rawValue;
+            const lightBulb = codeActionController['_lightBulbWidget'].rawValue;
             return lightBulb && lightBulb['_domNode'];
         };
         const lightBulbVisible = () => {
@@ -703,14 +711,14 @@ SPAN {
 
         await timeout(1000); // quick fix is always available: need to wait for the error fix to become available.
         await commands.executeCommand('editor.action.quickFix');
-        const codeActionSelector = '.codeActionWidget';
+        const codeActionSelector = '.action-widget';
         assert.isFalse(!!document.querySelector(codeActionSelector), 'Failed at assert 3 - codeActionWidget should not be visible');
 
         console.log('Waiting for Quick Fix widget to be visible');
         await waitForAnimation(() => {
             const quickFixWidgetVisible = !!document.querySelector(codeActionSelector);
             if (!quickFixWidgetVisible) {
-                console.log('...');
+                // console.log('...');
                 return false;
             }
             return true;
@@ -768,27 +776,13 @@ SPAN {
         assert.equal(editor.getControl().getModel().getLineLength(lineNumber), originalLength);
     });
 
-    for (const referenceViewCommand of ['references-view.find', 'references-view.findImplementations']) {
-        it(referenceViewCommand, async function () {
-            let steps = 0;
-            const editor = await openEditor(demoFileUri);
-            editor.getControl().setPosition({ lineNumber: 24, column: 11 });
-            assert.equal(editor.getControl().getModel().getWordAtPosition(editor.getControl().getPosition()).word, 'demoInstance');
-            await commands.executeCommand(referenceViewCommand);
-            const view = await pluginViewRegistry.openView('references-view.tree', { reveal: true });
-            const expectedMessage = referenceViewCommand === 'references-view.find' ? '2 results in 1 file' : '1 result in 1 file';
-            const getResultText = () => view.node.getElementsByClassName('theia-TreeViewInfo').item(0)?.textContent;
-            await waitForAnimation(() => getResultText() === expectedMessage, 5000);
-            assert.equal(getResultText(), expectedMessage);
-        });
-    }
 
     it('Can execute code actions', async function () {
         const editor = await openEditor(demoFileUri);
-        /** @type {import('@theia/monaco-editor-core/src/vs/editor/contrib/codeAction/browser/codeActionCommands').CodeActionController} */
+        /** @type {import('@theia/monaco-editor-core/src/vs/editor/contrib/codeAction/browser/codeActionController').CodeActionController} */
         const codeActionController = editor.getControl().getContribution('editor.contrib.codeActionController');
         const isActionAvailable = () => {
-            const lightbulbVisibility = codeActionController['_ui'].rawValue?.['_lightBulbWidget'].rawValue?.['_domNode'].style.visibility;
+            const lightbulbVisibility = codeActionController['_lightBulbWidget'].rawValue?.['_domNode'].style.visibility;
             return lightbulbVisibility !== undefined && lightbulbVisibility !== 'hidden';
         }
         assert.isFalse(isActionAvailable());
@@ -798,8 +792,16 @@ SPAN {
         await waitForAnimation(() => isActionAvailable(), 5000, 'No code action available. (1)');
         assert.isTrue(isActionAvailable());
 
+        try { // for some reason, we need to wait a second here, otherwise, we  run into some cancellation. 
+            await waitForAnimation(() => false, 1000);
+        } catch (e) {
+        }
+
         await commands.executeCommand('editor.action.quickFix');
-        await waitForAnimation(() => Boolean(document.querySelector('.context-view-pointerBlock')), 5000, 'No context menu appeared. (1)');
+        await waitForAnimation(() => {
+            const elements = document.querySelector('.action-widget');
+            return !!elements;
+        }, 5000, 'No context menu appeared. (1)');
         await animationFrame();
 
         keybindings.dispatchKeyDown('Enter');
@@ -841,4 +843,19 @@ SPAN {
         assert.isNotNull(editor.getControl().getModel());
         await waitForAnimation(() => editor.getControl().getModel().getLineContent(30) === 'import { DefinedInterface } from "./demo-definitions-file";', 5000, 'The named import did not take effect.');
     });
+
+    for (const referenceViewCommand of ['references-view.find', 'references-view.findImplementations']) {
+        it(referenceViewCommand, async function () {
+            let steps = 0;
+            const editor = await openEditor(demoFileUri);
+            editor.getControl().setPosition({ lineNumber: 24, column: 11 });
+            assert.equal(editor.getControl().getModel().getWordAtPosition(editor.getControl().getPosition()).word, 'demoInstance');
+            await commands.executeCommand(referenceViewCommand);
+            const view = await pluginViewRegistry.openView('references-view.tree', { reveal: true });
+            const expectedMessage = referenceViewCommand === 'references-view.find' ? '2 results in 1 file' : '1 result in 1 file';
+            const getResultText = () => view.node.getElementsByClassName('theia-TreeViewInfo').item(0)?.textContent;
+            await waitForAnimation(() => getResultText() === expectedMessage, 5000);
+            assert.equal(getResultText(), expectedMessage);
+        });
+    }
 });

packages/bulk-edit/package.json

@@ -7,7 +7,7 @@
     "@theia/editor": "1.46.0",
     "@theia/filesystem": "1.46.0",
     "@theia/monaco": "1.46.0",
-    "@theia/monaco-editor-core": "1.72.3",
+    "@theia/monaco-editor-core": "1.83.101",
     "@theia/workspace": "1.46.0"
   },
   "publishConfig": {
@@ -48,4 +48,4 @@
   "nyc": {
     "extends": "../../configs/nyc.json"
   }
-}
+}

packages/bulk-edit/src/browser/bulk-edit-tree/bulk-edit-tree.spec.ts

@@ -17,7 +17,7 @@
 import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
 import * as chai from 'chai';
 import { ResourceTextEdit } from '@theia/monaco-editor-core/esm/vs/editor/browser/services/bulkEditService';
-import { URI as Uri } from 'vscode-uri';
+import { URI as Uri } from '@theia/core/shared/vscode-uri';
 
 let disableJSDOM = enableJSDOM();
 

packages/console/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@theia/core": "1.46.0",
     "@theia/monaco": "1.46.0",
-    "@theia/monaco-editor-core": "1.72.3",
+    "@theia/monaco-editor-core": "1.83.101",
     "anser": "^2.0.1"
   },
   "publishConfig": {
@@ -46,4 +46,4 @@
   "nyc": {
     "extends": "../../configs/nyc.json"
   }
-}
+}

packages/console/src/browser/console-widget.ts

@@ -139,7 +139,6 @@ export class ConsoleWidget extends BaseWidget implements StatefulWidget {
         input.getControl().createContextKey('consoleInputFocus', true);
         const contentContext = this.contextKeyService.createScoped(this.content.node);
         contentContext.setContext('consoleContentFocus', true);
-        this.toDispose.push(contentContext);
     }
 
     protected createInput(node: HTMLElement): Promise<MonacoEditor> {