Feature: Add highlighting active LiveViews (#878)

* Add highlighting active LiveViews

* Refactor getting root_socket_id

* Add highlight_in_browser setting and remove highlight toggle in Components Tree

* Refactor

* Fix and update e2e tests

* Disable sending highlight and pulse events when in DeadView mode

* Remove unused assign

* CR suggestions

* Add tests

Author: hhubert6

assets/app/hooks/highlight.js

@@ -1,32 +1,40 @@
 const Highlight = {
   mounted() {
-    const highlightSwitch = document.querySelector('#highlight-switch');
-    let params = {};
+    this.highlighted = false;
+    this.liveComponent = this.el.closest('[data-phx-id]');
 
-    this.pushHighlight = (e) => {
-      if (highlightSwitch.checked) {
-        const attr = e.target.attributes;
+    const attr = this.el.attributes;
 
-        params = {
-          'search-attribute': attr['phx-value-search-attribute'].value,
-          'search-value': attr['phx-value-search-value'].value,
-          type: attr['phx-value-type'].value,
-          module: attr['phx-value-module'].value,
-          id: attr['phx-value-id'].value,
-        };
+    this.params = {
+      'root-socket-id': attr['phx-value-root-socket-id']?.value,
+      'search-attribute': attr['phx-value-search-attribute']?.value,
+      'search-value': attr['phx-value-search-value'].value,
+      type: attr['phx-value-type']?.value,
+      module: attr['phx-value-module']?.value,
+      id: attr['phx-value-id']?.value,
+    };
 
-        this.pushEvent('highlight', params);
-      }
+    this.pushHighlight = () => {
+      this.pushEventTo(this.liveComponent, 'highlight', this.params);
+      this.highlighted = !this.highlighted;
     };
 
-    if (highlightSwitch) {
-      this.el.addEventListener('mouseenter', this.pushHighlight);
-      this.el.addEventListener('mouseleave', this.pushHighlight);
-    }
+    this.el.addEventListener('mouseenter', () => {
+      if (!this.highlighted) this.pushHighlight();
+    });
+    this.el.addEventListener('mouseleave', () => {
+      if (this.highlighted) this.pushHighlight();
+    });
   },
   destroyed() {
     this.el.removeEventListener('mouseenter', this.pushHighlight);
     this.el.removeEventListener('mouseleave', this.pushHighlight);
+
+    setTimeout(() => {
+      if (this.highlighted && this.liveComponent.checkVisibility()) {
+        this.pushHighlight();
+      }
+    }, 200);
   },
 };
 

lib/live_debugger/api/live_view_discovery.ex

@@ -13,6 +13,7 @@ defmodule LiveDebugger.API.LiveViewDiscovery do
   @callback lv_processes() :: [LvProcess.t()]
   @callback children_lv_processes(pid(), searched_lv_processes :: [LvProcess.t()] | nil) ::
               [LvProcess.t()]
+  @callback get_root_socket_id(LvProcess.t()) :: String.t() | nil
 
   @doc """
   Returns all debugged LvProcesses.
@@ -66,6 +67,11 @@ defmodule LiveDebugger.API.LiveViewDiscovery do
     impl().children_lv_processes(pid, searched_lv_processes)
   end
 
+  @spec get_root_socket_id(LvProcess.t()) :: LvProcess.t()
+  def get_root_socket_id(lv_process) do
+    impl().get_root_socket_id(lv_process)
+  end
+
   defp impl() do
     Application.get_env(
       :live_debugger,
@@ -161,5 +167,35 @@ defmodule LiveDebugger.API.LiveViewDiscovery do
       end)
       |> List.flatten()
     end
+
+    @impl true
+    def get_root_socket_id(%LvProcess{embedded?: false, nested?: false} = lv_process) do
+      lv_process.socket_id
+    end
+
+    def get_root_socket_id(%LvProcess{embedded?: true, nested?: false} = lv_process) do
+      case find_root_lv_process_over_transport_pid(lv_process.transport_pid) do
+        %LvProcess{socket_id: socket_id} -> socket_id
+        _ -> lv_process.socket_id
+      end
+    end
+
+    def get_root_socket_id(lv_process) do
+      lv_process.root_pid
+      |> lv_process()
+      |> case do
+        %LvProcess{embedded?: false} = lv_process -> lv_process.socket_id
+        %LvProcess{embedded?: true, nested?: false} = lv_process -> get_root_socket_id(lv_process)
+        _ -> nil
+      end
+    end
+
+    def find_root_lv_process_over_transport_pid(transport_pid) do
+      debugged_lv_processes()
+      |> Enum.find(fn
+        %LvProcess{transport_pid: ^transport_pid, embedded?: false, nested?: false} -> true
+        _ -> false
+      end)
+    end
   end
 end

lib/live_debugger/api/settings_storage.ex

@@ -4,7 +4,8 @@ defmodule LiveDebugger.API.SettingsStorage do
     :garbage_collection,
     :debug_button,
     :tracing_enabled_on_start,
-    :dead_liveviews
+    :dead_liveviews,
+    :highlight_in_browser
   ]
 
   @moduledoc """
@@ -79,7 +80,8 @@ defmodule LiveDebugger.API.SettingsStorage do
       garbage_collection: true,
       debug_button: true,
       tracing_enabled_on_start: true,
-      dead_liveviews: false
+      dead_liveviews: false,
+      highlight_in_browser: true
     }
 
     @table_name :lvdbg_settings

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

@@ -7,6 +7,7 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
 
   require Logger
 
+  alias LiveDebugger.API.SettingsStorage
   alias LiveDebugger.Client
   alias LiveDebugger.App.Utils.URL
   alias LiveDebugger.Structs.LvProcess
@@ -33,7 +34,6 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
   attr(:id, :string, required: true)
   attr(:socket, Phoenix.LiveView.Socket, required: true)
   attr(:lv_process, LvProcess, required: true)
-  attr(:root_socket_id, :string, required: true)
   attr(:node_id, :any, required: true)
   attr(:url, :string, required: true)
   attr(:class, :string, default: "", doc: "CSS class for the wrapper div")
@@ -42,7 +42,6 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
     session = %{
       "lv_process" => assigns.lv_process,
       "node_id" => assigns.node_id,
-      "root_socket_id" => assigns.root_socket_id,
       "url" => assigns.url,
       "parent_pid" => self()
     }
@@ -68,10 +67,7 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
     |> assign(lv_process: lv_process)
     |> assign(parent_pid: parent_pid)
     |> assign(node_id: session["node_id"])
-    |> assign(root_socket_id: session["root_socket_id"])
     |> assign(url: session["url"])
-    |> assign(highlight?: false)
-    |> assign(highlight_disabled?: !lv_process.alive?)
     |> assign_async_tree()
     |> ok()
   end
@@ -89,14 +85,6 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
       <div class="min-h-20 px-1 overflow-y-auto overflow-x-hidden flex flex-col">
         <div class="flex items-center justify-between">
           <div class="shrink-0 font-medium text-secondary-text px-6 py-3">Components Tree</div>
-          <.toggle_switch
-            :if={LiveDebugger.Feature.enabled?(:browser_features?)}
-            id="highlight-switch"
-            label="Highlight"
-            checked={@highlight?}
-            phx-click="toggle-highlight"
-            disabled={@highlight_disabled?}
-          />
         </div>
         <div class="flex-1">
           <TreeComponents.tree_node
@@ -112,12 +100,6 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
   end
 
   @impl true
-  def handle_event("toggle-highlight", _params, socket) do
-    socket
-    |> update(:highlight?, &(not &1))
-    |> noreply()
-  end
-
   def handle_event("highlight", params, socket) do
     socket
     |> highlight_element(params)
@@ -128,7 +110,6 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
     socket
     |> pulse_element(params)
     |> push_patch(to: URL.upsert_query_param(socket.assigns.url, "node_id", node_id))
-    |> assign(:highlight?, false)
     |> noreply()
   end
 
@@ -165,58 +146,49 @@ defmodule LiveDebugger.App.Debugger.ComponentsTree.Web.ComponentsTreeLive do
         %{assigns: %{parent_pid: pid}} = socket
       ) do
     socket
