SpacingBat3 · goosesima · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022
diff --git a/sources/assets/icons/symbols/custombar/close-hover.svg b/sources/assets/icons/symbols/custombar/close-hover.svg
diff --git a/sources/assets/icons/symbols/custombar/close.svg b/sources/assets/icons/symbols/custombar/close.svg
diff --git a/sources/assets/icons/symbols/custombar/maximize.svg b/sources/assets/icons/symbols/custombar/maximize.svg
diff --git a/sources/assets/icons/symbols/custombar/minimize.svg b/sources/assets/icons/symbols/custombar/minimize.svg
diff --git a/sources/assets/web/css/custombar.css b/sources/assets/web/css/custombar.css
@@ -0,0 +1,74 @@
+body {
+    margin: 0;
+    padding: 0;
+    background: #202225;
+    overflow: hidden;
+}
+.titlebar {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    height: 20px;
+    -webkit-app-region: drag;
+    margin-left: 15px;
+    font-size: 0.8em;
+    text-transform: uppercase;
+    color: #ddd;
+    font-weight: 600;
+}
+
+.titlebar .title {
+    margin-right: auto;
+}
+
+.titlebar * {
+    -webkit-app-region: no-drag;
+    cursor: pointer;
+    background-size: 12px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.titlebar .btn {
+    height: 12px;
+    width: 12px;
+    padding: 8px;
+}
+
+.titlebar .title {
+    padding-left: 2px;
+    padding-right: 2px;
+    font-family: system-ui;
+}
+
+.titlebar .title:hover {
+    background-color: #fff;
+    color: #000;
+    border-radius: 20px;
+}
+
+.titlebar .btn:hover {
+    background-color: #32353b;
+}
+
+.titlebar .closebutton:hover {
+    background-image: url("../../icons/symbols/custombar/close-hover.svg");
+    background-color: #f53d3d;
+}
+
+.titlebar .closebutton {
+    background-image: url("../../icons/symbols/custombar/close.svg");
+}
+
+.titlebar .maximizebutton {
+    background-image: url("../../icons/symbols/custombar/maximize.svg");
+}
+
+.titlebar .minimizebutton {
+    background-image: url("../../icons/symbols/custombar/minimize.svg");
+}
+
+.titlebar+#app-mount {
+    height: calc(100% - 20px);
+}
diff --git a/sources/assets/web/css/discord-custombar.css b/sources/assets/web/css/discord-custombar.css
@@ -0,0 +1,7 @@
+body {
+    padding-top: 20px !important;
+}
+
+#app-mount {
+    height: calc(100% - 20px);
+}
diff --git a/sources/assets/web/css/load.css b/sources/assets/web/css/load.css
@@ -8,6 +8,7 @@ html, body {
     margin: 0;
     background-color: #36393F;
     height: 100%;
+    -webkit-app-region: drag;
 }
 body, div.aura {
     text-align: center;

diff --git a/sources/assets/web/html/custombar.html b/sources/assets/web/html/custombar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../css/custombar.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+</body>
+</html>
diff --git a/sources/code/main/modules/config.ts b/sources/code/main/modules/config.ts
@@ -55,6 +55,9 @@ const defaultAppConfig = {
       },
       taskbar: {
         flash: true
+      },
+      custombar: {
+        use: false
       }
     },
     privacy: {

diff --git a/sources/code/main/windows/main.ts b/sources/code/main/windows/main.ts
@@ -23,6 +23,7 @@ import { getWebCordCSP } from "../modules/csp";
 import l10n from "../../common/modules/l10n";
 import { loadChromiumExtensions, styles } from "../modules/extensions";
 import { commonCatches } from "../modules/error";
+import loadSettingsWindow from "../windows/settings";
 
 import type { PartialRecursive } from "../../common/global";
 
@@ -44,6 +45,8 @@ export default function createMainWindow(flags:MainWindowFlags): BrowserWindow {
 
   // Browser window
 
+  const useCustomBar = configData.get().settings.general.custombar.use;
+
   const win = new BrowserWindow({
     title: app.getName(),
     minWidth: appInfo.minWinWidth,
@@ -52,6 +55,7 @@ export default function createMainWindow(flags:MainWindowFlags): BrowserWindow {
     width: mainWindowState.initState.width,
     backgroundColor: appInfo.backgroundColor,
     show: false,
+    frame: !useCustomBar,
     webPreferences: {
       preload: resolve(app.getAppPath(), "app/code/renderer/preload/main.js"),
       nodeIntegration: false, // Never set to "true"!
@@ -68,6 +72,43 @@ export default function createMainWindow(flags:MainWindowFlags): BrowserWindow {
     },
     ...(process.platform !== "win32" ? {icon: appInfo.icons.app} : {}),
   });
+
+  // Custom Bar
+  if (useCustomBar){
+    const custombarView = new BrowserView({
+      webPreferences: {
+        nodeIntegration: false,
+        preload: resolve(app.getAppPath(), "app/code/renderer/preload/custombar.js")
+      }
+    });
+    win.setBrowserView(custombarView);
+    custombarView.setAutoResize({ width: true })
+    custombarView.webContents.loadFile(resolve(app.getAppPath(), "sources/assets/web/html/custombar.html"));
+    custombarView.setBounds({ width: win.getBounds().width, height: 20, x: 0, y: 0 });
+    custombarView.webContents.on('ipc-message', (_event, channel) => {
+      switch (channel) {
+        case 'window-minimize':
+          console.debug("[Custom Bar] Minimize window...");
+          win.minimize();
+          break;
+        case 'window-maximize':
+          console.debug("[Custom Bar] Maximize window...");
+          win.isMaximized() ? win.unmaximize() : win.maximize();
+          break;
+        case 'window-close':
+          console.debug("[Custom Bar] Maximize window...");
+          win.close();
+          break;
+        case 'opensettings':
+          console.debug("[Custom Bar] Opening settings...");
+          loadSettingsWindow(win);
+          break;
+        default:
+          break;
+      }
+    });    
+  }
+
   win.webContents.on("did-fail-load", (_event, errorCode, errorDescription, validatedURL) => {
     if (errorCode <= -100 && errorCode >= -199)
     // Show offline page on connection errors.
@@ -341,6 +382,17 @@ export default function createMainWindow(flags:MainWindowFlags): BrowserWindow {
         .then(buffer => buffer.toString())
         .then(data => win.webContents.insertCSS(data))
         .catch(commonCatches.print);
+
+      if(useCustomBar){
+        styles.load(win.webContents)
+          .catch(commonCatches.print);
+        import("fs")
+          .then(fs => fs.promises.readFile)
+          .then(read => read(resolve(app.getAppPath(), "sources/assets/web/css/discord-custombar.css")))
+          .then(buffer => buffer.toString())
+          .then(data => win.webContents.insertCSS(data))
+          .catch(commonCatches.print);
+      }
     }
   });
 

diff --git a/sources/code/renderer/preload/custombar.ts b/sources/code/renderer/preload/custombar.ts
@@ -0,0 +1,38 @@
+const { ipcRenderer } = require('electron');
+
+window.addEventListener("DOMContentLoaded", () => {
+    /*
+    * Custom title bar
+    */
+
+    const titlebar = document.createElement("div");
+    titlebar.className = "titlebar";
+
+    const title = document.createElement("div");
+    // title.innerText = location.host.split(".")[0]!;
+    title.innerText = "webcord";
+    title.className = "title";
+    const minimizebutton = document.createElement("div");
+    minimizebutton.className = "minimizebutton btn";
+    const maximizebutton = document.createElement("div");
+    maximizebutton.className = "maximizebutton btn";
+    const closebutton = document.createElement("div");
+    closebutton.className = "closebutton btn";
+    titlebar.appendChild(title);
+    titlebar.appendChild(minimizebutton);
+    titlebar.appendChild(maximizebutton);
+    titlebar.appendChild(closebutton);
+    document.body.prepend(titlebar);
+    title.onclick = function () {
+        ipcRenderer.send('opensettings', '')
+    };
+    minimizebutton.onclick = function () {
+        ipcRenderer.send('window-minimize', '')
+    };
+    maximizebutton.onclick = function () {
+        ipcRenderer.send('window-maximize', '')
+    };
+    closebutton.onclick = function () {
+        ipcRenderer.send('window-close', '')
+    };
+});
diff --git a/sources/code/renderer/preload/settings.ts b/sources/code/renderer/preload/settings.ts
@@ -91,10 +91,10 @@ function generateSettings(optionsGroups: htmlConfig) {
             });
           } else if(!("dropdown" in setting || "input" in setting || "keybind" in setting)) {
             (Object.keys as keys)(setting).sort().map(key => {
-              if(key !== "name" && key !== "description" && key !== "labels" && setting[key] !== undefined) {
+              if (key !== "name" && key !== "description" && key !== "labels" && setting[key] !== undefined && setting.labels) {
                 formContainer.appendChild(createForm({
-                  type:"checkbox",
-                  id: groupId+"."+settingKey+"."+key,
+                  type: "checkbox",
+                  id: groupId + "." + settingKey + "." + key,
                   isChecked: setting[key] === true,
                   label: labels[key] ?? "N/A"
                 }));

diff --git a/sources/translations/en/settings.json b/sources/translations/en/settings.json
@@ -16,6 +16,13 @@
                 "disable": "Disable hiding window to the system tray functionality."
             }
         },
+                "custombar": {
+                    "name": "Custom window bar",
+                    "description": "Uses non-native window bar. To access settings press title of window. <b>Important:</b> it injects custom CSS. This might potentially let Discord to know it is modded.",
+                    "labels": {
+                        "use": "Use custom window bar. (Requires restart)"
+                    }
+                },
         "taskbar": {
             "name": "Taskbar",
             "description": "Controls the behavior of taskbar entry of WebCord.",