add cef console button to developer settings (#441)

* add cef console button

* Small fix: handle missing localization in backend plus a small typo in the english language (#443)

* Hotfix for i18n where the detector was overriding localStorage

* Please, pnpm, cooperate

* Small fix regarding the backend getting hammered when switching to not supported languages plus a small english typo

* Add a get_tab_id function to utilities

* Go straight to SharedJSContext into console button

* clean up some log statements, and some extra parentheses

---------

Co-authored-by: Marco Rodolfi <marco.rodolfi@tuta.io>
Co-authored-by: Party Wumpus <48649272+PartyWumpus@users.noreply.github.com>

3 files changed, 30 insertions, 3 deletions

diff --git a/backend/locales/en-US.json b/backend/locales/en-US.json
index 12a33f37..a347351b 100644
--- a/backend/locales/en-US.json
+++ b/backend/locales/en-US.json
@@ -100,6 +100,11 @@
         }
     },
     "SettingsDeveloperIndex": {
+        "cef_console": {
+            "button": "Open Console",
+            "desc": "Opens the CEF Console. Only useful for debugging purposes. Stuff here is potentially dangerous and should only be used if you are a plugin dev, or are directed here by one.",
+            "label": "CEF Console"
+        },
         "header": "Other",
         "react_devtools": {
             "desc": "Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set the IP address before enabling.",
diff --git a/backend/utilities.py b/backend/utilities.py
index 94f5e26b..45a32d3e 100644
--- a/backend/utilities.py
+++ b/backend/utilities.py
@@ -7,7 +7,7 @@ from asyncio import sleep, start_server, gather, open_connection
 from aiohttp import ClientSession, web
 
 from logging import getLogger
-from injector import inject_to_tab, get_gamepadui_tab, close_old_tabs
+from injector import inject_to_tab, get_gamepadui_tab, close_old_tabs, get_tab
 import helpers
 import subprocess
 from localplatform import service_stop, service_start
@@ -32,7 +32,8 @@ class Utilities:
             "get_setting": self.get_setting,
             "filepicker_ls": self.filepicker_ls,
             "disable_rdt": self.disable_rdt,
-            "enable_rdt": self.enable_rdt
+            "enable_rdt": self.enable_rdt,
+            "get_tab_id": self.get_tab_id
         }
 
         self.logger = getLogger("Utilities")
@@ -287,3 +288,6 @@ class Utilities:
         await close_old_tabs()
         await tab.evaluate_js("location.reload();", False, True, False)
         self.logger.info("React DevTools disabled")
+
+    async def get_tab_id(self, name):
+        return (await get_tab(name)).id
diff --git a/frontend/src/components/settings/pages/developer/index.tsx b/frontend/src/components/settings/pages/developer/index.tsx
index 774bb449..812ff052 100644
--- a/frontend/src/components/settings/pages/developer/index.tsx
+++ b/frontend/src/components/settings/pages/developer/index.tsx
@@ -4,12 +4,13 @@ import {
   DialogControlsSection,
   DialogControlsSectionHeader,
   Field,
+  Navigation,
   TextField,
   Toggle,
 } from 'decky-frontend-lib';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaFileArchive, FaLink, FaReact, FaSteamSymbol } from 'react-icons/fa';
+import { FaFileArchive, FaLink, FaReact, FaSteamSymbol, FaTerminal } from 'react-icons/fa';
 
 import { setShouldConnectToReactDevTools, setShowValveInternal } from '../../../../developer';
 import { installFromURL } from '../../../../store';
@@ -75,6 +76,23 @@ export default function DeveloperSettings() {
       </DialogControlsSection>
       <DialogControlsSection>
         <DialogControlsSectionHeader>{t('SettingsDeveloperIndex.header')}</DialogControlsSectionHeader>
+        <Field
+          label={t('SettingsDeveloperIndex.cef_console.label')}
+          description={<span style={{ whiteSpace: 'pre-line' }}>{t('SettingsDeveloperIndex.cef_console.desc')}</span>}
+          icon={<FaTerminal style={{ display: 'block' }} />}
+        >
+          <DialogButton onClick={async () => {
+            let res = await window.DeckyPluginLoader.callServerMethod('get_tab_id', { "name": "SharedJSContext" });
+            if (res.success) {
+              Navigation.NavigateToExternalWeb("localhost:8080/devtools/inspector.html?ws=localhost:8080/devtools/page/"+res.result);
+            } else {
+              console.error('Unable to find ID for SharedJSContext tab ', res.result);
+              Navigation.NavigateToExternalWeb("localhost:8080");
+            }
+          }}>
+            {t('SettingsDeveloperIndex.cef_console.button')}
+          </DialogButton>
+        </Field>
         <RemoteDebuggingSettings />
         <Field
           label={t('SettingsDeveloperIndex.valve_internal.label')}