Developer menu (#211)

* add settings utils to use settings outside of components * initial implementation of developer menu * ✨ Add support for addScriptToEvaluateOnNewDocument * React DevTools support * increase chance of RDT successfully injecting * Rewrite toaster hook to not re-create the window * remove friends focus workaround because it's fixed * Expose various DFL utilities as DFL in dev mode * try to fix text field focuss * move focusable to outside field * add onTouchEnd and onClick to focusable * Update pnpm-lock.yaml Co-authored-by: FinalDoom <7464170-FinalDoom@users.noreply.gitlab.com> Co-authored-by: TrainDoctor <traindoctor@protonmail.com>
2026-06-17 08:47:49 +00:00 · 2022-10-15 23:46:42 -04:00
parent 9b405e4bdc
commit 6e3c05072c
12 changed files with 527 additions and 80 deletions
@@ -0,0 +1,84 @@
+import { Field, Focusable, TextField, Toggle } from 'decky-frontend-lib';
+import { useRef } from 'react';
+import { FaReact, FaSteamSymbol } from 'react-icons/fa';
+
+import { setShouldConnectToReactDevTools, setShowValveInternal } from '../../../../developer';
+import { useSetting } from '../../../../utils/hooks/useSetting';
+
+export default function DeveloperSettings() {
+  const [enableValveInternal, setEnableValveInternal] = useSetting<boolean>('developer.valve_internal', false);
+  const [reactDevtoolsEnabled, setReactDevtoolsEnabled] = useSetting<boolean>('developer.rdt.enabled', false);
+  const [reactDevtoolsIP, setReactDevtoolsIP] = useSetting<string>('developer.rdt.ip', '');
+  const textRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <Field
+        label="Enable Valve Internal"
+        description={
+          <span style={{ whiteSpace: 'pre-line' }}>
+            Enables the Valve internal developer menu.{' '}
+            <span style={{ color: 'red' }}>Do not touch anything in this menu unless you know what it does.</span>
+          </span>
+        }
+        icon={<FaSteamSymbol style={{ display: 'block' }} />}
+      >
+        <Toggle
+          value={enableValveInternal}
+          onChange={(toggleValue) => {
+            setEnableValveInternal(toggleValue);
+            setShowValveInternal(toggleValue);
+          }}
+        />
+      </Field>{' '}
+      <Focusable
+        onTouchEnd={
+          reactDevtoolsIP == ''
+            ? () => {
+                (textRef.current?.childNodes[0] as HTMLInputElement)?.focus();
+              }
+            : undefined
+        }
+        onClick={
+          reactDevtoolsIP == ''
+            ? () => {
+                (textRef.current?.childNodes[0] as HTMLInputElement)?.focus();
+              }
+            : undefined
+        }
+        onOKButton={
+          reactDevtoolsIP == ''
+            ? () => {
+                (textRef.current?.childNodes[0] as HTMLInputElement)?.focus();
+              }
+            : undefined
+        }
+      >
+        <Field
+          label="Enable React DevTools"
+          description={
+            <>
+              <span style={{ whiteSpace: 'pre-line' }}>
+                Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set
+                the IP address before enabling.
+              </span>
+              <div ref={textRef}>
+                <TextField label={'IP'} value={reactDevtoolsIP} onChange={(e) => setReactDevtoolsIP(e?.target.value)} />
+              </div>
+            </>
+          }
+          icon={<FaReact style={{ display: 'block' }} />}
+        >
+          <Toggle
+            value={reactDevtoolsEnabled}
+            disabled={reactDevtoolsIP == ''}
+            onChange={(toggleValue) => {
+              setReactDevtoolsEnabled(toggleValue);
+              setShouldConnectToReactDevTools(toggleValue);
+            }}
+          />
+        </Field>
+      </Focusable>
+    </>
+  );
+}