From 0c336605f393d8ad8c7a71a1efb25bc179a6ce76 Mon Sep 17 00:00:00 2001
From: Saskia Lindner <saskia.li@fu-berlin.de>
Date: Fri, 25 Aug 2017 11:23:07 +0200
Subject: [PATCH 01/18] Save traces and detail expansions to localstorage

fixes #54
---
 src/day8/re_frame/trace.cljs | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index 96d99fb..7ac5b3c 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -94,7 +94,8 @@
                 (real-schedule)))))
 
 
-(def traces (interop/ratom []))
+(def traces (interop/ratom (localstorage/get "traces" [])))
+
 (defn log-trace? [trace]
   (let [rendering? (= (:op-type trace) :render)]
     (if-not rendering?
@@ -191,7 +192,15 @@
         filter-items               (r/atom (localstorage/get "filter-items" []))
         filter-type                (r/atom :contains)
         input-error                (r/atom false)
-        trace-detail-expansions    (r/atom {:show-all? false :overrides {}})]
+        trace-detail-expansions    (r/atom (localstorage/get "trace-detail-expansion" {:show-all? false :overrides {}}))]
+    (add-watch traces
+               :update-traces
+               (fn [_ _ _ new-state]
+                 (localstorage/save! "traces" new-state)))
+    (add-watch trace-detail-expansions
+               :update-trace-detail-expansions
+               (fn [_ _ _ new-state]
+                 (localstorage/save! "trace-detail-expansion" new-state)))
     (add-watch filter-items
                :update-localstorage
                (fn [_ _ _ new-state]

From d5aefa9b1d81d95fc720552f4ca9bb81762d0e72 Mon Sep 17 00:00:00 2001
From: Saskia Lindner <saskia.li@fu-berlin.de>
Date: Fri, 25 Aug 2017 11:43:00 +0200
Subject: [PATCH 02/18] Pin traces to bottom for autoscrolling

---
 src/day8/re_frame/trace.cljs            | 47 +++++++++++++------------
 src/day8/re_frame/trace/components.cljs | 33 ++++++++++++++++-
 src/day8/re_frame/trace/styles.cljs     |  6 ++--
 3 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index 616f004..f437544 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -227,29 +227,30 @@
                           (:filter-type item) ": " [:span.filter-item-string (:query item)]
                           [:span.icon-button [components/icon-remove]]]])
                   @filter-items)]]
-         [:div.panel-content-scrollable
-           [:table
-            {:cell-spacing "0" :width "100%"}
-            [:thead>tr
-             [:th [:button.text-button
-                   {:style {:cursor "pointer"}
-                    :on-click (fn [ev]
-                                ;; Always reset expansions
-                                (swap! trace-detail-expansions assoc :overrides {})
-                                ;; Then toggle :show-all?
-                                (swap! trace-detail-expansions update :show-all? not))}
-                   (if (:show-all? @trace-detail-expansions) "-" "+")]]
-             [:th "operations"]
-             [:th
-               (when (pos? (count @filter-items))
-                 (str (count showing-traces) " of "))
-               (when (pos? (count @traces))
-                 (str (count @traces)))
-               " events "
-               (when (pos? (count @traces))
-                 [:span "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} "clear"] ")"])]
-             [:th "meta"]]
-            [:tbody (render-traces showing-traces trace-detail-expansions)]]]]))))
+         [components/autoscroll-list {:class "panel-content-scrollable" :scroll? true}
+          [:table
+           {:style {:margin-bottom 10}
+            :cell-spacing "0" :width "100%"}
+           [:thead>tr
+            [:th [:button.text-button
+                  {:style {:cursor "pointer"}
+                   :on-click (fn [ev]
+                               ;; Always reset expansions
+                               (swap! trace-detail-expansions assoc :overrides {})
+                               ;; Then toggle :show-all?
+                               (swap! trace-detail-expansions update :show-all? not))}
+                  (if (:show-all? @trace-detail-expansions) "-" "+")]]
+            [:th "operations"]
+            [:th
+              (when (pos? (count @filter-items))
+                (str (count showing-traces) " of "))
+              (when (pos? (count @traces))
+                (str (count @traces)))
+              " events "
+              (when (pos? (count @traces))
+                [:span "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} "clear"] ")"])]
+            [:th "meta"]]
+           [:tbody (render-traces showing-traces trace-detail-expansions)]]]]))))
 
 (defn resizer-style [draggable-area]
   {:position "absolute" :z-index 2 :opacity 0
diff --git a/src/day8/re_frame/trace/components.cljs b/src/day8/re_frame/trace/components.cljs
index 97a33d6..bcaad1b 100644
--- a/src/day8/re_frame/trace/components.cljs
+++ b/src/day8/re_frame/trace/components.cljs
@@ -1,4 +1,6 @@
-(ns day8.re-frame.trace.components)
+(ns day8.re-frame.trace.components
+  (:require [reagent.core :as r]
+            [goog.fx.dom :as fx]))
 
 (defn icon-add []
   [:svg.icon.icon-add
@@ -13,3 +15,32 @@
     [:title "remove"]
     [:path
       {:d "M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"}]])
+
+(defn scroll! [el start end time]
+  (.play (fx/Scroll. el (clj->js start) (clj->js end) time)))
+
+(defn scrolled-to-end? [el tolerance]
+  ;; at-end?: element.scrollHeight - element.scrollTop === element.clientHeight
+  (> tolerance (- (.-scrollHeight el) (.-scrollTop el) (.-clientHeight el))))
+
+(defn autoscroll-list [{:keys [class scroll?] :as opts} childr]
+  (let [should-scroll (r/atom true)]
+    (r/create-class
+      {:display-name "autoscroll-list"
+       :component-did-mount
+                     (fn [this]
+                       (let [n (r/dom-node this)]
+                         (scroll! n [0 (.-scrollTop n)] [0 (.-scrollHeight n)] 0)))
+       :component-will-update
+                     (fn [this]
+                       (let [n (r/dom-node this)]
+                         (reset! should-scroll (scrolled-to-end? n 100))))
+       :component-did-update
+                     (fn [this]
+                       (let [scroll? (:scroll? (r/props this))
+                             n       (r/dom-node this)]
+                         (when (and scroll? @should-scroll)
+                           (scroll! n [0 (.-scrollTop n)] [0 (.-scrollHeight n)] 1600))))
+       :reagent-render
+                     (fn [{:keys [class]} child]
+                       [:div {:class class} child])})))
\ No newline at end of file
diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs
index 582e525..5b37b8a 100644
--- a/src/day8/re_frame/trace/styles.cljs
+++ b/src/day8/re_frame/trace/styles.cljs
@@ -95,12 +95,12 @@
   flex: 1;
 }
 #--re-frame-trace-- .panel-content-scrollable {
-  margin: 10px 0 0 10px;
-  flex: 1 0 auto;
-  height: 100%;
+  margin: 10px;
   overflow: auto;
+  flex: 1 1 auto;
 }
 #--re-frame-trace-- .filter-control {
   margin: 10px 0 0 10px;
