port popout logic from discord desktop

.eslintrc.json

@@ -22,7 +22,13 @@
         "eqeqeq": ["error", "always", { "null": "ignore" }],
         "spaced-comment": ["error", "always", { "markers": ["!"] }],
         "yoda": "error",
-        "prefer-destructuring": ["error", { "object": true, "array": false }],
+        "prefer-destructuring": [
+            "error",
+            {
+                "VariableDeclarator": { "array": false, "object": true },
+                "AssignmentExpression": { "array": false, "object": false }
+            }
+        ],
         "operator-assignment": ["error", "always"],
         "no-useless-computed-key": "error",
         "no-unneeded-ternary": ["error", { "defaultAssignment": false }],

src/main/constants.ts

@@ -42,6 +42,8 @@ export const MIN_HEIGHT = 500;
 export const DEFAULT_WIDTH = 1280;
 export const DEFAULT_HEIGHT = 720;
 
+export const DISCORD_HOSTNAMES = ["discord.com", "canary.discord.com", "ptb.discord.com"];
+
 const UserAgents = {
     darwin: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
     linux: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",

src/main/utils/ipcWrappers.ts

@@ -5,20 +5,14 @@
  */
 
 import { ipcMain, IpcMainEvent, IpcMainInvokeEvent, WebFrameMain } from "electron";
+import { DISCORD_HOSTNAMES } from "main/constants";
 import { IpcEvents } from "shared/IpcEvents";
 
 export function validateSender(frame: WebFrameMain) {
     const { hostname, protocol } = new URL(frame.url);
     if (protocol === "file:") return;
 
-    switch (hostname) {
-        case "discord.com":
-        case "ptb.discord.com":
-        case "canary.discord.com":
-            break;
-        default:
-            throw new Error("ipc: Disallowed host " + hostname);
-    }
+    if (!DISCORD_HOSTNAMES.includes(hostname)) throw new Error("ipc: Disallowed host " + hostname);
 }
 
 export function handleSync(event: IpcEvents, cb: (e: IpcMainEvent, ...args: any[]) => any) {

src/main/utils/makeLinksOpenExternally.ts

@@ -5,25 +5,20 @@
  */
 
 import { BrowserWindow, shell } from "electron";
+import { DISCORD_HOSTNAMES } from "main/constants";
 
 import { Settings } from "../settings";
+import { createOrFocusPopup, setupPopout } from "./popout";
 import { execSteamURL, isDeckGameMode, steamOpenURL } from "./steamOS";
 
-const DISCORD_HOSTNAMES = ["discord.com", "canary.discord.com", "ptb.discord.com"];
-export function makeLinksOpenExternally(win: BrowserWindow) {
-    win.webContents.setWindowOpenHandler(({ url, frameName }) => {
+export function handleExternalUrl(url: string, protocol?: string): { action: "deny" | "allow" } {
+    if (protocol == null) {
         try {
-            var { protocol, hostname, pathname } = new URL(url);
+            protocol = new URL(url).protocol;
         } catch {
             return { action: "deny" };
         }
-
-        if (
-            url === "about:blank" ||
-            (pathname === "/popout" && DISCORD_HOSTNAMES.includes(hostname)) ||
-            (frameName === "authorize" && DISCORD_HOSTNAMES.includes(hostname))
-        )
-            return { action: "allow" };
+    }
 
     switch (protocol) {
         case "http:":
@@ -50,5 +45,27 @@ export function makeLinksOpenExternally(win: BrowserWindow) {
     }
 
     return { action: "deny" };
+}
+
+export function makeLinksOpenExternally(win: BrowserWindow) {
+    win.webContents.setWindowOpenHandler(({ url, frameName, features }) => {
+        try {
+            var { protocol, hostname, pathname } = new URL(url);
+        } catch {
+            return { action: "deny" };
+        }
+
+        if (frameName.startsWith("DISCORD_") && pathname === "/popout" && DISCORD_HOSTNAMES.includes(hostname)) {
+            return createOrFocusPopup(frameName, features);
+        }
+
+        if (url === "about:blank" || (frameName === "authorize" && DISCORD_HOSTNAMES.includes(hostname)))
+            return { action: "allow" };
+
+        return handleExternalUrl(url, protocol);
+    });
+
+    win.webContents.on("did-create-window", (win, { frameName }) => {
+        if (frameName.startsWith("DISCORD_")) setupPopout(win, frameName);
     });
 }

src/main/utils/popout.ts

@@ -0,0 +1,112 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { BrowserWindow, BrowserWindowConstructorOptions } from "electron";
+
+import { handleExternalUrl } from "./makeLinksOpenExternally";
+
+const ALLOWED_FEATURES = new Set([
+    "width",
+    "height",
+    "left",
+    "top",
+    "resizable",
+    "movable",
+    "alwaysOnTop",
+    "frame",
+    "transparent",
+    "hasShadow",
+    "closable",
+    "skipTaskbar",
+    "backgroundColor",
+    "menubar",
+    "toolbar",
+    "location",
+    "directories",
+    "titleBarStyle"
+]);
+
+const MIN_POPOUT_WIDTH = 320;
+const MIN_POPOUT_HEIGHT = 180;
+const DEFAULT_POPOUT_OPTIONS: BrowserWindowConstructorOptions = {
+    title: "Discord Popout",
+    backgroundColor: "#2f3136",
+    minWidth: MIN_POPOUT_WIDTH,
+    minHeight: MIN_POPOUT_HEIGHT,
+    frame: process.platform === "linux",
+    titleBarStyle: process.platform === "darwin" ? "hidden" : undefined,
+    trafficLightPosition:
+        process.platform === "darwin"
+            ? {
+                  x: 10,
+                  y: 3
+              }
+            : undefined,
+    webPreferences: {
+        nodeIntegration: false,
+        contextIsolation: true
+    }
+};
+
+const PopoutWindows = new Map<string, BrowserWindow>();
+
+function focusWindow(window: BrowserWindow) {
+    window.setAlwaysOnTop(true);
+    window.focus();
+    window.setAlwaysOnTop(false);
+}
+
+function parseFeatureValue(feature: string) {
+    if (feature === "yes") return true;
+    if (feature === "no") return false;
+
+    const n = Number(feature);
+    if (!isNaN(n)) return n;
+
+    return feature;
+}
+
+function parseWindowFeatures(features: string) {
+    const keyValuesParsed = features.split(",");
+
+    return keyValuesParsed.reduce((features, feature) => {
+        const [key, value] = feature.split("=");
+        if (ALLOWED_FEATURES.has(key)) features[key] = parseFeatureValue(value);
+
+        return features;
+    }, {});
+}
+
+export function createOrFocusPopup(key: string, features: string) {
+    const existingWindow = PopoutWindows.get(key);
+    if (existingWindow) {
+        focusWindow(existingWindow);
+        return <const>{ action: "deny" };
+    }
+
+    return <const>{
+        action: "allow",
+        overrideBrowserWindowOptions: {
+            ...DEFAULT_POPOUT_OPTIONS,
+            ...parseWindowFeatures(features)
+        }
+    };
+}
+
+export function setupPopout(win: BrowserWindow, key: string) {
+    PopoutWindows.set(key, win);
+
+    /* win.webContents.on("will-navigate", (evt, url) => {
+        // maybe prevent if not origin match
+    })*/
+
+    win.webContents.setWindowOpenHandler(({ url }) => handleExternalUrl(url));
+
+    win.once("closed", () => {
+        win.removeAllListeners();
+        PopoutWindows.delete(key);
+    });
+}