feat(Definitions): Highlight all instance when hovering a controller definition

Author: robinsimonklein

src/client/Inspector.ts

@@ -16,7 +16,7 @@ function createHighlightBox(target: HTMLElement, title?: string) {
   highlightBox.style.height = `${targetBoundingClientRect.height}px`;
   highlightBox.style.backgroundColor = 'rgba(119, 232, 185, 0.5)';
   highlightBox.style.borderColor = 'rgba(119, 232, 185, 1)';
-  highlightBox.style.borderWidth = '1px';
+  highlightBox.style.borderWidth = '2px';
   highlightBox.style.borderStyle = 'dashed';
 
   if (title) {
@@ -78,19 +78,21 @@ function createHighlightBox(target: HTMLElement, title?: string) {
 }
 
 export class Inspector {
-  highlightElement(args: any) {
-    const { selector, title } = args;
-    if (!selector) return;
+  highlightElements(args: { elements: { selector: string; title?: string }[] }) {
+    const { elements } = args;
+    if (!elements?.length) return;
 
-    const highlightedElement = document.querySelector(selector) as HTMLElement;
-    if (!highlightedElement) return;
+    elements.forEach(element => {
+      const highlightedElement = document.querySelector(element.selector) as HTMLElement;
+      if (!highlightedElement) return;
 
-    const highlightBox = createHighlightBox(highlightedElement, title);
+      const highlightBox = createHighlightBox(highlightedElement, element.title);
 
-    document.body.appendChild(highlightBox);
+      document.body.appendChild(highlightBox);
+    });
   }
 
-  stopHighlightElement() {
+  stopHighlightElements() {
     const highlightBoxes = document.querySelectorAll('.stimulus-devtools-highlight');
     highlightBoxes.forEach(highlightBoxe => {
       highlightBoxe.remove();

src/components/stimulus/definition/StimulusControllerDefinitionsRow.vue

@@ -3,6 +3,12 @@
     class="group inline-flex min-w-full cursor-pointer items-center gap-x-3 border-b border-dashed px-3 py-2 text-sm hover:bg-muted/60 dark:border-b-neutral-900"
     :class="{ 'is-selected !bg-muted': selectedDefinition?.identifier === definition.identifier }"
     @click="selectDefinition(definition.identifier)"
+    @mouseenter="
+      executeAction(Action.HighlightElements, {
+        elements: definition.instances.map(instance => ({ selector: instance.uidSelector })),
+      })
+    "
+    @mouseleave="executeAction(Action.StopHighlightElements)"
   >
     <div
       class="inline-flex shrink-0 items-center gap-x-1.5 opacity-70 group-hover:opacity-100 group-[.is-selected]:opacity-100"
@@ -38,6 +44,10 @@ import { computed } from 'vue';
 import { Zap } from 'lucide-vue-next';
 import { useControllerDefinitions } from '@/composables/stimulus/useControllerDefinitions.ts';
 import { ParsedStimulusControllerDefinition } from '@/types/stimulus.ts';
+import { Action } from '@/enum';
+import { useBridge } from '@/composables/useBridge.ts';
+
+const { executeAction } = useBridge();
 
 const { selectedDefinition, selectDefinition } = useControllerDefinitions();
 

src/components/stimulus/instance/StimulusControllerInstancesRow.vue

@@ -3,8 +3,12 @@
     class="group relative z-0 inline-flex min-w-full cursor-pointer items-center px-3 py-0.5 hover:bg-accent/60"
     :class="{ 'is-selected !bg-accent': selected }"
     @click.prevent="$emit('select')"
-    @mouseenter="executeAction(Action.HighlightElement, { selector: instance.uidSelector, title: instance.identifier })"
-    @mouseleave="executeAction(Action.StopHighlightElement)"
+    @mouseenter="
+      executeAction(Action.HighlightElements, {
+        elements: [{ selector: instance.uidSelector, title: instance.identifier }],
+      })
+    "
+    @mouseleave="executeAction(Action.StopHighlightElements)"
   >
     <span v-show="selected" class="absolute inset-y-0 left-0 w-[1px] bg-primary" />
     <div class="flex w-full items-center opacity-70 group-hover:opacity-100 group-[.is-selected]:opacity-100">

src/components/stimulus/members/outlets/StimulusControllerOutletsRow.vue

@@ -108,10 +108,10 @@ const toggle = () => {
 const canExpand = computed(() => !!props.outlet.references.length);
 
 const handleItemMouseEnter = (item: StimulusControllerOutletReference) => {
-  executeAction(Action.HighlightElement, { selector: item.uidSelector, title: props.outlet.name });
+  executeAction(Action.HighlightElements, { elements: [{ selector: item.uidSelector, title: props.outlet.name }] });
 };
 
 const handleItemMouseLeave = () => {
-  executeAction(Action.StopHighlightElement);
+  executeAction(Action.StopHighlightElements);
 };
 </script>

src/components/stimulus/members/targets/StimulusControllerTargetsRow.vue

@@ -88,10 +88,10 @@ const toggle = () => {
 };
 
 const handleItemMouseEnter = (element: StimulusControllerTargetElement) => {
-  executeAction(Action.HighlightElement, { selector: element.uidSelector, title: props.target.name });
+  executeAction(Action.HighlightElements, { elements: [{ selector: element.uidSelector, title: props.target.name }] });
 };
 
 const handleItemMouseLeave = () => {
-  executeAction(Action.StopHighlightElement);
+  executeAction(Action.StopHighlightElements);
 };
 </script>

src/enum/index.ts

@@ -24,6 +24,6 @@ export enum Action {
   UpdateInstanceClasses = 'updateInstanceClasses',
   UpdateValue = 'updateValue',
 
-  HighlightElement = 'highlightElement',
-  StopHighlightElement = 'stopHighlightElement',
+  HighlightElements = 'highlightElements',
+  StopHighlightElements = 'stopHighlightElements',
 }