Wire up some more

frida_tools/tracer.py

@@ -16,7 +16,7 @@
 from collections import OrderedDict
 from dataclasses import dataclass
 from pathlib import Path
-from typing import Callable, Generator, List, Optional, Union
+from typing import Callable, Generator, List, Optional, Set, Union
 
 import frida
 import websockets.asyncio.server
@@ -48,6 +48,8 @@ class TracerApplication(ConsoleApplication, UI):
         def __init__(self) -> None:
             super().__init__(await_ctrl_c)
             self._handlers = OrderedDict()
+            self._ui_sockets: Set[websockets.asyncio.server.ServerConnection] = set()
+            self._asyncio_loop = None
             self._palette = [Fore.CYAN, Fore.MAGENTA, Fore.YELLOW, Fore.GREEN, Fore.RED, Fore.BLUE]
             self._next_color = 0
             self._attributes_by_thread_id = {}
@@ -187,6 +189,9 @@ def _needs_target(self) -> bool:
             return True
 
         def _start(self) -> None:
+            worker = threading.Thread(target=self._run_ui_server, name="ui-server", daemon=True)
+            worker.start()
+
             if self._output_path is not None:
                 self._output = OutputFile(self._output_path)
 
@@ -207,9 +212,6 @@ def _start(self) -> None:
                 self._exit(1)
                 return
 
-            worker = threading.Thread(target=self._run_ui_server, name="ui-server", daemon=True)
-            worker.start()
-
         def _stop(self) -> None:
             self._tracer.stop()
             self._tracer = None
@@ -241,8 +243,10 @@ def on_trace_error(self, message: str) -> None:
             self._exit(1)
 
         def on_trace_events(self, events) -> None:
+            self._asyncio_loop.call_soon_threadsafe(lambda: self._asyncio_loop.create_task(self._broadcast_trace_events(events)))
+
             no_attributes = Style.RESET_ALL
-            for timestamp, thread_id, depth, message in events:
+            for target_id, timestamp, thread_id, depth, message in events:
                 if self._output is not None:
                     self._output.append(message + "\n")
                 elif self._quiet:
@@ -285,6 +289,7 @@ def _run_ui_server(self):
             asyncio.run(self._handle_ui_requests())
 
         async def _handle_ui_requests(self):
+            self._asyncio_loop = asyncio.get_running_loop()
             async with websockets.asyncio.server.serve(
                 self._handle_websocket_connection, "localhost", 1337, process_request=self._handle_asset_request
             ):
