Bug: fix highlighting on dead view mode

lib/live_debugger/app/debugger/callback_tracing/web/node_traces_live.ex

@@ -158,4 +158,6 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.NodeTracesLive do
     |> Hooks.ExistingTraces.assign_async_existing_traces()
     |> noreply()
   end
+
+  def handle_info(_, socket), do: {:noreply, socket}
 end

lib/live_debugger/app/debugger/components_tree/web/components_tree_live.ex

@@ -18,6 +18,7 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
   alias LiveDebugger.Services.ProcessMonitor.Events.LiveComponentDeleted
   alias LiveDebugger.Services.ProcessMonitor.Events.LiveComponentCreated
   alias LiveDebugger.App.Debugger.Events.NodeIdParamChanged
+  alias LiveDebugger.App.Debugger.Events.DeadViewModeEntered
 
   @doc """
   Renders the `ComponentsTreeLive` as a nested LiveView component.
@@ -70,6 +71,7 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
     |> assign(root_socket_id: session["root_socket_id"])
     |> assign(url: session["url"])
     |> assign(highlight?: false)
+    |> assign(highlight_disabled?: false)
     |> assign_async_tree()
     |> ok()
   end
@@ -93,6 +95,7 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
             label="Highlight"
             checked={@highlight?}
             phx-click="toggle-highlight"
+            disabled={@highlight_disabled?}
           />
         </div>
         <div class="flex-1">
@@ -157,12 +160,25 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
     |> noreply()
   end
 
+  def handle_info(
+        %DeadViewModeEntered{debugger_pid: pid},
+        %{assigns: %{parent_pid: pid}} = socket
+      ) do
+    socket
+    |> assign(highlight_disabled?: true)
+    |> assign(highlight?: false)
+    |> noreply()
+  end
+
   defp assign_async_tree(socket) do
     pid = socket.assigns.lv_process.pid
     assign_async(socket, [:tree], fn -> ComponentsTreeQueries.fetch_components_tree(pid) end)
   end
 
-  defp highlight_element(%{assigns: %{highlight?: true}} = socket, params) do
+  defp highlight_element(
+         %{assigns: %{highlight_disabled?: false, highlight?: true}} = socket,
+         params
+       ) do
     payload = %{
       attr: params["search-attribute"],
       val: params["search-value"],
@@ -181,6 +197,10 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
     socket
   end
 
+  defp pulse_element(%{assigns: %{highlight_disabled?: true}} = socket, _) do
+    socket
+  end
+
   defp pulse_element(socket, params) do
     if LiveDebugger.Feature.enabled?(:highlighting) do
       # Resets the highlight when the user selects node

lib/live_debugger/app/debugger/events.ex

@@ -8,4 +8,5 @@ defmodule LiveDebugger.App.Debugger.Events do
   alias LiveDebugger.App.Debugger.Structs.TreeNode
 
   defevent(NodeIdParamChanged, node_id: TreeNode.id(), debugger_pid: pid())
+  defevent(DeadViewModeEntered, debugger_pid: pid())
 end

lib/live_debugger/app/debugger/web/hook_components/dead_view_mode.ex

@@ -19,6 +19,7 @@ defmodule LiveDebugger.App.Debugger.Web.HookComponents.DeadViewMode do
   alias LiveDebugger.Services.SuccessorDiscoverer.Events.SuccessorNotFound
   alias LiveDebugger.App.Events.UserChangedSettings
   alias LiveDebugger.Services.ProcessMonitor.Events.LiveViewDied
+  alias LiveDebugger.App.Debugger.Events.DeadViewModeEntered
 
   @impl true
   def init(socket) do
@@ -97,6 +98,8 @@ defmodule LiveDebugger.App.Debugger.Web.HookComponents.DeadViewMode do
         |> LvProcess.set_alive(false)
         |> AsyncResult.ok()
 
+      Bus.broadcast_event!(%DeadViewModeEntered{debugger_pid: self()}, self())
+
       socket
       |> assign(:lv_process, lv_process)
       |> halt()

lib/live_debugger/app/web/components.ex

@@ -605,19 +605,29 @@ defmodule LiveDebugger.App.Web.Components do
   attr(:label, :string, default: "", doc: "Label for the switch.")
   attr(:wrapper_class, :any, default: nil, doc: "Additional classes to add to the switch.")
   attr(:id, :string, required: true, doc: "ID of the switch.")
+  attr(:disabled, :boolean, default: false, doc: "Whether the switch is disabled.")
   attr(:rest, :global)
 
   def toggle_switch(assigns) do
     ~H"""
-    <label class={[
-      "inline-flex items-center cursor-pointer pr-6 py-3"
-      | List.wrap(@wrapper_class)
-    ]}>
+    <label class={
+      [
+        "inline-flex items-center pr-6 py-3",
+        if(@disabled, do: "opacity-50 pointer-events-none", else: "cursor-pointer")
+      ] ++ List.wrap(@wrapper_class)
+    }>
       <span class="text-xs font-normal text-primary-text mx-2">
         <%= @label %>
       </span>
       <form>
-        <input id={@id} type="checkbox" class="sr-only peer" checked={@checked} {@rest} />
+        <input
+          id={@id}
+          type="checkbox"
+          class="sr-only peer"
+          checked={@checked}
+          disabled={@disabled}
+          {@rest}
+        />
         <div class="relative w-9 h-5 bg-ui-muted peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ui-accent rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-ui-surface after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ui-accent ">
         </div>
       </form>

test/e2e/dead_view_mode_test.exs

@@ -0,0 +1,43 @@
+defmodule LiveDebugger.E2E.DeadViewModeTest do
+  use LiveDebugger.E2ECase
+
+  @sessions 2
+  feature "dead view mode with navigation and disabled highlighting", %{
+    sessions: [dev_app, debugger]
+  } do
+    LiveDebugger.Services.CallbackTracer.GenServers.TracingManager.ping!()
+
+    LiveDebugger.API.SettingsStorage.save(:dead_view_mode, true)
+
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(first_link())
+    |> find(css("#navbar-connected"))
+    |> assert_text("Monitored PID")
+
+    dev_app
+    |> execute_script("window.location.reload();")
+
+    Process.sleep(200)
+
+    debugger
+    |> find(css("#navbar-connected"))
+    |> assert_text("Disconnected")
+
+    debugger
+    |> assert_has(css("#components-tree"))
+    |> click(button("Crash (3)"))
+
+    Process.sleep(200)
+
+    debugger
+    |> find(sidebar_basic_info())
+    |> assert_text("LiveDebuggerDev.LiveComponents.Crash")
+
+    debugger
+    |> assert_has(css("label.pointer-events-none", text: "Highlight"))
+  end
+end