Small fixes to html elements in instpector

Fix html elements in inspector not highlighting on hover and not having "<>" characters
thetarnav · Dec 28, 2024 · 54e3ec7 · 54e3ec7
1 parent 4001d3a
commit 54e3ec7
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 47 deletions.
diff --git a/.changeset/breezy-falcons-sniff.md b/.changeset/breezy-falcons-sniff.md
@@ -0,0 +1,5 @@
+---
+"@solid-devtools/frontend": patch
+---
+
+Fix html elements in inspector not highlighting on hover and not having "<>" characters
diff --git a/packages/frontend/src/inspector.tsx b/packages/frontend/src/inspector.tsx
@@ -604,9 +604,18 @@ export const value_node_styles = /*css*/ `
         color: ${theme.vars.disabled};
     }
 
+    .${value_element_container_class}:before {
+        content: '<';
+        color: ${theme.vars.disabled};
+    }
+    .${value_element_container_class}:after {
+        content: '>';
+        color: ${theme.vars.disabled};
+    }
     .${value_element_container_class}:hover {
         ${ui.highlight_opacity_var}: 0.6;
     }
+    /**/
 `
 
 const ValuePreview: s.Component<{
@@ -679,9 +688,13 @@ const ValuePreview: s.Component<{
                 </span>
             )
         case debug.ValueType.Element: {
-            const {onElementHover: onHover} = s.useContext(ValueContext)!
+            const ctx = s.useContext(ValueContext)!
 
-            const hoverProps = onHover && createHover(hovered => onHover(value.id, hovered))
+            const hoverProps = createHover(hovered => {
+                if (ctx.onElementHover) {
+                    ctx.onElementHover(value.id, hovered)
+                }
+            })
 
             return (
                 <span class={value_element_container} aria-label={props.label} {...hoverProps}>
@@ -782,7 +795,7 @@ export const ValueNode: s.Component<{
         >
             <div
                 class={clsx(
-                    'absolute mt-.25 -inset-y-.25 -inset-x-1 b b-solid b-dom rounded',
+                    'pointer-events-none absolute mt-.25 -inset-y-.25 -inset-x-1 b b-solid b-dom rounded',
                     props.isInspected ? 'opacity-50' : 'opacity-0',
                 )}
                 style={{'mask-image': 'linear-gradient(90deg, black, transparent)'}}

diff --git a/packages/frontend/src/structure.tsx b/packages/frontend/src/structure.tsx
@@ -840,46 +840,46 @@ export const OwnerPath: s.Component = () => {
                 )}
                 <div class="flex flex-wrap text-sm leading-3 font-mono" ref={container}>
                     {path().map(node => {
-                        const hoverProps = createHover(hovering =>
-                            hovered.toggleHoveredNode(node.id, 'node', hovering),
-                        )
-                        return (
-                            <>
-                                <div class="w-3 h-4 mx-.5 center-child first:hidden">
-                                    <ui.Icon.CarretRight class="w-2 h-2 mb-[0.15rem] text-disabled" />
-                                </div>
+
+                        const hoverProps = createHover(hovering => {
+                            hovered.toggleHoveredNode(node.id, 'node', hovering)
+                        })
+
+                        return <>
+                            <div class="w-3 h-4 mx-.5 center-child first:hidden">
+                                <ui.Icon.CarretRight class="w-2 h-2 mb-[0.15rem] text-disabled" />
+                            </div>
+                            <div
+                                class={`${ui.highlight_container} h-3 p-y-.25 my-0.25
+                                flex items-center gap-x-1 cursor-pointer`}
+                                style={{
+                                    [ui.highlight_opacity_var]: hovered.isNodeHovered(node.id)
+                                        ? '0.3'
+                                        : '0',
+                                }}
+                                {...hoverProps}
+                                onClick={() => inspector.setInspectedOwner(node.id)}
+                            >
                                 <div
-                                    class={`${ui.highlight_container} h-3 p-y-.25 my-0.25
-                                    flex items-center gap-x-1 cursor-pointer`}
-                                    style={{
-                                        [ui.highlight_opacity_var]: hovered.isNodeHovered(node.id)
-                                            ? '0.3'
-                                            : '0',
-                                    }}
-                                    {...hoverProps}
-                                    onClick={() => inspector.setInspectedOwner(node.id)}
-                                >
+                                    class={`${ui.highlight_element} b b-solid b-gray-400 rounded-sm`}
+                                />
+                                {node.type === debug.NodeType.Component ||
+                                 node.type === debug.NodeType.Element ? (
                                     <div
-                                        class={`${ui.highlight_element} b b-solid b-gray-400 rounded-sm`}
+                                        class={node.type === debug.NodeType.Component
+                                            ? 'text-text'
+                                            : 'text-disabled'}
+                                    >
+                                        {node.name || debug.UNKNOWN}
+                                    </div>
+                                ) : (
+                                    <ui.Node_Type_Icon
+                                        type={node.type}
+                                        class="w-2.5 h-2.5 text-disabled"
                                     />
-                                    {node.type === debug.NodeType.Component ||
-                                    node.type === debug.NodeType.Element ? (
-                                        <div
-                                            class={node.type === debug.NodeType.Component
-                                                ? 'text-text'
-                                                : 'text-disabled'}
-                                        >
-                                            {node.name || debug.UNKNOWN}
-                                        </div>
-                                    ) : (
-                                        <ui.Node_Type_Icon
-                                            type={node.type}
-                                            class="w-2.5 h-2.5 text-disabled"
-                                        />
-                                    )}
-                                </div>
-                            </>
-                        )
+                                )}
+                            </div>
+                        </>
                     })}
                 </div>
             </div>

diff --git a/packages/shared/src/primitives.ts b/packages/shared/src/primitives.ts
@@ -36,19 +36,27 @@ export function createHover(handle: (hovering: boolean) => void): {
 } {
     let state = false
     let mounted = true
+
     const mql = window.matchMedia('(hover: none)')
-    let isTouch = mql.matches
-    makeEventListener(mql, 'change', ({matches}) => {
-        if ((isTouch = matches)) handle((state = false))
+    let is_touch = mql.matches
+
+    makeEventListener(mql, 'change', e => {
+        if (is_touch = e.matches) {
+            handle(state = false)
+        }
     })
+
     onCleanup(() => {
         mounted = false
-        if (state) handle((state = false))
+        if (state) handle(state = false)
     })
-    const onChange = (newState: boolean): void => {
-        if (isTouch || !mounted) return
-        state !== newState && handle((state = newState))
+
+    const onChange = (new_state: boolean): void => {
+        if (!is_touch && mounted && state !== new_state) {
+            handle(state = new_state)
+        }
     }
+
     return {
         onMouseEnter: () => onChange(true),
         onMouseLeave: () => setTimeout(() => onChange(false)),