settings: add buttons to open chrome://gpu & 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 { Button, Forms, Toasts } from "@vencord/types/webpack/common";
+import {
+    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;