+  flex: none;
 }
 ")

From f7cf12c1bb0a2634b503dd9fb7c2b947f55f0ff5 Mon Sep 17 00:00:00 2001
From: Saskia Lindner <saskia.li@fu-berlin.de>
Date: Mon, 28 Aug 2017 16:14:06 +0200
Subject: [PATCH 03/18] Save showing state for panel to localstorage

---
 src/day8/re_frame/trace.cljs | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index 7ac5b3c..9d12781 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -280,7 +280,7 @@
   ;; Filter out different trace types
   (let [position          (r/atom :right)
         panel-width-ratio (r/atom (localstorage/get "panel-width-ratio" 0.35))
-        showing?          (r/atom false)
+        showing?          (r/atom (localstorage/get "show-panel" false))
         dragging?         (r/atom false)
         pin-to-bottom?    (r/atom true)
         selected-tab      (r/atom :traces)
@@ -304,11 +304,14 @@
                                    y (.-clientY e)]
                                (.preventDefault e)
                                (reset! panel-width-ratio (/ (- window-width x) window-width)))))]
-
     (add-watch panel-width-ratio
                :update-panel-width-ratio
                (fn [_ _ _ new-state]
                  (localstorage/save! "panel-width-ratio" new-state)))
+    (add-watch showing?
+               :update-show-panel
+               (fn [_ _ _ new-state]
+                 (localstorage/save! "show-panel" new-state)))
     (r/create-class
       {:component-will-mount   (fn []
                                  (js/window.addEventListener "keydown" handle-keys)

From 6276a76cbbf8cd4e464c93dd4e31c2060b41aceb Mon Sep 17 00:00:00 2001
From: Saskia Lindner <saskia.li@fu-berlin.de>
Date: Mon, 28 Aug 2017 17:18:28 +0200
Subject: [PATCH 04/18] Refactor autoscrolling code

---
 src/day8/re_frame/trace.cljs            | 2 +-
 src/day8/re_frame/trace/components.cljs | 7 +++----
 src/day8/re_frame/trace/styles.cljs     | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index f437544..972111f 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -227,7 +227,7 @@
                           (:filter-type item) ": " [:span.filter-item-string (:query item)]
                           [:span.icon-button [components/icon-remove]]]])
                   @filter-items)]]
