fix(electron/linux): outline icon is not shown in Ubuntu Dock (#1327)

Our app's icon is not shown in Ubuntu Dock (on Windows it is fine):

<img width="438" alt="image" src="https://user-images.githubusercontent.com/93548144/169601560-13dc6d59-9f36-490a-ac9f-60bc5744a593.png">

Similar issues are reported to electron-builder (e.g., electron-userland/electron-builder#2269). Though the issue is declared to be "fixed", it is actually not, people are still using the workaround of setting main windows's icon in electron code.

In this fix, I use the workaround mentioned above which is to forcibly set the window icon to the 64x64 icon image. The following images illustrate the icon displayed under 100%, 150% and 200% dpi settings:

<img width="438" alt="image" src="https://user-images.githubusercontent.com/93548144/169601854-30b74190-d3cb-4c98-9550-8eec932adb20.png">

<img width="657" alt="image" src="https://user-images.githubusercontent.com/93548144/169601965-f101b3fd-49bf-4568-a571-dead88bd1681.png">

<img width="866" alt="image" src="https://user-images.githubusercontent.com/93548144/169602052-d5f931b7-421d-4f8a-acde-3456d8569bea.png">

I did not set the icon to 128x128 because it actually looks too sharp under the regular DPI setting (100%), here a comparison between 64x64 and 128x128 under 100% dpi (though in higher dpi's, the 128x128 looks better):

<img width="438" alt="image" src="https://user-images.githubusercontent.com/93548144/169601854-30b74190-d3cb-4c98-9550-8eec932adb20.png">

<img width="423" alt="image" src="https://user-images.githubusercontent.com/93548144/169602791-15875358-40b8-4052-9ff8-8cc428ac4157.png">

src/electron/electron-builder.json

@@ -8,6 +8,7 @@
   "linux": {
     "target": ["AppImage"],
     "files": [
+      "build/icons/png",
       "third_party/badvpn/linux",
       "third_party/outline-go-tun2socks/linux",
       "third_party/shadowsocks-libev/linux",

src/electron/index.ts

@@ -35,6 +35,8 @@ import {ShadowsocksLibevBadvpnTunnel} from './sslibev_badvpn_tunnel';
 import {TunnelStore, SerializableTunnel} from './tunnel_store';
 import {VpnTunnel} from './vpn_tunnel';
 
+const isLinux = os.platform() === 'linux';
+
 // Used for the auto-connect feature. There will be a tunnel in store
 // if the user was connected at shutdown.
 const tunnelStore = new TunnelStore(app.getPath('userData'));
@@ -109,6 +111,21 @@ function setupWindow(): void {
     },
   });
 
+  // Icon is not shown in Ubuntu Dock. It is a recurrent issue happened in Linux:
+  //   - https://github.com/electron-userland/electron-builder/issues/2269
+  // A workaround is to forcibly set the icon of the main window.
+  //
+  // This is a workaround because the icon is fixed to 64x64, which might look blurry
+  // on higher dpi (>= 200%) settings. Setting it to a higher resolution icon (e.g., 128x128)
+  // does not work either because Ubuntu's image resize algorithm is pretty bad, the icon
+  // looks too sharp in a regular dpi (100%) setting.
+  //
+  // The ideal solution would be: either electron-builder supports the app icon; or we add
+  // dpi-aware features to this app.
+  if (isLinux) {
+    mainWindow.setIcon(path.join(app.getAppPath(), 'build', 'icons', 'png', '64x64.png'));
+  }
+
   const pathToIndexHtml = path.join(app.getAppPath(), 'www', 'index_electron.html');
   const webAppUrl = new url.URL(`file://${pathToIndexHtml}`);
 
@@ -169,7 +186,7 @@ function updateTray(status: TunnelStatus) {
     {type: 'separator'} as MenuItemConstructorOptions,
     {label: localizedStrings['quit'], click: quitApp},
   ];
-  if (os.platform() === 'linux') {
+  if (isLinux) {
     // Because the click event is never fired on Linux, we need an explicit open option.
     menuTemplate = [{label: localizedStrings['tray-open-window'], click: () => mainWindow.show()}, ...menuTemplate];
   }
@@ -214,7 +231,7 @@ function interceptShadowsocksLink(argv: string[]) {
 async function setupAutoLaunch(args: SerializableTunnel): Promise<void> {
   try {
     await tunnelStore.save(args);
-    if (os.platform() === 'linux') {
+    if (isLinux) {
       if (process.env.APPIMAGE) {
         const outlineAutoLauncher = new autoLaunch({
           name: 'OutlineClient',
@@ -232,7 +249,7 @@ async function setupAutoLaunch(args: SerializableTunnel): Promise<void> {
 
 async function tearDownAutoLaunch() {
   try {
-    if (os.platform() === 'linux') {
+    if (isLinux) {
       const outlineAutoLauncher = new autoLaunch({
         name: 'OutlineClient',
       });