Skip to content

Conversation

IanHollow
Copy link
Contributor

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:

Screenshot 2025-04-18 at 4 07 29 PM

After:

Screenshot 2025-04-18 at 4 03 39 PM

@SpacingBat3
Copy link
Owner

SpacingBat3 commented Apr 18, 2025

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.

@SpacingBat3 SpacingBat3 added type:feat New feature or request status:need-info Further information is requested labels Apr 18, 2025
@IanHollow
Copy link
Contributor Author

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:

Screenshot 2025-04-18 at 4 51 52 PM

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.

@SpacingBat3
Copy link
Owner

SpacingBat3 commented Apr 18, 2025

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.

@IanHollow
Copy link
Contributor Author

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.

@SpacingBat3
Copy link
Owner

SpacingBat3 commented Apr 19, 2025

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).

@SpacingBat3 SpacingBat3 removed the status:need-info Further information is requested label Apr 20, 2025
@SpacingBat3 SpacingBat3 force-pushed the fix/macos-traffic-light-controls branch from 616a66b to b53b672 Compare April 20, 2025 22:00
@SpacingBat3
Copy link
Owner

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.

@SpacingBat3 SpacingBat3 force-pushed the fix/macos-traffic-light-controls branch from b53b672 to f531750 Compare April 21, 2025 14:45
@SpacingBat3 SpacingBat3 added the status:need-info Further information is requested label Apr 21, 2025
@SpacingBat3 SpacingBat3 changed the title Fix: enable macOS traffic light controls in main window Feat: enable macOS traffic light controls in main window Apr 21, 2025
@SpacingBat3 SpacingBat3 changed the title Feat: enable macOS traffic light controls in main window Enable macOS traffic light controls in main window Apr 21, 2025
@IanHollow
Copy link
Contributor Author

Here is how it looks on the login screen:
Screenshot 2025-04-21 at 2 11 45 PM
Screenshot 2025-04-21 at 2 12 39 PM

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:

Screenshot 2025-04-21 at 2 15 35 PM

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

status:need-info Further information is requested type:feat New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants