Use Window Controls Overlay API for native-like experience on Windows and Linux (#240)

This PR implements the [Window Controls Overlay
API](https://web.dev/articles/window-controls-overlay) to let us hide
the menu bar on Windows and Linux and directly embed the window controls
in our tab bar. With #239 merged, we no longer need the menu bar on
these platforms.

The overlaid window controls are transparent so they will take on the
background from the app. I've updated the tab bar to flow properly using
the API's CSS environment variables.

At some point, we may want to update the logic around the symbolColor so
that it can ensure a proper contrast between the background and the
symbols in the window controls. For now, setting them to white works for
all the backgrounds we currently support.

![image
(2)](https://github.com/user-attachments/assets/7610f10b-9696-435c-9a2d-a435bee9fadb)


https://github.com/user-attachments/assets/8d19b512-5281-42b9-8abb-ccb9b850061f
This commit is contained in:
Evan Simkowitz 2024-08-16 23:45:22 -07:00 committed by GitHub
parent 4a782f2747
commit edfe711eda
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 1 deletions

View File

@ -332,7 +332,14 @@ function createBrowserWindow(
};
winBounds = ensureBoundsAreVisible(winBounds);
const winOpts: Electron.BrowserWindowConstructorOptions = {
titleBarStyle: "hiddenInset",
titleBarStyle: unamePlatform === "darwin" ? "hiddenInset" : "hidden",
titleBarOverlay:
unamePlatform !== "darwin"
? {
symbolColor: "white",
color: "#00000000",
}
: false,
x: winBounds.x,
y: winBounds.y,
width: winBounds.width,

View File

@ -17,6 +17,7 @@
user-select: none;
display: flex;
flex-direction: row;
width: env(titlebar-area-width);
.tabs-wrapper {
transition: var(--tabs-wrapper-transition);