Merge branch 'main' into 252-add-mode-for-disconnected-liveview

Author: kraleppa

assets/js/hooks/trace_execution_time.js

@@ -1,3 +1,8 @@
+function parseElapsedTime(ms) {
+  if (ms < 1000) return ms + ' ms';
+  return (ms / 1000).toFixed(2) + ' s';
+}
+
 const TraceExecutionTime = {
   mounted() {
     let start = Date.now();
@@ -6,7 +11,7 @@ const TraceExecutionTime = {
 
     this.intervalId = setInterval(() => {
       current = Date.now() - start;
-      this.el.textContent = current + ' ms';
+      this.el.textContent = parseElapsedTime(current);
     }, 16);
 
     this.handleEvent('stop-timer', () => {

lib/live_debugger_web/components/traces.ex

@@ -82,7 +82,7 @@ defmodule LiveDebuggerWeb.Components.Traces do
       phx-value-trace-id={@trace.id}
     >
       <:label>
-        <div id={@id <> "-label"} class="w-[90%] grow flex items-center ml-2 gap-1.5">
+        <div id={@id <> "-label"} class="w-[90%] grow flex items-center ml-2 gap-3">
           <p class="font-medium text-sm"><%= @callback_name %></p>
           <.short_trace_content trace={@trace} />
           <.trace_time_info id={@id} trace={@trace} from_tracing?={@from_tracing?} />
@@ -135,15 +135,15 @@ defmodule LiveDebuggerWeb.Components.Traces do
 
   def trace_time_info(assigns) do
     ~H"""
-    <div class="max-w-24 text-xs font-normal text-secondary-text align-center">
-      <.tooltip id={@id <> "-timestamp"} content="timestamp">
+    <div class="flex text-xs font-normal text-secondary-text align-center">
+      <.tooltip id={@id <> "-timestamp"} content="timestamp" class="min-w-24">
         <%= Parsers.parse_timestamp(@trace.timestamp) %>
       </.tooltip>
-
-      <.tooltip id={@id <> "-exec-time-tooltip"} content="execution time">
+      <span class="mx-2 border-r border-default-border"></span>
+      <.tooltip id={@id <> "-exec-time-tooltip"} content="execution time" class="min-w-11">
         <span
           id={@id <> "-exec-time"}
-          class={get_threshold_class(@trace.execution_time)}
+          class={["text-nowrap", get_threshold_class(@trace.execution_time)]}
           phx-hook={if @from_tracing?, do: "TraceExecutionTime"}
         >
           <%= Parsers.parse_elapsed_time(@trace.execution_time) %>