Version 1.3.1

frontend/connection_error.html

@@ -4,10 +4,7 @@
     <meta charset="UTF-8">
     <title>An error occured</title>
     <meta http-equiv="Content-Security-Policy"
-          content="style-src 'self' 'unsafe-inline' https://use.fontawesome.com; font-src 'self' https://use.fontawesome.com; script-src 'self'">
+          content="style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self'">
-
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-          integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/error.css">

frontend/file_not_found_error.html

@@ -4,10 +4,7 @@
     <meta charset="UTF-8">
     <title>An error occured</title>
     <meta http-equiv="Content-Security-Policy"
-          content="style-src 'self' 'unsafe-inline' https://use.fontawesome.com; font-src 'self' https://use.fontawesome.com; script-src 'self'">
+          content="style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self'">
-
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-          integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/error.css">

frontend/index.html

@@ -4,10 +4,7 @@
     <meta charset="UTF-8">
     <title>Tabs</title>
 
-    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline' https://use.fontawesome.com; font-src 'self' https://use.fontawesome.com; script-src 'self' 'sha256-oPC0l5nxLnJ2LX6qU9Laxa4/cjhuHDRIqdUsBDWYqnw='">
+    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self' 'sha256-oPC0l5nxLnJ2LX6qU9Laxa4/cjhuHDRIqdUsBDWYqnw='">
-
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-          integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/index.css">

frontend/sass/layout.scss

@@ -1,3 +1,5 @@
+@import url('../../node_modules/@fortawesome/fontawesome-free/css/all.css');
+
 * {
     box-sizing: border-box;
 }

frontend/service-settings.html

@@ -4,10 +4,7 @@
     <meta charset="UTF-8">
     <title>Service settings</title>
 
-    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline' https://use.fontawesome.com; font-src 'self' https://use.fontawesome.com; script-src 'self' 'sha256-5gY/z34s5Mtc3YL8GkwZQhzk9LymQIuFUQRVvs7Gh0o='">
+    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self' 'sha256-5gY/z34s5Mtc3YL8GkwZQhzk9LymQIuFUQRVvs7Gh0o='">
-
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-          integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/service-settings.css">

frontend/settings.html

@@ -5,10 +5,7 @@
     <title>Service settings</title>
 
     <meta http-equiv="Content-Security-Policy"
-          content="style-src 'self' 'unsafe-inline' https://use.fontawesome.com; font-src 'self' https://use.fontawesome.com; script-src 'self' 'sha256-UoPUIMX0PZl7cy3YoegZ0EDleSaHxTURPMyK09xsa0E='">
+          content="style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self' 'sha256-UoPUIMX0PZl7cy3YoegZ0EDleSaHxTURPMyK09xsa0E='">
-
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-          integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/service-settings.css">

frontend/ts/index.ts

@@ -1,10 +1,4 @@
-import {
+import {DidFailLoadEvent, ipcRenderer, PageFaviconUpdatedEvent, UpdateTargetUrlEvent} from "electron";
-    DidFailLoadEvent,
-    ipcRenderer,
-    PageFaviconUpdatedEvent,
-    UpdateTargetUrlEvent,
-    WebviewTag,
-} from "electron";
 import Service from "../../src/Service";
 import {IconProperties, IconSet, SpecialPages} from "../../src/Meta";
 import Config from "../../src/Config";
