diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs index 54d3a00..d4c46d1 100644 --- a/src/day8/re_frame/trace/styles.cljs +++ b/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)}] - - [:li {:display "block"}] + [:ol + {: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")) diff --git a/src/day8/re_frame/trace/utils/re_com.cljs b/src/day8/re_frame/trace/utils/re_com.cljs index 5a6506e..760090b 100644 --- a/src/day8/re_frame/trace/utils/re_com.cljs +++ b/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" [] diff --git a/src/day8/re_frame/trace/view/timing.cljs b/src/day8/re_frame/trace/view/timing.cljs index a67ee2e..df15b51 100644 --- a/src/day8/re_frame/trace/view/timing.cljs +++ b/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" - :children [[rc/label :label "Total Epoch Time"] - [rc/label :label (str @(rf/subscribe [:timing/total-epoch-time]) "ms")] - [rc/label :label "Animation Frames"] - [rc/label :label @(rf/subscribe [:timing/animation-frame-count])] - [rc/label :label "Event time"] - [rc/label :label (str @(rf/subscribe [:timing/event-processing-time]) "ms")] - [rc/label :label "Render/Subscription time"] - [rc/label :label (str @(rf/subscribe [:timing/render-time]) "ms")]]] + :class "timing-details" + :children [ + [rc/h-box + :children + [[rc/label :label "Total"] + [rc/label :label (str @(rf/subscribe [:timing/total-epoch-time]) "ms")] + [rc/label :label "Event"] + [rc/label :label (str @(rf/subscribe [:timing/event-processing-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."]]])))