-         [components/autoscroll-list {:class "panel-content-scrollable" :scroll? true}
+         [components/autoscroll-list {:class "panel-content-scrollable"}
           [:table
            {:style {:margin-bottom 10}
             :cell-spacing "0" :width "100%"}
diff --git a/src/day8/re_frame/trace/components.cljs b/src/day8/re_frame/trace/components.cljs
index bcaad1b..a5fcd09 100644
--- a/src/day8/re_frame/trace/components.cljs
+++ b/src/day8/re_frame/trace/components.cljs
@@ -23,7 +23,7 @@
   ;; at-end?: element.scrollHeight - element.scrollTop === element.clientHeight
   (> tolerance (- (.-scrollHeight el) (.-scrollTop el) (.-clientHeight el))))
 
-(defn autoscroll-list [{:keys [class scroll?] :as opts} childr]
+(defn autoscroll-list [{:keys [class]} child]
   (let [should-scroll (r/atom true)]
     (r/create-class
       {:display-name "autoscroll-list"
@@ -37,9 +37,8 @@
                          (reset! should-scroll (scrolled-to-end? n 100))))
        :component-did-update
                      (fn [this]
-                       (let [scroll? (:scroll? (r/props this))
-                             n       (r/dom-node this)]
-                         (when (and scroll? @should-scroll)
+                       (let [n       (r/dom-node this)]
+                         (when @should-scroll
                            (scroll! n [0 (.-scrollTop n)] [0 (.-scrollHeight n)] 1600))))
        :reagent-render
                      (fn [{:keys [class]} child]
diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs
index 5b37b8a..b17a848 100644
--- a/src/day8/re_frame/trace/styles.cljs
+++ b/src/day8/re_frame/trace/styles.cljs
@@ -95,7 +95,7 @@
   flex: 1;
 }
 #--re-frame-trace-- .panel-content-scrollable {
-  margin: 10px;
+  margin: 0 0 10px 5px;
   overflow: auto;
   flex: 1 1 auto;
 }

From 3fa8da74f24f564a5cef6f9d861d045515e18696 Mon Sep 17 00:00:00 2001
From: Saskia Lindner <saskia.li@fu-berlin.de>
Date: Tue, 29 Aug 2017 14:45:43 +0200
Subject: [PATCH 05/18] Refactor autoscroll list

- add docstring
- use callback ref to reference DOM element
---
 src/day8/re_frame/trace.cljs            |  2 +-
 src/day8/re_frame/trace/components.cljs | 31 ++++++++++++++-----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index 972111f..f437544 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -227,7 +227,7 @@
                           (:filter-type item) ": " [:span.filter-item-string (:query item)]
                           [:span.icon-button [components/icon-remove]]]])
                   @filter-items)]]
-         [components/autoscroll-list {:class "panel-content-scrollable"}
+         [components/autoscroll-list {:class "panel-content-scrollable" :scroll? true}
           [:table
            {:style {:margin-bottom 10}
             :cell-spacing "0" :width "100%"}
diff --git a/src/day8/re_frame/trace/components.cljs b/src/day8/re_frame/trace/components.cljs
index a5fcd09..c25dd56 100644
--- a/src/day8/re_frame/trace/components.cljs
+++ b/src/day8/re_frame/trace/components.cljs
@@ -23,23 +23,28 @@
   ;; at-end?: element.scrollHeight - element.scrollTop === element.clientHeight
   (> tolerance (- (.-scrollHeight el) (.-scrollTop el) (.-clientHeight el))))
 
-(defn autoscroll-list [{:keys [class]} child]
-  (let [should-scroll (r/atom true)]
+(defn autoscroll-list [{:keys [class scroll?]} child]
+  "Reagent component that enables scrolling for the elements of its child dom-node.
+   Scrolling is only enabled if the list is scrolled to the end.
+   Scrolling can be set as option for debugging purposes.
+   Thanks to Martin Klepsch! Original code can be found here:
+       https://gist.github.com/martinklepsch/440e6fd96714fac8c66d892e0be2aaa0"
+  (let [node          (r/atom nil)
+        should-scroll (r/atom true)]
     (r/create-class
       {:display-name "autoscroll-list"
        :component-did-mount
-                     (fn [this]
-                       (let [n (r/dom-node this)]
-                         (scroll! n [0 (.-scrollTop n)] [0 (.-scrollHeight n)] 0)))
+                     (fn [_]
+                       (scroll! @node [0 (.-scrollTop @node)] [0 (.-scrollHeight @node)] 0))
        :component-will-update
-                     (fn [this]
-                       (let [n (r/dom-node this)]
-                         (reset! should-scroll (scrolled-to-end? n 100))))
+                     (fn [_]
+                       (reset! should-scroll (scrolled-to-end? @node 100)))
        :component-did-update
-                     (fn [this]
-                       (let [n       (r/dom-node this)]
-                         (when @should-scroll
-                           (scroll! n [0 (.-scrollTop n)] [0 (.-scrollHeight n)] 1600))))
+                     (fn [_]
+                       (when (and scroll? @should-scroll)
+                         (scroll! @node [0 (.-scrollTop @node)] [0 (.-scrollHeight @node)] 1600)))
        :reagent-render
                      (fn [{:keys [class]} child]
-                       [:div {:class class} child])})))
\ No newline at end of file
+                       [:div {:class class :ref (fn [dom-node]
+                                                  (reset! node dom-node))}
+                        child])})))
\ No newline at end of file