@@ -449,6 +443,7 @@ function loadService(serviceId: number, service: FrontService) {
         view.setAttribute('enableRemoteModule', 'false');
         view.setAttribute('partition', 'persist:service_' + service.partition);
         view.setAttribute('autosize', 'true');
+        view.setAttribute('allowpopups', 'true');
         if (specialPages) view.setAttribute('src', specialPages.empty);
 
         // Error handling
@@ -680,7 +675,7 @@ ipcRenderer.on('fullscreenchange', (e, fullscreen: boolean) => {
 });
 
 type FrontService = Service & {
-    view?: WebviewTag;
+    view?: Electron.WebviewTag;
     viewReady?: boolean;
     li?: NavigationElement;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabs",
-  "version": "1.2.8",
+  "version": "1.3.1",
   "description": "Persistent and separate browser tabs in one window.",
   "author": {
     "name": "Alice Gaudon",
@@ -30,27 +30,28 @@
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
-    "@fortawesome/fontawesome-free": "^5.13.0",
+    "@fortawesome/fontawesome-free": "^6.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@types/node": "^14.6.2",
-    "@typescript-eslint/parser": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
     "babel-loader": "^8.1.0",
-    "concurrently": "^6.0.0",
+    "concurrently": "^7.0.0",
-    "copy-webpack-plugin": "^8.0.0",
+    "copy-webpack-plugin": "^10.2.4",
-    "css-loader": "^5.0.0",
+    "css-loader": "^6.3.0",
-    "electron": "^12.0.0",
+    "electron": "^17.1.2",
-    "electron-builder": "^22.4.0",
+    "electron-builder": "^22.11.5",
-    "eslint": "^7.10.0",
+    "eslint": "^8.11.0",
-    "file-loader": "^6.0.0",
+    "image-minimizer-webpack-plugin": "^3.2.3",
-    "imagemin": "^7.0.1",
+    "imagemin": "^8.0.1",
     "imagemin-gifsicle": "^7.0.0",
-    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
-    "imagemin-pngquant": "^9.0.0",
+    "imagemin-pngquant": "^9.0.2",
-    "imagemin-svgo": "^9.0.0",
+    "imagemin-svgo": "^10.0.1",
-    "img-loader": "^3.0.1",
+    "mini-css-extract-plugin": "^2.1.0",
-    "mini-css-extract-plugin": "^1.2.0",
+    "sass": "^1.32.12",
-    "node-sass": "^5.0.0",
+    "sass-loader": "^12.1.0",
-    "sass-loader": "^11.0.0",
+    "svgo": "^2.3.1",
-    "ts-loader": "^8.0.0",
+    "ts-loader": "^9.1.2",
     "typescript": "^4.0.2",
     "webpack": "^5.2.0",
     "webpack-cli": "^4.1.0"
@@ -69,7 +70,7 @@
     ],
     "linux": {
       "target": "AppImage",
-      "icon": "resources/images/logo.png",
+      "icon": "frontend/images/logo.png",
       "category": "Utility",
       "executableName": "tabs",
       "desktop": {
@@ -79,15 +80,15 @@
     },
     "win": {
       "target": "nsis",
-      "icon": "resources/images/logo.png",
+      "icon": "frontend/images/logo.png",
       "publisherName": "Alice Gaudon",
       "verifyUpdateCodeSignature": "false"
     },
     "mac": {
       "target": "default",
-      "icon": "resources/images/logo.png",
+      "icon": "frontend/images/logo.png",
       "category": "public.app-category.utilities"
     },
-    "electronVersion": "12.0.0"
+    "electronVersion": "15.0.0"
   }
 }

src/Application.ts

@@ -1,4 +1,4 @@
-import {app, Menu, shell, Tray} from "electron";
+import {app, dialog, Menu, shell, Tray} from "electron";
 import Meta from "./Meta";
 import Config from "./Config";
 import Updater from "./Updater";
@@ -52,16 +52,36 @@ export default class Application {
         return this.devMode;
     }
 
+    public async openExternalLink(url: string): Promise<void> {
+        if (url.startsWith('https://')) {
+            console.log('Opening link', url);
+            await shell.openExternal(url);
+        } else {
+            const {response} = await dialog.showMessageBox({
+                message: 'Are you sure you want to open this link?\n' + url,
+                type: 'question',
+                buttons: ['Cancel', 'Open link'],
+            });
+
+            if (response === 1) {
+                console.log('Opening link', url);
+                await shell.openExternal(url);
+            }
+        }
+    }
+
     private setupElectronTweaks() {
         // Open external links in default OS browser
         app.on('web-contents-created', (e, contents) => {
             if (contents.getType() === 'webview') {
                 console.log('Setting external links to open in default OS browser');
-                contents.on('new-window', (e, url) => {
+                contents.setWindowOpenHandler(details => {
-                    e.preventDefault();
+                    if (details.url.startsWith(details.referrer.url)) return {action: 'allow'};
-                    if (url.startsWith('https://')) {
+
-                        shell.openExternal(url).catch(console.error);
+                    const url = details.url;
-                    }
+                    this.openExternalLink(url)
+                        .catch(console.error);
+                    return {action: 'deny'};
                 });
             }
         });

src/windows/MainWindow.ts

@@ -1,13 +1,5 @@
 import path from "path";
-import {
+import {clipboard, ContextMenuParams, dialog, ipcMain, Menu, MenuItem, session, webContents} from "electron";
-    clipboard,
-    ContextMenuParams,
-    dialog,
-    ipcMain,
-    Menu,
-    MenuItem, session, shell,
-    webContents,
-} from "electron";
 import ServiceSettingsWindow from "./ServiceSettingsWindow";
 import SettingsWindow from "./SettingsWindow";
 import Application from "../Application";
@@ -347,10 +339,8 @@ export default class MainWindow extends Window {
                 menu.append(new MenuItem({
                     label: 'Open URL in default browser',
                     click: () => {
-                        if (props.linkURL.startsWith('https://')) {
+                        this.application.openExternalLink(props.linkURL)
-                            shell.openExternal(props.linkURL)
                             .catch(console.error);
-                        }
                     },
                 }));
             }
@@ -460,7 +450,9 @@ export default class MainWindow extends Window {
     ): void {
         const service = this.config.services[serviceId];
 
-        function getUrlDomain(url: string) {
+        function getUrlDomain(url: string | undefined) {
+            if (!url) return '';
+
             const matches = url.match(/^https?:\/\/((.+?)\/|(.+))/i);
             if (matches !== null) {
                 let domain = matches[1];

webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const {extendDefaultPlugins} = require("svgo");
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const dev = process.env.NODE_ENV === 'development';
@@ -37,9 +39,6 @@ const config = {
                 use: [
                     {
                         loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            publicPath: '/',
-                        }
                     },
                     'css-loader',
                     'sass-loader',
@@ -47,25 +46,17 @@ const config = {
             },
             {
                 test: /\.(woff2?|eot|ttf|otf)$/i,
-                use: 'file-loader?name=../fonts/[name].[ext]',
+                type: 'asset/resource',
+                generator: {
+                    filename: '../fonts/[name][ext]',
+                },
             },
             {
                 test: /\.(png|jpe?g|gif|svg)$/i,
-                use: [
+                type: 'asset/resource',
-                    'file-loader?name=../images/[name].[ext]',
+                generator: {
-                    {
+                    filename: '../images/[name][ext]',
-                        loader: 'img-loader',
+                },
-                        options: {
-                            enabled: !dev,
-                            plugins: [
-                                require('imagemin-gifsicle')({}),
-                                require('imagemin-mozjpeg')({}),
-                                require('imagemin-pngquant')({}),
-                                require('imagemin-svgo')({}),
-                            ]
-                        }
-                    }
-                ]
             },
             {
                 test: /\.ts$/i,
@@ -75,13 +66,14 @@ const config = {
                         configFile: 'tsconfig.frontend.json',
                     }
                 },
-                exclude: '/node_modules/'
+                exclude: '/node_modules/',
             },
             {
                 test: /\.html$/i,
-                use: [
+                type: 'asset/resource',
-                    'file-loader?name=../[name].[ext]',
+                generator: {
-                ]
+                    filename: '../[name][ext]',
+                },
             }
         ],
     },
@@ -94,6 +86,56 @@ const config = {
                 {from: 'node_modules/@fortawesome/fontawesome-free/svgs', to: '../images/icons'}
             ]
         }),
+        new ImageMinimizerPlugin({
+            minimizer: {
+                implementation: ImageMinimizerPlugin.imageminMinify,
+                options: {
+                    // Lossless optimization with custom option
+                    // Feel free to experiment with options for better result for you
+                    plugins: [
+                        ["gifsicle", {}],
+                        ["mozjpeg", {}],
+                        ["pngquant", {}],
+                        // Svgo configuration here https://github.com/svg/svgo#configuration
+                        [
+                            "svgo",
+                            {
+                                plugins: extendDefaultPlugins([
+                                    {
+                                        name: "removeViewBox",
+                                        active: false,
+                                    },
+                                    {
+                                        name: "addAttributesToSVGElement",
+                                        params: {
+                                            attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
+                                        },
+                                    },
+                                ]),
+                            },
+                            // todo: still not fixed
+                            // {
+                            //     plugins: {
+                            //         name: 'preset-default',
+                            //         params: {
+                            //             overrides: {
+                            //                 removeViewBox: {
+                            //                     active: false,
+                            //                 },
+                            //                 addAttributesToSVGElement: {
+                            //                     params: {
+                            //                         attributes: [{xmlns: "http://www.w3.org/2000/svg"}],
+                            //                     },
+                            //                 },
+                            //             },
+                            //         },
+                            //     },
+                            // },
+                        ],
+                    ],
+                },
+            },
+        }),
     ]
 };