Enable objdiff tab by default & add diff tab option (#1778)

* Enable objdiff tab by default & add diff tab option

* biome format --fix

Author: encounter

.env

@@ -10,5 +10,5 @@ FRONTEND_USE_IMAGE_PROXY=true
 FRONTEND_PWA=off
 SESSION_COOKIE_AGE=7776000
 PYTHONPATH=backend
-OBJDIFF_BASE=https://diff.decomp.dev/
+OBJDIFF_BASE=https://diff.decomp.me/
 #OBJDIFF_BASE=http://localhost:3000/

frontend/Dockerfile

@@ -39,7 +39,7 @@ ENV NEXT_PUBLIC_SENTRY_DSN=${NEXT_PUBLIC_SENTRY_DSN}
 ARG GITHUB_CLIENT_ID=9c5d3c7ca624a23b7c1c
 ENV GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
 
-ARG OBJDIFF_BASE=https://diff.decomp.dev/
+ARG OBJDIFF_BASE=https://diff.decomp.me/
 ENV OBJDIFF_BASE=${OBJDIFF_BASE}
 
 # allows for cache busting even if only backend changed

frontend/src/app/(navfooter)/settings/editor/EditorSettings.tsx

@@ -10,7 +10,8 @@ import {
     useLanguageServerEnabled,
     useVimModeEnabled,
     useThreeWayDiffBase,
-    useObjdiffClientEnabled,
+    useDefaultDiffTab,
+    DefaultDiffTab,
 } from "@/lib/settings";
 
 import Checkbox from "../Checkbox";
@@ -28,8 +29,7 @@ export default function EditorSettings() {
         useLanguageServerEnabled();
     const [vimModeEnabled, setVimModeEnabled] = useVimModeEnabled();
     const [threeWayDiffBase, setThreeWayDiffBase] = useThreeWayDiffBase();
-    const [objdiffClientEnabled, setObjdiffClientEnabled] =
-        useObjdiffClientEnabled();
+    const [defaultDiffTab, setDefaultDiffTab] = useDefaultDiffTab();
 
     const [downloadingLanguageServer, setDownloadingLanguageServer] =
         useState(false);
@@ -77,6 +77,15 @@ export default function EditorSettings() {
         },
     };
 
+    const defaultDiffTabOptions = {
+        [DefaultDiffTab.ASM_DIFFER]: {
+            label: "asm-differ",
+        },
+        [DefaultDiffTab.OBJDIFF]: {
+            label: "objdiff",
+        },
+    };
+
     return (
         <>
             <Section title="Automatic compilation">
@@ -113,6 +122,19 @@ export default function EditorSettings() {
                     options={threeWayDiffOptions}
                 />
             </Section>
+            <Section title="Default diff tab">
+                <div className="text-gray-11">
+                    Choose which diff tool should be shown by default when
+                    viewing a scratch.
+                </div>
+                <RadioList
+                    value={defaultDiffTab}
+                    onChange={(value: string) => {
+                        setDefaultDiffTab(value as DefaultDiffTab);
+                    }}
+                    options={defaultDiffTabOptions}
+                />
+            </Section>
             <Section title="Match progress bar">
                 <Checkbox
                     checked={matchProgressBarEnabled}
@@ -143,14 +165,6 @@ export default function EditorSettings() {
                     description="Enable vim bindings in the scratch editor"
                 />
             </Section>
-            <Section title="Experiments">
-                <Checkbox
-                    checked={objdiffClientEnabled}
-                    onChange={setObjdiffClientEnabled}
-                    label="Enable objdiff integration [alpha]"
-                    description="Enable objdiff tab in the scratch editor. Still under development."
-                />
-            </Section>
         </>
     );
 }

frontend/src/components/Diff/ObjdiffPanel.tsx

@@ -111,9 +111,12 @@ export default function ObjdiffPanel({
     }, [objdiffFrame.current, isDark, colors, codeFont, codeFontSize]);
 
     const url = useMemo(() => {
-        return `${process.env.OBJDIFF_BASE}?theme=${
-            isDark ? "decomp-me-dark" : "decomp-me-light"
-        }`;
+        const url = new URL(process.env.OBJDIFF_BASE, window.location.href);
+        url.searchParams.set(
+            "theme",
+            isDark ? "decomp-me-dark" : "decomp-me-light",
+        );
+        return url.toString();
     }, []);
 
     return (

frontend/src/components/Scratch/Scratch.tsx

@@ -14,13 +14,15 @@ import {
     useLanguageServerEnabled,
     useVimModeEnabled,
     useMatchProgressBarEnabled,
-    useObjdiffClientEnabled,
+    useDefaultDiffTab,
+    DefaultDiffTab,
 } from "@/lib/settings";
 
 import CompilerOpts from "../compiler/CompilerOpts";
 import CustomLayout, {
     activateTabInLayout,
     type Layout,
+    visitLayout,
 } from "../CustomLayout";
 import CompilationPanel from "../Diff/CompilationPanel";
 import CodeMirror from "../Editor/CodeMirror";
@@ -121,6 +123,24 @@ function getDefaultLayout(
     return "mobile_2row";
 }
 
+function cloneValue<T>(layout: T): T {
+    return JSON.parse(JSON.stringify(layout)) as T;
+}
+
+function applyDefaultDiffTab(
+    layout: Layout,
+    defaultDiffTab: DefaultDiffTab,
+): Layout {
+    const preferredTab =
+        defaultDiffTab === DefaultDiffTab.OBJDIFF ? TabId.OBJDIFF : TabId.DIFF;
+    visitLayout(layout, (node) => {
+        if (node.kind === "pane" && node.tabs.includes(preferredTab)) {
+            node.activeTab = preferredTab;
+        }
+    });
+    return layout;
+}
+
 export type Props = {
     scratch: Readonly<api.Scratch>;
     onChange: (scratch: Partial<api.Scratch>) => void;
@@ -150,6 +170,7 @@ export default function Scratch({
     const [autoRecompileDelaySetting] = useAutoRecompileDelaySetting();
     const [languageServerEnabledSetting] = useLanguageServerEnabled();
     const [matchProgressBarEnabledSetting] = useMatchProgressBarEnabled();
+    const [defaultDiffTab] = useDefaultDiffTab();
     const { compilation, isCompiling, isCompilationOld, compile } =
         api.useCompilation(
             scratch,
@@ -210,15 +231,13 @@ export default function Scratch({
     useEffect(() => {
         if (decompilationTabEnabled) {
             setLayout((layout) => {
-                const clone = { ...layout };
+                const clone = cloneValue(layout);
                 activateTabInLayout(clone, TabId.DECOMPILATION);
                 return clone;
             });
         }
     }, [decompilationTabEnabled]);
 
-    const [objdiffClientEnabled] = useObjdiffClientEnabled();
-
     // If the version of the scratch changes, refresh code editors
     useEffect(() => {
         incrementValueVersion();
@@ -378,22 +397,20 @@ export default function Scratch({
                 );
             case TabId.OBJDIFF:
                 return (
-                    objdiffClientEnabled && (
-                        <Tab
-                            key={id}
-                            tabKey={id}
-                            label="objdiff [alpha]"
-                            className={styles.diffTab}
-                        >
-                            {compilation && (
-                                <ObjdiffPanel
-                                    scratch={scratch}
-                                    compilation={compilation}
-                                    buildRunning={isCompiling}
-                                />
-                            )}
-                        </Tab>
-                    )
+                    <Tab
+                        key={id}
+                        tabKey={id}
+                        label="objdiff"
+                        className={styles.diffTab}
+                    >
+                        {compilation && (
+                            <ObjdiffPanel
+                                scratch={scratch}
+                                compilation={compilation}
+                                buildRunning={isCompiling}
+                            />
+                        )}
+                    </Tab>
                 );
             case TabId.DECOMPILATION:
                 return (
@@ -435,7 +452,12 @@ export default function Scratch({
 
         if (layoutName !== preferredLayout) {
             setLayoutName(preferredLayout);
-            setLayout(DEFAULT_LAYOUTS[preferredLayout]);
+            setLayout(
+                applyDefaultDiffTab(
+                    cloneValue(DEFAULT_LAYOUTS[preferredLayout]),
+                    defaultDiffTab,
+                ),
+            );
         }
     }
 

frontend/src/lib/api.ts

@@ -23,7 +23,6 @@ import type {
 } from "./api/types";
 import { scratchUrl } from "./api/urls";
 import { ignoreNextWarnBeforeUnload } from "./hooks";
-import { useObjdiffClientEnabled } from "./settings";
 
 function onErrorRetry<C>(
     error: ResponseError,
@@ -240,7 +239,6 @@ export function useCompilation(
         useState<Promise<void>>(null);
     const [compilation, setCompilation] = useState<Compilation>(initial);
     const [isCompilationOld, setIsCompilationOld] = useState(false);
-    const [objdiffClientEnabled] = useObjdiffClientEnabled();
     const sUrl = scratchUrl(scratch);
     const hasInitialized = useRef(false);
 
@@ -268,7 +266,7 @@ export function useCompilation(
             context: savedScratch
                 ? undefinedIfUnchanged(savedScratch, scratch, "context")
                 : scratch.context,
-            include_objects: objdiffClientEnabled,
+            include_objects: true,
         })
             .then((compilation: Compilation) => {
                 return compilation;
@@ -297,7 +295,7 @@ export function useCompilation(
         setCompileRequestPromise(promise);
 
         return promise;
-    }, [compileRequestPromise, savedScratch, scratch, objdiffClientEnabled]);
+    }, [compileRequestPromise, savedScratch, scratch]);
 
     // If the scratch we're looking at changes, we need to recompile
     const [url, setUrl] = useState(sUrl);

frontend/src/lib/settings.ts

@@ -8,6 +8,11 @@ export enum ThreeWayDiffBase {
     PREV = "prev",
 }
 
+export enum DefaultDiffTab {
+    ASM_DIFFER = "asm-differ",
+    OBJDIFF = "objdiff",
+}
+
 export const useTheme = createStorageKey<Theme>("theme", "auto");
 export const useAutoRecompileSetting = createStorageKey<boolean>(
     "autoRecompile",
@@ -47,9 +52,9 @@ export const useThreeWayDiffBase = createStorageKey<ThreeWayDiffBase>(
     "threeWayDiffBase",
     ThreeWayDiffBase.SAVED,
 );
-export const useObjdiffClientEnabled = createStorageKey<boolean>(
-    "objdiffClientEnabled",
-    false,
+export const useDefaultDiffTab = createStorageKey<DefaultDiffTab>(
+    "defaultDiffTab",
+    DefaultDiffTab.ASM_DIFFER,
 );
 export const diffCellBackgroundEnabled = createStorageKey<boolean>(
     "diffCellBackgroundEnabled",