status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Timing styles

This commit is contained in:
Daniel Compton 2018-01-19 10:50:03 +13:00
parent d5742e4cd7
commit 4d6b99f9e3
3 changed files with 99 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/day8/re_frame/trace/styles.cljs
View File

@ -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"))

30
src/day8/re_frame/trace/utils/re_com.cljs
View File

@ -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"
[]

66
src/day8/re_frame/trace/view/timing.cljs
View File

@ -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."]]])))