Add Linux context menu

2 files changed, 56 insertions, 2 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 4cab78b524..8d9bfb6e77 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -4,6 +4,7 @@ import log from 'electron-log';
 import mkdirp from 'mkdirp';
 import moment from 'moment';
 import * as path from 'path';
+import { sprintf } from 'sprintf-js';
 import * as uuid from 'uuid';
 import { hasExpired } from '../shared/account-expiry';
 import BridgeSettingsBuilder from '../shared/bridge-settings-builder';
@@ -88,6 +89,7 @@ class ApplicationMain {
     areSystemNotificationsEnabled: () => this.guiSettings.enableSystemNotifications,
   });
   private windowController?: WindowController;
+  private tray?: Tray;
   private trayIconController?: TrayIconController;
 
   private daemonRpc = new DaemonRpc(DAEMON_RPC_PATH);
@@ -358,6 +360,7 @@ class ApplicationMain {
     this.addContextMenu(window);
 
     this.windowController = windowController;
+    this.tray = tray;
 
     this.guiSettings.onChange = (newState, oldState) => {
       if (oldState.monochromaticIcon !== newState.monochromaticIcon) {
@@ -389,7 +392,7 @@ class ApplicationMain {
         this.setMacOsAppMenu();
         break;
       case 'linux':
-        this.installGenericMenubarAppWindowHandlers(tray, windowController);
+        this.setLinuxTrayContextMenu();
         this.installLinuxWindowCloseHandler(windowController);
         this.setLinuxAppMenu();
         window.setMenuBarVisibility(false);
@@ -619,6 +622,10 @@ class ApplicationMain {
     this.updateTrayIcon(newState, this.settings.blockWhenDisconnected);
     consumePromise(this.updateLocation());
 
+    if (process.platform === 'linux') {
+      this.setLinuxTrayContextMenu();
+    }
+
     this.notificationController.notifyTunnelState(
       newState,
       this.settings.blockWhenDisconnected,
@@ -1412,6 +1419,52 @@ class ApplicationMain {
     Menu.setApplicationMenu(Menu.buildFromTemplate(template));
   }
 
+  private setLinuxTrayContextMenu() {
+    const template: Electron.MenuItemConstructorOptions[] = [
+      {
+        label: sprintf(messages.pgettext('tray-icon-context-menu', 'Open %(mullvadVpn)s'), {
+          mullvadVpn: messages.pgettext('generic', 'Mullvad VPN'),
+        }),
+        click: () => this.windowController?.show(),
+      },
+      { type: 'separator' },
+      {
+        label: this.getLinuxContextMenuActionButtonLabel(),
+        click: () => {
+          if (this.tunnelState.state === 'disconnected') {
+            consumePromise(this.daemonRpc.connectTunnel());
+          } else {
+            consumePromise(this.daemonRpc.disconnectTunnel());
+          }
+        },
+      },
+      {
+        label: messages.gettext('Reconnect'),
+        enabled: this.tunnelState.state === 'connected' || this.tunnelState.state === 'connecting',
+        click: () => consumePromise(this.daemonRpc.reconnectTunnel()),
+      },
+    ];
+
+    this.tray?.setContextMenu(Menu.buildFromTemplate(template));
+  }
+
+  private getLinuxContextMenuActionButtonLabel() {
+    switch (this.tunnelState.state) {
+      case 'disconnected':
+        return messages.gettext('Connect');
+      case 'connecting':
+        return messages.gettext('Cancel');
+      case 'connected':
+        return messages.gettext('Disconnect');
+      case 'disconnecting':
+        return '';
+      case 'error':
+        return this.tunnelState.details.blockFailure
+          ? messages.gettext('Dismiss')
+          : messages.gettext('Cancel');
+    }
+  }
+
   private addContextMenu(window: BrowserWindow) {
     const menuTemplate: Electron.MenuItemConstructorOptions[] = [
       { role: 'cut' },
diff --git a/gui/src/shared/localization-contexts.ts b/gui/src/shared/localization-contexts.ts
index 73cdfed11b..32d591b7a4 100644
--- a/gui/src/shared/localization-contexts.ts
+++ b/gui/src/shared/localization-contexts.ts
@@ -28,4 +28,5 @@ export type LocalizationContexts =
   | 'split-tunneling-view'
   | 'split-tunneling-nav'
   | 'support-view'
-  | 'select-language-nav';
+  | 'select-language-nav'
+  | 'tray-icon-context-menu';