Brand Refresh

_locales/en/messages.json

@@ -87,6 +87,18 @@
     "messageformat": "Apple silicon",
     "description": "Shown in the about box for Apple silicon product name"
   },
+  "icu:About__AppEnvironment": {
+    "messageformat": "{appEnv}",
+    "description": "AboutWindow > App Environment Info > On non-apple devices"
+  },
+  "icu:About__AppEnvironment--AppleSilicon": {
+    "messageformat": "{appEnv} (Apple silicon)",
+    "description": "AboutWindow > App Environment Info > On Apple Silicon Devices"
+  },
+  "icu:About__AppEnvironment--AppleIntel": {
+    "messageformat": "{appEnv} (Intel)",
+    "description": "AboutWindow > App Environment Info > On Apple Intel Devices"
+  },
   "icu:copyErrorAndQuit": {
     "messageformat": "Copy error and quit",
     "description": "Shown in the top-level error popup, allowing user to copy the error text and close the app"

app/SystemTrayService.ts

@@ -1,11 +1,14 @@
 // Copyright 2017 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { join } from 'path';
 import type { BrowserWindow, NativeImage } from 'electron';
-import { Menu, Tray, app, nativeImage } from 'electron';
+import { Menu, Tray, app, nativeImage, nativeTheme, screen } from 'electron';
+import os from 'node:os';
+import { join } from 'node:path';
+import { readFileSync } from 'node:fs';
 import * as log from '../ts/logging/log';
 import type { LocalizerType } from '../ts/types/I18N';
+import { SystemThemeType } from '../ts/types/Util';
 
 export type SystemTrayServiceOptionsType = Readonly<{
   i18n: LocalizerType;
@@ -43,6 +46,8 @@ export class SystemTrayService {
     this.i18n = i18n;
     this.boundRender = this.render.bind(this);
     this.createTrayInstance = createTrayInstance || (icon => new Tray(icon));
+
+    nativeTheme.on('updated', this.boundRender);
   }
 
   /**
@@ -88,6 +93,7 @@ export class SystemTrayService {
 
     log.info(`System tray service: ${isEnabled ? 'enabling' : 'disabling'}`);
     this.isEnabled = isEnabled;
+
     this.render();
   }
 
@@ -137,7 +143,7 @@ export class SystemTrayService {
 
     log.info('System tray service: rendering the tray');
 
-    this.tray = this.tray || this.createTray();
+    this.tray ??= this.createTray();
     const { browserWindow, tray } = this;
 
     try {
@@ -245,32 +251,117 @@ export class SystemTrayService {
   }
 }
 
+const Variant = {
+  Size16: { size: 16, scaleFactor: 1 },
+  Size32: { size: 32, scaleFactor: 2 },
+  Size48: { size: 48, scaleFactor: 3 },
+  Size256: { size: 256, scaleFactor: 16 },
+} as const;
+
+const Variants = Object.values(Variant);
+
+function getDisplaysMaxScaleFactor(): number {
+  const displays = screen.getAllDisplays();
+  const scaleFactors = displays
+    .map(display => display.scaleFactor)
+    .filter(scaleFactor => Number.isFinite(scaleFactor) && scaleFactor > 1.0);
+  return Math.max(1.0, ...scaleFactors);
+}
+
+function getVariantForScaleFactor(scaleFactor: number) {
+  const match = Variants.find(variant => {
+    return variant.scaleFactor >= scaleFactor;
+  });
+
+  return match ?? Variant.Size32;
+}
+
+function getTrayIconImagePath(
+  size: number,
+  theme: SystemThemeType,
+  unreadCount: number
+): string {
+  let dirName: string;
+  let fileName: string;
+
+  if (unreadCount === 0) {
+    dirName = 'base';
+    fileName = `signal-tray-icon-${size}x${size}-${theme}-base.png`;
+  } else if (unreadCount < 10) {
+    dirName = 'alert';
+    fileName = `signal-tray-icon-${size}x${size}-${theme}-alert-${unreadCount}.png`;
+  } else {
+    dirName = 'alert';
+    fileName = `signal-tray-icon-${size}x${size}-${theme}-alert-9+.png`;
+  }
+
+  const iconPath = join(
+    __dirname,
+    '..',
+    'images',
+    'tray-icons',
+    dirName,
+    fileName
+  );
+
+  return iconPath;
+}
+
+const TrayIconCache = new Map<string, NativeImage>();
+
 function getIcon(unreadCount: number) {
-  let iconSize: string;
-  switch (process.platform) {
-    case 'darwin':
-      iconSize = '16';
-      break;
-    case 'linux':
-    case 'win32':
-      iconSize = '32';
-      break;
-    default:
-      iconSize = '256';
-      break;
+  const theme = nativeTheme.shouldUseDarkColors
+    ? SystemThemeType.dark
+    : SystemThemeType.light;
+
+  const cacheKey = `${theme}-${unreadCount}`;
+
+  const cached = TrayIconCache.get(cacheKey);
+  if (cached != null) {
+    return cached;
   }
 
-  if (unreadCount > 0) {
-    const filename = `${String(unreadCount >= 10 ? 10 : unreadCount)}.png`;
-    return join(__dirname, '..', 'images', 'alert', iconSize, filename);
+  const platform = os.platform();
+
+  let image: NativeImage;
+
+  if (platform === 'linux') {
+    // Linux: Static tray icons
+    // Use a single tray icon for Linux, as it does not support scale factors.
+    // We choose the best icon based on the highest display scale factor.
+    const scaleFactor = getDisplaysMaxScaleFactor();
+    const variant = getVariantForScaleFactor(scaleFactor);
+    const iconPath = getTrayIconImagePath(variant.size, theme, unreadCount);
+    const buffer = readFileSync(iconPath);
+    image = nativeImage.createFromBuffer(buffer, {
+      scaleFactor: 1.0, // Must be 1.0 for Linux
+      width: variant.size,
+      height: variant.size,
+    });
+  } else {
+    // Windows/macOS: Responsive tray icons
+    image = nativeImage.createEmpty();
+
+    for (const variant of Variants) {
+      const iconPath = getTrayIconImagePath(variant.size, theme, unreadCount);
+      const buffer = readFileSync(iconPath);
+      image.addRepresentation({
+        buffer,
+        width: variant.size,
+        height: variant.size,
+        scaleFactor: variant.scaleFactor,
+      });
+    }
   }
 
-  return join(__dirname, '..', 'images', `icon_${iconSize}.png`);
+  TrayIconCache.set(cacheKey, image);
+
+  return image;
 }
 
 let defaultIcon: undefined | NativeImage;
 function getDefaultIcon(): NativeImage {
-  defaultIcon ??= nativeImage.createFromPath(getIcon(0));
+  defaultIcon ??= getIcon(0);
   return defaultIcon;
 }
 

background.html

@@ -95,7 +95,9 @@
       <div class="app-loading-screen app-loading-screen--before-app-load">
         <div class="module-title-bar-drag-area"></div>
 
-        <div class="module-splash-screen__logo module-img--150"></div>
+        <div
+          class="module-splash-screen__logo module-splash-screen__logo--128"
+        ></div>
         <div class="dot-container">
           <span class="dot"></span>
           <span class="dot"></span>

images/logo-parts/base.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M64 12a52 52 0 0 0-44 79.67L15 113l21.33-5A52 52 0 1 0 64 12Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M116 64c0 28.719-23.281 52-52 52-9.11 0-17.672-2.342-25.117-6.457a3.307 3.307 0 0 0-2.351-.341L13.4 114.599l5.397-23.13a3.31 3.31 0 0 0-.34-2.352C14.341 81.671 12 73.109 12 64c0-28.719 23.281-52 52-52s52 23.281 52 52Z"/></svg>

images/logo-parts/p1.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M20.39 117.11 8 120l2.89-12.39-5.84-1.37-2.89 12.39a6 6 0 0 0 7.21 7.21L21.75 123Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m22.488 117.818 1.363 5.843-10.411 2.43C6.51 127.707.293 121.489 1.91 114.56l2.429-10.411 5.843 1.363-2.43 10.412c-.606 2.598 1.726 4.93 4.324 4.324l10.412-2.43Z"/></svg>

images/logo-parts/p10.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M118.8 30.92 113.66 34a57.84 57.84 0 0 1 6.65 16.06l5.82-1.44a63.76 63.76 0 0 0-7.33-17.7z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m118.708 30.77-5.129 3.115a57.67 57.67 0 0 1 6.778 16.351l5.83-1.423a63.63 63.63 0 0 0-7.479-18.044Z"/></svg>

images/logo-parts/p11.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M122 64a57.9 57.9 0 0 1-.65 8.69l5.93.9a64.23 64.23 0 0 0 0-19.18l-5.93.9A57.9 57.9 0 0 1 122 64Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m127.26 54.235-5.931.915A58.42 58.42 0 0 1 122 64c0 3.01-.229 5.965-.671 8.85l5.931.916c.487-3.184.74-6.446.74-9.766 0-3.32-.253-6.581-.74-9.765Z"/></svg>

images/logo-parts/p12.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m126.13 79.36-5.82-1.44A57.84 57.84 0 0 1 113.66 94l5.14 3.1a63.76 63.76 0 0 0 7.33-17.74z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M113.579 94.116a57.669 57.669 0 0 0 6.778-16.352l5.83 1.424a63.603 63.603 0 0 1-7.48 18.043l-5.128-3.115Z"/></svg>

images/logo-parts/p13.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M110.69 98.41a58.21 58.21 0 0 1-12.29 12.28l3.56 4.83A64.1 64.1 0 0 0 115.52 102Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m110.792 98.278 4.841 3.546a64.38 64.38 0 0 1-13.81 13.809l-3.546-4.841a58.33 58.33 0 0 0 12.515-12.514Z"/></svg>

images/logo-parts/p14.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M97.08 118.8 94 113.66a57.84 57.84 0 0 1-16.06 6.65l1.44 5.82a63.76 63.76 0 0 0 17.7-7.33z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m94.115 113.579 3.116 5.129a63.63 63.63 0 0 1-18.044 7.479l-1.423-5.83a57.67 57.67 0 0 0 16.351-6.778Z"/></svg>

images/logo-parts/p15.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M72.69 121.36a58.41 58.41 0 0 1-17.38 0l-.9 5.93a64.23 64.23 0 0 0 19.18 0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m72.85 121.329.915 5.931c-3.184.487-6.445.74-9.765.74-3.32 0-6.582-.253-9.766-.74l.916-5.93c2.884.441 5.84.67 8.85.67a58.42 58.42 0 0 0 8.85-.671Z"/></svg>

images/logo-parts/p16.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m34.3 113.89-8.59 2 1.36 5.84 6.32-1.47a63.52 63.52 0 0 0 15.21 5.9l1.44-5.82a57.75 57.75 0 0 1-15.7-6.49z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m50.236 120.358-1.424 5.829a63.528 63.528 0 0 1-13.823-5.125l-6.074 1.418-1.363-5.843 8.208-1.916 1.953.995a57.481 57.481 0 0 0 12.523 4.642Z"/></svg>

images/logo-parts/p2.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m6.3 100.89 5.84 1.36 2-8.59a57.75 57.75 0 0 1-6.45-15.74l-5.82 1.44a63.52 63.52 0 0 0 5.9 15.21z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M11.363 100.448 5.52 99.085l1.418-6.074a63.55 63.55 0 0 1-5.125-13.824l5.829-1.423a57.55 57.55 0 0 0 4.642 12.523l.994 1.953-1.915 8.208Z"/></svg>

images/logo-parts/p3.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M6 64a57.9 57.9 0 0 1 .65-8.69l-5.93-.9a64.23 64.23 0 0 0 0 19.18l5.93-.9A57.9 57.9 0 0 1 6 64Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m6.67 72.85-5.93.915A64.497 64.497 0 0 1 0 64c0-3.32.253-6.582.74-9.766l5.931.916A58.45 58.45 0 0 0 6 64c0 3.01.229 5.966.67 8.85Z"/></svg>

images/logo-parts/p4.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M9.2 30.92a63.76 63.76 0 0 0-7.33 17.72l5.82 1.44A57.84 57.84 0 0 1 14.34 34Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m7.643 50.236-5.83-1.424a63.622 63.622 0 0 1 7.48-18.043l5.129 3.115a57.656 57.656 0 0 0-6.779 16.352Z"/></svg>

images/logo-parts/p5.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M17.31 29.6A58.21 58.21 0 0 1 29.6 17.31L26 12.48A64.1 64.1 0 0 0 12.48 26Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m17.208 29.723-4.84-3.546a64.37 64.37 0 0 1 13.809-13.81l3.546 4.84a58.334 58.334 0 0 0-12.515 12.515Z"/></svg>

images/logo-parts/p6.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m48.64 1.87 1.44 5.82A57.84 57.84 0 0 0 34 14.34L30.92 9.2a63.76 63.76 0 0 1 17.72-7.33Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m33.885 14.421-3.116-5.129a63.621 63.621 0 0 1 18.044-7.48l1.423 5.83a57.654 57.654 0 0 0-16.351 6.78Z"/></svg>

images/logo-parts/p7.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M55.31 6.65a58.41 58.41 0 0 1 17.38 0l.9-5.93a64.23 64.23 0 0 0-19.18 0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M64 0c3.32 0 6.582.253 9.766.74l-.916 5.931A58.45 58.45 0 0 0 64 6c-3.009 0-5.964.23-8.85.67L54.235.74A64.498 64.498 0 0 1 64 0Z"/></svg>

images/logo-parts/p8.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m79.36 1.87-1.44 5.82A57.84 57.84 0 0 1 94 14.34l3.1-5.14a63.76 63.76 0 0 0-17.74-7.33Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m79.188 1.813-1.424 5.83a57.657 57.657 0 0 1 16.352 6.779l3.115-5.13a63.623 63.623 0 0 0-18.043-7.479Z"/></svg>

images/logo-parts/p9.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M98.4 17.31a58.21 58.21 0 0 1 12.29 12.29l4.83-3.6A64.1 64.1 0 0 0 102 12.48Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m101.823 12.367-3.545 4.84a58.323 58.323 0 0 1 12.514 12.516l4.841-3.546a64.364 64.364 0 0 0-13.81-13.81Z"/></svg>

images/signal-logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path d="M48.64,1.87l1.44,5.82A57.84,57.84,0,0,0,34,14.34L30.92,9.2A63.76,63.76,0,0,1,48.64,1.87Zm30.72,0L77.92,7.69A57.84,57.84,0,0,1,94,14.34l3.1-5.14A63.76,63.76,0,0,0,79.36,1.87ZM9.2,30.92A63.76,63.76,0,0,0,1.87,48.64l5.82,1.44A57.84,57.84,0,0,1,14.34,34ZM6,64a57.9,57.9,0,0,1,.65-8.69l-5.93-.9a64.23,64.23,0,0,0,0,19.18l5.93-.9A57.9,57.9,0,0,1,6,64Zm91.08,54.8L94,113.66a57.84,57.84,0,0,1-16.06,6.65l1.44,5.82A63.76,63.76,0,0,0,97.08,118.8ZM122,64a57.9,57.9,0,0,1-.65,8.69l5.93.9a64.23,64.23,0,0,0,0-19.18l-5.93.9A57.9,57.9,0,0,1,122,64Zm4.13,15.36-5.82-1.44A57.84,57.84,0,0,1,113.66,94l5.14,3.1A63.76,63.76,0,0,0,126.13,79.36Zm-53.44,42a58.41,58.41,0,0,1-17.38,0l-.9,5.93a64.23,64.23,0,0,0,19.18,0Zm38-22.95A58.21,58.21,0,0,1,98.4,110.69l3.56,4.83A64.1,64.1,0,0,0,115.52,102ZM98.4,17.31A58.21,58.21,0,0,1,110.69,29.6L115.52,26A64.1,64.1,0,0,0,102,12.48ZM17.31,29.6A58.21,58.21,0,0,1,29.6,17.31L26,12.48A64.1,64.1,0,0,0,12.48,26ZM118.8,30.92,113.66,34a57.84,57.84,0,0,1,6.65,16.06l5.82-1.44A63.76,63.76,0,0,0,118.8,30.92ZM55.31,6.65a58.41,58.41,0,0,1,17.38,0l.9-5.93a64.23,64.23,0,0,0-19.18,0ZM20.39,117.11,8,120l2.89-12.39-5.84-1.37L2.16,118.63a6,6,0,0,0,7.21,7.21L21.75,123ZM6.3,100.89l5.84,1.36,2-8.59A57.75,57.75,0,0,1,7.69,77.92L1.87,79.36a63.52,63.52,0,0,0,5.9,15.21Zm28,13-8.59,2,1.36,5.84,6.32-1.47a63.52,63.52,0,0,0,15.21,5.9l1.44-5.82A57.75,57.75,0,0,1,34.34,113.85ZM64,12A52,52,0,0,0,20,91.67L15,113l21.33-5A52,52,0,1,0,64,12Z" fill="#3a76f0"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M64 0c3.32 0 6.582.253 9.766.74l-.916 5.931A58.45 58.45 0 0 0 64 6c-3.009 0-5.964.23-8.85.67L54.235.74A64.498 64.498 0 0 1 64 0ZM79.188 1.813l-1.424 5.83a57.657 57.657 0 0 1 16.352 6.779l3.115-5.13a63.623 63.623 0 0 0-18.043-7.479ZM101.823 12.367l-3.545 4.84a58.323 58.323 0 0 1 12.514 12.516l4.841-3.546a64.364 64.364 0 0 0-13.81-13.81ZM118.708 30.77l-5.129 3.115a57.67 57.67 0 0 1 6.778 16.351l5.83-1.423a63.63 63.63 0 0 0-7.479-18.044ZM127.26 54.235l-5.931.915A58.42 58.42 0 0 1 122 64c0 3.01-.229 5.965-.671 8.85l5.931.916c.487-3.184.74-6.446.74-9.766 0-3.32-.253-6.581-.74-9.765ZM113.579 94.116a57.669 57.669 0 0 0 6.778-16.352l5.83 1.424a63.603 63.603 0 0 1-7.48 18.043l-5.128-3.115ZM110.792 98.278l4.841 3.546a64.38 64.38 0 0 1-13.81 13.809l-3.546-4.841a58.33 58.33 0 0 0 12.515-12.514ZM94.115 113.579l3.116 5.129a63.63 63.63 0 0 1-18.044 7.479l-1.423-5.83a57.67 57.67 0 0 0 16.351-6.778ZM72.85 121.329l.915 5.931c-3.184.487-6.445.74-9.765.74-3.32 0-6.582-.253-9.766-.74l.916-5.93c2.884.441 5.84.67 8.85.67a58.42 58.42 0 0 0 8.85-.671ZM50.236 120.358l-1.424 5.829a63.528 63.528 0 0 1-13.823-5.125l-6.074 1.418-1.363-5.843 8.208-1.916 1.953.995a57.481 57.481 0 0 0 12.523 4.642ZM22.488 117.818l1.363 5.843-10.411 2.43C6.51 127.707.293 121.489 1.91 114.56l2.429-10.411 5.843 1.363-2.43 10.412c-.606 2.598 1.726 4.93 4.324 4.324l10.412-2.43ZM11.363 100.448 5.52 99.085l1.418-6.074a63.55 63.55 0 0 1-5.125-13.824l5.829-1.423a57.55 57.55 0 0 0 4.642 12.523l.994 1.953-1.915 8.208ZM6.67 72.85l-5.93.915A64.497 64.497 0 0 1 0 64c0-3.32.253-6.582.74-9.766l5.931.916A58.45 58.45 0 0 0 6 64c0 3.01.229 5.966.67 8.85ZM7.643 50.236l-5.83-1.424a63.622 63.622 0 0 1 7.48-18.043l5.129 3.115a57.656 57.656 0 0 0-6.779 16.352ZM17.208 29.723l-4.84-3.546a64.37 64.37 0 0 1 13.809-13.81l3.546 4.84a58.334 58.334 0 0 0-12.515 12.515ZM33.885 14.421l-3.116-5.129a63.621 63.621 0 0 1 18.044-7.48l1.423 5.83a57.654 57.654 0 0 0-16.351 6.78Z"/><path d="M116 64c0 28.719-23.281 52-52 52-9.11 0-17.672-2.342-25.117-6.457a3.307 3.307 0 0 0-2.351-.341L13.4 114.599l5.397-23.13a3.31 3.31 0 0 0-.34-2.352C14.341 81.671 12 73.109 12 64c0-28.719 23.281-52 52-52s52 23.281 52 52Z"/></svg>