Revert "Refactor TabsHook (#458)"

This reverts commit b27b625921.

These changes broke Decky's QAM injection when the lock screen is enabled and need to be revised

backend/loader.py

@@ -62,19 +62,19 @@ class Loader:
         self.logger = getLogger("Loader")
         self.plugin_path = plugin_path
         self.logger.info(f"plugin_path: {self.plugin_path}")
-        self.plugins = {}
+        self.plugins : dict[str, PluginWrapper] = {}
         self.watcher = None
         self.live_reload = live_reload
+        self.reload_queue = Queue()
+        self.loop.create_task(self.handle_reloads())
 
         if live_reload:
-            self.reload_queue = Queue()
             self.observer = Observer()
             self.watcher = FileChangeHandler(self.reload_queue, plugin_path)
             self.observer.schedule(self.watcher, self.plugin_path, recursive=True)
             self.observer.start()
-            self.loop.create_task(self.handle_reloads())
             self.loop.create_task(self.enable_reload_wait())
-
+            
         server_instance.add_routes([
             web.get("/frontend/{path:.*}", self.handle_frontend_assets),
             web.get("/locales/{path:.*}", self.handle_frontend_locales),
@@ -82,6 +82,7 @@ class Loader:
             web.get("/plugins/{plugin_name}/frontend_bundle", self.handle_frontend_bundle),
             web.post("/plugins/{plugin_name}/methods/{method_name}", self.handle_plugin_method_call),
             web.get("/plugins/{plugin_name}/assets/{path:.*}", self.handle_plugin_frontend_assets),
+            web.post("/plugins/{plugin_name}/reload", self.handle_backend_reload_request),
 
             # The following is legacy plugin code.
             web.get("/plugins/load_main/{name}", self.load_plugin_main_view),
@@ -217,3 +218,11 @@ class Loader:
             return web.Response(text=await tab.get_steam_resource(f"https://steamloopback.host/{request.match_info['path']}"), content_type="text/html")
         except Exception as e:
             return web.Response(text=str(e), status=400)
+
+    async def handle_backend_reload_request(self, request):
+        plugin_name : str = request.match_info["plugin_name"]
+        plugin = self.plugins[plugin_name]
+
+        await self.reload_queue.put((plugin.file, plugin.plugin_directory))
+
+        return web.Response(status=200)

backend/locales/de-DE.json

@@ -27,20 +27,20 @@
         "install": {
             "button_idle": "Installieren",
             "button_processing": "Wird installiert",
-            "desc": "Bist du dir sicher, dass du {{artifact}}{{version}} installieren willst?",
+            "desc": "Bist du dir sicher, dass du {{artifact}} {{version}} installieren willst?",
             "title": "Installiere {{artifact}}"
         },
         "reinstall": {
             "button_idle": "Neu installieren",
             "button_processing": "Wird neu installiert",
-            "desc": "Bist du dir sicher, dass du {{artifact}}{{version}} neu installieren willst?",
+            "desc": "Bist du dir sicher, dass du {{artifact}} {{version}} neu installieren willst?",
             "title": "Neu installation {{artifact}}"
         },
         "update": {
             "button_idle": "Aktualisieren",
             "button_processing": "Wird aktualisiert",
             "title": "Aktualisiere {{artifact}}",
-            "desc": "Bist du dir sicher, dass du {{artifact}}{{version}} aktualisieren willst?"
+            "desc": "Bist du dir sicher, dass du {{artifact}} {{version}} aktualisieren willst?"
         },
         "no_hash": "Diese Erweiterung besitzt keine Prüfsumme, Installation auf eigene Gefahr."
     },

backend/locales/en-US.json

@@ -9,8 +9,8 @@
     },
     "Developer": {
         "5secreload": "Reloading in 5 seconds",
-        "disabling": "Disabling",
-        "enabling": "Enabling"
+        "disabling": "Disabling React DevTools",
+        "enabling": "Enabling React DevTools"
     },
     "FilePickerIndex": {
         "folder": {
@@ -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.",

backend/locales/it-IT.json

@@ -8,9 +8,9 @@
         }
     },
     "Developer": {
-        "5secreload": "Ricaricando in 5 secondi",
-        "disabling": "Disabilitando",
-        "enabling": "Abilitando"
+        "5secreload": "Ricarico in 5 secondi",
+        "disabling": "Disabilito i tools di React",
+        "enabling": "Abilito i tools di React"
     },
     "FilePickerIndex": {
         "folder": {
@@ -50,7 +50,10 @@
         "reinstall": "Reinstalla",
         "reload": "Ricarica",
         "uninstall": "Rimuovi",
-        "update_to": "Aggiorna a {{name}}"
+        "update_to": "Aggiorna a {{name}}",
+        "update_all_one": "Aggiorna un plugin",
+        "update_all_many": "Aggiorna {{count}} plugins",
+        "update_all_other": "Aggiorna {{count}} plugins"
     },
     "PluginLoader": {
         "decky_title": "Decky",
@@ -180,5 +183,31 @@
             "reloading": "Ricaricando",
             "updating": "Aggiornando"
         }
+    },
+    "MultiplePluginsInstallModal": {
+        "title": {
+            "mixed_one": "Modifica un plugin",
+            "mixed_many": "Modifica {{count}} plugins",
+            "mixed_other": "Modifica {{count}} plugins",
+            "update_one": "Aggiorna un plugin",
+            "update_many": "Aggiorna {{count}} plugins",
+            "update_other": "Aggiorna {{count}} plugins",
+            "reinstall_one": "Reinstalla un plugin",
+            "reinstall_many": "Reinstalla {{count}} plugins",
+            "reinstall_other": "Reinstalla {{count}} plugins",
+            "install_one": "Installa un plugin",
+            "install_many": "Installa {{count}} plugins",
+            "install_other": "Installa {{count}} plugins"
+        },
+        "confirm": "Sei sicuro di voler effettuare le modifiche seguenti?",
+        "ok_button": {
+            "idle": "Conferma",
+            "loading": "Elaboro"
+        },
+        "description": {
+            "install": "Installa {{name}} {{version}}",
+            "update": "Aggiorna {{name}} alla versione {{version}}",
+            "reinstall": "Reinstalla {{name}} {{version}}"
+        }
     }
 }

