Timing styles

src/day8/re_frame/trace/styles.cljs

@@ -6,7 +6,9 @@
             [garden.selectors :as s]
             [day8.re-frame.trace.common-styles :as common]
             [day8.re-frame.trace.utils.re-com :as rc]
-            [day8.re-frame.trace.view.app-db :as app-db]))
+            [day8.re-frame.trace.view.app-db :as app-db]
+            [cljs.spec.alpha :as spec]
+            [day8.re-frame.trace.view.timing :as timing]))
 
 (def background-gray common/background-gray)
 (def background-gray-hint common/background-gray-hint)
@@ -85,8 +87,16 @@
 
    [(s/attr= "type" "search") {:-webkit-appearance "textfield"
                                :outline-offset     (px -2)}]
-
+   [:ol
-   [:li {:display "block"}]
+    {:display                "block"
+     :list-style-type        "decimal"
+     "-webkit-margin-before" "1em"
+     "-webkit-margin-after"  "1em"
+     "-webkit-margin-start"  "0px"
+     "-webkit-margin-end"    "0px"
+     "-webkit-padding-start" "40px"}]
+   [:li {:display    "list-item"
+         :text-align "-webkit-match-parent"}]
    [:button {:overflow               "visible"
              :border                 0
              :-webkit-font-smoothing "inherit"
@@ -392,7 +402,7 @@
    ])
 
 
-(def panel-styles (apply garden/css [css-reset [:#--re-frame-trace-- rc/re-com-css] common/blue-modern re-frame-trace-styles app-db/app-db-styles]))
+(def panel-styles (apply garden/css [css-reset [:#--re-frame-trace-- rc/re-com-css] common/blue-modern re-frame-trace-styles app-db/app-db-styles timing/timing-styles]))
 ;(def panel-styles (macros/slurp-macro "day8/re_frame/trace/main.css"))
 
 

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

@@ -36,6 +36,13 @@
     @val-or-atom
     val-or-atom))
 
+(defn deep-merge
+  "Recursively merges maps. If vals are not maps, the last value wins."
+  [& vals]
+  (if (every? map? vals)
+    (apply merge-with deep-merge vals)
+    (last vals)))
+
 (defn flex-flow-style
   "A cross-browser helper function to output flex-flow with all it's potential browser prefixes"
   [flex-flow]
@@ -387,6 +394,29 @@
              attr)
            label]])
 
+(defn p
+  "acts like [:p ]
+   Creates a paragraph of body text, expected to have a font-szie of 14px or 15px,
+   which should have limited width.
+   Why limited text width?  See http://baymard.com/blog/line-length-readability
+   The actual font-size is inherited.
+   At 14px, 450px will yield between 69 and 73 chars.
+   At 15px, 450px will yield about 66 to 70 chars.
+   So we're at the upper end of the prefered 50 to 75 char range.
+   If the first child is a map, it is interpreted as a map of styles / attributes."
+  [& children]
+  (let [child1 (first children)    ;; it might be a map of attributes, including styles
+        [m children] (if (map? child1)
+                       [child1 (rest children)]
+                       [{} children])
+        m      (deep-merge {:style {:flex      "none"
+                                    :width     "450px"
+                                    :min-width "450px"}}
+                           m)]
+    [:span.rc-p
+     m
+     (into [:p] children)]))    ;; the wrapping span allows children to contain [:ul] etc
+
 (defn button
   "Returns the markup for a basic button"
   []

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

@@ -3,22 +3,66 @@
             [devtools.prefs]
             [devtools.formatters.core]
             [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
-            [day8.re-frame.trace.utils.re-com :as rc])
+            [day8.re-frame.trace.utils.re-com :as rc]
+            [day8.re-frame.trace.common-styles :as common])
   (:require-macros [day8.re-frame.trace.utils.macros :as macros]))
 
+(def timing-styles
+  [:#--re-frame-trace--
+   [:.timing-details
+    {:background-color common/white-background-color
+     :margin-top       common/gs-31s
+     :padding          common/gs-19}]
+   [:.timing-details--line
+    {:margin "1em 0"}]
+
+   [:p :ol
+    {:max-width "26em"}]
+   [:ol
+    {"-webkit-padding-start" "20px"}]
+   [:li
+    {:margin "0 0 1em 0"}]])
+
 (defn render []
   (let [timing-data-available? @(rf/subscribe [:timing/data-available?])]
     (if timing-data-available?
       [rc/v-box
-       :padding "12px 0px"
+       :class "timing-details"
-       :children [[rc/label :label "Total Epoch Time"]
+       :children [
-                  [rc/label :label (str @(rf/subscribe [:timing/total-epoch-time]) "ms")]
+                  [rc/h-box
-                  [rc/label :label "Animation Frames"]
+                   :children
-                  [rc/label :label @(rf/subscribe [:timing/animation-frame-count])]
+                   [[rc/label :label "Total"]
-                  [rc/label :label "Event time"]
+                    [rc/label :label (str @(rf/subscribe [:timing/total-epoch-time]) "ms")]
-                  [rc/label :label (str @(rf/subscribe [:timing/event-processing-time]) "ms")]
+                    [rc/label :label "Event"]
-                  [rc/label :label "Render/Subscription time"]
+                    [rc/label :label (str @(rf/subscribe [:timing/event-processing-time]) "ms")]
-                  [rc/label :label (str @(rf/subscribe [:timing/render-time]) "ms")]]]
+                    ]]
+                  (for [frame (range 1 (inc @(rf/subscribe [:timing/animation-frame-count])))]
+                    (list
+                      ^{:key (str "af-line" frame)}
+                      [rc/line :class "timing-details--line"]
+                      ^{:key (str "af" frame)}
+                      [rc/h-box
+                       :children
+                       [[rc/label :label (str "AF #" frame)]
+                        "Subs"
+                        "2ms"
+                        "Views"
+                        "2ms"
+
+
+                        ]]))
+                  ;[rc/label :label "Animation Frames"]
+                  ;[rc/label :label "Render/Subscription time"]
+                  ;[rc/label :label (str @(rf/subscribe [:timing/render-time]) "ms")]
+
+                  [rc/line :class "timing-details--line"]
+
+                  [rc/v-box
+                   :children
+                   [[rc/p "Be careful. There are two problems with these numbers:"]
+                    [:ol
+                     [:li "Accurately timing anything in the browser is a nightmare. One moment a given function takes 1ms and the next it takes 10ms, and you'll never know why. So bouncy."]
+                     [:li "You're currently running the dev build, not the production build. So don't freak out too much. Yet."]]]]]]
       [rc/v-box
-       :padding "12px 0px"
+       :class "timing-details"
        :children [[:h1 "No timing data available currently."]]])))