Merge branch 'add-tray-tooltip'

5 files changed, 87 insertions, 6 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba30e96c3c..541c335243 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ Line wrap the file at 100 chars.                                              Th
 - Obfuscate traffic to the Mullvad API using bridges if it cannot be reached directly.
 - Add device management to desktop app. This simplifies knowing which device is which and adds the
   option to log out other devices when there are already 5 connected when logging in.
+- Add tray icon tooltip with connection info in desktop app.
 
 #### Windows
 - Detect mounting and dismounting of volumes, such as VeraCrypt volumes or USB drives,
diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 24a437ca16..7de976a7e4 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -99,6 +99,12 @@ msgstr ""
 msgid "Connect"
 msgstr ""
 
+msgid "Connected"
+msgstr ""
+
+msgid "Connecting"
+msgstr ""
+
 msgid "CREATING SECURE CONNECTION"
 msgstr ""
 
@@ -111,6 +117,12 @@ msgstr ""
 msgid "Disconnect"
 msgstr ""
 
+msgid "Disconnected"
+msgstr ""
+
+msgid "Disconnecting"
+msgstr ""
+
 msgid "Dismiss"
 msgstr ""
 
@@ -1338,9 +1350,25 @@ msgid "Your email (optional)"
 msgstr ""
 
 msgctxt "tray-icon-context-menu"
+msgid "Disconnected from system service"
+msgstr ""
+
+msgctxt "tray-icon-context-menu"
 msgid "Open %(mullvadVpn)s"
 msgstr ""
 
+msgctxt "tray-icon-tooltip"
+msgid "%(city)s, %(country)s"
+msgstr ""
+
+msgctxt "tray-icon-tooltip"
+msgid "Connected. %(location)s"
+msgstr ""
+
+msgctxt "tray-icon-tooltip"
+msgid "Connecting. %(location)s"
+msgstr ""
+
 msgctxt "tunnel-control"
 msgid "Secure my connection"
 msgstr ""
@@ -1431,9 +1459,6 @@ msgstr ""
 msgid "Custom DNS server addresses %s are invalid"
 msgstr ""
 
-msgid "Disconnecting"
-msgstr ""
-
 msgid "Enable"
 msgstr ""
 
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';