-    |> assign(highlight_disabled?: true)
-    |> assign(highlight?: false)
+    |> assign(lv_process: socket.assigns.lv_process |> LvProcess.set_alive(false))
     |> noreply()
   end
 
+  def handle_info(_, socket), do: {:noreply, socket}
+
   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_disabled?: false, highlight?: true}} = socket,
-         params
-       ) do
-    payload = %{
-      attr: params["search-attribute"],
-      val: params["search-value"],
-      type: if(params["type"] == "live_view", do: "LiveView", else: "LiveComponent"),
-      module: Parsers.module_to_string(params["module"]),
-      id_value: params["id"],
-      id_key: if(params["type"] == "live_view", do: "PID", else: "CID")
-    }
-
-    Client.push_event!(socket.assigns.root_socket_id, "highlight", payload)
-
-    socket
-  end
+  defp highlight_element(%{assigns: %{lv_process: %LvProcess{alive?: true}}} = socket, params) do
+    if SettingsStorage.get(:highlight_in_browser) do
+      payload = %{
+        attr: params["search-attribute"],
+        val: params["search-value"],
+        type: if(params["type"] == "live_view", do: "LiveView", else: "LiveComponent"),
+        module: Parsers.module_to_string(params["module"]),
+        id_value: params["id"],
+        id_key: if(params["type"] == "live_view", do: "PID", else: "CID")
+      }
 
