From 768a9192ea59f5625379037968d7f7ebd8145c9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Andr=C3=A9=20Vadla=20Ravn=C3=A5s?= <oleavr@gmail.com>
Date: Sun, 6 Oct 2024 23:37:46 +0200
Subject: [PATCH] tracer: Support customizing memory view formatting

---
 apps/tracer/src/MemoryView.css | 10 ++++++++++
 apps/tracer/src/MemoryView.tsx | 32 +++++++++++++++++++++++++++-----
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/apps/tracer/src/MemoryView.css b/apps/tracer/src/MemoryView.css
index 86ac469..979571c 100644
--- a/apps/tracer/src/MemoryView.css
+++ b/apps/tracer/src/MemoryView.css
@@ -7,3 +7,13 @@
     color: #e4e4e4;
     user-select: text;
 }
+
+.memory-view .bp5-segmented-control {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+}
+
+.memory-view .bp5-segmented-control .bp5-button {
+    font-size: 10px;
+}
diff --git a/apps/tracer/src/MemoryView.tsx b/apps/tracer/src/MemoryView.tsx
index d9298c3..e7c2ecb 100644
--- a/apps/tracer/src/MemoryView.tsx
+++ b/apps/tracer/src/MemoryView.tsx
@@ -1,5 +1,5 @@
 import "./MemoryView.css";
-import { Spinner } from "@blueprintjs/core";
+import { SegmentedControl, Spinner } from "@blueprintjs/core";
 import { useR2 } from "@frida/react-use-r2";
 import { useEffect, useState } from "react";
 
@@ -8,7 +8,8 @@ export interface MemoryViewProps {
 }
 
 export default function MemoryView({ address }: MemoryViewProps) {
-    const [data, setData] = useState<string>("");
+    const [format, setFormat] = useState("x");
+    const [data, setData] = useState("");
     const [isLoading, setIsLoading] = useState(false);
     const { executeR2Command } = useR2();
 
@@ -21,7 +22,7 @@ export default function MemoryView({ address }: MemoryViewProps) {
         setIsLoading(true);
 
         async function start() {
-            const data = await executeR2Command(`x @ 0x${address!.toString(16)}`);
+            const data = await executeR2Command(`${format} @ 0x${address!.toString(16)}`);
             if (ignore) {
                 return;
             }
@@ -35,7 +36,7 @@ export default function MemoryView({ address }: MemoryViewProps) {
         return () => {
             ignore = true;
         };
-    }, [address, executeR2Command]);
+    }, [format, address, executeR2Command]);
 
     if (isLoading) {
         return (
@@ -44,6 +45,27 @@ export default function MemoryView({ address }: MemoryViewProps) {
     }
 
     return (
-        <div className="memory-view" dangerouslySetInnerHTML={{ __html: data }} />
+        <div className="memory-view">
+            <SegmentedControl
+                small={true}
+                options={[
+                    {
+                        label: "Raw",
+                        value: "x",
+                    },
+                    {
+                        label: "64",
+                        value: "pxq"
+                    },
+                    {
+                        label: "32",
+                        value: "pxw"
+                    },
+                ]}
+                defaultValue="x"
+                onValueChange={setFormat}
+            />
+            <div dangerouslySetInnerHTML={{ __html: data }} />
+        </div>
     );
 }