From 60f6082c67be7738fb6174d079183d366e817ee7 Mon Sep 17 00:00:00 2001
From: Saskia Lindner <saskia.li@fu-berlin.de>
Date: Tue, 29 Aug 2017 14:53:32 +0200
Subject: [PATCH 06/18] Remove traces from localstorage

---
 src/day8/re_frame/trace.cljs | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index 9d12781..4d9ed9b 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -94,7 +94,7 @@
                 (real-schedule)))))
 
 
-(def traces (interop/ratom (localstorage/get "traces" [])))
+(def traces (interop/ratom []))
 
 (defn log-trace? [trace]
   (let [rendering? (= (:op-type trace) :render)]
@@ -192,15 +192,7 @@
         filter-items               (r/atom (localstorage/get "filter-items" []))
         filter-type                (r/atom :contains)
         input-error                (r/atom false)
-        trace-detail-expansions    (r/atom (localstorage/get "trace-detail-expansion" {:show-all? false :overrides {}}))]
-    (add-watch traces
-               :update-traces
-               (fn [_ _ _ new-state]
-                 (localstorage/save! "traces" new-state)))
-    (add-watch trace-detail-expansions
-               :update-trace-detail-expansions
-               (fn [_ _ _ new-state]
-                 (localstorage/save! "trace-detail-expansion" new-state)))
+        trace-detail-expansions    (r/atom {:show-all? false :overrides {}})]
     (add-watch filter-items
                :update-localstorage
                (fn [_ _ _ new-state]

From 7bd773fe02896de00805402059e102931c718292 Mon Sep 17 00:00:00 2001
From: Saskia Lindner <saskia.li@fu-berlin.de>
Date: Tue, 29 Aug 2017 15:56:52 +0200
Subject: [PATCH 07/18] Load traces if panel is open

---
 src/day8/re_frame/trace.cljs | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index 4d9ed9b..14cb65c 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -267,6 +267,11 @@
 
 (def ease-transition "left 0.2s ease-out, top 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out")
 
+(defn toggle-traces [showing?]
+  (if @showing?
+    (enable-tracing!)
+    (disable-tracing!)))
+
 (defn devtools []
   ;; Add clear button
   ;; Filter out different trace types
@@ -286,9 +291,7 @@
                                (cond
                                  (and (= key "h") (.-ctrlKey e))
                                  (do (swap! showing? not)
-                                     (if @showing?
-                                       (enable-tracing!)
-                                       (disable-tracing!))
+                                     (toggle-traces showing?)
                                      (.preventDefault e))))))
         handle-mousemove  (fn [e]
                            (when @dragging?
@@ -306,6 +309,7 @@
                  (localstorage/save! "show-panel" new-state)))
     (r/create-class
       {:component-will-mount   (fn []
+                                 (toggle-traces showing?)
                                  (js/window.addEventListener "keydown" handle-keys)
                                  (js/window.addEventListener "mousemove" handle-mousemove))
        :component-will-unmount (fn []

From 483d1f5a16b24e2501198e6803ba11d0318aeb69 Mon Sep 17 00:00:00 2001
From: "chris (daiyi)" <daiyitastic@gmail.com>
Date: Fri, 25 Aug 2017 16:34:10 +0200
Subject: [PATCH 08/18] Use slurp macro to read styles from .css file

closes #24
---
 src/day8/re_frame/css/main.css      | 100 ++++++++++++++++++++++++++
 src/day8/re_frame/trace/macros.clj  |   7 ++
 src/day8/re_frame/trace/styles.cljs | 108 +---------------------------
 3 files changed, 110 insertions(+), 105 deletions(-)
 create mode 100644 src/day8/re_frame/css/main.css
 create mode 100644 src/day8/re_frame/trace/macros.clj

diff --git a/src/day8/re_frame/css/main.css b/src/day8/re_frame/css/main.css
new file mode 100644
index 0000000..4346c30
--- /dev/null
+++ b/src/day8/re_frame/css/main.css
@@ -0,0 +1,100 @@
+#--re-frame-trace-- {
+  background: white;
+  color: black;
+  font-family: 'courier new', monospace;
+}
+#--re-frame-trace-- tbody {
+  color: #aaa;
+}
+#--re-frame-trace-- tr:hover {
+  transition: all 0.1s ease-out;
+  background: aliceblue;
+  filter: brightness(90%);
+}
+#--re-frame-trace-- tr:nth-child(even) {
+  background: aliceblue;
+}
+#--re-frame-trace-- .button {
+  padding: 5px 5px 3px;
+  margin: 5px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+#--re-frame-trace-- .text-button {
+  border-bottom: 1px dotted #888;
+  font-weight: normal;
+}
+#--re-frame-trace-- .button:focus,
+#--re-frame-trace-- .text-button:focus {
+  border-radius: 2px 2px 0 0;
+  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: inset 0px -5px 0px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0px -5px 0px 0px rgba(0, 0, 0, 0.3);
+}
+#--re-frame-trace-- .icon-button {
+  font-size: 10px;
+}
+#--re-frame-trace-- .tab {
+  background: transparent;
+  border-radius: 0;
+  text-transform: uppercase;
+  font-family: monospace;
+  letter-spacing: 2px;
+  margin-bottom: 0;
+  padding-bottom: 4px;
+  vertical-align: bottom;
+}
+#--re-frame-trace-- .tab.active {
+  background: transparent;
+  border-bottom: 3px solid lightblue;
+  border-radius: 0;
+  padding-bottom: 1px;
+}
+#--re-frame-trace-- ul.filter-items {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 -5px;
+  margin-top: 10px;
+}
+#--re-frame-trace-- .filter-items li {
+  color: #333;
+  background: #efefef;
+  display: inline-block;
+  font-size: 0.9em;
+  margin: 5px;
+}
+#--re-frame-trace-- .filter-items li .filter-item-string {
+  color: #616cdb;
+}
+#--re-frame-trace-- .icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+#--re-frame-trace-- .icon-remove {
+  margin-left: 10px;
+}
+#--re-frame-trace-- select {
+  background: white;
+  font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+#--re-frame-trace-- .nav {
+  background: #efeef1;
+  color: #222;
+}
+#--re-frame-trace-- .panel-content-top {
+  flex: 1;
+}
+#--re-frame-trace-- .panel-content-scrollable {
+  margin: 10px 0 0 10px;
+  flex: 1 0 auto;
+  height: 100%;
+  overflow: auto;
+}
+#--re-frame-trace-- .filter-control {
+  margin: 10px 0 0 10px;
+}
diff --git a/src/day8/re_frame/trace/macros.clj b/src/day8/re_frame/trace/macros.clj
new file mode 100644
index 0000000..b3b2542
--- /dev/null
+++ b/src/day8/re_frame/trace/macros.clj
@@ -0,0 +1,7 @@
+(ns day8.re-frame.trace.macros
+  (:require [clojure.java.io :as io]))
+
+(defmacro slurp-macro
+  "Reads a file as a string. Slurp is wrapped in a macro so it can interact with local files before clojurescript compilation."
+  [path]
+  (slurp (io/resource path)))
diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs
index b17a848..a20b42e 100644
--- a/src/day8/re_frame/trace/styles.cljs
+++ b/src/day8/re_frame/trace/styles.cljs
@@ -1,106 +1,4 @@
-(ns day8.re-frame.trace.styles)
+(ns day8.re-frame.trace.styles
+  (:require-macros [day8.re-frame.trace.macros :as macros]))
 
