Fix trace fullscreen highlighting (#971)

* fix scroll

* fix highlighting

Author: srzeszut

assets/app/hooks/trace_body_search_highlight.js

@@ -1,21 +1,36 @@
-import { highlightSearchRanges } from '../utils/dom';
+import { highlightSearchRanges, findRanges } from '../utils/dom';
 
-import { findRanges } from '../utils/dom';
+const rangesByElementId = new Map();
+
+function updateGlobalHighlight() {
+  const allRanges = Array.from(rangesByElementId.values()).flat();
+  highlightSearchRanges('traces-search-highlight', allRanges, true);
+}
 
 const TraceBodySearchHighlight = {
   mounted() {
-    const phrase = this.el.dataset.search_phrase;
-    if (phrase === undefined || phrase === '') return;
-
-    const ranges = findRanges(this.el, phrase);
-    highlightSearchRanges('traces-search-highlight', ranges);
+    this.handleHighlight();
   },
+
   updated() {
+    this.handleHighlight();
+  },
+
+  destroyed() {
+    rangesByElementId.delete(this.el.id);
+    updateGlobalHighlight();
+  },
+
+  handleHighlight() {
     const phrase = this.el.dataset.search_phrase;
-    if (phrase === undefined || phrase === '') return;
 
-    const ranges = findRanges(this.el, phrase);
-    highlightSearchRanges('traces-search-highlight', ranges);
+    if (!phrase) {
+      rangesByElementId.delete(this.el.id);
+    } else {
+      rangesByElementId.set(this.el.id, findRanges(this.el, phrase));
+    }
+
+    updateGlobalHighlight();
   },
 };
 

lib/live_debugger/app/debugger/callback_tracing/web/components/trace.ex

@@ -336,7 +336,7 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.Components.Trace do
           />
         </div>
         <div class={[
-          "max-h-[70vh] overflow-y-auto overflow-x-auto flex flex-col gap-4 items-start justify-center hover:[&>div>div>div>button]:hidden",
+          "max-h-[70vh] overflow-y-auto overflow-x-auto flex flex-col gap-4 items-start justify-start hover:[&>div>div>div>button]:hidden",
           if(is_nil(@displayed_trace.error), do: "p-4", else: "[&>div>div>div>div>button]:hidden")
         ]}>
           <.trace_body_navbar_wrapper