add unminify mode

package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "color": "^4.2.3",
-    "decky-frontend-lib": "^3.24.3",
+    "decky-frontend-lib": "^3.25.0",
     "lodash": "^4.17.21",
     "react-icons": "^4.12.0"
   },

src/deckyPatches/SteamTabElementsFinder.tsx

@@ -0,0 +1,21 @@
+import { getGamepadNavigationTrees } from "decky-frontend-lib";
+
+export function getElementFromNavID(navID: string) {
+  const all = getGamepadNavigationTrees();
+  if (!all) return null;
+  const tree = all?.find((e: any) => e.m_ID == navID);
+  if (!tree) return null;
+  return tree.Root.Element;
+}
+export function getSP() {
+  return getElementFromNavID("root_1_");
+}
+export function getQAM() {
+  return getElementFromNavID("QuickAccess-NA");
+}
+export function getMainMenu() {
+  return getElementFromNavID("MainNavMenuContainer");
+}
+export function getRootElements() {
+  return [getSP(), getQAM(), getMainMenu()].filter((e) => e);
+}

src/deckyPatches/UnminifyMode.tsx

@@ -0,0 +1,62 @@
+import { unminifyClass } from "decky-frontend-lib";
+import { getRootElements } from "./SteamTabElementsFinder";
+
+export function unminifyElement(element: Element) {
+  if (element.classList.length === 0) return;
+
+  const classList = Array.from(element.classList);
+  const unminifiedClassList = classList.map((c) => unminifyClass(c) ?? c);
+  element.setAttribute("unminified-class", unminifiedClassList.join(" "));
+}
+
+export function recursivelyUnminifyElement(element: Element) {
+  unminifyElement(element);
+  Array.from(element.children).forEach(recursivelyUnminifyElement);
+}
+
+export function initialUnminification(rootElement: any) {
+  const allElements = rootElement.ownerDocument.all as HTMLAllCollection;
+  Array.from(allElements).forEach(unminifyElement);
+}
+
+var mutationObservers: MutationObserver[] = [];
+
+export function disconnectMutationObservers() {
+  mutationObservers.forEach((observer) => observer.disconnect());
+  mutationObservers = [];
+}
+
+export function mutationObserverCallback(mutations: MutationRecord[]) {
+  mutations.forEach((mutation) => {
+    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+      mutation.addedNodes.forEach((node) => {
+        recursivelyUnminifyElement(node as Element);
+      });
+    }
+    if (mutation.type === "attributes" && mutation.attributeName === "class") {
+      unminifyElement(mutation.target as HTMLElement);
+    }
+  });
+}
+
+export function setUpMutationObserver(rootElement: any) {
+  const mutationObserver = new MutationObserver(mutationObserverCallback);
+  mutationObserver.observe(rootElement.ownerDocument.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+    childList: true,
+    subtree: true,
+  });
+  mutationObservers.push(mutationObserver);
+}
+
+export function enableUnminifyMode() {
+  if (mutationObservers.length > 0) disconnectMutationObservers();
+  const roots = getRootElements();
+  roots.forEach(initialUnminification);
+  roots.forEach(setUpMutationObserver);
+}
+
+export function disableUnminifyMode() {
+  disconnectMutationObservers();
+}

src/index.tsx

@@ -4,11 +4,8 @@ import {
   PanelSection,
   PanelSectionRow,
   ServerAPI,
-  DialogButton,
-  Focusable,
-  Navigation,
 } from "decky-frontend-lib";
-import { useEffect, useState, FC } from "react";
+import { useEffect, useState } from "react";
 import * as python from "./python";
 import * as api from "./api";
 import { RiPaintFill } from "react-icons/ri";
@@ -21,8 +18,8 @@ import { Flags, Theme } from "./ThemeTypes";
 import { dummyFunction, getInstalledThemes, reloadBackend } from "./python";
 import { bulkThemeUpdateCheck } from "./logic/bulkThemeUpdateCheck";
 import { disableNavPatch, enableNavPatch } from "./deckyPatches/NavPatch";
