chore: Updated to Theia 1.31.1

Closes #1655

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

.gitignore

@@ -7,16 +7,14 @@ build/
 Examples/
 !electron/build/
 src-gen/
-!webpack.config.js
+webpack.config.js
 gen-webpack.config.js
 .DS_Store
 # switching from `electron` to `browser` in dev mode.
 .browser_modules
 yarn*.log
 # For the VS Code extensions used by Theia.
 plugins
-# the config files for the CLI
-arduino-ide-extension/data/cli/config
 # the tokens folder for the themes
 scripts/themes/tokens
 # environment variables

arduino-ide-extension/package.json

@@ -21,21 +21,21 @@
   },
   "dependencies": {
     "@grpc/grpc-js": "^1.6.7",
-    "@theia/application-package": "1.25.0",
-    "@theia/core": "1.25.0",
-    "@theia/editor": "1.25.0",
-    "@theia/electron": "1.25.0",
-    "@theia/filesystem": "1.25.0",
-    "@theia/keymaps": "1.25.0",
-    "@theia/markers": "1.25.0",
-    "@theia/monaco": "1.25.0",
-    "@theia/navigator": "1.25.0",
-    "@theia/outline-view": "1.25.0",
-    "@theia/output": "1.25.0",
-    "@theia/preferences": "1.25.0",
-    "@theia/search-in-workspace": "1.25.0",
-    "@theia/terminal": "1.25.0",
-    "@theia/workspace": "1.25.0",
+    "@theia/application-package": "1.31.1",
+    "@theia/core": "1.31.1",
+    "@theia/editor": "1.31.1",
+    "@theia/electron": "1.31.1",
+    "@theia/filesystem": "1.31.1",
+    "@theia/keymaps": "1.31.1",
+    "@theia/markers": "1.31.1",
+    "@theia/monaco": "1.31.1",
+    "@theia/navigator": "1.31.1",
+    "@theia/outline-view": "1.31.1",
+    "@theia/output": "1.31.1",
+    "@theia/preferences": "1.31.1",
+    "@theia/search-in-workspace": "1.31.1",
+    "@theia/terminal": "1.31.1",
+    "@theia/workspace": "1.31.1",
     "@tippyjs/react": "^4.2.5",
     "@types/atob": "^2.1.2",
     "@types/auth0-js": "^9.14.0",
@@ -50,9 +50,10 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/ncp": "^2.0.4",
     "@types/node-fetch": "^2.5.7",
+    "@types/p-queue": "^2.3.1",
     "@types/ps-tree": "^1.1.0",
-    "@types/react-select": "^3.0.0",
     "@types/react-tabs": "^2.3.2",
+    "@types/react-virtualized": "^9.21.21",
     "@types/temp": "^0.8.34",
     "@types/which": "^1.3.1",
     "ajv": "^6.5.3",
@@ -78,13 +79,14 @@
     "ncp": "^2.0.0",
     "node-fetch": "^2.6.1",
     "open": "^8.0.6",
-    "p-queue": "^5.0.0",
+    "p-queue": "^2.4.2",
     "ps-tree": "^1.2.0",
     "query-string": "^7.0.1",
-    "react-disable": "^0.1.0",
+    "react-disable": "^0.1.1",
     "react-markdown": "^8.0.0",
-    "react-select": "^3.0.4",
+    "react-select": "^5.6.0",
     "react-tabs": "^3.1.2",
+    "react-virtualized": "^9.22.3",
     "react-window": "^1.8.6",
     "semver": "^7.3.2",
     "string-natural-compare": "^2.0.3",

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -84,10 +84,7 @@ import { BoardsAutoInstaller } from './boards/boards-auto-installer';
 import { ShellLayoutRestorer } from './theia/core/shell-layout-restorer';
 import { ListItemRenderer } from './widgets/component-list/list-item-renderer';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
-import {
-  MonacoThemeJson,
-  MonacoThemingService,
-} from '@theia/monaco/lib/browser/monaco-theming-service';
+
 import {
   ArduinoDaemonPath,
   ArduinoDaemon,
@@ -181,8 +178,6 @@ import { EditorCommandContribution } from './theia/editor/editor-command';
 import { NavigatorTabBarDecorator as TheiaNavigatorTabBarDecorator } from '@theia/navigator/lib/browser/navigator-tab-bar-decorator';
 import { NavigatorTabBarDecorator } from './theia/navigator/navigator-tab-bar-decorator';
 import { Debug } from './contributions/debug';
-import { DebugSessionManager } from './theia/debug/debug-session-manager';
-import { DebugSessionManager as TheiaDebugSessionManager } from '@theia/debug/lib/browser/debug-session-manager';
 import { Sketchbook } from './contributions/sketchbook';
 import { DebugFrontendApplicationContribution } from './theia/debug/debug-frontend-application-contribution';
 import { DebugFrontendApplicationContribution as TheiaDebugFrontendApplicationContribution } from '@theia/debug/lib/browser/debug-frontend-application-contribution';
@@ -313,10 +308,6 @@ import { SelectedBoard } from './contributions/selected-board';
 import { CheckForIDEUpdates } from './contributions/check-for-ide-updates';
 import { OpenBoardsConfig } from './contributions/open-boards-config';
 import { SketchFilesTracker } from './contributions/sketch-files-tracker';
-import { MonacoThemeServiceIsReady } from './utils/window';
-import { Deferred } from '@theia/core/lib/common/promise-util';
-import { StatusBarImpl } from './theia/core/status-bar';
-import { StatusBarImpl as TheiaStatusBarImpl } from '@theia/core/lib/browser';
 import { EditorMenuContribution } from './theia/editor/editor-file';
 import { EditorMenuContribution as TheiaEditorMenuContribution } from '@theia/editor/lib/browser/editor-menu';
 import { PreferencesEditorWidget as TheiaPreferencesEditorWidget } from '@theia/preferences/lib/browser/views/preference-editor-widget';
@@ -337,32 +328,12 @@ import { InterfaceScale } from './contributions/interface-scale';
 import { OpenHandler } from '@theia/core/lib/browser/opener-service';
 import { NewCloudSketch } from './contributions/new-cloud-sketch';
 import { SketchbookCompositeWidget } from './widgets/sketchbook/sketchbook-composite-widget';
-
-const registerArduinoThemes = () => {
-  const themes: MonacoThemeJson[] = [
-    {
-      id: 'arduino-theme',
-      label: 'Light (Arduino)',
-      uiTheme: 'vs',
-      json: require('../../src/browser/data/default.color-theme.json'),
-    },
-    {
-      id: 'arduino-theme-dark',
-      label: 'Dark (Arduino)',
-      uiTheme: 'vs-dark',
-      json: require('../../src/browser/data/dark.color-theme.json'),
-    },
-  ];
-  themes.forEach((theme) => MonacoThemingService.register(theme));
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const global = window as any;
-const ready = global[MonacoThemeServiceIsReady] as Deferred;
-if (ready) {
-  ready.promise.then(registerArduinoThemes);
-} else {
-  registerArduinoThemes();
-}
+import { WindowTitleUpdater } from './theia/core/window-title-updater';
+import { WindowTitleUpdater as TheiaWindowTitleUpdater } from '@theia/core/lib/browser/window/window-title-updater';
+import { ThemeService } from './theia/core/theming';
+import { ThemeService as TheiaThemeService } from '@theia/core/lib/browser/theming';
+import { MonacoThemingService } from './theia/monaco/monaco-theming-service';
+import { MonacoThemingService as TheiaMonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
   // Commands and toolbar items
@@ -838,9 +809,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(AboutDialog).toSelf().inSingletonScope();
   rebind(TheiaAboutDialog).toService(AboutDialog);
 
-  // To avoid running `Save All` when there are no dirty editors before starting the debug session.
-  bind(DebugSessionManager).toSelf().inSingletonScope();
-  rebind(TheiaDebugSessionManager).toService(DebugSessionManager);
   // To remove the `Run` menu item from the application menu.
   bind(DebugFrontendApplicationContribution).toSelf().inSingletonScope();
   rebind(TheiaDebugFrontendApplicationContribution).toService(
@@ -854,10 +822,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(WidgetManager).toSelf().inSingletonScope();
   rebind(TheiaWidgetManager).toService(WidgetManager);
 
-  // To avoid running a status bar update on every single `keypress` event from the editor.
-  bind(StatusBarImpl).toSelf().inSingletonScope();
-  rebind(TheiaStatusBarImpl).toService(StatusBarImpl);
-
   // Debounced update for the tab-bar toolbar when typing in the editor.
   bind(DockPanelRenderer).toSelf();
   rebind(TheiaDockPanelRenderer).toService(DockPanelRenderer);
@@ -942,7 +906,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(LocalCacheFsProvider).toSelf().inSingletonScope();
   bind(FileServiceContribution).toService(LocalCacheFsProvider);
   bind(CloudSketchbookCompositeWidget).toSelf();
-  bind<WidgetFactory>(WidgetFactory).toDynamicValue((ctx) => ({
+  bind(WidgetFactory).toDynamicValue((ctx) => ({
     id: 'cloud-sketchbook-composite-widget',
     createWidget: () => ctx.container.get(CloudSketchbookCompositeWidget),
   }));
@@ -991,4 +955,14 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   rebind(TheiaHostedPluginSupport).toService(HostedPluginSupport);
   bind(HostedPluginEvents).toSelf().inSingletonScope();
   bind(FrontendApplicationContribution).toService(HostedPluginEvents);
+
+  // custom window titles
+  bind(WindowTitleUpdater).toSelf().inSingletonScope();
+  rebind(TheiaWindowTitleUpdater).toService(WindowTitleUpdater);
+
+  // register Arduino themes
+  bind(ThemeService).toSelf().inSingletonScope();
+  rebind(TheiaThemeService).toService(ThemeService);
+  bind(MonacoThemingService).toSelf().inSingletonScope();
+  rebind(TheiaMonacoThemingService).toService(MonacoThemingService);
 });

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx

@@ -1,7 +1,7 @@
 import { nls } from '@theia/core/lib/common';
 import { shell } from 'electron';
 import * as React from '@theia/core/shared/react';
-import * as ReactDOM from '@theia/core/shared/react-dom';
+import { createRoot } from '@theia/core/shared/react-dom/client';
 import ReactMarkdown from 'react-markdown';
 import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
@@ -30,6 +30,7 @@ export const IDEUpdaterComponent = ({
   const { version, releaseNotes } = updateInfo;
   const changelogDivRef =
     React.useRef() as React.MutableRefObject<HTMLDivElement>;
+  const changelogRoot = createRoot(changelogDivRef.current);
   React.useEffect(() => {
     if (!!releaseNotes && changelogDivRef.current) {
       let changelog: string;
@@ -38,7 +39,7 @@ export const IDEUpdaterComponent = ({
         changelog = releaseNotes.reduce((acc, item) => {
           return item.note ? (acc += `${item.note}\n\n`) : acc;
         }, '');
-      ReactDOM.render(
+      changelogRoot.render(
         <ReactMarkdown
           components={{
             a: ({ href, children, ...props }) => (
@@ -49,8 +50,7 @@ export const IDEUpdaterComponent = ({
           }}
         >
           {changelog}
-        </ReactMarkdown>,
-        changelogDivRef.current
+        </ReactMarkdown>
       );
     }
   }, [updateInfo]);

arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx

@@ -218,16 +218,14 @@ export class SettingsComponent extends React.Component<
             <div className="flex-line">
               <select
                 className="theia-select"
-                value={ThemeService.get().getCurrentTheme().label}
+                value={this.props.themeService.getCurrentTheme().label}
                 onChange={this.themeDidChange}
               >
-                {ThemeService.get()
-                  .getThemes()
-                  .map(({ id, label }) => (
-                    <option key={id} value={label}>
-                      {label}
-                    </option>
-                  ))}
+                {this.props.themeService.getThemes().map(({ id, label }) => (
+                  <option key={id} value={label}>
+                    {label}
+                  </option>
+                ))}
               </select>
             </div>
             <div className="flex-line">
@@ -612,11 +610,11 @@ export class SettingsComponent extends React.Component<
     event: React.ChangeEvent<HTMLSelectElement>
   ): void => {
     const { selectedIndex } = event.target.options;
-    const theme = ThemeService.get().getThemes()[selectedIndex];
+    const theme = this.props.themeService.getThemes()[selectedIndex];
     if (theme) {
       this.setState({ themeId: theme.id });
-      if (ThemeService.get().getCurrentTheme().id !== theme.id) {
-        ThemeService.get().setCurrentTheme(theme.id);
+      if (this.props.themeService.getCurrentTheme().id !== theme.id) {
+        this.props.themeService.setCurrentTheme(theme.id);
       }
     }
   };
@@ -755,6 +753,7 @@ export namespace SettingsComponent {
     readonly fileDialogService: FileDialogService;
     readonly windowService: WindowService;
     readonly localizationProvider: AsyncLocalizationProvider;
+    readonly themeService: ThemeService;
   }
   export type State = Settings & {
     rawAdditionalUrlsValue: string;

arduino-ide-extension/src/browser/dialogs/settings/settings-dialog.tsx

@@ -35,6 +35,9 @@ export class SettingsWidget extends ReactWidget {
   @inject(AsyncLocalizationProvider)
   protected readonly localizationProvider: AsyncLocalizationProvider;
 
+  @inject(ThemeService)
+  private readonly themeService: ThemeService;
+
   protected render(): React.ReactNode {
     return (
       <SettingsComponent
@@ -43,6 +46,7 @@ export class SettingsWidget extends ReactWidget {
         fileDialogService={this.fileDialogService}
         windowService={this.windowService}
         localizationProvider={this.localizationProvider}
+        themeService={this.themeService}
       />
     );
   }
@@ -59,6 +63,9 @@ export class SettingsDialog extends AbstractDialog<Promise<Settings>> {
   @inject(SettingsWidget)
   protected readonly widget: SettingsWidget;
 
+  @inject(ThemeService)
+  private readonly themeService: ThemeService;
+
   constructor(
     @inject(SettingsDialogProps)
     protected override readonly props: SettingsDialogProps
@@ -121,11 +128,11 @@ export class SettingsDialog extends AbstractDialog<Promise<Settings>> {
   }
 
   override async open(): Promise<Promise<Settings> | undefined> {
-    const themeIdBeforeOpen = ThemeService.get().getCurrentTheme().id;
+    const themeIdBeforeOpen = this.themeService.getCurrentTheme().id;
     const result = await super.open();
     if (!result) {
-      if (ThemeService.get().getCurrentTheme().id !== themeIdBeforeOpen) {
-        ThemeService.get().setCurrentTheme(themeIdBeforeOpen);
+      if (this.themeService.getCurrentTheme().id !== themeIdBeforeOpen) {
+        this.themeService.setCurrentTheme(themeIdBeforeOpen);
       }
     }
     return result;