How to make (electron) window borderless?

[timfayz]

Question

I'm trying to make the main Electron window borderless, but I can't get it working. Gpt suggested the following:

// src/electron-main/myext-electron-main-contribution.ts
@injectable()
export class BorderlessElectronMainApplication extends ElectronMainApplication {
  protected override getDefaultOptions() {
    const options = super.getDefaultOptions();

    return {
      ...options,
      frame: false,
    };
  }
}

// src/electron-main/myext-electron-main-module.ts
export default new ContainerModule((bind, unbind, isBound, rebind) => {
  rebind(ElectronMainApplication)
    .to(BorderlessElectronMainApplication)
    .inSingletonScope();
});

package.json:

  "theiaExtensions": [
    {
      "electronMain": "lib/electron-main/myext-electron-main-module"
    }
  ]

Seems reasonable but unfortunately that doesn't work. Do I do it right?

I've been thinking about application parameter available here:

@injectable()
export class BrandingContribution implements ElectronMainApplicationContribution {
  onStart(application: ElectronMainApplication): void {
  ... // maybe it is possible to modify window border from here?

Appreciate your help in advance! 🙏

[github-actions[bot]]

Hi @timfayz, thanks for starting this discussion! 👋

The Theia community will take a look soon. In the meantime, you might find helpful information in:

• 📖 Theia Documentation
• ❓ FAQ
• 💬 Previous Discussions

---

💙 Eclipse Theia is built and maintained by a community of contributors and sponsors. If Theia is valuable to your work, consider sponsoring the project. For professional support, training, or consulting services, learn more about available options.

[msujew]

Hey @timfayz,

on Windows and Linux, the window.titleBarStyle automatically adjusts the frame property of the window. custom sets it to chromeless, while native keeps the window chrome. The setting is not available on MacOS.

Any changes related to the window chrome need to be done within the context of that feature.

[timfayz]

I tried this at packages/application-electron/package.json:

...
"theia": {
    "target": "electron",
    "frontend": {
      "config": {
        "applicationName": "---",
        "preferences": {
          "window.titleBarStyle": "custom"
        },
        "electron": {
          "disallowReloadKeybinding": false,
          "windowOptions": {
            "frame": false,
            "center": false,
            "height": 200,
            "width": 200,
            "titleBarStyle": "hidden"
          }
        }
      }
    }
  }

From claude (also from @theia/clie readme) I understood that theia.frontend.config.electron.windowOptions should affect what options passed to createWindow(options). But after rebuilding and running, nothing changed (including the size of the window).

[timfayz]

custom:

native:

on every change i did theia build --mode development && theia start

[timfayz]

on windows, custom:

native:

[timfayz]

just to verify that rebuild works, i tried to change title and it changes (so it wasn't a "phony" rebuild). i have a second developer who gets the same issue (including no effect on window size using options listed in https://github.com/eclipse-theia/theia/tree/master/dev-packages/cli).

[msujew]

Note that the app needs to be restarted in order for the changed setting to take effect - you should get a modal that a setting has changed that requires a restart. I just confirmed that this works as expected on Windows - though I currently don't have a way to test this on Linux.

Anyway, as for the Electron window size: I believe that Electron stores the last window size before closing the window - meaning that unless you remove the Electron app cache (I'm not entirely sure where that lives), the default settings in your package.json don't take effect. We use the old data to derive the new window size:

theia/packages/core/src/electron-main/electron-main-application.ts

Lines 461 to 468 in c60326b

	const windowState = previousWindowState?.screenLayout === this.getCurrentScreenLayout()
	? previousWindowState
	: this.getDefaultTheiaWindowOptions();
	const result = {
	frame: this.useNativeWindowFrame,
	...this.getDefaultOptions(),
	...windowState
	};

[timfayz]

We restarted the app every time we've built, yet it didn't affect the behaviour.