improve styles, add changeset

Author: thetarnav

.changeset/lovely-pets-sneeze.md

@@ -0,0 +1,6 @@
+---
+"solid-devtools-extension": minor
+"@solid-devtools/ui": minor
+---
+
+Display nested signal values as a collapsable tree.

packages/ui/src/signal/SignalNode.css.ts

@@ -17,7 +17,7 @@ export const Signals = {
   }),
 }
 
-const { container, highlight, bgColorVar, bgOpacityVar } = createHighlightStyles("background-color")
+const { container, highlight, bgColorVar, bgOpacityVar } = createHighlightStyles()
 
 export const ValueRow = {
   container: style([
@@ -30,20 +30,25 @@ export const ValueRow = {
       // height: spacing[4.5],
       cursor: "pointer",
       vars: {
-        [bgColorVar]: "transparent",
-        [bgOpacityVar]: "1",
+        [bgColorVar]: color.gray[300],
+        [bgOpacityVar]: "0",
       },
     },
   ]),
   containerFocused: style({
     vars: {
-      [bgColorVar]: color.gray[100],
+      [bgOpacityVar]: "0.2",
     },
   }),
   containerHovered: style({
-    vars: { [bgColorVar]: color.gray[200] },
+    vars: { [bgOpacityVar]: "0.3" },
   }),
-  highlight: style([highlight, {}]),
+  highlight: style([
+    highlight,
+    {
+      border: `1px solid ${color.gray[400]}`,
+    },
+  ]),
 }
 
 export const ValueName = {
@@ -111,12 +116,6 @@ export const collapsable = {
   }),
 }
 
-export const EmptyArray = style([
-  baseValue,
-  {
-    color: color.disabled,
-  },
-])
 export const ValueString = style({
   minHeight: RowHeight,
   color: color.green,

packages/ui/src/signal/SignalNode.tsx

@@ -74,6 +74,28 @@ const ElementValuePreview: ValueComponent<ValueType.Element> = props => (
   <span class={styles.ValueElement}>{props.value}</span>
 )
 
+const ObjectValuePreview: Component<
+  EncodedValueOf<ValueType.Object | ValueType.Array, boolean> & { extended?: boolean }
+> = props => (
+  <Switch>
+    <Match when={!props.children || props.value === 0 || props.extended === false}>
+      <Show
+        when={props.value > 0}
+        fallback={
+          <span class={styles.Nullable}>
+            Empty {props.type === ValueType.Array ? "Array" : "Object"}
+          </span>
+        }
+      >
+        <span class={styles.baseValue}>
+          {props.type === ValueType.Array ? "Array" : "Object"} [{props.value}]
+        </span>
+      </Show>
+    </Match>
+    <Match when={props.children}>{value => <CollapsableObjectPreview value={value} />}</Match>
+  </Switch>
+)
+
 const CollapsableObjectPreview: Component<{
   value:
     | EncodedValueOf<ValueType.Object, true>["children"]
@@ -123,30 +145,6 @@ const CollapsableObjectPreview: Component<{
   </ul>
 )
 
-const ObjectValuePreview: Component<
-  EncodedValueOf<ValueType.Object | ValueType.Array, boolean> & { extended?: boolean }
-> = props => (
-  <Switch>
-    <Match when={!props.children || props.value === 0 || props.extended === false}>
-      <Switch>
-        <Match when={props.type === ValueType.Object}>
-          <span class={styles.ValueObject}>…</span>
-        </Match>
-        <Match when={props.type === ValueType.Array}>
-          <ArrayHead value={props.value} />
-        </Match>
-      </Switch>
-    </Match>
-    <Match when={props.children}>{value => <CollapsableObjectPreview value={value} />}</Match>
-  </Switch>
-)
-
-const ArrayHead: Component<{ value: number }> = props => (
-  <Show when={props.value > 0} fallback={<span class={styles.EmptyArray}>Empty Array</span>}>
-    <span class={styles.baseValue}>Array [{props.value}]</span>
-  </Show>
-)
-
 const ValuePreview: Component<{ value: EncodedValue<boolean> }> = props =>
   createMemo(() => {
     switch (props.value.type) {