diff --git a/lib/live_debugger/app/debugger/async_jobs/web/async_jobs_live.ex b/lib/live_debugger/app/debugger/async_jobs/web/async_jobs_live.ex index 83db3074f..9964a4aab 100644 --- a/lib/live_debugger/app/debugger/async_jobs/web/async_jobs_live.ex +++ b/lib/live_debugger/app/debugger/async_jobs/web/async_jobs_live.ex @@ -84,7 +84,15 @@ defmodule LiveDebugger.App.Debugger.AsyncJobs.Web.AsyncJobsLive do inner_class="mx-0 p-4" class="flex-1" save_state_in_browser={true} + title_class="flex flex-row justify-between min-w-max gap-2" > + <:title_sub_panel> + <.section_info_tooltip + id="async-jobs-info" + content="Background operations spawned via start_async or assign_async" + /> + +
<.async_result :let={async_jobs} assign={@async_jobs}> <:failed> diff --git a/lib/live_debugger/app/debugger/callback_tracing/web/node_traces_live.ex b/lib/live_debugger/app/debugger/callback_tracing/web/node_traces_live.ex index f8612e058..24e5e00cf 100644 --- a/lib/live_debugger/app/debugger/callback_tracing/web/node_traces_live.ex +++ b/lib/live_debugger/app/debugger/callback_tracing/web/node_traces_live.ex @@ -102,6 +102,12 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.NodeTracesLive do ~H"""
<.section title="Callback traces" id="traces" inner_class="mx-0 my-4 px-4" class="flex-1"> + <:title_sub_panel> + <.section_info_tooltip + id="traces-info" + content="Records the execution of LiveView/LiveComponent lifecycle callbacks and handlers" + /> + <:right_panel>
<.icon :if={@icon} name={@icon} class="h-4 w-4" />

<%= @name %>

+ + <%= render_slot(@subtitle) %>
<%= render_slot(@right) %> @@ -199,7 +202,7 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do name={if(@temporary_assigns.result, do: "Temporary assigns", else: "No temporary assigns")} icon="icon-clock-3" > - <:right :if={@has_temporary_assigns}> + <:subtitle :if={@has_temporary_assigns}> <.tooltip id={@id <> "-tooltip"} content="Values shown are the last recorded before reset" @@ -207,6 +210,8 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do > <.icon name="icon-info" class="w-4 h-4 bg-button-secondary-content" /> + + <:right :if={@has_temporary_assigns}>
<.copy_button id={"temporary-assigns-copy-button" <> "-" <> @id} diff --git a/lib/live_debugger/app/debugger/streams/web/components.ex b/lib/live_debugger/app/debugger/streams/web/components.ex index 5bc0968ad..6ac5ee781 100644 --- a/lib/live_debugger/app/debugger/streams/web/components.ex +++ b/lib/live_debugger/app/debugger/streams/web/components.ex @@ -38,10 +38,14 @@ defmodule LiveDebugger.App.Debugger.Streams.Web.Components do class="h-max overflow-y-hidden" title="Streams" save_state_in_browser={true} + title_class="flex flex-row justify-between min-w-max gap-2" > - <:right_panel> - <.streams_info_tooltip id="stream-info" /> - + <:title_sub_panel> + <.section_info_tooltip + id="stream-info" + content="Streams are reconstructed from render traces. If traces are garbage collected, the stream may be incomplete." + /> + <%= render_slot(@display) %> """ @@ -131,20 +135,6 @@ defmodule LiveDebugger.App.Debugger.Streams.Web.Components do """ end - attr(:id, :string, required: true) - - def streams_info_tooltip(assigns) do - ~H""" - <.tooltip - id={@id <> "-tooltip"} - content="Streams are reconstructed from render traces. If traces are garbage collected, the stream may be incomplete." - position="top-center" - > - <.icon name="icon-info" class="w-4 h-4 bg-button-secondary-content" /> - - """ - end - @doc """ Displays the fullscreen of the stream element. """ diff --git a/lib/live_debugger/app/web/components.ex b/lib/live_debugger/app/web/components.ex index f54d7774d..2f3724901 100644 --- a/lib/live_debugger/app/web/components.ex +++ b/lib/live_debugger/app/web/components.ex @@ -533,6 +533,7 @@ defmodule LiveDebugger.App.Web.Components do attr(:inner_class, :any, default: nil) slot(:right_panel) + slot(:title_sub_panel) slot(:inner_block) def collapsible_section(assigns) do @@ -549,7 +550,13 @@ defmodule LiveDebugger.App.Web.Components do > <:label>
-
<%= @title %>
+
+

<%= @title %>

+ <%= render_slot(@title_sub_panel) %> +
<%= render_slot(@right_panel) %>
@@ -564,6 +571,28 @@ defmodule LiveDebugger.App.Web.Components do """ end + @doc """ + Info tooltip for sections + """ + + attr(:id, :string, required: true) + attr(:content, :string, required: true) + attr(:position, :string, default: "top-center") + + def section_info_tooltip(assigns) do + ~H""" + <.tooltip + id={@id <> "-tooltip"} + content={@content} + position={@position} + > + + <.icon name="icon-info" class="w-4 h-4 bg-button-secondary-content" /> + + + """ + end + @doc """ Typography component to render headings. """