Wire up some more

frida · Sep 24, 2024 · 23618dd · 23618dd
1 parent 71b3a3f
commit 23618dd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 13 deletions.
diff --git a/apps/tracer/src/DisassemblyView.css b/apps/tracer/src/DisassemblyView.css
@@ -7,3 +7,7 @@
     color: #e4e4e4;
     user-select: text;
 }
+
+a.disassembly-menu-open {
+    background-color: #ef6456;
+}
diff --git a/apps/tracer/src/DisassemblyView.tsx b/apps/tracer/src/DisassemblyView.tsx
@@ -1,7 +1,7 @@
 import "./DisassemblyView.css";
 import { useR2 } from "./use-r2.js";
-import { Spinner } from "@blueprintjs/core";
-import { useEffect, useState } from "react";
+import { hideContextMenu, Menu, MenuItem, showContextMenu, Spinner } from "@blueprintjs/core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 export interface DisassemblyViewProps {
     target?: DisassemblyTarget;
@@ -21,8 +21,9 @@ export interface InstructionTarget {
 }
 
 export default function DisassemblyView({ target }: DisassemblyViewProps = {}) {
-    const [r2Output, setR2Output] = useState("");
+    const [r2Output, setR2Output] = useState<string[]>([]);
     const [isLoading, setIsLoading] = useState(false);
+    const highlightedAddressAnchorRef = useRef<HTMLAnchorElement | null>(null);
     const { executeR2Command } = useR2();
 
     useEffect(() => {
@@ -46,13 +47,20 @@ export default function DisassemblyView({ target }: DisassemblyViewProps = {}) {
                 ].join("; ")
                 : `s ${t.address}; pd`;
             let result = await executeR2Command(command);
+            if (ignore) {
+                return;
+            }
             if (result === "") {
                 result = await executeR2Command("pdr");
             }
-            if (!ignore) {
-                setR2Output(result);
-                setIsLoading(false);
+            if (ignore) {
+                return;
             }
+
+            setR2Output(result
+                .split("<br />")
+                .map(line => line.replace(/\b0x[0-9a-f]+\b/, address => `<a>${address}</a>`)));
+            setIsLoading(false);
         }
 
         start();
@@ -62,13 +70,44 @@ export default function DisassemblyView({ target }: DisassemblyViewProps = {}) {
         };
     }, [target]);
 
-    if (isLoading) {
-        return (
-            <Spinner className="disassembly-view" />
-        );
-    }
+    const handleAddressMenuClose = useCallback(() => {
+        hideContextMenu();
+
+        highlightedAddressAnchorRef.current!.classList.remove("disassembly-menu-open");
+        highlightedAddressAnchorRef.current = null;
+    }, []);
+
+    const addressMenu = useMemo(() => (
+        <Menu>
+            <MenuItem text="Add instruction-level hook" icon="add" />
+        </Menu>
+    ), [handleAddressMenuClose]);
+
+    const handleContextMenu = useCallback((event: React.MouseEvent) => {
+        const target = event.target;
+        if (!(target instanceof HTMLAnchorElement)) {
+            return;
+        }
+
+        event.preventDefault();
+
+        showContextMenu({
+            content: addressMenu,
+            onClose: handleAddressMenuClose,
+            targetOffset: {
+                left: event.clientX,
+                top: event.clientY
+            },
+        });
+
+        highlightedAddressAnchorRef.current = target;
+        target.classList.add("disassembly-menu-open");
+    }, [handleAddressMenuClose, addressMenu]);
 
     return (
-        <div className="disassembly-view" dangerouslySetInnerHTML={{ __html: r2Output }} />
+        <div className="disassembly-view" onContextMenu={handleContextMenu}>
+            {isLoading ? (<Spinner className="disassembly-view" />) : undefined}
+            {r2Output.map((line, i) => <div key={i} dangerouslySetInnerHTML={{ __html: line }} />)}
+        </div>
     );
 }
diff --git a/apps/tracer/src/EventView.css b/apps/tracer/src/EventView.css
@@ -37,7 +37,7 @@
 }
 
 .event-highlighted {
-    background-color: #EF6456;
+    background-color: #ef6456;
 }
 
 .event-highlighted .event-timestamp {