Merge branch 'linux-window-chrome'

5 files changed, 41 insertions, 43 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c059a356fe..01e27c3f86 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,9 @@ Line wrap the file at 100 chars.                                              Th
 - When IPv6 is enabled, get both exit IP versions from am.i.mullvad.net and show.
 - Add translations for country and city names in the relay list and map.
 
+#### Linux
+- Add standard window decorations to the application window.
+
 ### Fixed
 - Reset the tray icon padlock to the unsecured state when losing connectivity with the daemon.
 
diff --git a/gui/assets/images/icon-close-down.svg b/gui/assets/images/icon-close-down.svg
new file mode 100644
index 0000000000..4ef12ed6eb
--- /dev/null
+++ b/gui/assets/images/icon-close-down.svg
@@ -0,0 +1,8 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-close-down</title>
+    <desc>Mullvad VPN app</desc>
+    <defs></defs>
+    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
+        <path d="M12,24 C5.37312,24 -3.2900871e-16,18.62688 -7.34788079e-16,12 C-1.14056745e-15,5.37312 5.37312,0 12,0 C18.62688,0 24,5.37312 24,12 C24,18.62688 18.62688,24 12,24 Z M7.00548958,11.9978652 C6.97547323,12.2732292 7.06852694,12.5603856 7.28524783,12.7773547 L13.2129013,18.7117979 C13.5936146,19.0929473 14.2231287,19.090784 14.6233317,18.7027276 L14.6942341,18.6339771 C15.09248,18.2478183 15.1055305,17.6195657 14.7108992,17.2180331 L9.58045095,11.9978652 L14.7108992,6.77769718 C15.1055305,6.37616462 15.09248,5.74791199 14.6942341,5.36175323 L14.6233317,5.29300272 C14.2231287,4.90494629 13.5936146,4.90278303 13.2129013,5.28393238 L7.28524783,11.2183756 C7.06852694,11.4353448 6.97547323,11.7225011 7.00548958,11.9978652 L7.00548958,11.9978652 Z" id="path" fill="#FFFFFF" transform="rotate(-90 12 12)"></path>
+    </g>
+</svg>
diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index b3139362d8..08dc43243b 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -275,7 +275,6 @@ class ApplicationMain {
 
     this.registerWindowListener(windowController);
     this.registerIpcListeners();
-    this.setAppMenu();
     this.addContextMenu(window);
 
     this.windowController = windowController;
@@ -311,6 +310,7 @@ class ApplicationMain {
         break;
       case 'darwin':
         this.installMacOsMenubarAppWindowHandlers(tray, windowController);
+        this.setMacOsAppMenu();
         break;
       case 'linux':
         this.installGenericMenubarAppWindowHandlers(tray, windowController);
@@ -967,7 +967,7 @@ class ApplicationMain {
     // the size of transparent area around arrow on macOS
     const headerBarArrowHeight = 12;
 
-    const options = {
+    const options: Electron.BrowserWindowConstructorOptions = {
       width: 320,
       minWidth: 320,
       height: contentHeight,
@@ -1003,16 +1003,24 @@ class ApplicationMain {
           skipTaskbar: true,
         });
 
-      default:
-        return new BrowserWindow(options);
+      default: {
+        const appWindow = new BrowserWindow({
+          ...options,
+          frame: true,
+        });
+
+        return appWindow;
+      }
     }
   }
 
-  private setAppMenu() {
+  // On macOS, hotkeys are bound to the app menu and won't work if it's not set,
+  // even though the app menu itself is not visible because the app does not appear in the dock.
+  private setMacOsAppMenu() {
     const template: Electron.MenuItemConstructorOptions[] = [
       {
         label: 'Mullvad',
-        submenu: [{ role: 'about' }, { type: 'separator' }, { role: 'quit' }],
+        submenu: [{ role: 'quit' }],
       },
       {
         label: 'Edit',
@@ -1129,7 +1137,7 @@ class ApplicationMain {
 
   private installLinuxWindowCloseHandler(windowController: WindowController) {
     windowController.window.on('close', (closeEvent: Event) => {
-      if (process.platform === 'linux' && this.quitStage !== AppQuitStage.ready) {
+      if (this.quitStage !== AppQuitStage.ready) {
         closeEvent.preventDefault();
         windowController.hide();
       }
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index cc73b1a292..87b9747449 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -23,14 +23,9 @@ const headerBarStyles = {
       paddingLeft: 12,
       paddingRight: 12,
     }),
-    platformOverride: {
-      darwin: Styles.createViewStyle({
-        paddingTop: 24,
-      }),
-      linux: Styles.createViewStyle({
-        appRegion: 'drag',
-      }),
-    },
+    darwin: Styles.createViewStyle({
+      paddingTop: 24,
+    }),
   },
   content: Styles.createViewStyle({
     flexDirection: 'row',
@@ -63,8 +58,7 @@ export default class HeaderBar extends Component<IHeaderBarProps> {
   public render() {
     const style = [
       headerBarStyles.container.base,
-      // @ts-ignore
-      headerBarStyles.container.platformOverride[process.platform],
+      process.platform === 'darwin' ? headerBarStyles.container.darwin : undefined,
       headerBarStyles.barStyle[this.props.barStyle],
       this.props.style,
     ];
@@ -109,31 +103,16 @@ interface ISettingsButtonProps {
   onPress?: () => void;
 }
 
-const settingsBarButtonStyles = {
-  container: {
-    base: Styles.createViewStyle({
-      cursor: 'default',
-      padding: 0,
-      marginLeft: 8,
-    }),
-    platformOverride: {
-      linux: Styles.createViewStyle({
-        appRegion: 'no-drag',
-      }),
-    },
-  },
-};
+const settingsBarButtonStyle = Styles.createButtonStyle({
+  cursor: 'default',
+  padding: 0,
+  marginLeft: 8,
+});
 
 export class SettingsBarButton extends Component<ISettingsButtonProps> {
   public render() {
     return (
-      <Button
-        style={[
-          settingsBarButtonStyles.container.base,
-          // @ts-ignore
-          settingsBarButtonStyles.container.platformOverride[process.platform],
-        ]}
-        onPress={this.props.onPress}>
+      <Button style={settingsBarButtonStyle} onPress={this.props.onPress}>
         <ImageView
           height={24}
           width={24}
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 82a8ed3dbd..dc5b6c91ea 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -28,7 +28,6 @@ const styles = {
     }),
     linux: Styles.createViewStyle({
       paddingTop: 12,
-      appRegion: 'drag',
     }),
   },
   navigationBarTitle: {
@@ -54,7 +53,6 @@ const styles = {
   buttonBarItem: {
     default: Styles.createButtonStyle({
       cursor: 'default',
-      appRegion: 'no-drag',
     }),
     content: Styles.createViewStyle({
       flexDirection: 'row',
@@ -70,7 +68,6 @@ const styles = {
   closeBarItem: {
     default: Styles.createViewStyle({
       cursor: 'default',
-      appRegion: 'no-drag',
     }),
     icon: Styles.createViewStyle({
       flex: 0,
@@ -83,7 +80,6 @@ const styles = {
       padding: 0,
       margin: 0,
       cursor: 'default',
-      appRegion: 'no-drag',
     }),
     content: Styles.createViewStyle({
       flexDirection: 'row',
@@ -447,9 +443,13 @@ interface ICloseBarItemProps {
 
 export class CloseBarItem extends Component<ICloseBarItemProps> {
   public render() {
+    // Use the arrow down icon on Linux, to avoid confusion with the close button in the window
+    // title bar.
+    const iconName = process.platform === 'linux' ? 'icon-close-down' : 'icon-close';
+
     return (
       <Button style={[styles.closeBarItem.default]} onPress={this.props.action}>
-        <ImageView height={24} width={24} style={[styles.closeBarItem.icon]} source="icon-close" />
+        <ImageView height={24} width={24} style={[styles.closeBarItem.icon]} source={iconName} />
       </Button>
     );
   }