use the app menu bar for Linux instead of the default chrome (#139)

app/src/main-process/app-window.ts

@@ -53,6 +53,7 @@ export class AppWindow {
     } else if (__WIN32__) {
       windowOptions.frame = false
     } else if (__LINUX__) {
+      windowOptions.frame = false
       windowOptions.icon = path.join(__dirname, 'static', 'icon-logo.png')
     }
 

app/src/ui/app.tsx

@@ -1095,8 +1095,8 @@ export class App extends React.Component<IAppProps, IAppState> {
    * on Windows.
    */
   private renderAppMenuBar() {
-    // We only render the app menu bar on Windows
-    if (!__WIN32__) {
+    // We render the app menu bar on Windows and Linux
+    if (__DARWIN__) {
       return null
     }
 
@@ -1155,13 +1155,16 @@ export class App extends React.Component<IAppProps, IAppState> {
     // When we're in full-screen mode on Windows we only need to render
     // the title bar when the menu bar is active. On other platforms we
     // never render the title bar while in full-screen mode.
+
+    const appMenuPlatform = __WIN32__ || __LINUX__
+
     if (inFullScreen) {
-      if (!__WIN32__ || !menuBarActive) {
+      if (!appMenuPlatform || !menuBarActive) {
         return null
       }
     }
 
-    const showAppIcon = __WIN32__ && !this.state.showWelcomeFlow
+    const showAppIcon = appMenuPlatform && !this.state.showWelcomeFlow
 
     return (
       <TitleBar

app/src/ui/window/title-bar.tsx

@@ -84,8 +84,11 @@ export class TitleBar extends React.Component<ITitleBarProps, ITitleBarState> {
     const inFullScreen = this.props.windowState === 'full-screen'
     const isMaximized = this.props.windowState === 'maximized'
 
+    const appMenuPlatform = __WIN32__ || __LINUX__
+
     // No Windows controls when we're in full-screen mode.
-    const winControls = __WIN32__ && !inFullScreen ? <WindowControls /> : null
+    const winControls =
+      appMenuPlatform && !inFullScreen ? <WindowControls /> : null
 
     // On Windows it's not possible to resize a frameless window if the
     // element that sits flush along the window edge has -webkit-app-region: drag.

app/src/ui/window/window-controls.tsx

@@ -97,8 +97,8 @@ export class WindowControls extends React.Component<{}, IWindowControlState> {
   }
 
   public render() {
-    // We only know how to render fake Windows-y controls
-    if (!__WIN32__) {
+    // render the faux window controls for Windows and Linux builds
+    if (__DARWIN__) {
       return <span />
     }
 

app/styles/mixins/_platform.scss

@@ -41,3 +41,25 @@
     @content;
   }
 }
+
+// A mixin which takes a content block that should only
+// be applied when the current (real or emulated) operating
+// system is Linux.
+//
+// This helper mixin is useful in so far that it allows us
+// to keep platform specific styles next to cross-platform
+// styles instead of splitting them out and possibly forgetting
+// about them.
+@mixin linux {
+  body.platform-linux & {
+    @content;
+  }
+}
+
+// An exact copy of the linux mixin except that it allows for
+// writing base-level rules
+@mixin linux-context {
+  body.platform-linux {
+    @content;
+  }
+}

app/styles/ui/window/_title-bar.scss

@@ -27,6 +27,18 @@
     }
   }
 
+  @include linux {
+    height: var(--win32-title-bar-height);
+    background: var(--win32-title-bar-background-color);
+    border-bottom: 1px solid #000;
+
+    .app-icon {
+      color: var(--toolbar-button-secondary-color);
+      margin: 0 var(--spacing);
+      align-self: center;
+    }
+  }
+
   .resize-handle {
     position: absolute;
     top: 0px;