-(defonce panel-styles "
-#--re-frame-trace-- {
-  background: white;
-  color: black;
-  font-family: 'courier new', monospace;
-}
-#--re-frame-trace-- tbody {
-  color: #aaa;
-}
-#--re-frame-trace-- tr:hover {
-  transition: all 0.1s ease-out;
-  background: aliceblue;
-  filter: brightness(90%);
-}
-#--re-frame-trace-- tr:nth-child(even) {
-  background: aliceblue;
-}
-#--re-frame-trace-- .button {
-  padding: 5px 5px 3px;
-  margin: 5px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-#--re-frame-trace-- .text-button {
-  border-bottom: 1px dotted #888;
-  font-weight: normal;
-}
-#--re-frame-trace-- .button:focus, .text-button:focus {
-  border-radius: 2px 2px 0 0;
-  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
-  -moz-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
-  box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
-}
-#--re-frame-trace-- .icon-button {
-  font-size: 10px;
-}
-#--re-frame-trace-- button.tab {
-
-}
-#--re-frame-trace-- .tab {
-  background: transparent;
-  border-radius: 0;
-  text-transform: uppercase;
-  font-family: monospace;
-  letter-spacing: 2px;
-  margin-bottom: 0;
-  padding-bottom: 4px;
-  vertical-align: bottom;
-}
-#--re-frame-trace-- .tab.active {
-  background: transparent;
-  border-bottom: 3px solid lightblue;
-  border-radius: 0;
-  padding-bottom: 1px;
-}
-#--re-frame-trace-- ul.filter-items {
-  list-style-type: none;
-  padding: 0;
-  margin: 0 -5px;
-  margin-top: 10px;
-}
-#--re-frame-trace-- .filter-items li {
-  color: #333;
-  background: #efefef;
-  display: inline-block;
-  font-size: 0.9em;
-  margin:  5px;
-}
-#--re-frame-trace-- .filter-items li .filter-item-string {
-  color: #616cdb;
-}
-#--re-frame-trace-- .icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-}
-#--re-frame-trace-- .icon-remove {
-  margin-left: 10px;
-}
-#--re-frame-trace-- select {
-  background: white;
-  font-family: 'courier new', monospace;
-  font-size: 1em;
-}
-#--re-frame-trace-- .nav {
-  background: #efeef1;
-  color: #222;
-}
-#--re-frame-trace-- .panel-content-top {
-  flex: 1;
-}
-#--re-frame-trace-- .panel-content-scrollable {
-  margin: 0 0 10px 5px;
-  overflow: auto;
-  flex: 1 1 auto;
-}
-#--re-frame-trace-- .filter-control {
-  margin: 10px 0 0 10px;
-  flex: none;
-}
-")
+(def panel-styles (macros/slurp-macro "day8/re_frame/css/main.css"))

