Callback trace redesign (#92)

* refactor trace list element * hide info when dropdown is opened * remove tooltip
software-mansion · Feb 18, 2025 · e9eadcb · e9eadcb
1 parent 1eb8052
commit e9eadcb
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 21 deletions.
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -23,6 +23,7 @@ module.exports = {
           5: '#F7F9FF',
           50: '#F1F4FF',
           100: '#E6ECFE',
+          200: '#CED9FF',
           400: '#3B478A',
           500: '#001A72',
         },
@@ -43,6 +44,8 @@ module.exports = {
         mono: ['DM Mono', 'serif'],
       },
       fontSize: {
+        '3xs': ['10px', '13px'],
+        '2xs': ['11px', '20px'],
         sm: ['13px', '20px'],
         base: ['15px', '20px'],
       },

diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
@@ -90,6 +90,16 @@ defmodule LiveDebugger.Components do
   @doc """
   Collapsible element that can be toggled open and closed.
   It uses the `details` and `summary` HTML elements.
+  If you add `hide-on-open` class to element it will be hidden when collapsible is opened.
+
+  ## Examples
+
+      <.collapsible id="collapsible" open={true}>
+        <:label>
+          <div>Collapsible <div class="hide-on-open">Info when closed</div></div>
+        </:label>
+        <div>Content</div>
+      </.collapsible>
   """
 
   attr(:id, :string, required: true)
@@ -113,7 +123,10 @@ defmodule LiveDebugger.Components do
     ~H"""
     <details
       id={@id}
-      class={["block [&>summary>.rotate-icon]:open:rotate-90" | List.wrap(@class)]}
+      class={[
+        "block [&>summary>.rotate-icon]:open:rotate-90 [&>summary_.hide-on-open]:open:hidden"
+        | List.wrap(@class)
+      ]}
       {show_collapsible_assign(@open)}
       {@rest}
     >

diff --git a/lib/live_debugger/live_components/traces_list.ex b/lib/live_debugger/live_components/traces_list.ex
@@ -62,7 +62,7 @@ defmodule LiveDebugger.LiveComponents.TracesList do
           </div>
         </:right_panel>
         <div class="w-full h-full lg:min-h-[10.25rem]">
-          <div id={"#{assigns.id}-stream"} phx-update="stream">
+          <div id={"#{assigns.id}-stream"} phx-update="stream" class="flex flex-col gap-2">
             <div id={"#{assigns.id}-stream-empty"} class="only:block hidden text-gray-700">
               <div :if={@existing_traces_status == :ok}>
                 No traces have been recorded yet.
@@ -138,24 +138,23 @@ defmodule LiveDebugger.LiveComponents.TracesList do
       |> assign(:callback_name, "#{assigns.trace.function}/#{assigns.trace.arity}")
 
     ~H"""
-    <.collapsible id={@id} icon="icon-chevron-right" chevron_class="text-primary" class="max-w-full">
+    <.collapsible
+      id={@id}
+      icon="icon-chevron-right"
+      chevron_class="w-5 h-5"
+      class="max-w-full border border-primary-100 rounded"
+      label_class="text-primary text-sm font-semibold bg-primary-50 h-10 p-2"
+    >
       <:label>
-        <div class="w-full flex justify-between">
-          <.tooltip
-            id={"trace_" <> @id}
-            content={"#{@trace.module}.#{@trace.function}/#{@trace.arity}"}
-          >
-            <div class="flex gap-4">
-              <p class="text-primary font-medium"><%= @callback_name %></p>
-              <p
-                :if={@trace.counter > 1}
-                class="text-sm text-gray-500 italic align-baseline mt-[0.2rem]"
-              >
-                +<%= @trace.counter - 1 %>
-              </p>
-            </div>
-          </.tooltip>
-          <p class="w-32"><%= Parsers.parse_timestamp(@trace.timestamp) %></p>
+        <div class="w-[90%] grow flex items-center ml-2 gap-1.5">
+          <div class="flex gap-1.5">
+            <p class="text-primary font-medium"><%= @callback_name %></p>
+            <.aggregate_count :if={@trace.counter > 1} count={@trace.counter} />
+          </div>
+          <.short_trace_content trace={@trace} />
+          <p class="w-max text-xs font-normal text-secondary align-center">
+            <%= Parsers.parse_timestamp(@trace.timestamp) %>
+          </p>
         </div>
       </:label>
       <.fullscreen id={@fullscreen_id} title={@callback_name}>
@@ -170,7 +169,7 @@ defmodule LiveDebugger.LiveComponents.TracesList do
         </div>
       </.fullscreen>
 
-      <div class="relative flex flex-col gap-4 overflow-x-auto max-w-full h-[30vh] max-h-max overflow-y-auto border-2 border-gray-200 p-2 rounded-lg text-gray-600">
+      <div class="relative flex flex-col gap-4 overflow-x-auto max-w-full h-[30vh] max-h-max overflow-y-auto p-4">
         <.fullscreen_button id={@fullscreen_id} class="absolute right-2 top-2" />
         <%= for {args, index} <- Enum.with_index(@trace.args) do %>
           <ElixirDisplay.term
@@ -184,6 +183,24 @@ defmodule LiveDebugger.LiveComponents.TracesList do
     """
   end
 
+  defp aggregate_count(assigns) do
+    ~H"""
+    <span class="rounded-full bg-white border border-primary-200 text-primary text-2xs px-1.5">
+      +<%= assigns.count %>
+    </span>
+    """
+  end
+
+  defp short_trace_content(assigns) do
+    assigns = assign(assigns, :content, Enum.map_join(assigns.trace.args, " ", &inspect/1))
+
+    ~H"""
+    <div class="grow shrink text-secondary font-mono font-normal text-3xs truncate">
+      <p class="hide-on-open mt-0.5"><%= @content %></p>
+    </div>
+    """
+  end
+
   defp assign_async_existing_traces(socket) do
     ets_table_id = socket.assigns.ets_table_id
     node_id = socket.assigns.debugged_node_id

diff --git a/priv/static/app.css b/priv/static/app.css