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

Update timing panel

This commit is contained in:
Daniel Compton 2018-01-19 11:58:48 +13:00
parent 025537c757
commit b875832fb1
5 changed files with 97 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/day8/re_frame/trace/common_styles.cljs
View File

@ -17,7 +17,7 @@
(def light-blue "lightblue")
(def light-gray "#efeef1")
(def yellow "yellow")
(def text-color "#767A7C") ;; Was "#222" but now using bm: (def default-text-color "#767A7C")
(def text-color "#767A7C") ;; Was "#222" but now using bm: (def default-text-color "#767A7C")
(def text-color-muted "#8f8f8f")
(def event-color dark-gold)
@ -50,6 +50,12 @@
(def sub-re-run-color "#219653")
(def sub-not-run-color "#bdbdbd")
(defn panel-style
([border-radius]
{:background-color "#fafbfc"
:border "1px solid #e3e9ed"
:border-radius border-radius
:padding [[0 gs-12s]]}))
;; The colors defined below are (of course) available to your app without further ado
;;
@ -77,33 +83,33 @@
;; Blue modern component colours
;; =================================================================================================
(def blue-modern-color "#6EC0E6") ;; Our standard rich blue colour
(def blue-modern-color "#6EC0E6") ;; Our standard rich blue colour
(def white-background-color "white")
(def white-background-border-color "#E3E9ED") ;; Light grey
(def white-background-border-color "#E3E9ED") ;; Light grey
(def standard-background-color "#F3F6F7") ;; Light grey
(def standard-background-color "#F3F6F7") ;; Light grey
(def standard-background-border-color "transparent")
(def light-background-color "#FBFBFB") ;; Medium grey
(def light-background-border-color "#BFCCD6") ;; Slightly darker than medium grey
(def light-background-color "#FBFBFB") ;; Medium grey
(def light-background-border-color "#BFCCD6") ;; Slightly darker than medium grey
(def dark-background-color "#768895") ;; Darker grey
(def dark-background-color "#768895") ;; Darker grey
(def dark-background-border-color white-background-border-color)
(def border-line-color "#DCE3E8") ;; Slightly darker than light grey
(def table-row-line-color "#EAEEF1") ;; Light grey
(def border-line-color "#DCE3E8") ;; Slightly darker than light grey
(def table-row-line-color "#EAEEF1") ;; Light grey
(def text-title-color "#3C454B") ;; Darker grey than the standard text color
(def default-text-color "#767A7C") ;; Medium grey
(def text-title-color "#3C454B") ;; Darker grey than the standard text color
(def default-text-color "#767A7C") ;; Medium grey
;(def disabled-text-color "TBA???") ;; Placeholder (currently not specified)
(def disabled-background-color "#ECEDF0") ;; Light grey
(def disabled-background-color "#ECEDF0") ;; Light grey
(def disabled-border-color border-line-color)
(def strong-button-text-color "white")
(def strong-button-background-color blue-modern-color)
(def strong-button-border-color "#589AB8") ;; A darker version of the standard blue
(def strong-button-border-color "#589AB8") ;; A darker version of the standard blue
(def active-button-text-color "white")
(def active-button-background-color "#F2994A")
@ -116,20 +122,20 @@
(def tab-underline-color strong-button-background-color)
(def sidebar-background-color "#32323C") ;; Dark black
(def sidebar-heading-divider-color "#191919") ;; Darker black
(def sidebar-item-selected-color "#3C3C45") ;; Slightly lighter dark black
(def sidebar-background-color "#32323C") ;; Dark black
(def sidebar-heading-divider-color "#191919") ;; Darker black
(def sidebar-item-selected-color "#3C3C45") ;; Slightly lighter dark black
(def sidebar-item-check-color strong-button-background-color)
(def sidebar-text-color "white")
(def navbar-text-color "white")
(def wizard-panel-background-color "#636A6F") ;; Very dark grey
(def wizard-panel-background-color "#636A6F") ;; Very dark grey
(def wizard-panel-text-color "white")
(def wizard-nav-button-background-color "white")
(def wizard-nav-button-text-color "#303234") ;; Almost black (also used for button arrows)
(def wizard-cancel-button-background-color "#D6D8D9") ;; Light grey
(def wizard-step-past-color "#E8FFC1") ;; Muted lime green
(def wizard-step-current-color "#C7FF66") ;; Bright lime green
(def wizard-nav-button-text-color "#303234") ;; Almost black (also used for button arrows)
(def wizard-cancel-button-background-color "#D6D8D9") ;; Light grey
(def wizard-step-past-color "#E8FFC1") ;; Muted lime green
(def wizard-step-current-color "#C7FF66") ;; Bright lime green
(def wizard-step-future-color dark-background-color)
(def font-stack ["\"Segoe UI\"" "Roboto", "Helvetica", "sans-serif"])
@ -156,7 +162,7 @@
:-webkit-user-select "none"
:cursor "default"}]
[:.bm-heading-text {:font-size "19px"
:font-weight "600"
:font-weight "600"
:color default-text-color
:-webkit-user-select "none"
:cursor "default"}]
@ -169,9 +175,9 @@
[:.bm-strong-button {:color strong-button-text-color
:background-color strong-button-background-color
:border (str "1px solid " strong-button-border-color)}]
[:.bm-active-button {:color active-button-text-color
[:.bm-active-button {:color active-button-text-color
:background-color active-button-background-color
:border (str "1px solid " active-button-background-color)}]
:border (str "1px solid " active-button-background-color)}]
[:.bm-muted-button {:color muted-button-text-color
:background-color muted-button-background-color
:border (str "1px solid " muted-button-border-color)
@ -206,7 +212,7 @@
[:.raptor-editable-block {:color default-text-color}]
;; button components - to 26px high
[:button {:height "26px"
[:button {:height "26px"
:border-radius "3px"}]
[:.btn {:padding "0px 12px"}]
@ -240,7 +246,7 @@
[:.chosen-results {:color default-text-color}]]
;; selection-list - set background color of container
[:.rc-selection-list {:background-color "white"}] ;
[:.rc-selection-list {:background-color "white"}] ;
;; datepicker-dropdowns - set to 26px high
[:.dropdown-button {:height "26px"}]

10
src/day8/re_frame/trace/metamorphic.cljc
View File

@ -75,13 +75,13 @@
(and (fsm-trigger? event)
(= (:operation event)
[:scheduled :run-queue])))
;
(defn request-animation-frame? [event]
(= :raf (:op-type event)))
;
;(defn request-animation-frame-end? [event history pattern-sequence pattern]
; (= :raf-end (:op-type event)))
;
(defn request-animation-frame-end? [event]
(= :raf-end (:op-type event)))
(defn summarise-event [ev]
(-> ev
(dissoc :start :duration :end :child-of)

22
src/day8/re_frame/trace/subs.cljs
View File

@ -237,10 +237,28 @@
(metam/elapsed-time start-of-epoch end-of-epoch))))
(rf/reg-sub
:timing/animation-frame-count
:timing/animation-frame-traces
:<- [:traces/current-event-traces]
(fn [traces]
(count (filter metam/request-animation-frame? traces))))
(filter #(or (metam/request-animation-frame? %)
(metam/request-animation-frame-end? %))
traces)))
(rf/reg-sub
:timing/animation-frame-count
:<- [:timing/animation-frame-traces]
(fn [frame-traces]
(count (filter metam/request-animation-frame? frame-traces))))
(rf/reg-sub
:timing/animation-frame-time
:<- [:timing/animation-frame-traces]
(fn [frame-traces [_ frame-number]]
(let [frames (partition 2 frame-traces)
[start end] (first (drop (dec frame-number) frames))]
(metam/elapsed-time start end))))
(rf/reg-sub
:timing/event-processing-time

7
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -73,6 +73,8 @@
:font-size "11px"
:margin-bottom "2px"}]
[:.app-db-panel (common/panel-style border-radius)]
[:.app-db-panel-button
{:width "129px"
:padding "0px"}]
@ -103,13 +105,10 @@
:children ["+ path inspector"]]
:on-click #(rf/dispatch [:app-db/create-path])]
[rc/h-box
:class "app-db-panel"
:align :center
:gap common/gs-7s
:height "48px"
:padding (css-join "0px" common/gs-12s)
:style {:background-color "#fafbfc"
:border "1px solid #e3e9ed"
:border-radius border-radius}
:children [[rc/label :label "reset app-db to:"]
[rc/button
:class "bm-muted-button app-db-panel-button"

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

@ -22,7 +22,30 @@
[:ol
{"-webkit-padding-start" "20px"}]
[:li
{:margin "0 0 1em 0"}]])
{:margin "0 0 1em 0"}]
[".rft-tag__timing"
{:background-color common/disabled-background-color
:border (str "1px solid " common/border-line-color)
:font-weight "normal"
:font-size "14px"}]
[".timing-part-panel"
(merge (common/panel-style "3px")
{:padding "12px"})]
])
(defn timing-tag [label]
[components/tag "rft-tag__timing" label])
(defn timing-section
[label time]
[rc/v-box
:align :center
:gap "3px"
:children [[rc/label :class "bm-textbox-label" :label label]
[timing-tag (str time "ms")]]])
(defn render []
(let [timing-data-available? @(rf/subscribe [:timing/data-available?])]
@ -31,30 +54,27 @@
:class "timing-details"
:children [
[rc/h-box
:gap common/gs-12s
:class "timing-part-panel"
:children
[[rc/label :label "Total"]
[components/tag "grey" (str @(rf/subscribe [:timing/total-epoch-time]) "ms")]
[rc/label :label "Event"]
[components/tag "grey" (str @(rf/subscribe [:timing/event-processing-time]) "ms")]
[[timing-section "total" @(rf/subscribe [:timing/total-epoch-time])]
[timing-section "event" @(rf/subscribe [:timing/event-processing-time])]
]]
(for [frame (range 1 (inc @(rf/subscribe [:timing/animation-frame-count])))]
(for [frame (range 1 (inc @(rf/subscribe [:timing/animation-frame-count])))
:let [frame-time (rf/subscribe [:timing/animation-frame-time frame])]]
(list
^{:key (str "af-line" frame)}
[rc/line :class "timing-details--line"]
^{:key (str "af" frame)}
[rc/h-box
:align :center
:class "timing-part-panel"
:gap "25px"
: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/label :label (str "Animation frame #" frame)]
[timing-section "total" @frame-time]
#_ [timing-section "subs" 2]
#_ [timing-section "views" 3]]]))
[rc/line :class "timing-details--line"]