fix: ordered theme select options in dialog

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

Author: Akos Kitta

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

@@ -4,7 +4,7 @@ import {
   ThemeService,
 } from '@theia/core/lib/browser/theming';
 import { nls } from '@theia/core/lib/common/nls';
-import type { Theme } from '@theia/core/lib/common/theme';
+import type { Theme, ThemeType } 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';
 
@@ -87,7 +87,7 @@ interface ThemeProvider {
 
 /**
  * Returns with a list of built-in themes officially supported by IDE2 (https://github.com/arduino/arduino-ide/issues/1283).
- * If the `currentTheme` is not a built-in one, it will be appended to the array. Built-in themes come first, followed by any contributed one.
+ * If the `currentTheme` is not a built-in one, it will be appended to the array. Built-in themes come first (in light, dark, HC dark order), followed by any contributed one.
  */
 export function userConfigurableThemes(service: ThemeService): Theme[];
 export function userConfigurableThemes(provider: ThemeProvider): Theme[];
@@ -104,14 +104,21 @@ export function userConfigurableThemes(
   const currentTheme = provider.currentTheme();
   return provider
     .themes()
-    .map((theme, index) => ({ ...theme, index }))
     .filter((theme) => isBuiltInTheme(theme) || currentTheme.id === theme.id)
     .sort((left, right) => {
       const leftBuiltIn = isBuiltInTheme(left);
       const rightBuiltIn = isBuiltInTheme(right);
       if (leftBuiltIn === rightBuiltIn) {
-        return left.index - right.index;
+        return themeTypeComparator(left, right);
       }
       return leftBuiltIn ? -1 : 1;
     });
 }
+
+const themeTypeOrder: Record<ThemeType, number> = {
+  light: 0,
+  dark: 1,
+  hc: 2,
+};
+const themeTypeComparator = (left: Theme, right: Theme) =>
+  themeTypeOrder[left.type] - themeTypeOrder[right.type];

arduino-ide-extension/src/test/browser/theming.test.ts

@@ -28,8 +28,8 @@ describe('theming', () => {
     it('if the current theme is a built-in theme, the result does not contain any contributed theme', () => {
       const actual = userConfigurableThemes({
         themes: () => [
-          ArduinoThemes.light,
           ArduinoThemes.dark,
+          ArduinoThemes.light,
           testTheme,
           BuiltinThemeProvider.hcTheme,
           anotherTestTheme,
@@ -54,9 +54,9 @@ describe('theming', () => {
         currentTheme: () => testTheme,
       });
       expect(actual.length).to.be.equal(4);
-      expect(actual[0].id).to.be.equal(BuiltinThemeProvider.hcTheme.id);
+      expect(actual[0].id).to.be.equal(ArduinoThemes.light.id);
       expect(actual[1].id).to.be.equal(ArduinoThemes.dark.id);
-      expect(actual[2].id).to.be.equal(ArduinoThemes.light.id);
+      expect(actual[2].id).to.be.equal(BuiltinThemeProvider.hcTheme.id);
       expect(actual[3].id).to.be.equal(testTheme.id);
     });
   });