Nativefier: Support setting BrowserWindow options (some? all? inset titleBarStyle, vibrancy, darkTheme, ...)

Created on 21 Jan 2016 · 27Comments · Source: jiahaog/nativefier

Expose Electron's BrowserWindow API

This would be great for customizing things like titleBar

Example interface ideas:

command line flag with json blob that get applied to apps default json object
command line flag for individual options like ```--windowOption="titleBar:'hidden-inset'"
user accessible templates folder

feature-request mac

Source

jkatzer

👍3

Most helpful comment

I have borderless working in my fork, with a draggable title bar. Haven't integrated it with the cli yet for a PR, but feel free to check out the easy solution: https://github.com/argyleink/nativefier/commit/bf4b7b47ffe111f9c91ffd873d23594aa872c81f

argyleink on 14 Dec 2017

👍2

All 27 comments

could make a pull request for frameless windows as an cli option

featdd on 21 Jan 2016

@featdd that would be awesome!

jkatzer on 21 Jan 2016

@jkatzer made some tests and have the problem to can't move the window on OS X
seems to be a UI problem and has to be programmed in an OS X app to work.
have found a stackoverflow thread for that.

has to be fixed in electron core I think :-/

featdd on 21 Jan 2016

@featdd thanks for finding that! i was referring to exposing the options from: https://github.com/atom/electron/blob/master/docs/api/browser-window.md i have updated the description. after playing with nativefier i opened the package and customized these options and it that sold me on this repo as an alternative to fluid.

jkatzer on 21 Jan 2016

I saw an alternative way for OS X, hides the titlebar but the window controls are pushed into the window, so for OS X there has to be a selfmade title bar.

Can't talk for windows or linux.

featdd on 21 Jan 2016

wow, that looks even better! i saw someone doing something with that on HN and forgot when i was looking up the docs. either way exposing these options would be amazing

jkatzer on 21 Jan 2016

titleBarStyle: 'hidden-inset' works the best for OS X, window keeps movable and titlebar is completely hidden

featdd on 21 Jan 2016

@featdd I've modified the placeholder app to no longer use <webview>, could you see if you're still having the problem?

jiahaog on 22 Jan 2016

will investigate this in the evening.

Maybe I can make a pull request for window args if I have the time.
But what could be the best way to provide the args, like @jkatzer in his first comment?
have to look how node cli works, haven't much experience in node yet.

featdd on 22 Jan 2016

in #41 @miduga had made comment about passing a window json, maybe also a good alternative way

featdd on 22 Jan 2016

I do agree that the window json is a good idea, will get around to it soon.

jiahaog on 27 Jan 2016

Great @jiahaog :)

midudev on 27 Jan 2016

Not sure if this is applicable to issue 35, but I'd like to be able to add a custom appcache manifest to a site, so that it cache's static content: http://www.html5rocks.com/en/tutorials/appcache/beginner/

So: <html> would become <html manifest="http://example.com/custom.appcache.manifest">

It makes a webpage more offline-y.

Also, since Appcache Manifest is deprecated, I'd also like to also be able to add a custom js include to any publicly accessible js file in each page's <head>. Perhaps I'd add some web worker or something to make a site faster.

gavinengel on 29 Jan 2016

@gavinengel I don't believe the caching would be supported by Electron, as it points the entire browser to the target url directly.

Injection of JS and CSS is planned, as referenced in #135

jiahaog on 18 Feb 2016

@jiahaog Would this allow for 'title-bar-style': 'hidden-inset' as seen in the Electron spec here: https://github.com/atom/electron/blob/master/docs/api/browser-window.md?

jdsimcoe on 22 Mar 2016

@jdsimcoe Yup, that is allowed but it obstructs UI elements of certain pages.

jiahaog on 25 Mar 2016

@jiahaog I realize that... you usually have to do custom CSS to re-position stuff. I tried implementing it with 'title-bar-style': 'hidden-inset' when browserWindow is instantiated but can't figure out how to get it working. Any ideas?

jdsimcoe on 25 Mar 2016

I think it might be possible to use JS to dynamically insert some invisible and floating html elements at the top of the window that implement the -webkit-app-region: drag CSS to allow the dragging near the top of the window

jiahaog on 25 Mar 2016

No I can't get the BroswerWindow command to create that title-bar-style.

jdsimcoe on 25 Mar 2016

@jiahaog Do you have a timeline to implement 'title-bar-style': 'hidden-inset' support?

jdsimcoe on 28 Jun 2016

I'm pretty busy at the moment to implement this, please feel free to look into it and submit a pull request if you are successful!

jiahaog on 4 Jul 2016

Any updates on this? I tried installing the package from @elliebartling but got some errors related to cli.js