Bug: Highlighting not working with embedded LiveViews (#797) (#828)

* Fix finding root element id when inspecting embedded LiveView

* Send list of all root socket ids via websocket when no main LiveView

* Subscribe client channel to all root socket ids

* Fix test

* Update assets

Author: hhubert6

assets/client/client.js

@@ -10,27 +10,37 @@ import initTooltip from './components/tooltip/tooltip';
 import {
   getMetaTag,
   fetchLiveDebuggerBaseURL,
-  fetchDebuggedSocketID,
+  fetchDebuggedSocketIDs,
   isDebugButtonEnabled,
   isHighlightingEnabled,
 } from './utils/meta';
 
-window.document.addEventListener('DOMContentLoaded', function () {
+window.document.addEventListener('DOMContentLoaded', async () => {
   const metaTag = getMetaTag();
   const baseURL = fetchLiveDebuggerBaseURL(metaTag);
-  const socketID = fetchDebuggedSocketID();
+  let { mainSocketID, rootSocketIDs } = await fetchDebuggedSocketIDs();
 
-  const sessionURL = `${baseURL}/redirect/${socketID}`;
+  if (!mainSocketID) {
+    [mainSocketID, ...rootSocketIDs] = rootSocketIDs;
+  } else {
+    rootSocketIDs = [];
+  }
+
+  if (mainSocketID) {
+    const sessionURL = `${baseURL}/redirect/${mainSocketID}`;
 
-  if (socketID) {
-    const { debugChannel } = initDebugSocket(baseURL, socketID);
+    const { debugChannel } = initDebugSocket(
+      baseURL,
+      mainSocketID,
+      rootSocketIDs
+    );
 
     debugChannel.on('ping', (resp) => {
       console.log('Received ping', resp);
       debugChannel.push('pong', resp);
     });
 
-    initElementInspection({ baseURL, debugChannel, socketID });
+    initElementInspection({ baseURL, debugChannel, socketID: mainSocketID });
     initTooltip();
 
     if (isDebugButtonEnabled(metaTag)) {

assets/client/services/debug_socket.js

@@ -1,10 +1,10 @@
 import pushWindowInitialized from './window_identifier';
 
-export default function initDebugSocket(baseURL, socketID) {
+export default function initDebugSocket(baseURL, socketID, rootSocketIDs) {
   const websocketURL = baseURL.replace(/^http/, 'ws') + '/client';
 
   const debugSocket = new window.Phoenix.Socket(websocketURL, {
-    params: { socketID },
+    params: { socketID, rootSocketIDs },
   });
 
   debugSocket.connect();

assets/client/services/inspect.js

@@ -209,21 +209,24 @@ function pushRemoveTooltipEvent() {
 function getClosestElementInfo(target) {
   const liveViewElement = target.closest('[data-phx-session]');
   const componentElement = target.closest('[data-phx-component]');
-  const rootElement = document.querySelector('[data-phx-main]');
+
+  if (!liveViewElement) return null;
+
+  const rootElementId = liveViewElement.getAttribute('data-phx-root-id');
 
   if (componentElement && liveViewElement.contains(componentElement)) {
     return {
       element: componentElement,
       type: 'LiveComponent',
-      phxRootId: rootElement.id,
+      phxRootId: rootElementId,
       phxId: liveViewElement.id,
     };
   }
 
   return {
     element: liveViewElement,
     type: 'LiveView',
-    phxRootId: rootElement.id,
+    phxRootId: rootElementId,
     phxId: liveViewElement.id,
   };
 }

assets/client/utils/meta.js

@@ -1,14 +1,53 @@
-export function fetchDebuggedSocketID() {
-  let el;
-  if ((el = document.querySelector('[data-phx-main]'))) {
-    return el.id;
-  }
-  if ((el = document.querySelector('[id^="phx-"]'))) {
-    return el.id;
-  }
-  if ((el = document.querySelector('[data-phx-root-id]'))) {
-    return el.getAttribute('data-phx-root-id');
-  }
+export function fetchDebuggedSocketIDs() {
+  return new Promise((resolve) => {
+    const liveViewElements = document.querySelectorAll('[data-phx-session]');
+    const rootIDsMapping = {};
+    const mainID = document.querySelector('[data-phx-main]')?.id;
+
+    const handleMutation = (mutation) => {
+      if (!isRootIDAttributeChanged(mutation)) return;
+
+      registerRootID(rootIDsMapping, mutation.target);
+
+      if (isAllRootIDsRegistered(rootIDsMapping, liveViewElements)) {
+        observer.disconnect();
+
+        resolve({
+          mainSocketID: mainID,
+          rootSocketIDs: getRootSocketIDs(rootIDsMapping, mainID),
+        });
+      }
+    };
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach(handleMutation);
+    });
+
+    liveViewElements.forEach((el) => {
+      observer.observe(el, { attributes: true });
+    });
+  });
+}
+
+function isRootIDAttributeChanged(mutation) {
+  return (
+    mutation.type === 'attributes' &&
+    mutation.attributeName === 'data-phx-root-id'
+  );
+}
+
+function registerRootID(rootIDs, target) {
+  rootIDs[target.id] = target.getAttribute('data-phx-root-id');
+}
+
+function isAllRootIDsRegistered(rootIDs, liveViewElements) {
+  return Object.keys(rootIDs).length >= liveViewElements.length;
+}
+
+function getRootSocketIDs(rootIDs, mainID) {
+  const rootSocketIDs = new Set(Object.values(rootIDs));
+  rootSocketIDs.delete(mainID);
+  return [...rootSocketIDs];
 }
 
 export function getMetaTag() {

dev/embedded_live_view_controller.ex

@@ -1,5 +1,5 @@
 defmodule LiveDebuggerDev.EmbeddedLiveViewController do
-  use Phoenix.Controller, layouts: [html: {LiveDebuggerDev.Layout, :app}]
+  use Phoenix.Controller, layouts: [html: {LiveDebuggerDev.Layout, :embedded}]
 
   import Phoenix.LiveView.Controller
 

dev/layout.ex

@@ -81,12 +81,14 @@ defmodule LiveDebuggerDev.Layout do
   end
 
   def render("embedded.html", assigns) do
+    assigns = assign(assigns, v: Map.get(assigns, :socket, assigns[:conn]))
+
     ~H"""
     <main class="p-5">
       <.navbar />
       <.box title="Embedded Live View [LiveView]" color="purple">
-        <%= live_render(@socket, LiveDebuggerDev.LiveViews.Nested,
-          id: "embedded_with_nested",
+        <%= live_render(@v, LiveDebuggerDev.LiveViews.Nested,
+          id: "phx-embedded_with_nested",
           session: %{"id" => "embedded_with_nested"},
           sticky: true
         ) %>

lib/live_debugger/app/debugger/web/hooks/async_lv_process.ex

@@ -9,9 +9,9 @@ defmodule LiveDebugger.App.Debugger.Web.Hooks.AsyncLvProcess do
 
   alias Phoenix.LiveView.AsyncResult
   alias LiveDebugger.App.Debugger.Queries.LvProcess, as: LvProcessQueries
-  alias LiveDebugger.App.Debugger.Queries.State, as: StateQueries
   alias LiveDebugger.Structs.LvProcess
   alias LiveDebugger.App.Web.Helpers.Routes, as: RoutesHelper
+  alias LiveDebugger.API.LiveViewDiscovery
 
   alias LiveDebugger.Bus
   alias LiveDebugger.App.Events.DebuggerMounted
@@ -78,16 +78,32 @@ defmodule LiveDebugger.App.Debugger.Web.Hooks.AsyncLvProcess do
     end
   end
 
-  defp get_root_socket_id(lv_process) when lv_process.root_pid == lv_process.pid do
+  defp get_root_socket_id(%LvProcess{embedded?: false, nested?: false} = lv_process) do
     {:ok, lv_process.socket_id}
   end
 
+  defp 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} -> {:ok, socket_id}
+      _ -> {:ok, lv_process.socket_id}
+    end
+  end
+
   defp get_root_socket_id(lv_process) do
     lv_process.root_pid
-    |> StateQueries.get_socket()
+    |> LvProcessQueries.get_lv_process()
     |> case do
-      {:ok, %{id: socket_id}} -> {:ok, socket_id}
+      %LvProcess{embedded?: false} = lv_process -> {:ok, lv_process.socket_id}
+      %LvProcess{embedded?: true, nested?: false} = lv_process -> get_root_socket_id(lv_process)
       _ -> {:error, :root_socket_id_not_found}
     end
   end
+
+  defp find_root_lv_process_over_transport_pid(transport_pid) do
+    LiveViewDiscovery.debugged_lv_processes()
+    |> Enum.find(fn
+      %LvProcess{transport_pid: ^transport_pid, embedded?: false, nested?: false} -> true
+      _ -> false
+    end)
+  end
 end

lib/live_debugger/client/channel.ex

@@ -8,6 +8,13 @@ defmodule LiveDebugger.Client.Channel do
 
   @impl true
   def join("client:" <> _debugged_socket_id, _params, socket) do
+    Phoenix.PubSub.subscribe(@pubsub_name, "client:*")
+
+    socket.assigns.root_socket_ids
+    |> Enum.each(fn {_, socket_id} ->
+      Phoenix.PubSub.subscribe(@pubsub_name, "client:#{socket_id}")
+    end)
+
     {:ok, socket}
   end
 

lib/live_debugger/client/socket.ex

@@ -6,8 +6,12 @@ defmodule LiveDebugger.Client.Socket do
   channel("client:*", LiveDebugger.Client.Channel)
 
   @impl true
-  def connect(%{"socketID" => socket_id}, socket) do
-    socket = assign(socket, :debugged_socket_id, socket_id)
+  def connect(%{"socketID" => socket_id} = params, socket) do
+    socket =
+      socket
+      |> assign(:debugged_socket_id, socket_id)
+      |> assign(:root_socket_ids, params["rootSocketIDs"] || %{})
+
     {:ok, socket}
   end