App icons (#40)

* Using files to store pid and refactor processes termination (#2)

* Using files to store pid and refactor processes termination

* Refactor process termination

* Update logging message during IPFS daemon termination

* Refactor process termination and returned getPid async

* Deleting a file before processes are terminated

* Fix review comments

* Add to fs.readFile to catch errors handler

* Fix dock icon on macOS

* Add custom app icons configuration and DPI support

* Update icon paths in forge config and icons generator

* Remove hardcoded paths to app icons

* Remove generation icon.ico from icongen.js

* Run app.dock.setIcon() only for development mode

* Add app icon for develop mode

* Replace __dirname with app.getAppPath()

assets/iconsgen.js

@@ -1,8 +1,8 @@
 const sharp = require('sharp');
-const path = require('path');
-const fs = require('fs');
-const os = require('os');
-const cp = require('child_process');
+const path = require('node:path');
+const fs = require('node:fs');
+const os = require('node:os');
+const cp = require('node:child_process');
 
 async function createResizedImage(inputPath, outputPath, size) {
   await sharp(inputPath)
@@ -35,6 +35,9 @@ async function icns(inputFile, outputDir) {
   await fs.promises.rm(iconsetDir, { recursive: true });
 }
 
+// The following suffixes for DPI are also supported by Electron Forge
+const dpiSuffixes = [1, 1.25, 1.33, 1.4, 1.5, 1.8, 2, 2.5, 3, 4, 5];
+
 async function main(inputFile, outputDir) {
   await sharp(inputFile)
     .resize(24 * 3, 24 * 3, {
@@ -43,24 +46,14 @@ async function main(inputFile, outputDir) {
     })
     .greyscale()
     .modulate({ brightness: 2 })
-    .toFile(path.join(outputDir, `tray@3x.png`));
+    .toFile(path.join(outputDir, 'tray@3x.png'));
 
   await icns(inputFile, outputDir);
-  await createResizedImage(inputFile, path.join(outputDir, 'icon.ico'), 256);
   await createResizedImage(inputFile, path.join(outputDir, 'icon.png'), 256);
 
-  for (const size of [16, 24, 32, 48, 64, 96, 128, 256, 512, 1024]) {
-    await createResizedImage(inputFile, path.join(outputDir, 'icons', `${size}x${size}.png`), size);
-    await createResizedImage(
-      inputFile,
-      path.join(outputDir, 'icons', `${size}x${size}@2x.png`),
-      size * 2
-    );
-    await createResizedImage(
-      inputFile,
-      path.join(outputDir, 'icons', `${size}x${size}@3x.png`),
-      size * 3
-    );
+  for (const dpi of dpiSuffixes) {
+    const size = Math.round(256 * dpi);
+    await createResizedImage(inputFile, path.join(outputDir, `icon@${dpi}x.png`), size);
   }
 }
 

forge.config.js

@@ -1,23 +1,31 @@
 const { FusesPlugin } = require('@electron-forge/plugin-fuses');
 const { FuseV1Options, FuseVersion } = require('@electron/fuses');
+const path = require('node:path');
 
 module.exports = {
   packagerConfig: {
     asar: true,
+    icon: path.join(__dirname, './assets/icon'),
   },
   rebuildConfig: {},
   makers: [
     {
       name: '@electron-forge/maker-squirrel',
-      config: {},
+      config: {
+        setupIcon: path.join(__dirname, './assets/icon.ico'),
+      },
     },
     {
       name: '@electron-forge/maker-zip',
       platforms: ['darwin', 'windows', 'linux'],
     },
     {
       name: '@electron-forge/maker-deb',
-      config: {},
+      config: {
+        options: {
+          icon: path.join(__dirname, './assets/icon.png'),
+        },
+      },
     },
     {
       name: '@electron-forge/maker-rpm',

package.json

@@ -53,6 +53,7 @@
     "css-loader": "^6.10.0",
     "electron": "^29.1.1",
     "node-loader": "^2.0.0",
+    "sharp": "^0.33.2",
     "style-loader": "^3.3.4",
     "svgo": "^3.2.0",
     "webpack": "^5.90.3"

src/main.js

@@ -66,6 +66,9 @@ function updateContextMenu() {
         ...menu.dapps,
       ])
     );
+    if (isDebug) {
+      app.dock.setIcon(path.join(app.getAppPath(), 'assets/icon.png'));
+    }
   }
 }
 
@@ -82,7 +85,7 @@ function createWindow() {
     width: 600,
     height: 470,
     // frame: false,
-    icon: path.join(__dirname, '../../assets/icon.ico'),
+    icon: isDebug ? path.join(app.getAppPath(), 'assets/icon.ico') : undefined,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
     },