settings: add buttons to open chrome://gpu & webrtc-internals

src/main/ipc.ts

@@ -135,6 +135,17 @@ handle(IpcEvents.CLIPBOARD_COPY_IMAGE, async (_, buf: ArrayBuffer, src: string)
     });
 });
 
+function openDebugPage(page: string) {
+    const win = new BrowserWindow({
+        autoHideMenuBar: true
+    });
+
+    win.loadURL(page);
+}
+
+handle(IpcEvents.DEBUG_LAUNCH_GPU, () => openDebugPage("chrome://gpu"));
+handle(IpcEvents.DEBUG_LAUNCH_WEBRTC_INTERNALS, () => openDebugPage("chrome://webrtc-internals"));
+
 function readCss() {
     return readFile(VENCORD_QUICKCSS_FILE, "utf-8").catch(() => "");
 }

src/preload/VesktopNative.ts

@@ -78,5 +78,9 @@ export const VesktopNative = {
     clipboard: {
         copyImage: (imageBuffer: Uint8Array, imageSrc: string) =>
             invoke<void>(IpcEvents.CLIPBOARD_COPY_IMAGE, imageBuffer, imageSrc)
+    },
+    debug: {
+        launchGpu: () => invoke<void>(IpcEvents.DEBUG_LAUNCH_GPU),
+        launchWebrtcInternals: () => invoke<void>(IpcEvents.DEBUG_LAUNCH_WEBRTC_INTERNALS)
     }
 };

src/renderer/components/settings/DeveloperOptions.tsx

@@ -4,12 +4,56 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
-import { useForceUpdater } from "@vencord/types/utils";
+import {
-import { Button, Forms, Toasts } from "@vencord/types/webpack/common";
+    Margins,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalRoot,
+    ModalSize,
+    openModal,
+    useForceUpdater
+} from "@vencord/types/utils";
+import { Button, Forms, Text, Toasts } from "@vencord/types/webpack/common";
+import { Settings } from "shared/settings";
 
 import { SettingsComponent } from "./Settings";
 
-export const VencordLocationPicker: SettingsComponent = ({ settings }) => {
+export const DeveloperOptionsButton: SettingsComponent = ({ settings }) => {
+    return <Button onClick={() => openDeveloperOptionsModal(settings)}>Open Developer Settings</Button>;
+};
+
+function openDeveloperOptionsModal(settings: Settings) {
+    openModal(props => (
+        <ModalRoot {...props} size={ModalSize.MEDIUM}>
+            <ModalHeader>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>
+                    Vesktop Developer Options
+                </Text>
+                <ModalCloseButton onClick={props.onClose} />
+            </ModalHeader>
+
+            <ModalContent>
+                <div style={{ padding: "1em 0" }}>
+                    <Forms.FormTitle tag="h5">Vencord Location</Forms.FormTitle>
+                    <VencordLocationPicker settings={settings} />
+
+                    <Forms.FormTitle tag="h5" className={Margins.top16}>
+                        Debugging
+                    </Forms.FormTitle>
+                    <div className="vcd-settings-button-grid">
+                        <Button onClick={() => VesktopNative.debug.launchGpu()}>Open chrome://gpu</Button>
+                        <Button onClick={() => VesktopNative.debug.launchWebrtcInternals()}>
+                            Open chrome://webrtc-internals
+                        </Button>
+                    </div>
+                </div>
+            </ModalContent>
+        </ModalRoot>
+    ));
+}
+
+const VencordLocationPicker: SettingsComponent = ({ settings }) => {
     const forceUpdate = useForceUpdater();
     const vencordDir = VesktopNative.fileManager.getVencordDir();
 
@@ -31,7 +75,7 @@ export const VencordLocationPicker: SettingsComponent = ({ settings }) => {
                     "the default location"
                 )}
             </Forms.FormText>
-            <div className="vcd-location-btns">
+            <div className="vcd-settings-button-grid">
                 <Button
                     size={Button.Sizes.SMALL}
                     onClick={async () => {

src/renderer/components/settings/Settings.tsx

@@ -12,9 +12,9 @@ import { Settings, useSettings } from "renderer/settings";
 import { isMac, isWindows } from "renderer/utils";
 
 import { AutoStartToggle } from "./AutoStartToggle";
+import { DeveloperOptionsButton } from "./DeveloperOptions";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
-import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 
 interface BooleanSetting {
@@ -118,7 +118,7 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
             defaultValue: false
         }
     ],
-    "Vencord Location": [VencordLocationPicker]
+    "Developer Options": [DeveloperOptionsButton]
 };
 
 function SettingsSections() {

src/renderer/components/settings/settings.css

@@ -1,4 +1,4 @@
-.vcd-location-btns {
+.vcd-settings-button-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.5em;

src/shared/IpcEvents.ts

@@ -50,5 +50,8 @@ export const enum IpcEvents {
 
     ARRPC_ACTIVITY = "VCD_ARRPC_ACTIVITY",
 
-    CLIPBOARD_COPY_IMAGE = "VCD_CLIPBOARD_COPY_IMAGE"
+    CLIPBOARD_COPY_IMAGE = "VCD_CLIPBOARD_COPY_IMAGE",
+
+    DEBUG_LAUNCH_GPU = "VCD_DEBUG_LAUNCH_GPU",
+    DEBUG_LAUNCH_WEBRTC_INTERNALS = "VCD_DEBUG_LAUNCH_WEBRTC"
 }