Update logos and styles

README.md

@@ -109,3 +109,4 @@ If you want to work on re-frame-trace, see [DEVELOPERS.md](DEVELOPERS.md).
 * [Settings](https://thenounproject.com/search/?q=settings&i=1169241) by arjuazka from the Noun Project
 * [Wrench](https://thenounproject.com/icon/1013218/) by Aleksandr Vector from the Noun Project
 * [pause](https://thenounproject.com/icon/1376662/) by Bhuvan from the Noun Project
+* [Log Out](https://thenounproject.com/icon/54484/) by Arthur Shlain from the Noun Project

resources/day8/re_frame/trace/images/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="15 15 70 70" enable-background="new 0 0 100 100" xml:space="preserve"><g fill="white" transform="rotate(-45, 50, 50)"><path d="M50.015,82.6c8.352,0,16.704-3.179,23.062-9.537c0.977-0.976,0.977-2.559,0-3.535s-2.559-0.977-3.535,0  c-10.769,10.766-28.287,10.765-39.054,0c-10.767-10.768-10.767-28.287,0-39.055c10.768-10.766,28.286-10.766,39.054,0  c0.977,0.977,2.559,0.977,3.535,0s0.977-2.56,0-3.535c-12.717-12.717-33.408-12.717-46.124,0c-12.717,12.717-12.717,33.408,0,46.125  C33.311,79.421,41.663,82.6,50.015,82.6z"/><path d="M94.37,48.229c-0.002-0.002-0.003-0.002-0.005-0.004L83.725,37.585c-0.977-0.977-2.559-0.977-3.535,0s-0.977,2.559,0,3.535  l6.38,6.38H57.063c-1.03-2.903-3.792-4.985-7.048-4.985c-4.134,0-7.485,3.351-7.485,7.485c0,4.134,3.351,7.485,7.485,7.485  c3.256,0,6.018-2.082,7.048-4.985h29.506l-6.38,6.38c-0.977,0.977-0.977,2.559,0,3.535c0.488,0.488,1.128,0.732,1.768,0.732  s1.279-0.244,1.768-0.732L96.14,50l-1.765-1.765C94.373,48.233,94.372,48.231,94.37,48.229z"/></g></svg>

resources/day8/re_frame/trace/images/pause.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>13</title><g fill="white" data-name="Group"><path data-name="Path" d="M41.79,35.26a2,2,0,0,0-2,2V62.74a2,2,0,1,0,4,0V37.26A2,2,0,0,0,41.79,35.26Z"/><path data-name="Path" d="M58.21,35.26a2,2,0,0,0-2,2V62.74a2,2,0,1,0,4,0V37.26A2,2,0,0,0,58.21,35.26Z"/><path data-name="Compound Path" d="M50,18.44A31.56,31.56,0,1,0,81.56,50,31.6,31.6,0,0,0,50,18.44Zm0,59.12A27.56,27.56,0,1,1,77.56,50,27.59,27.59,0,0,1,50,77.56Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="15 15 70 70" x="0px" y="0px"><title>13</title><g fill="white" data-name="Group"><path data-name="Path" d="M41.79,35.26a2,2,0,0,0-2,2V62.74a2,2,0,1,0,4,0V37.26A2,2,0,0,0,41.79,35.26Z"/><path data-name="Path" d="M58.21,35.26a2,2,0,0,0-2,2V62.74a2,2,0,1,0,4,0V37.26A2,2,0,0,0,58.21,35.26Z"/><path data-name="Compound Path" d="M50,18.44A31.56,31.56,0,1,0,81.56,50,31.6,31.6,0,0,0,50,18.44Zm0,59.12A27.56,27.56,0,1,1,77.56,50,27.59,27.59,0,0,1,50,77.56Z"/></g></svg>

resources/day8/re_frame/trace/images/wrench.svg

@@ -1 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 164 205" enable-background="new 0 0 164 164" xml:space="preserve"><path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M81.84,164c-15.38,0-29.768-4.246-42.059-11.625L77.6,114.557  c34.776,10.805,55.768-19.881,43.504-49.777L99.648,86.235C85.9,100.154,65.377,79.619,79.119,65.877l21.541-21.542  c-25.989-15.371-63.361,9.68-50.728,44.244l-37.29,37.289C4.638,113.223,0,98.233,0,82.16C0,36.961,36.641,0.32,81.84,0.32  c45.199,0,81.839,36.641,81.839,81.84S127.039,164,81.84,164z"/></svg>
+<svg width="31" height="32" viewBox="0 0 31 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>Vector</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-3725 368)">
+    <g id="Vector">
+        <use xlink:href="#path0_fill" transform="translate(3725 -367.837)" fill="#F3F6F7"/>
+    </g>
+</g>
+<defs>
+    <path id="path0_fill" fill-rule="evenodd"
+          d="M 15.5001 31C 12.5872 31 9.86218 30.1958 7.53433 28.7983L 14.6971 21.6358C 21.2835 23.6822 25.2592 17.8705 22.9365 12.2083L 18.8728 16.2718C 16.269 18.908 12.3821 15.0188 14.9848 12.4161L 19.0645 8.33617C 14.1423 5.425 7.06425 10.1695 9.45688 16.7157L 2.39433 23.778C 0.878415 21.3831 0 18.5441 0 15.5C 0 6.93958 6.93962 -1.35465e-09 15.5001 -1.35465e-09C 24.0606 -1.35465e-09 31 6.93958 31 15.5C 31 24.0604 24.0606 31 15.5001 31Z"/>
+</defs>
+</svg>

src/day8/re_frame/trace/styles.cljs

@@ -68,6 +68,11 @@
     (s/attr= "type" "reset")
     (s/attr= "type" "submit")
     {:-webkit-appearance "button"}]
+"input[type=\"checkbox\" i] {\n    -webkit-appearance: checkbox;\n    box-sizing: border-box;\n}"
+   [:input
+    (s/attr= "type" "checkbox")
+    {:-webkit-appearance "checkbox"
+     :box-sizing "border-box"}]
 
    [:button:-moz-focusring
     (s/attr= "type" "button")
@@ -225,8 +230,8 @@
    [:.icon-button {:font-size "10px"}]
    [:button.tab {}]
    [:.nav-icon
-    {:width   "15px"
+    {:width   "30px"
-     :height  "15px"
+     :height  "30px"
      :cursor  "pointer"
      :padding "0 5px"
      :margin  "0 5px"}

src/day8/re_frame/trace/utils/re_com.cljs

@@ -387,6 +387,39 @@
              attr)
            label]])
 
+(defn checkbox
+  "I return the markup for a checkbox, with an optional RHS label"
+  [& {:keys [model on-change label disabled? label-class label-style class style attr]
+      :as   args}]
+  (let [cursor      "default"
+        model       (deref-or-value model)
+        disabled?   (deref-or-value disabled?)
+        callback-fn #(when (and on-change (not disabled?))
+                       (on-change (not model)))]  ;; call on-change with either true or false
+    [h-box
+     :class "rc-checkbox-wrapper noselect"
+     :align :start
+     :children [[:input
+                 (merge
+                   {:class     (str "rc-checkbox " class)
+                    :type      "checkbox"
+                    :style     (merge (flex-child-style "none")
+                                      {:cursor cursor}
+                                      style)
+                    :disabled  disabled?
+                    :checked   (boolean model)
+                    :on-change (handler-fn (callback-fn))}
+                   attr)]
+                (when label
+                  [:span
+                   {:class    label-class
+                    :style    (merge (flex-child-style "none")
+                                     {:padding-left "8px"
+                                      :cursor       cursor}
+                                     label-style)
+                    :on-click (handler-fn (callback-fn))}
+                   label])]]))
+
 (def re-com-css
   [[:.display-flex {:display "flex"}]
    [:.display-inline-flex {:display "flex"}]])

src/day8/re_frame/trace/view/container.cljs

@@ -20,8 +20,7 @@
     [:button {:class    (str "tab button bm-heading-text " (when (= selected-tab panel-id) "active"))
               :on-click #(rf/dispatch [:settings/selected-tab panel-id])} title]))
 
-(def open-external (macros/slurp-macro "day8/re_frame/trace/images/open-external.svg"))
+(def open-external (macros/slurp-macro "day8/re_frame/trace/images/logout.svg"))
-
 (def settings-svg (macros/slurp-macro "day8/re_frame/trace/images/wrench.svg"))
 (def pause-svg (macros/slurp-macro "day8/re_frame/trace/images/pause.svg"))
 
@@ -87,6 +86,7 @@
        [:h1.host-closed {:style {:word-wrap "break-word"}} "Tracing is not enabled. Please set " [:pre "{\"re_frame.trace.trace_enabled_QMARK_\" true}"] " in " [:pre ":closure-defines"]])
      [rc/v-box
       :size "auto"
+      :style {:margin-left common/gs-19s}
       :children
       [(case @selected-tab
          :overview [overview/render]

src/day8/re_frame/trace/view/overview.cljs

@@ -1,4 +1,18 @@
-(ns day8.re-frame.trace.view.overview)
+(ns day8.re-frame.trace.view.overview
+  (:require [day8.re-frame.trace.utils.re-com :as rc]))
 
 (defn render []
-  )
+  [rc/v-box
+   :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"]]]
+    ]])

src/day8/re_frame/trace/view/settings.cljs

@@ -28,6 +28,9 @@
      :label "Low Level Trace Filters"
      :class "bm-heading-text"]
 
+    [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :reagent %]) :label "reagent internals"]
+    [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :re-frame %]) :label "re-frame internals"]
+
     [rc/label
      :label "Reset"
      :class "bm-heading-text"]

src/day8/re_frame/trace/view/subs.cljs

@@ -18,6 +18,19 @@
 (defn subs-panel []
   []
   [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}}
+   [rc/label
+    :label "Created"
+    :class "bm-heading-text"]
+   [rc/label
+    :label "Run"
+    :class "bm-heading-text"]
+   [rc/label
+    :label "Destroyed"
+    :class "bm-heading-text"]
+   [rc/label
+    :label "Not Run"
+    :class "bm-heading-text"]
+
    [:div.panel-content-scrollable
     [:div.subtrees {:style {:margin "20px 0"}}
      (doall