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>

1 files changed, 19 insertions, 1 deletions

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')}