Toggling data structures with arrows only, not body

resources/day8/re_frame/trace/main.css

@@ -456,13 +456,9 @@
   color: #8f8f8f;
   content: "}";
 }
-#--re-frame-trace-- .re-frame-trace--object:before {
+#--re-frame-trace-- .re-frame-trace--object .toggle {
   color: #8f8f8f;
-  content: "▶ ";
-}
-#--re-frame-trace-- .re-frame-trace--object.expanded:before {
-  color: #8f8f8f;
-  content: "▼ ";
+  cursor: pointer;
 }
 #--re-frame-trace-- .re-frame-trace--object > span {
   vertical-align: text-top;

resources/day8/re_frame/trace/main.less

@@ -575,14 +575,23 @@
     }
   }
   .re-frame-trace--object {
-    &:before {
+    .toggle {
       color: @text-color-muted;
-      content: "▶ ";
+      cursor: pointer;
     }
-    &.expanded {
+    &>span {
+      vertical-align: text-top;
+    }
+  }
+  .data-structure-editable {
+    &.string {
       &:before {
         color: @text-color-muted;
-        content: "▼ ";
+        content: "\"";
+      }
+      &:after {
+        color: @text-color-muted;
+        content: "\"";
       }
     }
 

src/day8/re_frame/trace/app_state.cljs

@@ -22,13 +22,15 @@
 
 (defn data-structure
   [jsonml]
-  (let [expand? (r/atom true)]
+  (let [expanded? (r/atom true)]
     (fn [jsonml]
       [:span
         {:class (str/join " " ["re-frame-trace--object"
-                               (when @expand? "expanded")])
-         :on-click #(swap! expand? not)}
-        (jsonml->hiccup (if @expand?
+                               (when @expanded? "expanded")])}
+        [:span {:class "toggle"
+                :on-click #(swap! expanded? not)}
+           (if @expanded? "▼" "▶")]
+        (jsonml->hiccup (if @expanded?
                           (cljs-devtools/body-api-call
                             (.-object (get jsonml 1))
                             (.-config (get jsonml 1)))