Add --title-bar-style flag (macOS only) (PR#627)

app/src/components/mainWindow/mainWindow.js

@@ -108,6 +108,7 @@ function createMainWindow(inpOptions, onAppQuit, setDockBadge) {
         fullscreen: options.fullScreen || undefined,
         // Whether the window should always stay on top of other windows. Default is false.
         alwaysOnTop: options.alwaysOnTop,
+        titleBarStyle: options.titleBarStyle,
       },
       DEFAULT_WINDOW_OPTIONS,
     ),

docs/api.md

@@ -38,6 +38,7 @@
     - [[full-screen]](#full-screen)
     - [[maximize]](#maximize)
     - [[hide-window-frame]](#hide-window-frame)
+    - [[title-bar-style]](#title-bar-style)
     - [[verbose]](#verbose)
     - [[disable-context-menu]](#disable-context-menu)
     - [[disable-dev-tools]](#disable-dev-tools)
@@ -405,8 +406,41 @@ Makes the packaged app start maximized.
 --hide-window-frame
 ```
 
-Disable window frame and controls
+Disable window frame and controls.
 
+#### [title-bar-style]
+
+```
+--title-bar-style <value>
+```
+
+(macOS only) Sets the style for the app's title bar. See more details at electron's [Frameless Window](https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#alternatives-on-macos) documentation.
+
+Consider injecting a custom CSS (via `--inject`) for better integration. Specifically, the CSS should specify a draggable region. For instance, if the target website has a `<header>` element, you can make it draggable like so.
+
+```css
+/* site.css */
+
+/* header is draggable... */
+header {
+  -webkit-app-region: drag;
+}
+
+/* but any buttons inside the header shouldn't be draggable */
+header button {
+  -webkit-app-region: no-drag;
+}
+
+/* perhaps move some items out of way for the traffic light */
+header div:first-child {
+  margin-left: 100px;
+  margin-top: 25px;
+}
+```
+
+```sh
+nativefier http://google.com --inject site.css --title-bar-style 'hiddenInset'
+```
 
 #### [verbose]
 

src/build/buildApp.js

@@ -55,6 +55,7 @@ function selectAppArgs(options) {
     basicAuthUsername: options.basicAuthUsername,
     basicAuthPassword: options.basicAuthPassword,
     alwaysOnTop: options.alwaysOnTop,
+    titleBarStyle: options.titleBarStyle,
   };
 }
 

src/cli.js

@@ -195,6 +195,10 @@ if (require.main === module) {
     .option('--basic-auth-username <value>', 'basic http(s) auth username')
     .option('--basic-auth-password <value>', 'basic http(s) auth password')
     .option('--always-on-top', 'enable always on top window')
+    .option(
+      '--title-bar-style <value>',
+      "(macOS only) set title bar style ('hidden', 'hiddenInset').  Consider injecting custom CSS (via --inject) for better integration.",
+    )
     .parse(process.argv);
 
   if (!process.argv.slice(2).length) {

src/options/optionsMain.js

@@ -73,6 +73,7 @@ export default function(inpOptions) {
     basicAuthUsername: inpOptions.basicAuthUsername || null,
     basicAuthPassword: inpOptions.basicAuthPassword || null,
     alwaysOnTop: inpOptions.alwaysOnTop || false,
+    titleBarStyle: inpOptions.titleBarStyle || null,
   };
 
   if (options.verbose) {