Add Titlebar support for Wayland

[Devorlon]

Electron (with some finagling) can now be built with Wayland support.

One problem is that it does not support drawing a title bar for any applications using it. Either requiring the application to call for the draw or having the window manager draw one (Client Side Decorations (CSD) and Server Side Decorations (SSD)), and unfortunately some applications have not implemented CSD (Discord, Vscode).

Deciphering the conversation from #10915 it seems that Chromium already supports CSD through GTK (which would be 'ported'?). And failing that it seems that gnome does provide the library libdecoration.

Here is an example of a native Wayland window without a titlebar.

[4ndv]

On vscode you can fix it using this setting:

"window.titleBarStyle": "custom"

[memeplex]

GTK4 provides many components besides the headerbar itself. For example, you can define a handle area overlaid on top of your webview and add window buttons somewhere, thus getting a result similar to what MacOS Electron apps offer nowadays instead of a classic (even if CSD) title bar. Indeed, the headerbar widget is composed of these smaller parts that are also separately available. I've been doing some experiments and all this is easily achievable.

Now the bad part: the surfaces you get from Chromium/Electron are no GTK at all, not even the container is GTK, it's all done at the Aura/Ozone level AFAICS. So there is no place where to hook these GTK goodies. I've been inspecting the MacOS implementation in Electron and they seem to have reimplemented the entire NativeWindow in order to have a NSView, I guess something like that would be required to introduce a GTK container at the top of the hierarchy. That's a lot of complex work, I don't think it will come from an individual community contributor anytime soon.

OTOH, Chromium has its own rendering of window buttons that, although not perfect, does its best to follow the system theme. Maybe these parts could be reused, although they seem to be pretty intertwined with the browser windows, tab bar, etc.

[memeplex]

These are the Electron issues that are the most relevant to the current one:

#27522

#11907

[StiliyanKushev]

@4ndv's workaround is the only thing that works until the fix hits the latest bin.

[Jmennius]

This was implemented in #29618, currently under a feature flag (WaylandWindowDecorations).

[RaisinTen]

Since #29618 has been merged, I'm closing this issue. Do let me know if this needs to stay open!

[gurnben]

Hey folks!

First - thank you for this incredibly descriptive issue - I found myself here when, upon setting the --enable-features=UseOzonePlatform --ozone-platform=wayland launch flags for VSCode (to resolve some stuttering) I lost my title bar entirely.

I'm still experiencing this issue on Fedora 37 / Gnome 43 / Wayland / Nvidia (via akmod). VSCode version details as follow:

Version: 1.74.2
Commit: e8a3071ea4344d9d48ef8a4df2c097372b0c5161
Date: 2022-12-20T10:27:19.253Z
Electron: 19.1.8
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Linux x64 6.0.15-300.fc37.x86_64
Sandboxed: No

The:

"window.titleBarStyle": "custom"

workaround resolves my issue, but isn't ideal.

@RaisinTen Does anything look awry with my configuration that could cause me to experience this issue after the Electron issues were resolved and flagged properly?

Let me know if I can provide any additional information - or try anything to resolve! Thanks folks!

[RaisinTen]

Interesting. @deepak1556 any clue?

[sepehr]

@gurnben, try it like:

code --enable-features=UseOzonePlatform,WaylandWindowDecorations --ozone-platform=wayland

---

In my experience with vscode, I had to install the insiders build as the standard one started crashing under native Wayland. Wish I could link the issue, but couldn't find it again.

[gurnben]

@sepehr Ah! Thanks for the tip! I've switched to using:

--enable-features=UseOzonePlatform,WaylandWindowDecorations --ozone-platform=wayland

and the Title Bar is back (upon switching from custom to native) but I have another odd issue...

This is what full screen looks like now on both my ultrawide and standard display (complete with the border):

[sepehr]

"@gurnben: but I have another odd issue... This is what full screen looks like now on both my ultrawide and standard display (complete with the border):"

Not sure what is the problem you are referring to. Your title bar looks good to me tbh. Here's mine using insiders build:

[sepehr]

Oh, you probably mean that even though it is set to "native", you're not able to see the native GTK title bar like I do. I would try the insiders build, maybe that would help.

[gurnben]

@sepehr thanks for the suggestion - I'll give the insider build a try later today!

The issue is actually that, with WaylandWindowDecorations set - full-screening the application leaves about a 10-pixel gap on all sides of the window (where you can see my wallpaper) - the application in my screenshot is fullscreen but has a gap around the window!

Let me know if that makes sense - if not I can attach an annotated screenshot!

In the meantime - I'm off to the insider build!

[gurnben]

Ok - I've given code-insiders a try. I've tried a number of combinations with interesting results (all with "window.titleBarStyle": "native"):

• code-insiders and code
  • Laggy cursor, text cursor, and terminal
  • Window hitching and UI element jittering
  • Regular title bar
  • Regular fullscreen
• code-insiders --enable-features=UseOzonePlatform --ozone-platform=wayland and code --enable-features=UseOzonePlatform --ozone-platform=wayland
  • Non-laggy cursor, text cursor, and terminal
  • No Window hitching and UI element jittering
  • No title bar
  • Regular fullscreen
• code-insiders --enable-features=UseOzonePlatform,WaylandWindowDecorations --ozone-platform=wayland and code --enable-features=UseOzonePlatform,WaylandWindowDecorations --ozone-platform=wayland
  • Non-laggy cursor, text cursor, and terminal
  • No Window hitching and UI element jittering
  • Regular title bar
  • 10 pixel empty border around fullscreen that shows all content behind the window

Let me know if you have any suggestions on what to try next (or debug info I can provide) to get to the bottom of that 10 pixel border!

[kaimast]

See this issue #33161

Not sure if this is a regression or if you are using an old version of Electron.

[gurnben]

Incredible - thank you for the issue link @kaimast! Would you like me to move the discussion to that issue?

I'm currently on:

Version: 1.74.2
Commit: e8a3071ea4344d9d48ef8a4df2c097372b0c5161
Date: 2022-12-20T10:27:19.253Z
Electron: 19.1.8
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Linux x64 6.0.15-300.fc37.x86_64
Sandboxed: No

on GNOME 43.2

In theory - Electron 19.1.8 should contain all fixes discussed in #33161 (just looking through the commits before the 1.19.8 tag here.