SpacingBat3 · goosesima · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022
diff --git a/package.json b/package.json
@@ -24,6 +24,13 @@
     "email": "[email protected]",
     "url": "https://github.com/SpacingBat3"
   },
+  "contributors": [
+    {
+      "name": "GooseSima",
+      "email": "[email protected]",
+      "url": "https://goosesima.github.io/"
+    }
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/sources/assets/web/css/custombar.css b/sources/assets/web/css/custombar.css
@@ -0,0 +1,58 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    background: var(--scrollbar-thumb);
+    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: var(--color-font-normal);
+    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 {
+    display: flex;
+    width: 12px;
+    padding: 8px;
+    color: var(--color-font-settings);
+}
+
+.titlebar .title {
+    padding-left: 2px;
+    padding-right: 2px;
+    border-radius: 20px;
+    font-family: system-ui;
+}
+
+.titlebar .title:hover {
+    background-color: var(--color-bg-primary);
+}
+
+.titlebar .btn:hover {
+    background-color: var(--color-bg-primary);
+}
+
+.titlebar .closebutton:hover {
+    background-color: var(--color-red);
+    color: var(--color-font-header);
+}
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/global.css b/sources/assets/web/css/global.css
@@ -19,6 +19,7 @@
     --scrollbar-thumb: #202225;
     --color-alert-info: 65, 133, 211;
     --color-alert-warn: 248, 197, 29;
+    --color-red: #f53d3d;
 }
 
 html {

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 {

diff --git a/sources/assets/web/html/custombar.html b/sources/assets/web/html/custombar.html
@@ -0,0 +1,31 @@
+<!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/global.css" rel="stylesheet" type="text/css">
+    <link href="../css/custombar.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <div class="titlebar">
+        <div class="title" data-action="opensettings">webcord</div>
+        <div class="btn" data-action="window-minimize">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                <path
+                    d="M 0.71464503,4.235 H 7.7550979" stroke="currentColor" fill="currentColor"  stroke-linecap="round" stroke-width="1.59"/>
+            </svg>
+        </div>
+        <div class="btn" data-action="window-maximize">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                <path
+                    d="M 0.70215499,0.70215499 H 7.767847 V 7.7678511 H 0.70215499 Z" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.59" />
+            </svg>
+        </div>
+        <div class="closebutton btn" data-action="window-close">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                <path d="m7.67.794-6.88 6.88m0-6.88 6.88 6.88" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-width="1.59" />
+            </svg>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/sources/code/main/modules/config.ts b/sources/code/main/modules/config.ts
@@ -62,6 +62,9 @@ const defaultAppConfig = Object.freeze({
       taskbar: {
         flash: true
       },
+      custombar: {
+        use: false
+      },
       window: {
         transparent: false,
         hideOnClose: true

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";
 import { nativeImage } from "electron/common";
@@ -43,6 +44,8 @@ export default function createMainWindow(flags:MainWindowFlags): BrowserWindow {
 
   // Browser window
 
+  const useCustomBar = appConfig.value.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 {
     backgroundColor: appInfo.backgroundColor,
     transparent: appConfig.value.settings.general.window.transparent,
     show: false,
+    frame: !useCustomBar,
     webPreferences: {
       preload: resolve(app.getAppPath(), "app/code/renderer/preload/main.js"),
       nodeIntegration: false, // Never set to "true"!
@@ -68,6 +72,51 @@ 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")).then(() => {
+      console.debug("[Custom Bar] Loaded!");
+    }).catch((e) => {
+      console.debug("[Custom Bar] Error loading!");
+      console.debug(e);
+    });
+    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...");
+          if(win.isMaximized())
+            win.unmaximize();
+          else
+            win.maximize();
+          break;
+        case "window-close":
+          console.debug("[Custom Bar] Close 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.
@@ -405,6 +454,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);
+      }
       // Additionally, make window transparent if user has opted for it.
       if(appConfig.value.settings.general.window.transparent)
         win.webContents.once("did-stop-loading", () => win.setBackgroundColor("#0000"));

diff --git a/sources/code/renderer/preload/custombar.ts b/sources/code/renderer/preload/custombar.ts
@@ -0,0 +1,17 @@
+import { ipcRenderer as ipc } from "electron/renderer";
+
+window.addEventListener("DOMContentLoaded", () => {
+  /*
+  * Custom title bar
+  */
+
+  const divs = document.body.getElementsByTagName("div");
+  for (const element of divs) {
+    const action = element.dataset["action"];
+    if (action !== undefined){
+      element.onclick = function (){
+        ipc.send(action);
+      };
+    }
+  }
+});
diff --git a/sources/code/renderer/preload/settings.ts b/sources/code/renderer/preload/settings.ts
@@ -151,8 +151,8 @@ function generateSettings(optionsGroups: htmlConfig) {
             (Object.keys as keys)(setting).sort().map(key => {
               if(key !== "name" && key !== "description" && key !== "labels" && setting[key] !== undefined) {
                 formContainer.appendChild(createForm({
-                  type:"checkbox",
-                  id: groupId+"."+settingKey+"."+key,
+                  type: "checkbox",
+                  id: groupId + "." + settingKey + "." + key,
                   isChecked: setting[key] === true,
                   label: setting.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": "Non-native window bar",
+            "description": "Removes native window borders and adds to it a HTML-based title bar, like it is done in official Discord client. To access WebCord's settings, press on the title on the title bar. <b>Currently non-native title bar lacks of menu bar.</b>",
+            "labels": {
+                "use": "Display non-native window bar (requires application restart)."
+            }
+        },
         "taskbar": {
             "name": "Taskbar",
             "description": "Controls the behavior of taskbar entry of WebCord.",
@@ -112,4 +119,4 @@
             }
         }
     }
-}
+}
diff --git a/sources/translations/en/web.json b/sources/translations/en/web.json
@@ -20,7 +20,8 @@
             "people": {
                 "author": "Author, maintainer and main developer.",
                 "contributors": {
-                    "default": "Code contributor."
+                    "default": "Code contributor.",
+                    "GooseSima": "Contributor of non-native title bar feature."
                 }
             }
         },

diff --git a/sources/translations/pl/settings.json b/sources/translations/pl/settings.json
@@ -16,6 +16,13 @@
                 "disable": "Wyłącz ukrywanie okna do zasobnika systemowego."
             }
         },
+        "custombar": {
+            "name": "Nienatywny pasek tytułu",
+            "description": "Usuwa natywne ramki okna i dodaje do niego pasek tytułu oparty na HTML, tak jak jest to zrobione w oficjalnym kliencie Discorda. Aby uzyskać dostęp do ustawień, należy nacisnąć na tytuł okna na pasku. <b>Obecnie nienatywny pasek tytułu nie posiada zaimplementowanego paska menu.</b>",
+            "labels": {
+                "use": "Wyświetlaj nienatywny pasek menu (wymaga ponownego uruchomienia aplikacji)."
+            }
+        },
         "taskbar": {
             "name": "Pasek zadań",
             "description": "Steruje zachowaniem przycisku WebCorda na pasku zadań.",

diff --git a/sources/translations/pl/web.json b/sources/translations/pl/web.json
@@ -20,7 +20,8 @@
             "people": {
                 "author": "Autor, opiekun i główny deweloper aplikacji.",
                 "contributors": {
-                    "default": "Współtwórca kodu."
+                    "default": "Współtwórca kodu.",
+                    "GooseSima": "Współtwórca funkcji nie-natywnego title bar feature."
                 }
             }
         },