"fix" react-devtools

works well enough lol

backend/decky_loader/utilities.py

@@ -429,17 +429,28 @@ class Utilities:
                 async with ClientSession() as web:
                     res = await web.request("GET", "http://" + ip + ":8097", ssl=helpers.get_ssl_context())
                     script = """
-                    if (!window.deckyHasConnectedRDT) {
-                        window.deckyHasConnectedRDT = true;
-                        // This fixes the overlay when hovering over an element in RDT
-                        Object.defineProperty(window, '__REACT_DEVTOOLS_TARGET_WINDOW__', {
-                            enumerable: true,
-                            configurable: true,
-                            get: function() {
-                                return (GamepadNavTree?.m_context?.m_controller || FocusNavController)?.m_ActiveContext?.ActiveWindow || window;
-                            }
-                        });
-                    """ + await res.text() + "\n}"
+                    try {
+                        if (!window.deckyHasConnectedRDT) {
+                            window.deckyHasConnectedRDT = true;
+                            // This fixes the overlay when hovering over an element in RDT
+                            Object.defineProperty(window, '__REACT_DEVTOOLS_TARGET_WINDOW__', {
+                                enumerable: true,
+                                configurable: true,
+                                get: function() {
+                                    return window?.DFL?.findSP?.() || window;
+                                }
+                            });
+                    """ + await res.text() + """
+                    // they broke the script so we have to do this ourselves
+                    ReactDevToolsBackend.initialize({
+                        appendComponentStack: true,
+                        breakOnConsoleErrors: false,
+                        showInlineWarningsAndErrors: true,
+                        hideConsoleLogsInStrictMode: false
+                    });
+                    ReactDevToolsBackend.connectToDevTools({port: 8097, host: 'localhost', useHttps: false});
+                    } } catch(e) {console.error('RDT LOAD ERROR', e);}console.log('LOADED RDT');
+                    """
                 if res.status != 200:
                     self.logger.error("Failed to connect to React DevTools at " + ip)
                     return False
@@ -447,7 +458,10 @@ class Utilities:
                 self.logger.info("Connected to React DevTools, loading script")
                 tab = await get_gamepadui_tab()
                 # RDT needs to load before React itself to work.
-                await close_old_tabs()
+                try:
+                    await close_old_tabs()
+                except Exception:
+                    pass
                 result = await tab.reload_and_evaluate(script)
                 self.logger.info(result)
 

flake.nix

@@ -40,6 +40,7 @@
             nodePackages.pnpm
             poetry
             jq
+            electron_30-bin
             # fixes local pyright not being able to see the pythonpath properly.
             (pkgs.writeShellScriptBin "pyright" ''
               ${pkgs.pyright}/bin/pyright --pythonpath `which python3` "$@" '')

frontend/package.json

@@ -10,7 +10,8 @@
     "lint": "prettier -c src",
     "typecheck": "tsc --noEmit",
     "format": "prettier -c src -w",
-    "localize": "i18next"
+    "localize": "i18next",
+    "react-devtools": "electron node_modules/react-devtools/app"
   },
   "devDependencies": {
     "@decky/api": "^1.1.1",
@@ -31,6 +32,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-import-sort": "^0.0.7",
     "react": "18.3.1",
+    "react-devtools": "^6.0.0",
     "react-dom": "18.3.1",
     "rollup": "^4.18.0",
     "rollup-plugin-delete": "^2.0.0",

frontend/src/router-hook.tsx

@@ -87,10 +87,10 @@ class RouterHook extends Logger {
           this.patchGamepadRouter();
           break;
         // Not fully implemented yet
-        // case UIMode.Desktop:
-        //   this.debug("Patching desktop router");
-        //   this.patchDesktopRouter();
-        //   break;
+        case UIMode.Desktop:
+          this.debug("Patching desktop router");
+          this.patchDesktopRouter();
+          break;
         default:
           this.warn(`Router patch not implemented for UI mode ${mode}`);
           break;
@@ -131,7 +131,6 @@ class RouterHook extends Logger {
   }
 
   // Currently unused
-  // @ts-expect-error 6133
   private async patchDesktopRouter() {
     const root = getReactRoot(document.getElementById('root') as any);
     const findRouterNode = () =>