From b8c1d35ba44a1fafe7c7b50a233a1b82c2761eb1 Mon Sep 17 00:00:00 2001
From: Khai Nguyen <khai.nguyen@outlook.com>
Date: Thu, 31 May 2018 05:05:12 -0700
Subject: [PATCH] Add --title-bar-style flag (macOS only) (PR#627)

---
 app/src/components/mainWindow/mainWindow.js |  1 +
 docs/api.md                                 | 36 ++++++++++++++++++++-
 src/build/buildApp.js                       |  1 +
 src/cli.js                                  |  4 +++
 src/options/optionsMain.js                  |  1 +
 5 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/app/src/components/mainWindow/mainWindow.js b/app/src/components/mainWindow/mainWindow.js
index e1fd8df..0a04e11 100644
--- a/app/src/components/mainWindow/mainWindow.js
+++ b/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,
     ),
diff --git a/docs/api.md b/docs/api.md
index b69d5c1..fead748 100644
--- a/docs/api.md
+++ b/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]
 
diff --git a/src/build/buildApp.js b/src/build/buildApp.js
index 60f2430..4478eec 100644
--- a/src/build/buildApp.js
+++ b/src/build/buildApp.js
@@ -55,6 +55,7 @@ function selectAppArgs(options) {
     basicAuthUsername: options.basicAuthUsername,
     basicAuthPassword: options.basicAuthPassword,
     alwaysOnTop: options.alwaysOnTop,
+    titleBarStyle: options.titleBarStyle,
   };
 }
 
diff --git a/src/cli.js b/src/cli.js
index f32bb7c..03bbbb7 100755
--- a/src/cli.js
+++ b/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) {
diff --git a/src/options/optionsMain.js b/src/options/optionsMain.js
index cef542d..3de9097 100644
--- a/src/options/optionsMain.js
+++ b/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) {