tracer: Improve the event view

- Handle newlines and whitespace. - Support ANSI colors.
frida · Oct 15, 2024 · 551cbee · 551cbee
1 parent 7b69911
commit 551cbee
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 27 deletions.
diff --git a/apps/tracer/package-lock.json b/apps/tracer/package-lock.json
diff --git a/apps/tracer/package.json b/apps/tracer/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^5.12.0",
+    "@curvenote/ansi-to-react": "^7.0.0",
     "@frida/react-use-r2": "^1.0.2",
     "@monaco-editor/react": "^4.6.0",
     "monaco-editor": "^0.51.0",

diff --git a/apps/tracer/src/EventView.css b/apps/tracer/src/EventView.css
@@ -12,27 +12,21 @@
     margin-left: 104px;
 }
 
-.event-item {
-    display: grid;
-    grid-template-columns: min-content;
-    white-space: nowrap;
-}
-
-.event-summary {
-    grid-row: 1;
-    grid-column: 1;
+.event-summary .bp5-button {
+    padding-top: 7px;
+    white-space: pre;
 }
 
 .event-details {
-    grid-row: 2;
-    grid-column: 1;
-    padding-right: 24px !important;
+    display: inline-block;
+    margin: 3px 0 0 86px;
 }
 
 .event-timestamp {
-    padding: 0 10px;
+    display: inline-block;
+    padding: 7px;
     color: #555;
-    vertical-align: middle;
+    vertical-align: top;
     text-align: right;
 }
 
@@ -45,18 +39,6 @@
     outline: 0;
 }
 
-.event-selected .event-summary {
-    background-color: #ef6456;
-}
-
-.event-selected .event-timestamp {
-    color: white !important;
-}
-
-.event-selected .event-message {
-    color: white !important;
-}
-
 .event-item .bp5-card {
     color: #1e1e1e;
 }
@@ -81,6 +63,16 @@
     font-size: 10px;
 }
 
+.event-selected {
+    background: linear-gradient(to right, #ef6456, #1e1e1e);
+    background-size: 90px;
+    background-repeat: no-repeat;
+}
+
+.event-selected .event-timestamp {
+    color: white;
+}
+
 .event-dismiss {
     margin-top: 10px;
 }
diff --git a/apps/tracer/src/EventView.tsx b/apps/tracer/src/EventView.tsx
@@ -1,6 +1,7 @@
 import "./EventView.css";
 import { DisassemblyTarget, Event, HandlerId } from "./model.js";
 import { Button, Card } from "@blueprintjs/core";
+import Ansi from "@curvenote/ansi-to-react";
 import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
 import { useStayAtBottom } from "react-stay-at-bottom";
 
@@ -176,7 +177,7 @@ export default function EventView({
                                     alignText="left"
                                     onClick={() => onActivate(targetId, i)}
                                 >
-                                    {message}
+                                    <Ansi>{message}</Ansi>
                                 </Button>
                             </div>
                             {isSelected ? selectedEventDetails : null}