Default to transparent title bar (`--title-bar-style hidden / hiddenInset`) on macOS

[sirpooya]

• [x] I looked at nativefier --help and https://github.com/jiahaog/nativefier/blob/master/docs/api.md , no existing option fits my needs.
• [x] I searched existing issues, open & closed. Yes, my feature request is new.
• [x] I'm using the latest version available at https://github.com/jiahaog/nativefier/releases

Problem statement After Build, the App has the default OS Titlebar which is not bad, but It would be much better to be transparent & merge with whole window.

Suggested solution The is an electron app built in Flotato app which transparents the default Titlebar.

Context

• Nativefier: 10.1.0
• Node.js: v14.5.0
• Npm: 6.14.5
• OS: macOS X Catalina 10.15.4

[ronjouch]

@sirpooya from the initial title of your issue, I'm not entirely sure if you don't know this is already supported (see api docs / --title-bar-style), or if you do and what you're asking for is to change the defaults.

I like the idea, but I don't have a Mac to fiddle with it and see how it behaves. I'll happily merge a PR checking these three boxes:

1. Should we use hidden or hiddenInset or hiddenInset or customButtonsOnHover ? (Electron docs)
2. How do we make sure the window remains draggable, always, regardless of the website? Our api docs (written by the implementer of --title-bar-style) notes you need custom, site-specific CSS for that. Do we really?

And once these are clear,

3. Identify a dozen Nativefier Mac active users (look at macos-tagged issues and see commenters) and @mention them asking for their feedback and potential undesirable side-effects

[Aiyush-G]

Hi @sirpooya did you get it to work? If so how?

Cheers

[FranzTscharf]

I think this can be cloes due to:

nativefier --name "Google" https://google.com --title-bar-style 'hiddenInset' --inject ./style.css

style.css content: ` body { -webkit-app-region: drag; }

/ make class elements draggable / .aside-brand-wrapper { -webkit-app-region: drag; padding-top: 5px; }

div#kt_header { -webkit-app-region: drag; }

/ make element with ID not draggable / div#kt_aside_menu_wrapper { -webkit-app-region: no-drag!important; }

div#kt_content { -webkit-app-region: no-drag!important; }

`