-  defp highlight_element(socket, _) do
-    socket
-  end
+      Client.push_event!(socket.assigns.lv_process.root_socket_id, "highlight", payload)
+    end
 
-  defp pulse_element(%{assigns: %{highlight_disabled?: true}} = socket, _) do
     socket
   end
 
-  defp pulse_element(socket, params) do
-    if LiveDebugger.Feature.enabled?(:browser_features?) do
-      # Resets the highlight when the user selects node
-      if socket.assigns.highlight? do
-        Client.push_event!(socket.assigns.root_socket_id, "highlight")
-      end
+  defp highlight_element(socket, _), do: socket
 
+  defp pulse_element(%{assigns: %{lv_process: %LvProcess{alive?: true}}} = socket, params) do
+    if SettingsStorage.get(:highlight_in_browser) do
       payload = %{
         attr: params["search-attribute"],
         val: params["search-value"],
         type: if(params["type"] == "live_view", do: "LiveView", else: "LiveComponent")
       }
 
-      Client.push_event!(socket.assigns.root_socket_id, "pulse", payload)
+      Client.push_event!(socket.assigns.lv_process.root_socket_id, "pulse", payload)
     end
 
     socket
   end
+
+  defp pulse_element(socket, _), do: socket
 end

lib/live_debugger/app/debugger/web/components/pages.ex

@@ -30,7 +30,6 @@ defmodule LiveDebugger.App.Debugger.Web.Components.Pages do
   attr(:lv_process, LvProcess, required: true)
   attr(:url, :string, required: true)
   attr(:node_id, :any, required: true)
-  attr(:root_socket_id, :string, required: true)
   attr(:return_link, :string, required: true)
   attr(:inspect_mode?, :boolean, required: true)
 
@@ -97,7 +96,6 @@ defmodule LiveDebugger.App.Debugger.Web.Components.Pages do
         id="components-tree"
         lv_process={@lv_process}
         socket={@socket}
-        root_socket_id={@root_socket_id}
         node_id={@node_id}
         url={@url}
         class="overflow-x-hidden"

lib/live_debugger/app/debugger/web/debugger_live.ex

@@ -93,7 +93,6 @@ defmodule LiveDebugger.App.Debugger.Web.DebuggerLive do
             lv_process={lv_process}
             url={@url}
             node_id={@node_id}
-            root_socket_id={@root_socket_id}
             inspect_mode?={@inspect_mode?}
             return_link={RoutesHelper.discovery()}
           />

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

@@ -47,7 +47,7 @@ defmodule LiveDebugger.App.Debugger.Web.HookComponents.InspectButton do
   end
 
   defp handle_info(%DeadViewModeEntered{debugger_pid: pid}, socket) when pid == self() do
-    Client.push_event!(socket.assigns.root_socket_id, "inspect-mode-changed", %{
+    Client.push_event!(socket.assigns.lv_process.result.root_socket_id, "inspect-mode-changed", %{
       inspect_mode: false,
       pid: inspect(self())
     })
@@ -93,7 +93,7 @@ defmodule LiveDebugger.App.Debugger.Web.HookComponents.InspectButton do
   defp handle_event(_, _, socket), do: {:cont, socket}
 
   defp switch_inspect_mode(socket) do
-    Client.push_event!(socket.assigns.root_socket_id, "inspect-mode-changed", %{
+    Client.push_event!(socket.assigns.lv_process.result.root_socket_id, "inspect-mode-changed", %{
       inspect_mode: !socket.assigns.inspect_mode?,
       pid: inspect(self())
     })