@@ -294,6 +299,7 @@ async def _handle_websocket_connection(self, websocket: websockets.asyncio.serve
             if self._tracer is None:
                 return
 
+            self._ui_sockets.add(websocket)
             try:
                 message = {
                     "type": "handlers:sync",
@@ -345,6 +351,20 @@ async def _handle_websocket_connection(self, websocket: websockets.asyncio.serve
                 import traceback
                 traceback.print_exc()
                 #pass
+            finally:
+                self._ui_sockets.remove(websocket)
+
+        async def _broadcast_trace_events(self, events):
+            for websocket in self._ui_sockets:
+                print("Sending", len(events), "events")
+                await websocket.send(
+                    json.dumps(
+                        {
+                            "type": "events:add",
+                            "events": events,
+                        }
+                    )
+                )
 
         def _handle_asset_request(
             self, connection: websockets.asyncio.server.ServerConnection, request: websockets.asyncio.server.Request
@@ -539,7 +559,7 @@ def _on_message(self, message, data, ui) -> None:
     def _try_handle_message(self, mtype, params, data, ui) -> False:
         if mtype == "events:add":
             events = [
-                (timestamp, thread_id, depth, message)
+                (target_id, timestamp, thread_id, depth, message)
                 for target_id, timestamp, thread_id, depth, message in params["events"]
             ]
             ui.on_trace_events(events)

ui/tracer/package.json

@@ -15,6 +15,7 @@
     "monaco-editor": "^0.51.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-scroll-to-bottom": "^4.2.0",
     "react-use-websocket": "^4.8.1",
     "use-debounce": "^10.0.3"
   },

ui/tracer/src/App.css

@@ -1,3 +1,8 @@
+.top-area {
+    display: flex;
+    flex: 1;
+}
+
 .navigation-area {
     display: flex;
     flex-direction: column;

ui/tracer/src/App.tsx

@@ -1,8 +1,10 @@
 import "./App.css";
 import AddTargetsDialog from "./AddTargetsDialog.tsx";
+import EventView from "./EventView.tsx";
 import HandlerEditor from "./HandlerEditor.tsx";
 import HandlerList from "./HandlerList.tsx";
 import {
+    Event,
     Handler,
     HandlerId,
     ScopeId,
@@ -12,6 +14,7 @@ import {
 import {
     BlueprintProvider,
     Callout,
+    Collapse,
     Button,
     ButtonGroup,
 } from "@blueprintjs/core";
@@ -25,9 +28,13 @@ export default function App() {
     const [handlerCode, setHandlerCode] = useState("");
     const [draftedCode, setDraftedCode] = useState("");
     const [addingTargets, setAddingTargets] = useState(false);
+    const [eventsVisible, setEventsVisible] = useState(false);
+    const [events, setEvents] = useState<Event[]>([]);
     const [stagedItems, setStagedItems] = useState<StagedItem[]>([]);
     const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<TracerMessage>("ws://localhost:1337" /* window.location.origin */);
 
+    console.log("render() events.length:", events.length);
+
     function handleHandlerSelection(id: HandlerId) {
         setSelectedHandler(id);
         sendJsonMessage({ type: "handler:load", id });
@@ -72,14 +79,20 @@ export default function App() {
             case "handlers:add":
                 setHandlers(handlers.concat(lastJsonMessage.handlers));
                 break;
-            case "handler:loaded":
+            case "handler:loaded": {
                 const { code } = lastJsonMessage;
                 setHandlerCode(code);
                 setDraftedCode(code);
                 break;
+            }
             case "targets:staged":
                 setStagedItems(lastJsonMessage.items)
                 break;
+            case "events:add":
+                console.log("Old events length:", events.length);
+                console.log("Message events length:", lastJsonMessage.events.length);
+                setEvents(events.concat(lastJsonMessage.events));
+                break;
             default:
                 console.log("TODO:", lastJsonMessage);
                 break;
@@ -96,33 +109,39 @@ export default function App() {
 
     return (
         <>
-            <section className="navigation-area">
-                <HandlerList
-                    handlers={handlers}
-                    selectedScope={selectedScope}
-                    onScopeSelect={scope => setSelectedScope(scope)}
-                    selectedHandler={selectedHandler}
-                    onHandlerSelect={handleHandlerSelection}
-                    />
-                <ButtonGroup className="target-actions" vertical={true}>
-                    <Button intent="success" icon="add" fill={true} onClick={() => setAddingTargets(true)}>Add</Button>
-                </ButtonGroup>
-            </section>
-            <section className="work-area">
-                {connectionError}
-                <ButtonGroup minimal={true}>
-                    <Button
-                        icon="rocket-slant"
-                        disabled={draftedCode === handlerCode}
-                        onClick={() => deploy(draftedCode)}>Deploy</Button>
-                </ButtonGroup>
-                <HandlerEditor
-                    handlerId={selectedHandler}
-                    handlerCode={handlerCode}
-                    onChange={setDraftedCode}
-                    onSave={deploy}
-                    />
+            <section className="top-area">
+                <section className="navigation-area">
+                    <HandlerList
+                        handlers={handlers}
+                        selectedScope={selectedScope}
+                        onScopeSelect={scope => setSelectedScope(scope)}
+                        selectedHandler={selectedHandler}
+                        onHandlerSelect={handleHandlerSelection}
+                        />
+                    <ButtonGroup className="target-actions" vertical={true} minimal={true} alignText="left">
+                        <Button intent="success" icon="add" onClick={() => setAddingTargets(true)}>Add</Button>
+                        <Button icon="lightning" onClick={() => setEventsVisible(!eventsVisible)}>{eventsVisible ? "Hide Events" : "Show Events"}</Button>
+                    </ButtonGroup>
+                </section>
+                <section className="work-area">
+                    {connectionError}
+                    <ButtonGroup minimal={true}>
+                        <Button
+                            icon="rocket-slant"
+                            disabled={draftedCode === handlerCode}
+                            onClick={() => deploy(draftedCode)}>Deploy</Button>
+                    </ButtonGroup>
+                    <HandlerEditor
+                        handlerId={selectedHandler}
+                        handlerCode={handlerCode}
+                        onChange={setDraftedCode}
+                        onSave={deploy}
+                        />
+                </section>
             </section>
+            <Collapse className="bottom-area" isOpen={eventsVisible}>
+                <EventView events={events} />
+            </Collapse>
             <AddTargetsDialog
                 isOpen={addingTargets}
                 stagedItems={stagedItems}
@@ -142,6 +161,7 @@ type TracerMessage =
     | HandlersAddMessage
     | HandlerLoadedMessage
     | TargetsStagedMessage
+    | EventsAddMessage
     ;
 
 interface HandlersSyncMessage {
@@ -163,3 +183,8 @@ interface TargetsStagedMessage {
     type: "targets:staged";
     items: StagedItem[];
 }
+
+interface EventsAddMessage {
+    type: "events:add";
+    events: Event[];
+}

ui/tracer/src/EventView.css

@@ -0,0 +1,20 @@
+.event-view {
+    border-top: 5px groove #ef6456;
+}
+
+.event-items {
+    min-height: 200px;
+    max-height: 200px;
+    padding: 5px;
+    font-family: monospace;
+    font-size: 10px;
+}
+
+.event-timestamp {
+    margin-right: 15px;
+    color: #555;
+}
+
+.event-message {
+    font-weight: bold;
+}

ui/tracer/src/EventView.tsx

@@ -0,0 +1,22 @@
+import "./EventView.css";
+import { Event } from "./model.js";
+import ScrollToBottom from "react-scroll-to-bottom";
+
+export default function EventView({ events }: { events: Event[] }) {
+    return (
+        <ScrollToBottom className="event-view">
+            <div className="event-items">
+                {
+                    events.map(([targetId, timestamp, threadId, depth, message], i) => {
+                        return (
+                            <div key={i}>
+                                <span className="event-timestamp">{timestamp} ms</span>
+                                <span className="event-message">{message}</span>
+                            </div>
+                        );
+                    })
+                }
+            </div>
+        </ScrollToBottom>
+    );
+}

ui/tracer/src/index.css

@@ -4,4 +4,5 @@ html, body, #root {
 
 #root {
     display: flex;
+    flex-direction: column;
 }

ui/tracer/src/model.ts

@@ -11,3 +11,5 @@ export type StagedItemId = number;
 
 export type ScopeName = string;
 export type MemberName = string | [string, string];
+
+export type Event = [targetId: HandlerId, timestamp: number, threadId: number, depth: number, message: string];