feat: removed non-official themes from the settings dialog

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

@@ -238,7 +238,6 @@ import {
   UploadFirmwareDialog,
   UploadFirmwareDialogProps,
 } from './dialogs/firmware-uploader/firmware-uploader-dialog';
-
 import { UploadCertificate } from './contributions/upload-certificate';
 import {
   ArduinoFirmwareUploader,
@@ -328,9 +327,13 @@ import { NewCloudSketch } from './contributions/new-cloud-sketch';
 import { SketchbookCompositeWidget } from './widgets/sketchbook/sketchbook-composite-widget';
 import { WindowTitleUpdater } from './theia/core/window-title-updater';
 import { WindowTitleUpdater as TheiaWindowTitleUpdater } from '@theia/core/lib/browser/window/window-title-updater';
-import { ThemeServiceWithDB } from './theia/core/theming';
-import { ThemeServiceWithDB as TheiaThemeServiceWithDB } from '@theia/monaco/lib/browser/monaco-indexed-db';
-import { MonacoThemingService } from './theia/monaco/monaco-theming-service';
+import {
+  MonacoThemingService,
+  CleanupObsoleteThemes,
+  ThemesRegistrationSummary,
+  MonacoThemeRegistry,
+} from './theia/monaco/monaco-theming-service';
+import { MonacoThemeRegistry as TheiaMonacoThemeRegistry } from '@theia/monaco/lib/browser/textmate/monaco-theme-registry';
 import { MonacoThemingService as TheiaMonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
 import { TypeHierarchyServiceProvider } from './theia/typehierarchy/type-hierarchy-service';
 import { TypeHierarchyServiceProvider as TheiaTypeHierarchyServiceProvider } from '@theia/typehierarchy/lib/browser/typehierarchy-service';
@@ -973,11 +976,19 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   rebind(TheiaWindowTitleUpdater).toService(WindowTitleUpdater);
 
   // register Arduino themes
-  bind(ThemeServiceWithDB).toSelf().inSingletonScope();
-  rebind(TheiaThemeServiceWithDB).toService(ThemeServiceWithDB);
   bind(MonacoThemingService).toSelf().inSingletonScope();
   rebind(TheiaMonacoThemingService).toService(MonacoThemingService);
 
+  // workaround for themes cannot be removed after registration
+  // https://github.com/eclipse-theia/theia/issues/11151
+  bind(CleanupObsoleteThemes).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(
+    CleanupObsoleteThemes
+  );
+  bind(ThemesRegistrationSummary).toSelf().inSingletonScope();
+  bind(MonacoThemeRegistry).toSelf().inSingletonScope();
+  rebind(TheiaMonacoThemeRegistry).toService(MonacoThemeRegistry);
+
   // disable type-hierarchy support
   // https://github.com/eclipse-theia/theia/commit/16c88a584bac37f5cf3cc5eb92ffdaa541bda5be
   bind(TypeHierarchyServiceProvider).toSelf().inSingletonScope();

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

@@ -24,6 +24,12 @@ import {
 } from '@theia/core/lib/common/i18n/localization';
 import SettingsStepInput from './settings-step-input';
 import { InterfaceScale } from '../../contributions/interface-scale';
+import {
+  userConfigurableThemes,
+  themeLabelForSettings,
+  arduinoThemeTypeOf,
+} from '../../theia/core/theming';
+import { Theme } from '@theia/core/lib/common/theme';
 
 const maxScale = InterfaceScale.ZoomLevel.toPercentage(
   InterfaceScale.ZoomLevel.MAX
@@ -218,14 +224,10 @@ export class SettingsComponent extends React.Component<
             <div className="flex-line">
               <select
                 className="theia-select"
-                value={this.props.themeService.getCurrentTheme().label}
+                value={this.currentThemeLabel}
                 onChange={this.themeDidChange}
               >
-                {this.props.themeService.getThemes().map(({ id, label }) => (
-                  <option key={id} value={label}>
-                    {label}
-                  </option>
-                ))}
+                {this.themeSelectOptions}
               </select>
             </div>
             <div className="flex-line">
@@ -333,6 +335,46 @@ export class SettingsComponent extends React.Component<
     );
   }
 
+  private get currentThemeLabel(): string {
+    const currentTheme = this.props.themeService.getCurrentTheme();
+    return themeLabelForSettings(currentTheme);
+  }
+
+  private get separatedThemes(): (Theme | string)[] {
+    const separatedThemes: (Theme | string)[] = [];
+    const groupedThemes = userConfigurableThemes(this.props.themeService);
+    for (const group of groupedThemes) {
+      for (let i = 0; i < group.length; i++) {
+        const theme = group[i];
+        if (i === 0 && separatedThemes.length) {
+          const arduinoThemeType = arduinoThemeTypeOf(theme);
+          separatedThemes.push(`separator-${arduinoThemeType}`);
+        }
+        separatedThemes.push(theme);
+      }
+    }
+    return separatedThemes;
+  }
+
+  private get themeSelectOptions(): React.ReactNode[] {
+    return this.separatedThemes.map((item) => {
+      if (typeof item === 'string') {
+        return (
+          // &#9472; -> BOX DRAWINGS LIGHT HORIZONTAL
+          <option key={item} disabled>
+            &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
+          </option>
+        );
+      }
+      const label = themeLabelForSettings(item);
+      return (
+        <option key={item.id} value={label}>
+          {label}
+        </option>
+      );
+    });
+  }
+
   private toSelectOptions(language: string | LanguageInfo): JSX.Element {
     const plain = typeof language === 'string';
     const key = plain ? language : language.languageId;
@@ -610,8 +652,8 @@ export class SettingsComponent extends React.Component<
     event: React.ChangeEvent<HTMLSelectElement>
   ): void => {
     const { selectedIndex } = event.target.options;
-    const theme = this.props.themeService.getThemes()[selectedIndex];
-    if (theme) {
+    const theme = this.separatedThemes[selectedIndex];
+    if (theme && typeof theme !== 'string') {
       this.setState({ themeId: theme.id });
       if (this.props.themeService.getCurrentTheme().id !== theme.id) {
         this.props.themeService.setCurrentTheme(theme.id);

arduino-ide-extension/src/browser/theia/core/theming.ts

@@ -1,26 +1,186 @@
-import type { Theme } from '@theia/core/lib/common/theme';
-import { injectable } from '@theia/core/shared/inversify';
-import { ThemeServiceWithDB as TheiaThemeServiceWithDB } from '@theia/monaco/lib/browser/monaco-indexed-db';
+import {
+  BuiltinThemeProvider,
+  ThemeService,
+} from '@theia/core/lib/browser/theming';
+import { nls } from '@theia/core/lib/common/nls';
+import type { Theme, ThemeType } from '@theia/core/lib/common/theme';
+import { assertUnreachable } from '../../../common/utils';
 
 export namespace ArduinoThemes {
-  export const Light: Theme = {
+  export const light: Theme = {
     id: 'arduino-theme',
     type: 'light',
     label: 'Light (Arduino)',
     editorTheme: 'arduino-theme',
   };
-  export const Dark: Theme = {
+  export const dark: Theme = {
     id: 'arduino-theme-dark',
     type: 'dark',
     label: 'Dark (Arduino)',
     editorTheme: 'arduino-theme-dark',
   };
 }
 
-@injectable()
-export class ThemeServiceWithDB extends TheiaThemeServiceWithDB {
-  protected override init(): void {
-    this.register(ArduinoThemes.Light, ArduinoThemes.Dark);
-    super.init();
+const builtInThemeIds = new Set(
+  [
+    ArduinoThemes.light,
+    ArduinoThemes.dark,
+    BuiltinThemeProvider.hcTheme,
+    // TODO: add the HC light theme after Theia 1.36
+  ].map(({ id }) => id)
+);
+const deprecatedThemeIds = new Set(
+  [BuiltinThemeProvider.lightTheme, BuiltinThemeProvider.darkTheme].map(
+    ({ id }) => id
+  )
+);
+
+export const lightThemeLabel = nls.localize('arduino/theme/light', 'Light');
+export const darkThemeLabel = nls.localize('arduino/theme/dark', 'Dark');
+export const hcThemeLabel = nls.localize('arduino/theme/hc', 'High Contrast');
+export function userThemeLabel(theme: Theme): string {
+  return nls.localize('arduino/theme/user', '{0} (user)', theme.label);
+}
+export function deprecatedThemeLabel(theme: Theme): string {
+  return nls.localize(
+    'arduino/theme/deprecated',
+    '{0} (deprecated)',
+    theme.label
+  );
+}
+
+export function themeLabelForSettings(theme: Theme): string {
+  switch (theme.id) {
+    case ArduinoThemes.light.id:
+      return lightThemeLabel;
+    case ArduinoThemes.dark.id:
+      return darkThemeLabel;
+    case BuiltinThemeProvider.hcTheme.id:
+      return hcThemeLabel;
+    case BuiltinThemeProvider.lightTheme.id: // fall-through
+    case BuiltinThemeProvider.darkTheme.id:
+      return deprecatedThemeLabel(theme);
+    default:
+      return userThemeLabel(theme);
+  }
+}
+
+export function compatibleBuiltInTheme(theme: Theme): Theme {
+  switch (theme.type) {
+    case 'light':
+      return ArduinoThemes.light;
+    case 'dark':
+      return ArduinoThemes.dark;
+    case 'hc':
+      return BuiltinThemeProvider.hcTheme;
+    default: {
+      console.warn(
+        `Unhandled theme type: ${theme.type}. Theme ID: ${theme.id}, label: ${theme.label}`
+      );
+      return ArduinoThemes.light;
+    }
+  }
+}
+
+// For tests without DI
+interface ThemeProvider {
+  themes(): Theme[];
+  currentTheme(): Theme;
+}
+
+/**
+ * Returns with a list of built-in themes officially supported by IDE2 (https://github.com/arduino/arduino-ide/issues/1283).
+ * The themes in the array follow the following order:
+ *  - built-in themes first (in `Light`, `Dark`, `High Contrast`), // TODO -> High Contrast will be split up to HC Dark and HC Light after the Theia version uplift
+ *  - followed by user installed (VSIX) themes grouped by theme type, then alphabetical order,
+ *  - if the `currentTheme` is either Light (Theia) or Dark (Theia), the last item of the array will be the selected theme with `(deprecated)` suffix.
+ */
+export function userConfigurableThemes(service: ThemeService): Theme[][];
+export function userConfigurableThemes(provider: ThemeProvider): Theme[][];
+export function userConfigurableThemes(
+  serviceOrProvider: ThemeService | ThemeProvider
+): Theme[][] {
+  const provider =
+    serviceOrProvider instanceof ThemeService
+      ? {
+          currentTheme: () => serviceOrProvider.getCurrentTheme(),
+          themes: () => serviceOrProvider.getThemes(),
+        }
+      : serviceOrProvider;
+  const currentTheme = provider.currentTheme();
+  const allThemes = provider
+    .themes()
+    .map((theme) => ({ ...theme, arduinoThemeType: arduinoThemeTypeOf(theme) }))
+    .filter(
+      (theme) =>
+        theme.arduinoThemeType !== 'deprecated' || currentTheme.id === theme.id
+    )
+    .sort((left, right) => {
+      const leftArduinoThemeType = left.arduinoThemeType;
+      const rightArduinoThemeType = right.arduinoThemeType;
+      if (leftArduinoThemeType === rightArduinoThemeType) {
+        const result = themeTypeOrder[left.type] - themeTypeOrder[right.type];
+        if (result) {
+          return result;
+        }
+        return left.label.localeCompare(right.label); // alphabetical order
+      }
+      return (
+        arduinoThemeTypeOrder[leftArduinoThemeType] -
+        arduinoThemeTypeOrder[rightArduinoThemeType]
+      );
+    });
+  const builtInThemes: Theme[] = [];
+  const userThemes: Theme[] = [];
+  const deprecatedThemes: Theme[] = [];
+  allThemes.forEach((theme) => {
+    const { arduinoThemeType } = theme;
+    switch (arduinoThemeType) {
+      case 'built-in':
+        builtInThemes.push(theme);
+        break;
+      case 'user':
+        userThemes.push(theme);
+        break;
+      case 'deprecated':
+        deprecatedThemes.push(theme);
+        break;
+      default:
+        assertUnreachable(arduinoThemeType);
+    }
+  });
+  const groupedThemes: Theme[][] = [];
+  if (builtInThemes.length) {
+    groupedThemes.push(builtInThemes);
+  }
+  if (userThemes.length) {
+    groupedThemes.push(userThemes);
+  }
+  if (deprecatedThemes.length) {
+    groupedThemes.push(deprecatedThemes);
+  }
+  return groupedThemes;
+}
+
+export type ArduinoThemeType = 'built-in' | 'user' | 'deprecated';
+const arduinoThemeTypeOrder: Record<ArduinoThemeType, number> = {
+  'built-in': 0,
+  user: 1,
+  deprecated: 2,
+};
+const themeTypeOrder: Record<ThemeType, number> = {
+  light: 0,
+  dark: 1,
+  hc: 2,
+};
+
+export function arduinoThemeTypeOf(theme: Theme | string): ArduinoThemeType {
+  const themeId = typeof theme === 'string' ? theme : theme.id;
+  if (builtInThemeIds.has(themeId)) {
+    return 'built-in';
+  }
+  if (deprecatedThemeIds.has(themeId)) {
+    return 'deprecated';
   }
+  return 'user';
 }