Highlight connections between <a> / <form> and the corresponding Turbo Frame

Author: leonvogt

public/styles/panel/main.css

@@ -58,6 +58,8 @@
 
   --wa-border-width-scale: 1;
   --wa-space-scale: 0.625;
+
+  --pane-footer-height: 2rem;
 }
 
 body {
@@ -200,6 +202,10 @@ button.action-icon:active svg {
   height: 100%;
 }
 
+wa-tab-panel .pane-container {
+  max-height: calc(100% - var(--pane-footer-height));
+}
+
 .pane-header {
   border-bottom: 3px solid var(--wa-color-surface-border);
   margin-bottom: 0.5em;
@@ -216,7 +222,7 @@ button.action-icon:active svg {
 }
 
 .pane-footer {
-  height: 2rem;
+  height: var(--pane-footer-height);
   position: relative;
   background-color: var(--wa-color-surface-raised);
 }
@@ -439,3 +445,7 @@ wa-input[size="extra-small"] {
   height: 100%;
   padding: 0;
 }
+
+.pane-container wa-tab::part(base) {
+  padding: 0.2rem 1.5em;
+}

src/browser_panel/page/backend.js

@@ -6,6 +6,7 @@ import TurboCableObserver from "./turbo_cable_observer.js"
 import StimulusObserver from "./stimulus_observer.js"
 import TurboAttributeElementsObserver from "./turbo_attribute_elements_observer.js"
 import ElementObserver from "./element_observer.js"
+import LeaderLine from "$lib/leader_line.js"
 
 // This is the backend script which interacts with the page's DOM.
 // It observes changes and relays information to the DevTools panel.
@@ -309,6 +310,24 @@ function init() {
       }
     }
 
+    showTurboFrameConnections(turboFrameId, triggerSelector) {
+      this.removeTurboFrameConnections()
+      if (!turboFrameId || !triggerSelector) {
+        return
+      }
+
+      document.querySelectorAll(triggerSelector).forEach((trigger) => {
+        const turboFrame = document.getElementById(trigger.dataset.turboFrame)
+        if (turboFrame) {
+          new LeaderLine(trigger, turboFrame)
+        }
+      })
+    }
+
+    removeTurboFrameConnections() {
+      document.querySelectorAll(".leader-line").forEach((line) => line.remove())
+    }
+
     getElementsByPayload(payload) {
       if (payload.elementPath) {
         return [getElementFromIndexPath(payload.elementPath)]
@@ -401,6 +420,18 @@ function init() {
             }
           })
         }
+        break
+      }
+      case PANEL_TO_BACKEND_MESSAGES.SHOW_TURBO_FRAME_CONNECTIONS: {
+        const turboFrameId = e.data.payload.turboFrameId
+        const triggerSelector = e.data.payload.triggerSelector
+
+        devtoolsBackend.showTurboFrameConnections(turboFrameId, triggerSelector)
+        break
+      }
+      case PANEL_TO_BACKEND_MESSAGES.HIDE_TURBO_FRAME_CONNECTIONS: {
+        devtoolsBackend.removeTurboFrameConnections()
+        break
       }
     }
   }

src/browser_panel/panel/tabs/TurboTab.svelte

@@ -184,6 +184,42 @@
     })
   }
 
+  const showTurboFrameConnections = (triggerElement) => {
+    if (selected.type !== SELECTABLE_TYPES.TURBO_FRAME || !selected.uuid) return
+
+    const triggerSelector = triggerElement ? selectorByUUID(triggerElement.uuid) : null
+
+    addHighlightOverlay(`${triggerSelector}, ${selectorByUUID(selected.uuid)}`)
+    panelPostMessage({
+      action: PANEL_TO_BACKEND_MESSAGES.SHOW_TURBO_FRAME_CONNECTIONS,
+      source: HOTWIRE_DEV_TOOLS_PANEL_SOURCE,
+      turboFrameId: selected.frame.id,
+      triggerSelector: triggerSelector,
+    })
+  }
+
+  const showAllTurboFrameConnections = () => {
+    if (selected.type !== SELECTABLE_TYPES.TURBO_FRAME || !selected.uuid) return
+    const triggerElements = selected.frame.referenceElements
+    const selectors = triggerElements.map((el) => selectorByUUID(el.uuid))
+    selectors.push(selectorByUUID(selected.uuid))
+    addHighlightOverlay(selectors.join(", "))
+    panelPostMessage({
+      action: PANEL_TO_BACKEND_MESSAGES.SHOW_TURBO_FRAME_CONNECTIONS,
+      source: HOTWIRE_DEV_TOOLS_PANEL_SOURCE,
+      turboFrameId: selected.frame.id,
+      triggerSelector: `[data-turbo-frame='${selected.frame.id}']`,
+    })
+  }
+
+  const hideTurboFrameConnections = () => {
+    panelPostMessage({
+      action: PANEL_TO_BACKEND_MESSAGES.HIDE_TURBO_FRAME_CONNECTIONS,
+      source: HOTWIRE_DEV_TOOLS_PANEL_SOURCE,
+    })
+    hideHighlightOverlay()
+  }
+
   const handleFrameListKeyboardNavigation = (event) => {
     if (!turboFrames.length) return
     event.preventDefault() // Prevents automatic browser scrolling
@@ -475,11 +511,11 @@
             {#if selected.type === SELECTABLE_TYPES.TURBO_FRAME && selected.uuid}
               <div class="pane-scrollable-list">
                 {#if selected.frame.referenceElements.length > 0}
-                  <div class="pane-section-heading">
+                  <div class="pane-section-heading" onmouseenter={showAllTurboFrameConnections} onmouseleave={hideTurboFrameConnections} role="button" tabindex="0">
                     <span>Targeted by</span>
                   </div>
                   {#each selected.frame.referenceElements as referenceElement}
-                    <div class="entry-row p-2 border-bottom" onmouseenter={() => addHighlightOverlay(selectorByUUID(referenceElement.uuid))} onmouseleave={() => hideHighlightOverlay()} role="button" tabindex="0">
+                    <div class="entry-row p-2 border-bottom" onmouseenter={() => showTurboFrameConnections(referenceElement)} onmouseleave={hideTurboFrameConnections} role="button" tabindex="0">
                       <div class="d-flex justify-content-between align-items-center">
                         <StripedHtmlTag element={referenceElement} />
                         <InspectButton class="btn-hoverable" uuid={referenceElement.uuid}></InspectButton>

src/lib/constants.js

@@ -33,6 +33,8 @@ export const PANEL_TO_BACKEND_MESSAGES = {
   REFRESH_ALL_STATE: "refresh-all-state",
   SCROLL_AND_HIGHLIGHT: "scroll-and-highlight",
   UPDATE_DATA_ATTRIBUTE: "update-data-attribute",
+  SHOW_TURBO_FRAME_CONNECTIONS: "show-turbo-frame-connections",
+  HIDE_TURBO_FRAME_CONNECTIONS: "hide-turbo-frame-connections",
 }
 
 export const TURBO_EVENTS = [