Use placeholder toggle for data objects

resources/day8/re_frame/trace/main.css

@@ -456,3 +456,11 @@
   color: #8f8f8f;
   content: "}";
 }
+#--re-frame-trace-- .re-frame-trace--object:before {
+  color: #8f8f8f;
+  content: "▶ ";
+}
+#--re-frame-trace-- .re-frame-trace--object:after {
+  color: #222222;
+  content: "{...}";
+}

resources/day8/re_frame/trace/main.less

@@ -574,4 +574,14 @@
       content: "}";
     }
   }
+  .re-frame-trace--object {
+    &:before {
+      color: @text-color-muted;
+      content: "▶ ";
+    }
+    &:after {
+      color: @text-color;
+      content: "{...}";
+    }
+  }
 }

src/day8/re_frame/trace/app_state.cljs

@@ -32,20 +32,15 @@
 
 (defn jsonml-style
   [style-map]
-  ; {:style (get style-map "style")}
-  {:style {:background "rgba(0,0,0,0.1)"}})
+  {:style {:background "rgba(0,0,0,0.04)"}})
 
 (defn str->hiccup
   [string]
-  ; (println string)
-  (cond (= string "span")  :span
-        (= string "style") :style
-        ; (= string "}")     nil
-        ; (= string "{")     nil
-        ; (= string " ")     nil
-        ; (= string ", ")    nil
-        :else              string))
-
+  (println string)
+  (cond (= string "span")   :span
+        (= string "style")  :style
+        (= string "object") :span.re-frame-trace--object
+        :else               string))
 
 (defn crawl
   [data]
@@ -63,5 +58,5 @@
 (defn tab [data]
   [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
     [:div.panel-content-scrollable
-      (jsonml->hiccup (js->clj (cljs-devtools/header-api-call data)))]])
+      (jsonml->hiccup (js->clj (cljs-devtools/header-api-call data) :keywordize-keys true))]])
       ; (crawl data)]])