From 3fa5210930397e6a96d8e3465f36a80e011e31e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Andr=C3=A9=20Vadla=20Ravn=C3=A5s?= <oleavr@gmail.com>
Date: Mon, 7 Oct 2024 00:41:48 +0200
Subject: [PATCH] tracer: Add address controls to the memory view

---
 apps/tracer/src/App.tsx        |  5 ++-
 apps/tracer/src/MemoryView.css | 22 +++++++---
 apps/tracer/src/MemoryView.tsx | 79 ++++++++++++++++++++++++----------
 3 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/apps/tracer/src/App.tsx b/apps/tracer/src/App.tsx
index 2558937..bbbddb2 100644
--- a/apps/tracer/src/App.tsx
+++ b/apps/tracer/src/App.tsx
@@ -100,7 +100,10 @@ export default function App() {
     );
 
     const memoryView = (
-        <MemoryView address={memoryLocation} />
+        <MemoryView
+            address={memoryLocation}
+            onSelectAddress={showMemoryLocation}
+        />
     );
 
     return (
diff --git a/apps/tracer/src/MemoryView.css b/apps/tracer/src/MemoryView.css
index 979571c..b7e46a0 100644
--- a/apps/tracer/src/MemoryView.css
+++ b/apps/tracer/src/MemoryView.css
@@ -1,5 +1,4 @@
 .memory-view {
-    padding: 5px;
     overflow: auto;
     font-family: monospace;
     font-size: 10px;
@@ -8,12 +7,25 @@
     user-select: text;
 }
 
+.memory-view-toolbar {
+    display: flex;
+    background-color: white;
+    padding: 5px 7px;
+    border: 1px solid;
+}
+
+.memory-view-data {
+    padding: 5px 7px;
+}
+
+.memory-view .bp5-control-group .bp5-input {
+    font-size: 12px;
+}
+
 .memory-view .bp5-segmented-control {
-    position: absolute;
-    bottom: 5px;
-    right: 5px;
+    margin-left: 20px;
 }
 
 .memory-view .bp5-segmented-control .bp5-button {
-    font-size: 10px;
+    font-size: 12px;
 }
diff --git a/apps/tracer/src/MemoryView.tsx b/apps/tracer/src/MemoryView.tsx
index e7c2ecb..bd444d2 100644
--- a/apps/tracer/src/MemoryView.tsx
+++ b/apps/tracer/src/MemoryView.tsx
@@ -1,13 +1,17 @@
 import "./MemoryView.css";
-import { SegmentedControl, Spinner } from "@blueprintjs/core";
+import { Button, ControlGroup, InputGroup, SegmentedControl, Spinner } from "@blueprintjs/core";
 import { useR2 } from "@frida/react-use-r2";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export interface MemoryViewProps {
     address?: bigint;
+    onSelectAddress: SelectAddressHandler;
 }
 
-export default function MemoryView({ address }: MemoryViewProps) {
+export type SelectAddressHandler = (address: bigint) => void;
+
+export default function MemoryView({ address, onSelectAddress }: MemoryViewProps) {
+    const addressInputRef = useRef<HTMLInputElement>(null);
     const [format, setFormat] = useState("x");
     const [data, setData] = useState("");
     const [isLoading, setIsLoading] = useState(false);
@@ -38,6 +42,19 @@ export default function MemoryView({ address }: MemoryViewProps) {
         };
     }, [format, address, executeR2Command]);
 
+    useEffect(() => {
+        if (address === undefined) {
+            return;
+        }
+
+        addressInputRef.current!.value = `0x${address.toString(16)}`;
+    }, [address]);
+
+    const adjustAddress = useCallback((delta: number) => {
+        const newAddress = BigInt(addressInputRef.current!.value) + BigInt(delta);
+        onSelectAddress(newAddress);
+    }, [onSelectAddress]);
+
     if (isLoading) {
         return (
             <Spinner className="memory-view" />
@@ -46,26 +63,42 @@ export default function MemoryView({ address }: MemoryViewProps) {
 
     return (
         <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 className="memory-view-toolbar">
+                <ControlGroup>
+                    <Button icon="arrow-left" onClick={() => adjustAddress(-16)}></Button>
+                    <InputGroup
+                        inputRef={addressInputRef}
+                        onKeyDown={e => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                onSelectAddress(BigInt(addressInputRef.current!.value));
+                            }
+                        }}
+                        placeholder="Memory address…"
+                    />
+                    <Button icon="arrow-right" onClick={() => adjustAddress(16)}></Button>
+                </ControlGroup>
+                <SegmentedControl
+                    small={true}
+                    options={[
+                        {
+                            label: "Raw",
+                            value: "x",
+                        },
+                        {
+                            label: "64",
+                            value: "pxq"
+                        },
+                        {
+                            label: "32",
+                            value: "pxw"
+                        },
+                    ]}
+                    defaultValue="x"
+                    onValueChange={setFormat}
+                />
+            </div>
+            <div className="memory-view-data" dangerouslySetInnerHTML={{ __html: data }} />
         </div>
     );
 }