SpacingBat3
Enable macOS traffic light controls in main window
This PR enables native macOS traffic light controls (close/minimize/maximize) in the main Electron window. This improves usability and consistency with native macOS apps.
Tested on macOS 15.3.1 (Apple Silicon).
Before:
After:
The code is good and minimalist and with no alternatives made, I guess it is better than nothing. Plus nice to have someone from mac community test how hiddenInset actually works and looks like (the main rationale why WebCord has no macOS integrations or is terrible with them)!
The question is though, does it have any impact on the access to title menu bar? I believe macs render these in top panel, although I have rather little experience with doing anything on macs so I could've been mistaken.
I'm honestly eager to go with CSD on all platforms, but that would mean switching from menu bar to something else.
I just tested again to confirm using titleBarStyle: 'hiddenInset' doesn’t impact access to the macOS native menu bar at the top of the screen. The system menu bar (with items like "Edit", "view", etc.) remains fully functional and visible, just like it does in other native macOS apps. Here is an image of the menu bar in use:
The only change is to the window’s title bar area, where the traffic light buttons (close, minimize, maximize) become visible and properly aligned. It's otherwise visually seamless and consistent with other Electron/macOS apps using hiddenInset.
Also, I might add it as a mac-only setting (to toggle between CSD/non-CSD, in the future I'll move to platform-independent setting once I'll work on CSD), the current infrastructure, while being convoluted, is still prepared well for adding this kind of change and should be a few lines away to add it.
While you're looking into mac-only settings, I just wanted to mention that the “Hide menu bar with Alt” option doesn’t really have any effect on macOS since the menu bar is always located at the top of the screen and can’t be toggled that way. It might make sense to hide or disable that option on macOS to avoid confusion.
While you're looking into mac-only settings, I just wanted to mention that the “Hide menu bar with Alt” option doesn’t really have any effect on macOS since the menu bar is always located at the top of the screen and can’t be toggled that way. It might make sense to hide or disable that option on macOS to avoid confusion.
Can-do, although if it's gonna be a non-mac-only, I feel like it's gonna introduce funny code… Since, in reality, it might use 2 different config entries and need from me to check both. At least if I won't do any code touches to it.
Yeah, config infra in WebCord ain't great, I'm far from being happy how I did things within it. I saw some screens posted online of M$ engineer describing adding stuff to control panel as a hell of the work, and WebCord's barely better at it. I'm nowadays more knowledgeable, and WebCord by itself gave me a brief idea what shouldn't I do in the future to end with great software engineering, or at least great enough adding features won't take me decades while keeping most of my coding principles intact (yes, I still hate adding non-dev deps to my packages, and either prefer standard way of things or doing my own packages; colors.js incident is one of the reasons why).
Also, could you also show how traffic lights look on login screen, and behave on smaller window widths? It might be reasonable to try implement CSD slightly differently for the login page, given Discord doesn't contain any title bar in their design here… I mean, there might be no draggable attributes like they have on their title bar.
Here is how it looks on the login screen:
Like you were saying it seems that window is not drag-able in this mode. Also here is how the window looks in the webcord settings menu:
The fonts are a little weird on MacOS but that is honestly that big of concern to me, but could be nice to change in the future. I might just need to install more fonts for my system.