feat(core): new theme editor poc (#7810)

packages/frontend/electron/src/main/constants.ts

@@ -1,3 +1,4 @@
 export const mainWindowOrigin = process.env.DEV_SERVER_URL || 'file://.';
 export const onboardingViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}onboarding`;
 export const shellViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}shell.html`;
+export const customThemeViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}theme-editor`;

packages/frontend/electron/src/main/ui/handlers.ts

@@ -25,6 +25,7 @@ import {
   updateWorkbenchViewMeta,
 } from '../windows-manager';
 import { showTabContextMenu } from '../windows-manager/context-menu';
+import { getOrCreateCustomThemeWindow } from '../windows-manager/custom-theme-window';
 import { getChallengeResponse } from './challenge';
 import { uiSubjects } from './subject';
 
@@ -205,4 +206,9 @@ export const uiHandlers = {
   showTabContextMenu: async (_, tabKey: string, viewIndex: number) => {
     return showTabContextMenu(tabKey, viewIndex);
   },
+  openThemeEditor: async () => {
+    const win = await getOrCreateCustomThemeWindow();
+    win.show();
+    win.focus();
+  },
 } satisfies NamespaceHandlers;

packages/frontend/electron/src/main/windows-manager/custom-theme-window.ts

@@ -0,0 +1,71 @@
+import { join } from 'node:path';
+
+import { BrowserWindow, type Display, screen } from 'electron';
+
+import { isMacOS } from '../../shared/utils';
+import { customThemeViewUrl } from '../constants';
+import { logger } from '../logger';
+
+let customThemeWindow: Promise<BrowserWindow> | undefined;
+
+const getScreenSize = (display: Display) => {
+  const { width, height } = isMacOS() ? display.bounds : display.workArea;
+  return { width, height };
+};
+
+async function createCustomThemeWindow(additionalArguments: string[]) {
+  logger.info('creating custom theme window');
+
+  const { width: maxWidth, height: maxHeight } = getScreenSize(
+    screen.getPrimaryDisplay()
+  );
+
+  const browserWindow = new BrowserWindow({
+    width: Math.min(maxWidth, 800),
+    height: Math.min(maxHeight, 600),
+    resizable: true,
+    maximizable: false,
+    fullscreenable: false,
+    webPreferences: {
+      webgl: true,
+      preload: join(__dirname, './preload.js'),
+      additionalArguments: additionalArguments,
+    },
+  });
+
+  await browserWindow.loadURL(customThemeViewUrl);
+
+  browserWindow.on('closed', () => {
+    customThemeWindow = undefined;
+  });
+
+  return browserWindow;
+}
+
+const getWindowAdditionalArguments = async () => {
+  const { getExposedMeta } = await import('../exposed');
+  const mainExposedMeta = getExposedMeta();
+  return [
+    `--main-exposed-meta=` + JSON.stringify(mainExposedMeta),
+    `--window-name=theme-editor`,
+  ];
+};
+
+export async function getOrCreateCustomThemeWindow() {
+  const additionalArguments = await getWindowAdditionalArguments();
+  if (
+    !customThemeWindow ||
+    (await customThemeWindow.then(w => w.isDestroyed()))
+  ) {
+    customThemeWindow = createCustomThemeWindow(additionalArguments);
+  }
+
+  return customThemeWindow;
+}
+
+export async function getCustomThemeWindow() {
+  if (!customThemeWindow) return;
+  const window = await customThemeWindow;
+  if (window.isDestroyed()) return;
+  return window;
+}

packages/frontend/electron/src/main/windows-manager/tab-views.ts

@@ -28,6 +28,7 @@ import { ensureHelperProcess } from '../helper-process';
 import { logger } from '../logger';
 import { globalStateStorage } from '../shared-storage/storage';
 import { parseCookie } from '../utils';
+import { getCustomThemeWindow } from './custom-theme-window';
 import { getMainWindow, MainWindowManager } from './main-window';
 import {
   TabViewsMetaKey,
@@ -992,12 +993,25 @@ export const onActiveTabChanged = (fn: (tabId: string) => void) => {
 };
 
 export const showDevTools = (id?: string) => {
-  const view = id
-    ? WebContentViewsManager.instance.getViewById(id)
-    : WebContentViewsManager.instance.activeWorkbenchView;
-  if (view) {
-    view.webContents.openDevTools();
-  }
+  // use focusedWindow?
+  // const focusedWindow = BrowserWindow.getFocusedWindow()
+
+  // workaround for opening devtools for theme-editor window
+  // there should be some strategy like windows manager, so we can know which window is active
+  getCustomThemeWindow()
+    .then(w => {
+      if (w && w.isFocused()) {
+        w.webContents.openDevTools();
+      } else {
+        const view = id
+          ? WebContentViewsManager.instance.getViewById(id)
+          : WebContentViewsManager.instance.activeWorkbenchView;
+        if (view) {
+          view.webContents.openDevTools();
+        }
+      }
+    })
+    .catch(console.error);
 };
 
 export const pingAppLayoutReady = (wc: WebContents) => {