From 3ca0e569ed38dea0a179935986ac64e5852b772b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Andr=C3=A9=20Vadla=20Ravn=C3=A5s?= <oleavr@gmail.com>
Date: Thu, 19 Sep 2024 15:11:50 +0200
Subject: [PATCH] =?UTF-8?q?tracer:=20Add=20=E2=80=9CLatest=20Event?=
 =?UTF-8?q?=E2=80=9D=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To scroll the event view to the latest event emitted by the current
handler, and highlight it.
---
 apps/tracer/src/App.tsx       | 27 ++++++++++++++++++++++++++-
 apps/tracer/src/EventView.css | 12 ++++++++++++
 apps/tracer/src/EventView.tsx | 17 +++++++++++++++--
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/apps/tracer/src/App.tsx b/apps/tracer/src/App.tsx
index 3839971d..68e612b2 100644
--- a/apps/tracer/src/App.tsx
+++ b/apps/tracer/src/App.tsx
@@ -31,6 +31,8 @@ export default function App() {
     const [draftedCode, setDraftedCode] = useState("");
     const [addingTargets, setAddingTargets] = useState(false);
     const [events, setEvents] = useState<Event[]>([]);
+    const [latestMatchingEventIndex, setLatestMatchingEventIndex] = useState<number | null>(null);
+    const [highlightedEventIndex, setHighlightedEventIndex] = useState<number | null>(null);
     const [stagedItems, setStagedItems] = useState<StagedItem[]>([]);
     const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<TracerMessage>(
         (import.meta.env.MODE === "development")
@@ -39,6 +41,7 @@ export default function App() {
 
     function handleHandlerSelection(id: HandlerId) {
         setSelectedHandler(id);
+        setHighlightedEventIndex(null);
         sendJsonMessage({ type: "handler:load", id });
     }
 
@@ -111,6 +114,17 @@ export default function App() {
 
     }, [lastJsonMessage]);
 
+    useEffect(() => {
+        for (let i = events.length - 1; i !== -1; i--) {
+            const event = events[i];
+            if (event[0] === selectedHandler) {
+                setLatestMatchingEventIndex(i);
+                return;
+            }
+        }
+        setLatestMatchingEventIndex(null);
+    }, [selectedHandler, events]);
+
     const connectionError = (readyState === ReadyState.CLOSED)
         ? <Callout
             title="Lost connection to frida-trace"
@@ -145,6 +159,13 @@ export default function App() {
                             >
                                 Deploy
                             </Button>
+                            <Button
+                                icon="arrow-down"
+                                disabled={latestMatchingEventIndex === null}
+                                onClick={() => setHighlightedEventIndex(latestMatchingEventIndex)}
+                            >
+                                Latest Event
+                            </Button>
                         </ButtonGroup>
                         <HandlerEditor
                             handlerId={selectedHandler}
@@ -156,7 +177,11 @@ export default function App() {
                 </Resplit.Pane>
                 <Resplit.Splitter className="app-splitter" order={1} size="5px" />
                 <Resplit.Pane className="bottom-area" order={2} initialSize="0.3fr">
-                    <EventView events={events} onActivate={handleEventActivation} />
+                    <EventView
+                        events={events}
+                        highlightedIndex={highlightedEventIndex}
+                        onActivate={handleEventActivation}
+                    />
                 </Resplit.Pane>
             </Resplit.Root>
             <AddTargetsDialog
diff --git a/apps/tracer/src/EventView.css b/apps/tracer/src/EventView.css
index e4eec748..48579f7f 100644
--- a/apps/tracer/src/EventView.css
+++ b/apps/tracer/src/EventView.css
@@ -28,3 +28,15 @@
     font-weight: bold;
     white-space: pre-line;
 }
+
+.event-highlighted {
+    background-color: #EF6456;
+}
+
+.event-highlighted .event-timestamp {
+    color: white !important;
+}
+
+.event-highlighted .event-message {
+    color: white !important;
+}
diff --git a/apps/tracer/src/EventView.tsx b/apps/tracer/src/EventView.tsx
index 9b42f623..c1a8f20a 100644
--- a/apps/tracer/src/EventView.tsx
+++ b/apps/tracer/src/EventView.tsx
@@ -1,10 +1,12 @@
 import "./EventView.css";
 import { Event, HandlerId } from "./model.js";
 import { Button } from "@blueprintjs/core";
+import { useEffect, useRef } from "react";
 import ScrollToBottom from "react-scroll-to-bottom";
 
 export interface EventViewProps {
     events: Event[];
+    highlightedIndex: number | null;
     onActivate: ActivateEventHandler;
 }
 
@@ -13,9 +15,14 @@ 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) {
+export default function EventView({ events, highlightedIndex = null, onActivate }: EventViewProps) {
+    const highlightedRef = useRef<HTMLDivElement>(null);
     let lastTid: number | null = null;
 
+    useEffect(() => {
+        highlightedRef.current?.scrollIntoView({ block: "center" });
+    }, [highlightedRef, highlightedIndex]);
+
     return (
         <ScrollToBottom className="event-view">
             <div className="event-items">
@@ -38,8 +45,14 @@ export default function EventView({ events, onActivate }: EventViewProps) {
                             lastTid = threadId;
                         }
 
+                        const isHighlighted = i === highlightedIndex;
+
                         result.push(
-                            <div key={i}>
+                            <div
+                                key={i}
+                                ref={isHighlighted ? highlightedRef : undefined}
+                                className={isHighlighted ? "event-highlighted" : ""}
+                            >
                                 <span className="event-timestamp">{timestampStr} ms</span>
                                 <span className={"event-indent " + colorClass}>{INDENT.repeat(depth)}</span>
                                 <Button