-import { FaCog, FaStore } from "react-icons/fa";
 import { SettingsPageRouter } from "./pages/settings/SettingsPageRouter";
+import { disableUnminifyMode } from "./deckyPatches/UnminifyMode";
 
 function Content() {
   const { localThemeList, setGlobalState } = useCssLoaderState();
@@ -205,6 +202,7 @@ export default definePlugin((serverApi: ServerAPI) => {
     onDismount: () => {
       const { updateCheckTimeout } = state.getPublicState();
       if (updateCheckTimeout) clearTimeout(updateCheckTimeout);
+      disableUnminifyMode();
       disableNavPatch();
     },
   };

src/pages/settings/PluginSettings.tsx

@@ -1,7 +1,7 @@
 import { Focusable, ToggleField } from "decky-frontend-lib";
 import { useMemo, useState, useEffect } from "react";
 import { useCssLoaderState } from "../../state";
-import { storeWrite, toast } from "../../python";
+import { toast } from "../../python";
 import { setNavPatch } from "../../deckyPatches/NavPatch";
 import {
   getWatchState,
@@ -11,9 +11,10 @@ import {
   getBetaTranslationsState,
 } from "../../backend/pythonMethods/pluginSettingsMethods";
 import { booleanStoreWrite } from "../../backend/pythonMethods/storeUtils";
+import { disableUnminifyMode, enableUnminifyMode } from "../../deckyPatches/UnminifyMode";
 
 export function PluginSettings() {
-  const { navPatchInstance } = useCssLoaderState();
+  const { navPatchInstance, unminifyModeOn, setGlobalState } = useCssLoaderState();
   const [serverOn, setServerOn] = useState<boolean>(false);
   const [watchOn, setWatchOn] = useState<boolean>(false);
   const [betaTranslationsOn, setBetaTranslationsOn] = useState<boolean>(false);
@@ -39,6 +40,15 @@ export function PluginSettings() {
     void fetchBetaTranslationsState();
   }, []);
 
+  function setUnminify(enabled: boolean) {
+    setGlobalState("unminifyModeOn", enabled);
+    if (enabled) {
+      enableUnminifyMode();
+      return;
+    }
+    disableUnminifyMode();
+  }
+
   async function setWatch(enabled: boolean) {
     await toggleWatchState(enabled, false);
     await fetchWatchState();
@@ -95,6 +105,14 @@ export function PluginSettings() {
           onChange={setWatch}
         />
       </Focusable>
+      <Focusable>
+        <ToggleField
+          checked={unminifyModeOn}
+          label="Unminify Mode"
+          description="Adds unminified classnames to devtools view, resets on steam client restart, VERY VERY LAGGY!"
+          onChange={setUnminify}
+        />
+      </Focusable>
     </div>
   );
 }

src/state/CssLoaderState.tsx

@@ -42,6 +42,7 @@ interface PublicCssLoaderState {
   nextUpdateCheckTime: number;
   updateCheckTimeout: NodeJS.Timeout | undefined;
 
+  unminifyModeOn: boolean;
   navPatchInstance: Patch | undefined;
   updateStatuses: UpdateStatus[];
   selectedPreset: Theme | undefined;
@@ -152,6 +153,7 @@ export class CssLoaderState {
   private submissionThemeList: ThemeQueryResponse = { total: 0, items: [] };
   private backendVersion: number = 6;
   private hiddenMotd: string = "";
+  private unminifyModeOn: boolean = false;
 
   // You can listen to this eventBus' 'stateUpdate' event and use that to trigger a useState or other function that causes a re-render
   public eventBus = new EventTarget();
@@ -175,6 +177,7 @@ export class CssLoaderState {
       unpinnedThemes: this.unpinnedThemes,
       isInstalling: this.isInstalling,
       hiddenMotd: this.hiddenMotd,
+      unminifyModeOn: this.unminifyModeOn,
 
       navPatchInstance: this.navPatchInstance,
       selectedRepo: this.selectedRepo,