feat: can remove theme from indexedDB

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

Author: Akos Kitta

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

@@ -330,7 +330,10 @@ 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,
+  ObsoleteThemesCleanup,
+} from './theia/monaco/monaco-theming-service';
 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';
@@ -986,6 +989,11 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   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(ObsoleteThemesCleanup).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(ObsoleteThemesCleanup);
+
   // disable type-hierarchy support
   // https://github.com/eclipse-theia/theia/commit/16c88a584bac37f5cf3cc5eb92ffdaa541bda5be
   bind(TypeHierarchyServiceProvider).toSelf().inSingletonScope();

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

@@ -22,7 +22,7 @@ export namespace ArduinoThemes {
   };
 }
 
-const builtInThemeIds = new Set(
+export const builtInThemeIds = new Set(
   [
     ArduinoThemes.Light,
     ArduinoThemes.Dark,
@@ -43,7 +43,7 @@ export const contributedThemeLabel = nls.localize(
 @injectable()
 export class ThemeServiceWithDB extends TheiaThemeServiceWithDB {
   protected override init(): void {
-    this.register(ArduinoThemes.Light, ArduinoThemes.Dark);
+    // this.register(ArduinoThemes.Light, ArduinoThemes.Dark); // TODO: check if needed
     super.init();
   }
 }

arduino-ide-extension/src/browser/theia/monaco/monaco-theming-service.ts

@@ -1,9 +1,23 @@
-import { injectable } from '@theia/core/shared/inversify';
-import { MonacoThemingService as TheiaMonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
-import { ArduinoThemes } from '../core/theming';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import { BuiltinThemeProvider } from '@theia/core/lib/browser/theming';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import URI from '@theia/core/lib/common/uri';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import {
+  deleteTheme as deleteThemeFromIndexedDB,
+  getThemes as getThemesFromIndexedDB,
+} from '@theia/monaco/lib/browser/monaco-indexed-db';
+import {
+  MonacoTheme,
+  MonacoThemingService as TheiaMonacoThemingService,
+} from '@theia/monaco/lib/browser/monaco-theming-service';
+import { HostedPluginSupport } from '@theia/plugin-ext/lib/hosted/browser/hosted-plugin';
+import { ArduinoThemes, builtInThemeIds } from '../core/theming';
 
 @injectable()
 export class MonacoThemingService extends TheiaMonacoThemingService {
+  private readonly _pluginContributedThemeIds = new Set<string>();
+
   protected override restore(): Promise<void> {
     const { Light, Dark } = ArduinoThemes;
     this.registerParsedTheme({
@@ -19,9 +33,95 @@ export class MonacoThemingService extends TheiaMonacoThemingService {
       json: require('../../../../src/browser/data/dark.color-theme.json'),
     });
     // The custom theme registration must happen before restoring the themes.
-    // Otherwise, the theme content change is not picked up by Theia.
-    // There is a indexedDB getAll before the DB put.
+    // Otherwise, theme changes are not picked up.
     // https://github.com/arduino/arduino-ide/issues/1251#issuecomment-1436737702
     return super.restore();
   }
+
+  // Customized to populate `_pluginContributedThemeIds`. The rest of the code is vanilla Theia.
+  protected override async doRegister(
+    theme: MonacoTheme,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    pending: { [uri: string]: Promise<any> },
+    toDispose: DisposableCollection
+  ): Promise<void> {
+    try {
+      const includes = {};
+      const json = await this.loadTheme(
+        theme.uri,
+        includes,
+        pending,
+        toDispose
+      );
+      if (toDispose.disposed) {
+        return;
+      }
+      const label = theme.label || new URI(theme.uri).path.base;
+      const { id, description, uiTheme } = theme;
+      toDispose.push(
+        this.registerParsedTheme({
+          id,
+          label,
+          description,
+          uiTheme: uiTheme,
+          json,
+          includes,
+        })
+      );
+      // This implementation depends on how Theia internally works.
+      // Collect all theme IDs contributed by VSIXs.
+      // When all VISXs are loaded, IDE2 checks the indexedDB for registered themes,
+      // and if there are obsolete ones, deletes them. A theme is obsolete if it was
+      // in the DB but was not loaded from a VSIX during the startup.
+      // See https://github.com/eclipse-theia/theia/issues/11151.
+      if (new URI(theme.uri).scheme === 'file') {
+        this._pluginContributedThemeIds.add(theme.id ?? label);
+      }
+    } catch (e) {
+      console.error('Failed to load theme from ' + theme.uri, e);
+    }
+  }
+
+  get pluginContributedThemeIds(): string[] {
+    return Array.from(this._pluginContributedThemeIds.values());
+  }
+}
+
+const compiledThemeIds = new Set([
+  ...builtInThemeIds.values(),
+  BuiltinThemeProvider.lightTheme,
+  BuiltinThemeProvider.darkTheme,
+]);
+
+/**
+ * Workaround for removing VSIX themes from the indexedDB if they do not load during app startup.
+ * This logic cannot be in MonacoThemingService due to a cycle in the DI object graph.
+ */
+@injectable()
+export class ObsoleteThemesCleanup implements FrontendApplicationContribution {
+  @inject(HostedPluginSupport)
+  private readonly hostedPlugin: HostedPluginSupport;
+  @inject(MonacoThemingService)
+  private readonly monacoTheme: MonacoThemingService;
+
+  onStart(): void {
+    this.hostedPlugin.didStart.then(() => this.cleanObsoleteThemes());
+  }
+
+  private async cleanObsoleteThemes(): Promise<void> {
+    const pluginContributedThemes = this.monacoTheme.pluginContributedThemeIds;
+    const persistedThemes = await getThemesFromIndexedDB();
+    // if neither registered by code (e.g. webpack load such as the Arduino Theme) or VSIX, remove from the indexedDB.
+    const obsoleteThemes = persistedThemes.filter(
+      ({ id }) =>
+        !pluginContributedThemes.includes(id) && !compiledThemeIds.has(id)
+    );
+    if (!obsoleteThemes.length) {
+      return;
+    }
+    await obsoleteThemes.reduce(async (previousTask, theme) => {
+      await previousTask;
+      return deleteThemeFromIndexedDB(theme.id);
+    }, Promise.resolve());
+  }
 }