From e448b45f0a319bbb8600c2ed1f59d60938cc3277 Mon Sep 17 00:00:00 2001
From: "chris (daiyi)" <daiyitastic@gmail.com>
Date: Fri, 25 Aug 2017 16:34:53 +0200
Subject: [PATCH 09/18] Use lein-less to do css preprocessing

closes #61
---
 README.md                        |  23 +++++++
 project.clj                      |   7 ++
 src/day8/re_frame/less/main.less | 108 +++++++++++++++++++++++++++++++
 3 files changed, 138 insertions(+)
 create mode 100644 src/day8/re_frame/less/main.less

diff --git a/README.md b/README.md
index c851168..84f0ccf 100644
--- a/README.md
+++ b/README.md
@@ -99,3 +99,26 @@ You need both the re-frame-trace project _and_ a test project to develop it agai
   ```
 
 - Now run your test project however you usually run it, and re-frame-trace should be in there. \o/
+
+- Additionally, if modifying the `.less` CSS files, compile the css by running within the re-frame-trace directory:
+
+  ```
+  lein less auto
+  ```
+
+  to watch for changes, or one time by running:
+
+  ```
+  lein less once
+  ```
+
+
+### Developing CSS
+
+The CSS for the trace panel are defined both inline and within `src/day8/re_frame/less`. To develop the styles, run
+
+```
+lein less auto
+```
+
+and the .less file will automatically compile to css on file changes. Don't edit the file within `src/day8/re_frame/css` directly, or it will be overwriten. We are using css preprocessing because in order to isolate the panel styles, we are namespacing the panell styles with the id `#--re-frame-trace--`.
diff --git a/project.clj b/project.clj
index 92361d3..496da5f 100644
--- a/project.clj
+++ b/project.clj
@@ -7,6 +7,13 @@
                  [reagent                    "0.6.0"]
                  [re-frame                   "0.9.0"]
                  [cljsjs/d3 "4.2.2-0"]]
+  :plugins [[lein-less "1.7.5"]]
   :deploy-repositories {"releases" :clojars
                         "snapshots" :clojars}
+
+  :figwheel {:css-dirs ["src/day8/re_frame/css"]}
+
+  :less {:source-paths ["src/day8/re_frame/less"]
+         :target-path  "src/day8/re_frame/css"}
+
   :profiles {:dev {:dependencies [[binaryage/dirac "RELEASE"]]}})
