Add tooltip to tray icon

3 files changed, 58 insertions, 3 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 1dfde6537d..4f398d208d 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -524,6 +524,7 @@ class ApplicationMain {
       await this.trayIconController.updateTheme();
 
       this.setTrayContextMenu();
+      this.trayIconController?.setTooltip(this.connectedToDaemon, this.tunnelState);
 
       if (process.platform === 'win32') {
         nativeTheme.on('updated', async () => {
@@ -753,6 +754,7 @@ class ApplicationMain {
       // update the tray icon to indicate that the computer is not secure anymore
       this.updateTrayIcon({ state: 'disconnected' }, false);
       this.setTrayContextMenu();
+      this.trayIconController?.setTooltip(this.connectedToDaemon, this.tunnelState);
 
       // notify renderer process
       if (this.windowController) {
@@ -918,6 +920,7 @@ class ApplicationMain {
     this.updateTrayIcon(newState, this.settings.blockWhenDisconnected);
 
     this.setTrayContextMenu();
+    this.trayIconController?.setTooltip(this.connectedToDaemon, this.tunnelState);
 
     this.notificationController.notifyTunnelState(
       newState,
@@ -1665,6 +1668,7 @@ class ApplicationMain {
     };
 
     this.setTrayContextMenu();
+    this.trayIconController?.setTooltip(this.connectedToDaemon, this.tunnelState);
   }
 
   private blockPermissionRequests() {
diff --git a/gui/src/main/tray-icon-controller.ts b/gui/src/main/tray-icon-controller.ts
index 42d69397cf..81af2e174e 100644
--- a/gui/src/main/tray-icon-controller.ts
+++ b/gui/src/main/tray-icon-controller.ts
@@ -5,8 +5,8 @@ import { sprintf } from 'sprintf-js';
 import { promisify } from 'util';
 
 import { connectEnabled, disconnectEnabled, reconnectEnabled } from '../shared/connect-helper';
-import { AccountToken, TunnelState } from '../shared/daemon-rpc-types';
-import { messages } from '../shared/gettext';
+import { AccountToken, ILocation, TunnelState } from '../shared/daemon-rpc-types';
+import { messages, relayLocations } from '../shared/gettext';
 import log from '../shared/logging';
 import KeyframeAnimation from './keyframe-animation';
 import WindowController from './window-controller';
@@ -114,6 +114,11 @@ export default class TrayIconController {
     }
   }
 
+  public setTooltip(connectedToDaemon: boolean, tunnelState: TunnelState) {
+    const tooltip = this.createTooltipText(connectedToDaemon, tunnelState);
+    this.tray?.setToolTip(tooltip);
+  }
+
   public popUpContextMenu(
     connectedToDaemon: boolean,
     accountToken: AccountToken | undefined,
@@ -124,6 +129,51 @@ export default class TrayIconController {
     );
   }
 
+  private createTooltipText(connectedToDaemon: boolean, tunnelState: TunnelState): string {
+    if (!connectedToDaemon) {
+      return messages.pgettext('tray-icon-context-menu', 'Disconnected from system service');
+    }
+
+    switch (tunnelState.state) {
+      case 'disconnected':
+        return messages.gettext('Disconnected');
+      case 'disconnecting':
+        return messages.gettext('Disconnecting');
+      case 'connecting': {
+        const location = this.createLocationString(tunnelState.details?.location);
+        return location
+          ? sprintf(messages.pgettext('tray-icon-tooltip', 'Connecting. %(location)s'), {
+              location,
+            })
+          : messages.gettext('Connecting');
+      }
+      case 'connected': {
+        const location = this.createLocationString(tunnelState.details.location);
+        return location
+          ? sprintf(messages.pgettext('tray-icon-tooltip', 'Connected. %(location)s'), {
+              location,
+            })
+          : messages.gettext('Connected');
+      }
+    }
+
+    return 'Mullvad VPN';
+  }
+
+  private createLocationString(location?: ILocation): string | undefined {
+    if (location === undefined) {
+      return undefined;
+    }
+
+    const country = relayLocations.gettext(location.country);
+    return location.city
+      ? sprintf(messages.pgettext('tray-icon-tooltip', '%(city)s, %(country)s'), {
+          city: relayLocations.gettext(location.city),
+          country,
+        })
+      : country;
+  }
+
   private initAnimation() {
     const initialFrame = this.targetFrame();
     const animation = new KeyframeAnimation();
diff --git a/gui/src/shared/localization-contexts.ts b/gui/src/shared/localization-contexts.ts
index e323567094..5396d7ccc2 100644
--- a/gui/src/shared/localization-contexts.ts
+++ b/gui/src/shared/localization-contexts.ts
@@ -34,4 +34,5 @@ export type LocalizationContexts =
   | 'split-tunneling-nav'
   | 'support-view'
   | 'select-language-nav'
-  | 'tray-icon-context-menu';
+  | 'tray-icon-context-menu'
+  | 'tray-icon-tooltip';