backend/locales/zh-TW.json

@@ -55,7 +55,7 @@
     "PluginLoader": {
         "decky_title": "Decky",
         "error": "錯誤",
-        "plugin_error_uninstall": "如果您要解除安裝外掛程式，請在 Decky 選單，按下 <0></0>。",
+        "plugin_error_uninstall": "載入 {{name}} 導致上述異常。這通常意味著該外掛程式需要針對新版本的 SteamUI 進行更新。在 Decky 設定中檢查是否存在更新，或評估刪除此外掛程式。",
         "plugin_load_error": {
             "message": "載入外掛程式 {{name}} 發生錯誤",
             "toast": "{{name}} 載入出錯"
@@ -65,7 +65,8 @@
             "title": "解除安裝 {{name}}",
             "desc": "您確定要解除安裝 {{name}} 嗎？"
         },
-        "decky_update_available": "可更新至版本 {{tag_name}}！"
+        "decky_update_available": "可更新至版本 {{tag_name}}！",
+        "plugin_update_other": "可更新 {{count}} 個外掛程式！"
     },
     "RemoteDebugging": {
         "remote_cef": {
@@ -95,7 +96,8 @@
             "desc": "啟用與執行 React DevTools 的電腦的連接。改變這個設定將重新載入 Steam。啟用前必須設定 IP 位址。",
             "ip_label": "IP",
             "label": "啟用 React DevTools"
-        }
+        },
+        "header": "其他"
     },
     "SettingsGeneralIndex": {
         "about": {

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

frontend/package.json

@@ -43,7 +43,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "3.20.7",
+    "decky-frontend-lib": "3.21.1",
     "i18next": "^22.5.0",
     "i18next-http-backend": "^2.2.1",
     "react-file-icon": "^1.3.0",

frontend/pnpm-lock.yaml

@@ -2,8 +2,8 @@ lockfileVersion: '6.0'
 
 dependencies:
   decky-frontend-lib:
-    specifier: 3.20.7
-    version: 3.20.7
+    specifier: 3.21.1
+    version: 3.21.1
   i18next:
     specifier: ^22.5.0
     version: 22.5.0
@@ -1393,8 +1393,8 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib@3.20.7:
-    resolution: {integrity: sha512-Zwwbo50cqpTbCfSCZaqITgTRvWs7pK9KO1A+Oo2sCC/DqOfyUtEH5niNPid4Qxu+yh4lsbEjTurJk1nCfd+nZw==}
+  /decky-frontend-lib@3.21.1:
+    resolution: {integrity: sha512-30605ET9qqZ6St6I9WmMmLGgSrTIdMwo7xy85+lRaF1miUd2icOGEJjwnbVcZDdkal+1fJ3tNEDXlchVfG4TrA==}
     dev: false
 
   /decode-named-character-reference@1.0.2:

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,27 @@ 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')}

frontend/src/components/settings/pages/plugin_list/index.tsx

@@ -44,7 +44,23 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
   const showCtxMenu = (e: MouseEvent | GamepadEvent) => {
     showContextMenu(
       <Menu label={t('PluginListIndex.plugin_actions')}>
-        <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(pluginName, data?.version)}>
+        <MenuItem
+          onSelected={() => {
+            try {
+              fetch(`http://127.0.0.1:1337/plugins/${pluginName}/reload`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                  Authentication: window.deckyAuthToken,
+                },
+              });
+            } catch (err) {
+              console.error('Error Reloading Plugin Backend', err);
+            }
+
+            window.DeckyPluginLoader.importPlugin(pluginName, data?.version);
+          }}
+        >
           {t('PluginListIndex.reload')}
         </MenuItem>
         <MenuItem

frontend/src/components/store/PluginCard.tsx

@@ -6,7 +6,7 @@ import {
   SingleDropdownOption,
   SuspensefulImage,
 } from 'decky-frontend-lib';
-import { FC, useState } from 'react';
+import { CSSProperties, FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { InstallType } from '../../plugin';
@@ -18,7 +18,7 @@ interface PluginCardProps {
 
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
-  const root: boolean = plugin.tags.some((tag) => tag === 'root');
+  const root = plugin.tags.some((tag) => tag === 'root');
 
   const { t } = useTranslation();
 
@@ -30,7 +30,6 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
         marginRight: '20px',
         marginBottom: '20px',
         display: 'flex',
-        alignItems: 'center',
       }}
     >
       <div
@@ -59,91 +58,90 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
           width: 'calc(100% - 320px)', // The calc is here so that the info section doesn't expand into the image
           display: 'flex',
           flexDirection: 'column',
-          height: '100%',
+          justifyContent: 'space-between',
           marginLeft: '1em',
-          justifyContent: 'center',
+          gap: '10px',
         }}
       >
