diff --git a/CHANGELOG.md b/CHANGELOG.md index 050dc48..aee7afc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file. This change ### Added +* New event panel. This panel shows the coeffects given to your event handler, the effects your event handler produced, and all of the interceptors in the chain. * Debugging instructions if re-frame-trace fails to start. * Setting to drop low level traces. This reduces the memory overhead of re-frame-trace as we can drop more traces that you are unlikely to want most of the time. @@ -20,7 +21,7 @@ All notable changes to this project will be documented in this file. This change * External windows not loading * All app-db and subscription path expansions are now independent of each other [#134](https://github.com/Day8/re-frame-trace/issues/134). * Layer 2/3 calculations are more accurate now. We now use the last seen layer level when a subscription runs, to inform it's layer level if it was created or destroyed. -* View namespaces that are ignored are no longer shown when showing traces for all epochs. +* View namespaces that are ignored are no longer shown when showing traces for all epochs. diff --git a/src/day8/re_frame/trace/common_styles.cljs b/src/day8/re_frame/trace/common_styles.cljs index 70134b9..0377319 100644 --- a/src/day8/re_frame/trace/common_styles.cljs +++ b/src/day8/re_frame/trace/common_styles.cljs @@ -50,6 +50,8 @@ (def sub-re-run-color "#219653") (def sub-not-run-color "#bdbdbd") +(def expansion-button-horizontal-padding (px 2)) + (defn panel-style ([border-radius] {:background-color "#fafbfc" @@ -128,6 +130,7 @@ (def sidebar-item-check-color strong-button-background-color) (def sidebar-text-color "white") (def navbar-text-color "white") +(def navbar-tint-lighter "#797B7B") (def wizard-panel-background-color "#636A6F") ;; Very dark grey (def wizard-panel-text-color "white") diff --git a/src/day8/re_frame/trace/metamorphic.cljc b/src/day8/re_frame/trace/metamorphic.cljc index a74a994..1215cd3 100644 --- a/src/day8/re_frame/trace/metamorphic.cljc +++ b/src/day8/re_frame/trace/metamorphic.cljc @@ -85,8 +85,7 @@ (defn summarise-event [ev] (-> ev (dissoc :start :duration :end :child-of) - (utils/dissoc-in [:tags :app-db-before]) - (utils/dissoc-in [:tags :app-db-after]))) + (update :tags dissoc :app-db-before :app-db-after :effects :coeffects))) (defn summarise-match [match] diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs index e09a8cd..b169c63 100644 --- a/src/day8/re_frame/trace/styles.cljs +++ b/src/day8/re_frame/trace/styles.cljs @@ -9,7 +9,8 @@ [day8.re-frame.trace.view.app-db :as app-db] [cljs.spec.alpha :as spec] [day8.re-frame.trace.view.timing :as timing] - [day8.re-frame.trace.view.settings :as settings])) + [day8.re-frame.trace.view.settings :as settings] + [day8.re-frame.trace.view.event :as event])) (def background-gray common/background-gray) (def background-gray-hint common/background-gray-hint) @@ -408,12 +409,13 @@ [:.toggle {:color text-color-muted :cursor "pointer" :line-height 1}] - ["> span" {:vertical-align "text-top"}]] + ["> span" {:vertical-align "text-top"}] + [:li {:margin 0}]] [:.host-closed {:font-size (em 4) :background-color (color/rgba 255 255 0 0.8)}] [:.expansion-button {:font-family "sans-serif" :width (px 16) - :padding "0 2px" + :padding [[0 common/expansion-button-horizontal-padding]] :vertical-align "middle"}] [:.bm-muted-button {:font-size "14px" :height "23px" @@ -433,6 +435,7 @@ re-frame-trace-styles app-db/app-db-styles timing/timing-styles + event/event-styles settings/settings-styles])) ;(def panel-styles (macros/slurp-macro "day8/re_frame/trace/main.css")) diff --git a/src/day8/re_frame/trace/view/app_db.cljs b/src/day8/re_frame/trace/view/app_db.cljs index 308fcbb..aebb477 100644 --- a/src/day8/re_frame/trace/view/app_db.cljs +++ b/src/day8/re_frame/trace/view/app_db.cljs @@ -46,7 +46,7 @@ :border-bottom-right-radius border-radius}] [:.app-db-path--header - {:background-color "#797B7B" ; Name this navbar tint-lighter + {:background-color common/navbar-tint-lighter :color "white" :height common/gs-31 :border-top-left-radius border-radius diff --git a/src/day8/re_frame/trace/view/components.cljs b/src/day8/re_frame/trace/view/components.cljs index dd2fb29..a42cc87 100644 --- a/src/day8/re_frame/trace/view/components.cljs +++ b/src/day8/re_frame/trace/view/components.cljs @@ -209,12 +209,13 @@ (nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)] @expanded? (jsonml->hiccup (cljs-devtools-header data) (conj path 0)))]]))) -(defn simple-render [data path] +(defn simple-render [data path & [class]] (let [expanded? (r/atom true) #_(rf/subscribe [:app-db/node-expanded? path])] (fn [data] [:div {:class (str/join " " ["re-frame-trace--object" - (when @expanded? "expanded")])} + (when @expanded? "expanded") + class])} #_[:span {:class "toggle" :on-click #(rf/dispatch [:app-db/toggle-expansion path])} [:button.expansion-button (if @expanded? "▼ " "▶ ")]] diff --git a/src/day8/re_frame/trace/view/container.cljs b/src/day8/re_frame/trace/view/container.cljs index c6f782c..f69998d 100644 --- a/src/day8/re_frame/trace/view/container.cljs +++ b/src/day8/re_frame/trace/view/container.cljs @@ -133,9 +133,7 @@ :gap "7px" :align :end :height "50px" - ;; TODO: event tab - :children [(when (:debug? opts) - (tab-button :event "Event")) + :children [(tab-button :event "Event") (tab-button :app-db "app-db") (tab-button :subs "Subs") ;(tab-button :views "Views") @@ -151,7 +149,7 @@ [rc/v-box :size "auto" :style {:margin-left common/gs-19s - :overflow-y (if (contains? #{:timing :debug} @selected-tab) + :overflow-y (if (contains? #{:timing :debug :event} @selected-tab) "auto" "initial") ;:overflow "auto" ;; TODO: Might have to put this back or add scrolling within the panels } diff --git a/src/day8/re_frame/trace/view/event.cljs b/src/day8/re_frame/trace/view/event.cljs index 9f7629d..4df7072 100644 --- a/src/day8/re_frame/trace/view/event.cljs +++ b/src/day8/re_frame/trace/view/event.cljs @@ -1,19 +1,50 @@ (ns day8.re-frame.trace.view.event (:require [day8.re-frame.trace.utils.re-com :as rc] - [day8.re-frame.trace.metamorphic :as metam])) + [day8.re-frame.trace.metamorphic :as metam] + [day8.re-frame.trace.view.components :as components] + [day8.re-frame.trace.common-styles :as common] + [mranderson047.garden.v1v3v3.garden.units :as units] + [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]) + (:require-macros [day8.re-frame.trace.utils.macros :refer [with-cljs-devtools-prefs]])) + +(def pod-border-color "#daddde") +(def pod-border-edge (str "1px solid " pod-border-color)) +(def border-radius "3px") + +(def event-styles + [:#--re-frame-trace-- + [:.event-panel + {:padding "39px 19px 0px 0px"}] + [:.event-section] + [:.event-section--header + {:background-color common/navbar-tint-lighter + :color common/navbar-text-color + :height common/gs-19 + :font-size "14px" + :padding [[0 common/gs-12]] + }] + [:.event-section--data + {:background-color "rgba(100, 255, 100, 0.08)" + :padding-left (units/px- common/gs-12 common/expansion-button-horizontal-padding) + :overflow-x "auto"}] + ]) + +(defn event-section [title data] + [rc/v-box + :class "event-section" + :children + [[rc/h-box + :class "event-section--header app-db-path--header" + :align :center + :children [[:h2 title]]] + + [components/simple-render data [title] "event-section--data app-db-path--pod-border"]]]) (defn render [] - [rc/v-box - :padding "12px 0px" - :children [[rc/label :label "Event"] - [rc/label :label "Dispatch Point"] - [rc/label :label "Coeffects"] - [rc/label :label "Effects"] - [rc/label :label "Interceptors"] - - [rc/h-box - :children [[:p "Subs Run"] [:p "Created"] [:p "Destroyed"]]] - [:p "Views Rendered"] - [rc/h-box - :children [[:p "Timing"] [:p "Animation Frames"]]] - ]]) + (let [event-trace @(rf/subscribe [:epochs/current-event-trace])] + [rc/v-box + :class "event-panel" + :gap common/gs-19s + :children [[event-section "Coeffects" (get-in event-trace [:tags :coeffects])] + [event-section "Effects" (get-in event-trace [:tags :effects])] + [event-section "Interceptors" (get-in event-trace [:tags :interceptors])]]]))