Wire up some more

frida_tools/tracer.py

@@ -50,9 +50,9 @@ def __init__(self) -> None:
             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._palette = ["cyan", "magenta", "yellow", "green", "red", "blue"]
             self._next_color = 0
-            self._attributes_by_thread_id = {}
+            self._style_by_thread_id = {}
             self._last_event_tid = -1
 
         def _add_options(self, parser: argparse.ArgumentParser) -> None:
@@ -242,18 +242,22 @@ def on_trace_error(self, message: str) -> None:
             self._print(Fore.RED + Style.BRIGHT + "Error" + Style.RESET_ALL + ": " + message)
             self._exit(1)
 
-        def on_trace_events(self, events) -> None:
+        def on_trace_events(self, raw_events) -> None:
+            events = [(target_id, timestamp, thread_id, depth, message, self._get_style(thread_id))
+                      for target_id, timestamp, thread_id, depth, message in raw_events]
             self._asyncio_loop.call_soon_threadsafe(lambda: self._asyncio_loop.create_task(self._broadcast_trace_events(events)))
 
             no_attributes = Style.RESET_ALL
-            for target_id, timestamp, thread_id, depth, message in events:
+            for target_id, timestamp, thread_id, depth, message, style in events:
                 if self._output is not None:
                     self._output.append(message + "\n")
                 elif self._quiet:
                     self._print(message)
                 else:
                     indent = depth * "   | "
-                    attributes = self._get_attributes(thread_id)
+                    attributes = getattr(Fore, style[0].upper())
+                    if len(style) > 1:
+                        attributes += getattr(Style, style[1].upper())
                     if thread_id != self._last_event_tid:
                         self._print("%s           /* TID 0x%x */%s" % (attributes, thread_id, Style.RESET_ALL))
                         self._last_event_tid = thread_id
@@ -274,16 +278,16 @@ def on_trace_handler_load(self, target: TraceTarget, handler: str, source: str)
         def _register_handler(self, target: TraceTarget, source: str) -> None:
             self._handlers[target.identifier] = (target, source)
 
-        def _get_attributes(self, thread_id):
-            attributes = self._attributes_by_thread_id.get(thread_id, None)
-            if attributes is None:
+        def _get_style(self, thread_id):
+            style = self._style_by_thread_id.get(thread_id, None)
+            if style is None:
                 color = self._next_color
                 self._next_color += 1
-                attributes = self._palette[color % len(self._palette)]
+                style = [self._palette[color % len(self._palette)]]
                 if (1 + int(color / len(self._palette))) % 2 == 0:
-                    attributes += Style.BRIGHT
-                self._attributes_by_thread_id[thread_id] = attributes
-            return attributes
+                    style.append("bright")
+                self._style_by_thread_id[thread_id] = style
+            return style
 
         def _run_ui_server(self):
             asyncio.run(self._handle_ui_requests())

ui/tracer/src/EventView.css

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

ui/tracer/src/EventView.tsx

@@ -10,19 +10,51 @@ export interface EventViewProps {
 
 export type ActivateEventHandler = (id: HandlerId) => void;
 
+const NON_BLOCKING_SPACE = "\u00A0";
+const INDENT = NON_BLOCKING_SPACE.repeat(3) + "|" + NON_BLOCKING_SPACE;
+
 export default function EventView({ events, onActivate }: EventViewProps) {
+    let lastTid: number | null = null;
+
     return (
         <ScrollToBottom className="event-view">
             <div className="event-items">
                 {
-                    events.map(([targetId, timestamp, threadId, depth, message], i) => {
-                        return (
+                    events.reduce((result, [targetId, timestamp, threadId, depth, message, style], i) => {
+                        let timestampStr = timestamp.toString();
+                        const timestampPaddingNeeded = Math.max(6 - timestampStr.length, 0);
+                        for (let i = 0; i !== timestampPaddingNeeded; i++) {
+                            timestampStr = NON_BLOCKING_SPACE + timestampStr;
+                        }
+
+                        const colorClass = "ansi-" + style.join("-");
+
+                        if (threadId !== lastTid) {
+                            result.push(
+                                <div key={i + "-heading"} className={"event-heading " + colorClass}>
+                                    /* TID 0x{threadId.toString(16)} */
+                                </div>
+                            );
+                            lastTid = threadId;
+                        }
+
+                        result.push(
                             <div key={i}>
-                                <span className="event-timestamp">{timestamp} ms</span>
-                                <Button className="event-message" minimal={true} onClick={() => onActivate(targetId)}>{message}</Button>
+                                <span className="event-timestamp">{timestampStr} ms</span>
+                                <span className={"event-indent " + colorClass}>{INDENT.repeat(depth)}</span>
+                                <Button
+                                    className={"event-message " + colorClass}
+                                    minimal={true}
+                                    alignText="left"
+                                    onClick={() => onActivate(targetId)}
+                                    >
+                                    {message}
+                                </Button>
                             </div>
                         );
-                    })
+
+                        return result;
+                    }, [] as JSX.Element[])
                 }
             </div>
         </ScrollToBottom>

ui/tracer/src/index.css

@@ -6,3 +6,45 @@ html, body, #root {
     display: flex;
     flex-direction: column;
 }
+
+.ansi-cyan {
+    color: #06989a !important;
+}
+.ansi-cyan-bright {
+    color: #34e2e2 !important;
+}
+
+.ansi-magenta {
+    color: #75507b !important;
+}
+.ansi-magenta-bright {
+    color: #ad7fa8 !important;
+}
+
+.ansi-yellow {
+    color: #c4a000 !important;
+}
+.ansi-yellow-bright {
+    color: #fce94f !important;
+}
+
+.ansi-green {
+    color: #4e9a06 !important;
+}
+.ansi-green-bright {
+    color: #8ae234 !important;
+}
+
+.ansi-red {
+    color: #cc0000 !important;
+}
+.ansi-red-bright {
+    color: #ef2929 !important;
+}
+
+.ansi-blue {
+    color: #3465a4 !important;
+}
+.ansi-blue-bright {
+    color: #729fcf !important;
+}

ui/tracer/src/model.ts

@@ -12,4 +12,4 @@ 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];
+export type Event = [targetId: HandlerId, timestamp: number, threadId: number, depth: number, message: string, style: string[]];