-        <span
-          className="deckyStoreCardTitle"
-          style={{
-            fontSize: '1.25em',
-            fontWeight: 'bold',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            width: '90%',
-          }}
-        >
-          {plugin.name}
-        </span>
-        <span
-          className="deckyStoreCardAuthor"
-          style={{
-            marginRight: 'auto',
-            fontSize: '1em',
-          }}
-        >
-          {plugin.author}
-        </span>
-        <span
-          className="deckyStoreCardDescription"
-          style={{
-            fontSize: '13px',
-            color: '#969696',
-            WebkitLineClamp: root ? '2' : '3',
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box',
-          }}
-        >
-          {plugin.description ? (
-            plugin.description
-          ) : (
-            <span>
-              <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i>
-            </span>
-          )}
-        </span>
-        {root && (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
           <span
-            className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
+            className="deckyStoreCardTitle"
             style={{
-              fontSize: '13px',
-              color: '#fee75c',
+              fontSize: '1.25em',
+              fontWeight: 'bold',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              width: '90%',
             }}
           >
-            <i>{t('PluginCard.plugin_full_access')}</i>{' '}
-            <a
-              className="deckyStoreCardDescriptionRootLink"
-              href="https://deckbrew.xyz/root"
-              target="_blank"
+            {plugin.name}
+          </span>
+          <span
+            className="deckyStoreCardAuthor"
+            style={{
+              marginRight: 'auto',
+              fontSize: '1em',
+            }}
+          >
+            {plugin.author}
+          </span>
+          <span
+            className="deckyStoreCardDescription"
+            style={{
+              fontSize: '13px',
+              color: '#969696',
+              WebkitLineClamp: root ? '2' : '3',
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              display: '-webkit-box',
+            }}
+          >
+            {plugin.description ? (
+              plugin.description
+            ) : (
+              <span>
+                <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i>
+              </span>
+            )}
+          </span>
+          {root && (
+            <div
+              className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
               style={{
+                fontSize: '13px',
                 color: '#fee75c',
-                textDecoration: 'none',
+                marginTop: 'auto',
               }}
             >
-              deckbrew.xyz/root
-            </a>
-          </span>
-        )}
-        <div
-          className="deckyStoreCardButtonRow"
-          style={{
-            marginTop: '1em',
-            width: '100%',
-            overflow: 'hidden',
-          }}
-        >
+              <i>{t('PluginCard.plugin_full_access')}</i>{' '}
+              <a
+                className="deckyStoreCardDescriptionRootLink"
+                href="https://deckbrew.xyz/root"
+                target="_blank"
+                style={{
+                  color: '#fee75c',
+                  textDecoration: 'none',
+                }}
+              >
+                deckbrew.xyz/root
+              </a>
+            </div>
+          )}
+        </div>
+        <div className="deckyStoreCardButtonRow">
           <PanelSectionRow>
