Frameless design for Mac

[adarshv90]

I believe electron allows this:
let win = new BrowserWindow({width: 800, height: 600, frame: false})

Here is a quick design mock-up:

Hope it helps

[Armaldio]

Hello, thanks for the proposal 👍
However, I see some problems:

• On your mockup, buttons are too near to the "Messages" word. I don"t know how it integrate for real but currently it's not design friendly
• Allowing custom element on the page require embeding the website inside a webview (see this as an enhanced iframe). Inside webview, notifications are not propagated and it will be difficult to bypass this behaviour (correct me if i'm wrong)
• This style is only for MacOS, however we support the 3 main OS. We should support the three different desings

[antoineraulin]

I think Electron-JS allows code injection into the page, either DOM elements or JavaScript code. Nevertheless, to introduce these elements characteristic of each OS in the page is, in my opinion, not a good idea.

[adarshv90]

@Armaldio regarding your concerns:

• I thought there was enough clearance between the edge and the word Messages to fit the buttons but I agree that it's not ideal
• As @antoineguilbert said, Electron does allow code injection but you would have to constantly monitor the website for changes in case they introduce any breaking code or design changes.
• I agree, I only created the design for Mac

However, since I'm only using it on Mac I went ahead and forked your repo and built a Mac only frameless version. Here is a working screenshot:

I used titleBarStyle: 'hidden' to achieve this. Thanks for making this possible 😀.

Here is the branch in case anybody wants to use it frameless-mac

[Armaldio]

Thanks for your reproduction.

Before considering implementing it, we need to discuss about it.
Since it's MacOS only (https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#alternatives-on-macos), we need to first find a way to generalize it also on other platforms.

[adarshv90]

Hey @Armaldio, sorry for the delay in response. I think this can be implemented so that it only builds frameless for Mac. For other platforms, it can be built as is with frame. In all cases where they've tried to do frameless for Windows, they end up using a custom HTLM frame. Eg. Slack:

[Ztarbox]

Hi @Armaldio if u use titleBarStyle: 'hidden', it will not have effect on windows.
And as @adarshv90 mentioned. Frameless in Windows is not that great with electron, but u could use autoHideMenuBar: true to hide the menu until the user presses the 'Alt' key.

[adarshv90]

@Ztarbox I had forgotten about autoHideMenuBar (I do most Electron development for Mac). You're right. That looks really good without the menu bar.

[plastik46]

hi, how can i add this frameless design to my mac app?