diff --git a/src/day8/re_frame/less/main.less b/src/day8/re_frame/less/main.less
new file mode 100644
index 0000000..52b6840
--- /dev/null
+++ b/src/day8/re_frame/less/main.less
@@ -0,0 +1,108 @@
+#--re-frame-trace-- {
+  background: white;
+  color: black;
+  font-family: 'courier new', monospace;
+
+  tbody {
+    color: #aaa;
+  }
+  tr:hover {
+    transition: all 0.1s ease-out;
+    background: aliceblue;
+    filter: brightness(90%);
+  }
+  tr:nth-child(even) {
+    background: aliceblue;
+  }
+  .button {
+    padding: 5px 5px 3px;
+    margin: 5px;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .text-button {
+    border-bottom: 1px dotted #888;
+    font-weight: normal;
+  }
+  .button:focus, .text-button:focus {
+    border-radius: 2px 2px 0 0;
+    -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+    box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+  }
+  .icon-button {
+    font-size: 10px;
+  }
+  button.tab {
+
+  }
+  .tab {
+    background: transparent;
+    border-radius: 0;
+    text-transform: uppercase;
+    font-family: monospace;
+    letter-spacing: 2px;
+    margin-bottom: 0;
+    padding-bottom: 4px;
+    vertical-align: bottom;
+  }
+  .tab.active {
+    background: transparent;
+    border-bottom: 3px solid lightblue;
+    border-radius: 0;
+    padding-bottom: 1px;
+  }
+  ul.filter-items {
+    list-style-type: none;
+    padding: 0;
+    margin: 0 -5px;
+    margin-top: 10px;
+  }
+  .filter-items li {
+    color: #333;
+    background: #efefef;
+    display: inline-block;
+    font-size: 0.9em;
+    margin:  5px;
+  }
+  .filter-items {
+    li {
+      .filter-item-string {
+        color: #616cdb;
+      }
+    }
+
+  }
+  .icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    stroke-width: 0;
+    stroke: currentColor;
+    fill: currentColor;
+  }
+  .icon-remove {
+    margin-left: 10px;
+  }
+  select {
+    background: white;
+    font-family: 'courier new', monospace;
+    font-size: 1em;
+  }
+  .nav {
+    background: #efeef1;
+    color: #222;
+  }
+  .panel-content-top {
+    flex: 1;
+  }
+  .panel-content-scrollable {
+    margin: 10px 0 0 10px;
+    flex: 1 0 auto;
+    height: 100%;
+    overflow: auto;
+  }
+  .filter-control {
+    margin: 10px 0 0 10px;
+  }
+}

From 2c63b8d90e04f72d7a39c3ed9dcb49bbcb80bd2e Mon Sep 17 00:00:00 2001
From: "chris (daiyi)" <daiyitastic@gmail.com>
Date: Wed, 30 Aug 2017 18:21:56 +0200
Subject: [PATCH 10/18] Fix typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 84f0ccf..54e7d1c 100644
--- a/README.md
+++ b/README.md
@@ -121,4 +121,4 @@ The CSS for the trace panel are defined both inline and within `src/day8/re_fram
 lein less auto
 ```
 
-and the .less file will automatically compile to css on file changes. Don't edit the file within `src/day8/re_frame/css` directly, or it will be overwriten. We are using css preprocessing because in order to isolate the panel styles, we are namespacing the panell styles with the id `#--re-frame-trace--`.
+and the .less file will automatically compile to css on file changes. Don't edit the file within `src/day8/re_frame/css` directly, or it will be overwriten. We are using css preprocessing because in order to isolate the panel styles, we are namespacing the panel styles with the id `#--re-frame-trace--`.

From b8d22ca17a77954d3733a2a31d19e1524952b2d6 Mon Sep 17 00:00:00 2001
From: "chris (daiyi)" <daiyitastic@gmail.com>
Date: Wed, 30 Aug 2017 18:24:52 +0200
Subject: [PATCH 11/18] Move .less to resources folder

---
 project.clj                                                     | 2 +-
 .../re_frame/less => resources/day8/re_frame/trace}/main.less   | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename {src/day8/re_frame/less => resources/day8/re_frame/trace}/main.less (100%)

diff --git a/project.clj b/project.clj
index 496da5f..06ea952 100644
--- a/project.clj
+++ b/project.clj
@@ -13,7 +13,7 @@
 
   :figwheel {:css-dirs ["src/day8/re_frame/css"]}
 
-  :less {:source-paths ["src/day8/re_frame/less"]
+  :less {:source-paths ["resources/day8/re_frame/trace"]
          :target-path  "src/day8/re_frame/css"}
 
   :profiles {:dev {:dependencies [[binaryage/dirac "RELEASE"]]}})
diff --git a/src/day8/re_frame/less/main.less b/resources/day8/re_frame/trace/main.less
similarity index 100%
rename from src/day8/re_frame/less/main.less
rename to resources/day8/re_frame/trace/main.less

From b7cc1ee37e21adfb7e923e43ae9a45b67d4dca0b Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Thu, 31 Aug 2017 16:16:09 +1200
Subject: [PATCH 12/18] Add release tasks

---
 project.clj | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/project.clj b/project.clj
index 06ea952..04aa4ec 100644
--- a/project.clj
+++ b/project.clj
@@ -11,6 +11,16 @@
   :deploy-repositories {"releases" :clojars
                         "snapshots" :clojars}
 