-            <Focusable style={{ display: 'flex', maxWidth: '100%' }}>
+            <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
               <div
                 className="deckyStoreCardInstallContainer"
-                style={{
-                  paddingTop: '0px',
-                  paddingBottom: '0px',
-                  width: '40%',
-                }}
+                style={
+                  {
+                    paddingTop: '0px',
+                    paddingBottom: '0px',
+                    flexGrow: 1,
+                    '--field-negative-horizontal-margin': 0,
+                  } as CSSProperties
+                }
               >
                 <ButtonItem
                   bottomSeparator="none"
@@ -155,13 +153,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   <span className="deckyStoreCardInstallText">{t('PluginCard.plugin_install')}</span>
                 </ButtonItem>
               </div>
-              <div
-                className="deckyStoreCardVersionContainer"
-                style={{
-                  marginLeft: '5%',
-                  width: '30%',
-                }}
-              >
+              <div className="deckyStoreCardVersionContainer" style={{ minWidth: '130px' }}>
                 <Dropdown
                   rgOptions={
                     plugin.versions.map((version: StorePluginVersion, index) => ({

frontend/src/developer.tsx

@@ -4,6 +4,7 @@ import { FaReact } from 'react-icons/fa';
 
 import Logger from './logger';
 import { getSetting } from './utils/settings';
+import TranslationHelper, { TranslationClass } from './utils/TranslationHelper';
 
 const logger = new Logger('DeveloperMode');
 
@@ -40,11 +41,13 @@ export async function setShowValveInternal(show: boolean) {
 }
 
 export async function setShouldConnectToReactDevTools(enable: boolean) {
-  const { t } = useTranslation();
-
   window.DeckyPluginLoader.toaster.toast({
-    title: (enable ? t('Developer.enabling') : t('Developer.disabling')) + ' React DevTools',
-    body: t('Developer.5secreload'),
+    title: enable ? (
+      <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'enabling'} />
+    ) : (
+      <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'disabling'} />
+    ),
+    body: <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'5secreload'} />,
     icon: <FaReact />,
   });
   await sleep(5000);

frontend/src/utils/TranslationHelper.tsx

@@ -7,6 +7,7 @@ import { InstallType } from '../plugin';
 export enum TranslationClass {
   PLUGIN_LOADER = 'PluginLoader',
   PLUGIN_INSTALL_MODAL = 'PluginInstallModal',
+  DEVELOPER = 'Developer',
 }
 
 interface TranslationHelperProps {
@@ -47,6 +48,10 @@ const TranslationHelper: FC<TranslationHelperProps> = ({
                   ? t(TranslationClass.PLUGIN_INSTALL_MODAL + '.update.' + trans_text, i18n_args)
                   : t(TranslationClass.PLUGIN_INSTALL_MODAL + '.update.' + trans_text);
             }
+          case TranslationClass.DEVELOPER:
+            return i18n_args
+              ? t(TranslationClass.DEVELOPER + '.' + trans_text, i18n_args)
+              : t(TranslationClass.DEVELOPER + '.' + trans_text);
           default:
             logger.error('We should never fall in the default case!');
             return '';