+  :release-tasks [["vcs" "assert-committed"]
+                  ["change" "version" "leiningen.release/bump-version" "release"]
+                  ["less" "once"]
+                  ["vcs" "commit"]
+                  ["vcs" "tag"]
+                  ["deploy"]
+                  ["change" "version" "leiningen.release/bump-version"]
+                  ["vcs" "commit"]
+                  ["vcs" "push"]]
+
   :figwheel {:css-dirs ["src/day8/re_frame/css"]}
 
   :less {:source-paths ["resources/day8/re_frame/trace"]

From b8ef0c2f75dca8030f2c025c912dd9328020bbac Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Thu, 31 Aug 2017 16:16:17 +1200
Subject: [PATCH 13/18] Version 0.1.4

---
 project.clj | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/project.clj b/project.clj
index 04aa4ec..ca13768 100644
--- a/project.clj
+++ b/project.clj
@@ -1,4 +1,4 @@
-(defproject day8.re-frame/trace "0.1.4-SNAPSHOT"
+(defproject day8.re-frame/trace "0.1.4"
   :description "Tracing and developer tools for re-frame apps"
   :url         "https://github.com/Day8/re-frame-trace"
   :license     {:name "MIT"}

From 69d0b993e532fbc81cdb4d80d623d491944583cd Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Thu, 31 Aug 2017 16:16:36 +1200
Subject: [PATCH 14/18] Version 0.1.5-SNAPSHOT

---
 project.clj | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/project.clj b/project.clj
index ca13768..30a117a 100644
--- a/project.clj
+++ b/project.clj
@@ -1,4 +1,4 @@
-(defproject day8.re-frame/trace "0.1.4"
+(defproject day8.re-frame/trace "0.1.5-SNAPSHOT"
   :description "Tracing and developer tools for re-frame apps"
   :url         "https://github.com/Day8/re-frame-trace"
   :license     {:name "MIT"}

From e19835e927fdcc3e489d3aac5c1f17ecd21e77bd Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Thu, 31 Aug 2017 16:17:58 +1200
Subject: [PATCH 15/18] Build CSS to go into the resources directory

---
 project.clj                                                   | 4 ++--
 .../re_frame/css => resources/day8/re_frame/trace}/main.css   | 0
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename {src/day8/re_frame/css => resources/day8/re_frame/trace}/main.css (100%)

diff --git a/project.clj b/project.clj
index 30a117a..3c1dc19 100644
--- a/project.clj
+++ b/project.clj
@@ -21,9 +21,9 @@
                   ["vcs" "commit"]
                   ["vcs" "push"]]
 
-  :figwheel {:css-dirs ["src/day8/re_frame/css"]}
+  :figwheel {:css-dirs ["resources/day8/re_frame/trace"]}
 
   :less {:source-paths ["resources/day8/re_frame/trace"]
-         :target-path  "src/day8/re_frame/css"}
+         :target-path  "resources/day8/re_frame/trace"}
 
   :profiles {:dev {:dependencies [[binaryage/dirac "RELEASE"]]}})
diff --git a/src/day8/re_frame/css/main.css b/resources/day8/re_frame/trace/main.css
similarity index 100%
rename from src/day8/re_frame/css/main.css
rename to resources/day8/re_frame/trace/main.css

From 4c529bbc7e3603f72e0b8b154f6cfb76f85712ea Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Thu, 31 Aug 2017 16:18:22 +1200
Subject: [PATCH 16/18] Version 0.1.5

---
 project.clj | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/project.clj b/project.clj
index 3c1dc19..ac4fa9c 100644
--- a/project.clj
+++ b/project.clj
@@ -1,4 +1,4 @@
-(defproject day8.re-frame/trace "0.1.5-SNAPSHOT"
+(defproject day8.re-frame/trace "0.1.5"
   :description "Tracing and developer tools for re-frame apps"
   :url         "https://github.com/Day8/re-frame-trace"
   :license     {:name "MIT"}

From ef4c74291c1d1f2536692d52942f8c5f4c5df607 Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Thu, 31 Aug 2017 16:18:41 +1200
Subject: [PATCH 17/18] Version 0.1.6-SNAPSHOT

---
 project.clj | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/project.clj b/project.clj
index ac4fa9c..5d005e9 100644
--- a/project.clj
+++ b/project.clj
@@ -1,4 +1,4 @@
-(defproject day8.re-frame/trace "0.1.5"
+(defproject day8.re-frame/trace "0.1.6-SNAPSHOT"
   :description "Tracing and developer tools for re-frame apps"
   :url         "https://github.com/Day8/re-frame-trace"
   :license     {:name "MIT"}

From 6bee5c3a635eaf99ac0a051bd801f419a711b285 Mon Sep 17 00:00:00 2001
From: Daniel Compton <desk@danielcompton.net>
Date: Thu, 31 Aug 2017 16:23:46 +1200
Subject: [PATCH 18/18] Use the correct location for getting CSS

---
 src/day8/re_frame/trace/styles.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs
index a20b42e..f0f01f6 100644
--- a/src/day8/re_frame/trace/styles.cljs
+++ b/src/day8/re_frame/trace/styles.cljs
@@ -1,4 +1,4 @@
 (ns day8.re-frame.trace.styles
   (:require-macros [day8.re-frame.trace.macros :as macros]))
 
-(def panel-styles (macros/slurp-macro "day8/re_frame/css/main.css"))
+(def panel-styles (macros/slurp-macro "day8/re_frame/trace/main.css"))