Release 0.2.0
-----BEGIN PGP SIGNATURE----- Version: GnuPG v2 iQEcBAABCAAGBQJai5WnAAoJEKbk3FKDtdzsbmwH/1FtzlV51o3S/stBY83D5nkW QUIa8SX5UBUwXOTIbILgcxj1jGunp/YnTEjzzMk1/GdkOfTgB6gJbSeyPtAnIUf4 7TaiUHRyOhotCPU04/1tnq4ecnSNtRD7IkfmQ+Ywvl2DrOJmYIROP4re8BPGSf4Z LBlDM7Tm3JrJ0kuvULf3A1x59NWL5np5w/PBoy3TlmFEe5wgb6fLQr+2grPn2XIu 8i1rkQliF9fqQCsIenE+u/1HgWL7wqWnuUtkA9LzjspzpvW8IvavNq7nMnTJhJag eyCMZkUYx5kv2Zv5MKVmChbkOfX/yA+lXMh6bpCPRAdWGB5P78b5ftREtSPfYGc= =a/Kv -----END PGP SIGNATURE----- Merge tag '0.2.0' into react-16 Release 0.2.0 Fixes #162
This commit is contained in:
Daniel Compton
commit
a209c4f2cd
12
CHANGELOG.md
12
CHANGELOG.md
|
|
@ -1,7 +1,17 @@
|
|||
# Change Log
|
||||
All notable changes to this project will be documented in this file. This change log follows the conventions of [keepachangelog.com](http://keepachangelog.com/).
|
||||
|
||||
## [0.1.21] - Unreleased
|
||||
## [0.2.0] - Unreleased
|
||||
|
||||
* re-frame-trace has been renamed to re-frame-10x. You will need to update your dependency from `day8.re-frame/trace "0.1.21` to `day8.re-frame/re-frame-10x "0.2.0`
|
||||
|
||||
## [0.1.22] - 2018-02-20
|
||||
|
||||
### Changed
|
||||
|
||||
* This is the final release of this project under the `day8.re-frame/trace` artifact ID. The only change from 0.1.21 is that this version will print a warning to the console every time you load it, reminding you to update to `day8.re-frame/re-frame-10x`.
|
||||
|
||||
## [0.1.21] - 2018-02-14
|
||||
|
||||
### Fixed
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
## Development
|
||||
|
||||
### Setting up re-frame-trace for development
|
||||
### Setting up re-frame-10x for development
|
||||
|
||||
You need both the re-frame-trace project _and_ a test project to develop it against. For example, you can use the [todo-mvc](https://github.com/Day8/re-frame/tree/master/examples/todomvc) project.
|
||||
You need both the re-frame-10x project _and_ a test project to develop it against. For example, you can use the [todo-mvc](https://github.com/Day8/re-frame/tree/master/examples/todomvc) project.
|
||||
|
||||
- Clone `re-frame-trace` to your machine:
|
||||
- Clone `re-frame-10x` to your machine:
|
||||
|
||||
```
|
||||
git clone git@github.com:Day8/re-frame-trace.git
|
||||
git clone git@github.com:Day8/re-frame-10x.git
|
||||
```
|
||||
|
||||
- Go into the root folder of the test project you're using to develop re-frame-trace with.
|
||||
- Go into the root folder of the test project you're using to develop re-frame-10x with.
|
||||
|
||||
```
|
||||
cd /your/project/folder
|
||||
```
|
||||
|
||||
- Add re-frame-trace into this test project using the [instructions](README.md#installation) above.
|
||||
- Add re-frame-10x into this test project using the [instructions](README.md#installation) above.
|
||||
|
||||
- Still in the test project, create a folder called `checkouts`, then enter the folder:
|
||||
|
||||
|
|
@ -25,28 +25,28 @@ You need both the re-frame-trace project _and_ a test project to develop it agai
|
|||
cd checkouts
|
||||
```
|
||||
|
||||
- Create a [relative symlink](https://superuser.com/questions/146231/how-do-i-create-a-relative-symbolic-link-in-linux) from your local re-frame-trace project in the checkouts folder. For example:
|
||||
- Create a [relative symlink](https://superuser.com/questions/146231/how-do-i-create-a-relative-symbolic-link-in-linux) from your local re-frame-10x project in the checkouts folder. For example:
|
||||
|
||||
```
|
||||
ln -s ../relative/path/to/your/local/re-frame-trace re-frame-trace
|
||||
ln -s ../relative/path/to/your/local/re-frame-10x re-frame-10x
|
||||
```
|
||||
|
||||
- If you're using figwheel in the test project, you need to add the checkouts folder (`checkouts/re-frame-trace/src`) to `:cljsbuild :source-paths` in the `project.clj` file. If you're having trouble locating the right place to put this, it might help to look to a sample [project.clj](https://github.com/technomancy/leiningen/blob/stable/sample.project.clj) for inspiration. For example:
|
||||
- If you're using figwheel in the test project, you need to add the checkouts folder (`checkouts/re-frame-10x/src`) to `:cljsbuild :source-paths` in the `project.clj` file. If you're having trouble locating the right place to put this, it might help to look to a sample [project.clj](https://github.com/technomancy/leiningen/blob/stable/sample.project.clj) for inspiration. For example:
|
||||
|
||||
```
|
||||
:cljsbuild {:builds {:client {:source-paths ["checkouts/re-frame-trace/src"]}}}
|
||||
:cljsbuild {:builds {:client {:source-paths ["checkouts/re-frame-10x/src"]}}}
|
||||
```
|
||||
|
||||
- re-frame-trace has a debug panel useful when developing it. You can enable it by adding the :closure-define `"day8.re_frame.trace.debug_QMARK_" true` to your compiler settings.
|
||||
- re-frame-10x has a debug panel useful when developing it. You can enable it by adding the :closure-define `"day8.re_frame_10x.trace.debug_QMARK_" true` to your compiler settings.
|
||||
|
||||
- Now run your test project however you usually run it, and re-frame-trace should be in there. \o/
|
||||
- Now run your test project however you usually run it, and re-frame-10x should be in there. \o/
|
||||
|
||||
|
||||
### Developing CSS
|
||||
|
||||
The styles for the trace panel are defined both inline and in Garden styles in `day8.re-frame.trace.styles`.
|
||||
The styles for the trace panel are defined both inline and in Garden styles in `day8.re-frame-10x.styles`.
|
||||
|
||||
We are using CSS preprocessing to isolate the panel styles, by namespacing the panel styles with the id `#--re-frame-trace--`.
|
||||
We are using CSS preprocessing to isolate the panel styles, by namespacing the panel styles with the id `#--re-frame-10x--`.
|
||||
|
||||
#### Problems while developing CSS
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ We want to use re-frame, but we don't want to use the re-frame that the host is
|
|||
|
||||
Run `./source-deps.sh` to update the source dependencies.
|
||||
|
||||
### How does re-frame-trace build?? I don't see anything in the project.clj that looks like it will build.
|
||||
### How does re-frame-10x build?? I don't see anything in the project.clj that looks like it will build.
|
||||
|
||||
When you add a path to the :source-paths of the test project used to develop the trace panel against, figwheel in the test project will know to watch and build it too.
|
||||
|
||||
|
|
|
|||
44
README.md
44
README.md
|
|
@ -1,6 +1,6 @@
|
|||
# re-frame-trace
|
||||
# re-frame-10x
|
||||
|
||||
`re-frame-trace` let's you instrument, and then inspect, the inner workings of a running `re-frame` application. It presents as a programmer's dashboard, delivering curated insight and illumination.
|
||||
`re-frame-10x` lets you instrument, and then inspect, the inner workings of a running `re-frame` application. It presents as a programmer's dashboard, delivering curated insight and illumination.
|
||||
|
||||
### It Is Epoch Oriented
|
||||
|
||||
|
|
@ -15,12 +15,12 @@ which can be inspected, analysed and understood independently of other epochs. T
|
|||
tool is epoch-oriented - it shows you one at a time.
|
||||
|
||||
And, yes, it has "time travel debugger" capabilities - you can go
|
||||
[backwards and forwards through epochs](https://condenaststore.com/featured/the-conga-line-of-past-selves-a-string-liana-finck.html) - but that's really not the most interesting or powerful aspect of what `re-frame-trace` delivers.
|
||||
[backwards and forwards through epochs](https://condenaststore.com/featured/the-conga-line-of-past-selves-a-string-liana-finck.html) - but that's really not the most interesting or powerful aspect of what `re-frame-10x` delivers.
|
||||
|
||||
### It Is About Trace Data
|
||||
|
||||
As it runs, `re-frame` logs "trace" as data, and this provides an x-ray (MRI?) of your app's inner
|
||||
functioning. At its most basic level, `re-frame-trace` is a consumer, processor and presenter
|
||||
functioning. At its most basic level, `re-frame-10x` is a consumer, processor and presenter
|
||||
of trace data.
|
||||
|
||||
### It Is About The Data Flow
|
||||
|
|
@ -33,7 +33,7 @@ what data is "happening".
|
|||
|
||||
### It Is Always About The Data
|
||||
|
||||
So, clearly, data is at the core of `re-frame-trace` for both of the reasons
|
||||
So, clearly, data is at the core of `re-frame-10x` for both of the reasons
|
||||
just outlined, but its importance is even more base and fundamental than that.
|
||||
|
||||
Each time you put a `println` into your program, you are printing out what?
|
||||
|
|
@ -56,7 +56,7 @@ code and the data generated by running the code. The data provides a "paper trai
|
|||
brings the code to life, revealing its dynamics and enriching
|
||||
a programmer's understanding.
|
||||
|
||||
`re-frame-trace` has a similar goal, although the method is different.
|
||||
`re-frame-10x` has a similar goal, although the method is different.
|
||||
|
||||
### It Is A Data Dashboard
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ Observing raw data trace is both interesting and valuable, but it isn't enough.
|
|||
First, we want to leverage this data for insights. And, second, there's often too much data - you
|
||||
can drown in the detail.
|
||||
|
||||
So, `re-frame-trace` tries to be a "dashboard" which curates this
|
||||
So, `re-frame-10x` tries to be a "dashboard" which curates this
|
||||
"raw data" into "information" through various kinds of analysis
|
||||
and "roll ups". It should deliver insight "at a glance", while still allowing
|
||||
you to drill down into the detail.
|
||||
|
|
@ -97,7 +97,7 @@ features, and build a cognative map of how the code is structured.
|
|||
|
||||
### Temporary Warning
|
||||
|
||||
> Some of the claims above are aspirational. `re-frame-trace` [remains a WIP](https://github.com/Day8/re-frame-trace/issues/118).
|
||||
> Some of the claims above are aspirational. `re-frame-10x` [remains a WIP](https://github.com/Day8/re-frame-10x/issues/118).
|
||||
|
||||
## Of Sausage And Sizzle
|
||||
|
||||
|
|
@ -115,27 +115,29 @@ Slightly out of date, but indicative ...
|
|||
|
||||
## Installation
|
||||
|
||||
re-frame-10x configuration is per-project, only one person in your team needs to configure a project to use it, and then everyone else can benefit.
|
||||
|
||||
If you are using leiningen, modify `project.clj` in the following ways. When puzzling over the various possible leiningen configurations, it's often helpful to look at a sample [project.clj](https://github.com/technomancy/leiningen/blob/stable/sample.project.clj).
|
||||
|
||||
[](https://clojars.org/day8.re-frame/trace)
|
||||
[](https://clojars.org/day8.re-frame/re-frame-10x)
|
||||
|
||||
- Update your re-frame dependency to at least `0.10.5` - `[re-frame "0.10.5"]`.
|
||||
|
||||
- Add re-frame-trace as a dev dependency by placing `[day8.re-frame/trace "VERSION"]` within `:profiles :dev :dependencies`. For example:
|
||||
- Add re-frame-10x as a dev dependency by placing `[day8.re-frame/re-frame-10x "VERSION"]` within `:profiles :dev :dependencies`, where `"VERSION"` is the version shown above. For example:
|
||||
|
||||
```cljs
|
||||
:profiles
|
||||
{:dev
|
||||
{:dependencies [[some-other-package "0.0.0"]
|
||||
[day8.re-frame/trace "0.0.0 (see version above)"]] }}
|
||||
{:dependencies [[some-other-package "0.1.0"]
|
||||
[day8.re-frame/re-frame-10x "VERSION (see version above)"]] }}
|
||||
```
|
||||
|
||||
If your project uses React 16 and Reagent 0.8.0-alpha2 (or higher) then you will need to add the qualifier `-react16` to the version, e.g. `[day8.re-frame/trace "0.0.0-react16"]`.
|
||||
If your project uses React 16 and Reagent 0.8.0-alpha2 (or higher) then you will need to add the qualifier `-react16` to the version, e.g. `[day8.re-frame/re-frame-10x "VERSION-react16"]`.
|
||||
|
||||
- Locate the `:compiler` map under `:dev` and add:
|
||||
|
||||
- `:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}`
|
||||
- `:preloads [day8.re-frame.trace.preload]`
|
||||
- `:preloads [day8.re-frame-10x.preload]`
|
||||
|
||||
For example:
|
||||
|
||||
|
|
@ -145,11 +147,11 @@ If you are using leiningen, modify `project.clj` in the following ways. When puz
|
|||
:source-paths ["src" "dev"]
|
||||
:compiler {...
|
||||
:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}
|
||||
:preloads [day8.re-frame.trace.preload]
|
||||
:preloads [day8.re-frame-10x.preload]
|
||||
}}]}
|
||||
```
|
||||
|
||||
[cljs-devtools](https://github.com/binaryage/cljs-devtools) is not required to use re-frame-trace, but it is highly recommended.
|
||||
[cljs-devtools](https://github.com/binaryage/cljs-devtools) is not required to use re-frame-10x, but it is highly recommended.
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -179,25 +181,25 @@ If you are using leiningen, modify `project.clj` in the following ways. When puz
|
|||
* Try a `lein clean`
|
||||
* Make sure you have followed all the installation steps.
|
||||
|
||||
### If re-frame-trace throws an exception on startup
|
||||
### If re-frame-10x throws an exception on startup
|
||||
|
||||
* Reset the settings to factory defaults in the settings panel
|
||||
* If you can't load the settings panel, run `day8.re_frame.trace.factory_reset_BANG_()` in the JavaScript console.
|
||||
* If you can't load the settings panel, run `day8.re_frame_10x.trace.factory_reset_BANG_()` in the JavaScript console.
|
||||
* If neither of those work, remove all of the keys with the prefix `day8.re-frame.trace` from your browser's Local Storage.
|
||||
|
||||
## How does it work?
|
||||
|
||||
re-frame is instrumented - all important activity generates trace data.
|
||||
|
||||
`re-frame-trace` consumes this trace data and renders useful visualisations of the `re-frame` process. Currently, re-frame's tracing capabilities are in alpha and are subject to change at any time. We're testing the utility of the the trace by building an app on top.
|
||||
`re-frame-10x` consumes this trace data and renders useful visualisations of the `re-frame` process. Currently, re-frame's tracing capabilities are in alpha and are subject to change at any time. We're testing the utility of the the trace by building an app on top.
|
||||
|
||||
By default, re-frame tracing is "compiled out", so it won't impose a performance cost in production. The trade-off here is that you need to explicitly enable it in development.
|
||||
|
||||
The [preloads](https://github.com/clojure/clojurescript/wiki/Compiler-Options#preloads) option (`:preloads [day8.re-frame.trace.preload]`) has to be set in order to automatically monkeypatch Reagent to add appropriate lifecycle hooks. Yes this is gross, and yes we will [make a PR to reagent to add proper hooks](https://github.com/Day8/re-frame-trace/issues/115), once we know exactly what we need. The preload namespace also injects a div containing the devtools panel into the DOM.
|
||||
The [preloads](https://github.com/clojure/clojurescript/wiki/Compiler-Options#preloads) option (`:preloads [day8.re-frame-10x.preload]`) has to be set in order to automatically monkeypatch Reagent to add appropriate lifecycle hooks. Yes this is gross, and yes we will [make a PR to reagent to add proper hooks](https://github.com/Day8/re-frame-10x/issues/115), once we know exactly what we need. The preload namespace also injects a div containing the devtools panel into the DOM.
|
||||
|
||||
## Developing/Contributing
|
||||
|
||||
If you want to work on re-frame-trace, see [DEVELOPERS.md](DEVELOPERS.md).
|
||||
If you want to work on re-frame-10x, see [DEVELOPERS.md](DEVELOPERS.md).
|
||||
|
||||
## Citations
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
This document explains what you are seeing in sections
|
||||
labelled "Only Before" and "Only After".
|
||||
|
||||
In various places, `re-frame-trace` allows you to inspect values like `app-db`.
|
||||
In various places, `re-frame-10x` allows you to inspect values like `app-db`.
|
||||
Knowing the current value is useful, but
|
||||
you are sometimes more interested to know how a value has changed.
|
||||
The value might be `X` before the start of this epoch, and
|
||||
ended up as `X'`. So `re-frame-trace` will be showing you `X'` but you might woonder
|
||||
ended up as `X'`. So `re-frame-10x` will be showing you `X'` but you might woonder
|
||||
how `X` and `X'` are different. What got added or removed, and what was modified?
|
||||
|
||||
To show such differences, `re-frame-trace` chooses to do a calculation best explained by this pseudo code:
|
||||
To show such differences, `re-frame-10x` chooses to do a calculation best explained by this pseudo code:
|
||||
```clj
|
||||
(let [[only-before only-after _] (clojure.data/diff X X')]
|
||||
...)
|
||||
|
|
@ -16,7 +16,7 @@ To show such differences, `re-frame-trace` chooses to do a calculation best expl
|
|||
Remember `X` is the value immediately `before` (this epoch). And `X'` is the value `after` (the epoch has completed).
|
||||
|
||||
By [looking at the docs](https://clojuredocs.org/clojure.data/diff) for `clojure.data/diff`, you'll see
|
||||
that it calculates how two values differ, and returns a triple of values. `re-frame-trace`
|
||||
that it calculates how two values differ, and returns a triple of values. `re-frame-10x`
|
||||
captures and displays the first two elements of this triple as "only before" and "only after"
|
||||
respectively. The 3rd element is ignored because it's what hasn't changed, which isn't interesting.
|
||||
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
|
||||
> "Music is the space between the notes." - Claude Debussy
|
||||
|
||||
`re-frame-trace` is built around the idea of epochs. An epoch captures all of the trace emitted by re-frame during the handling an event. But what about the trace emitted when re-frame *isn't* handling an event? These are the intra-epoch traces.
|
||||
`re-frame-10x` is built around the idea of epochs. An epoch captures all of the trace emitted by re-frame during the handling an event. But what about the trace emitted when re-frame *isn't* handling an event? These are the intra-epoch traces.
|
||||
|
||||
Intra-epoch traces are emitted under (at least) three circumstances:
|
||||
|
||||
* Views sometimes have local state in the form of local ratoms which control, for example, the appearance of popups or mouseover annimations. When the state of these ratoms change, dependent views will likely rerender, and the trace to do with this rerendering will flow from reagent to `re-frame-trace`. But there'll be no "current" epoch to put it in. Because there was no event (just a pseudo event caused by the ratom reset)
|
||||
* Views sometimes have local state in the form of local ratoms which control, for example, the appearance of popups or mouseover annimations. When the state of these ratoms change, dependent views will likely rerender, and the trace to do with this rerendering will flow from reagent to `re-frame-10x`. But there'll be no "current" epoch to put it in. Because there was no event (just a pseudo event caused by the ratom reset)
|
||||
* A Figwheel recompile and subsequent code reload will cause all existing subscriptions to be destroyed, andwill trigger a complete re-render of your application. Again, a flood of trace to do with subscriptions and views will arrive but have no epoch home.
|
||||
* `re-frame-trace` itself resetting the value in `app-db`. Once again, there will be a flurry of subscription and view trace, but no epoch, because there was no event.
|
||||
* `re-frame-10x` itself resetting the value in `app-db`. Once again, there will be a flurry of subscription and view trace, but no epoch, because there was no event.
|
||||
|
||||
The first of these is essential to the functioning of your application, which probably makes the trace interesting and informative. The last two are incidental to the tooling and are probably best ignored. Probably.
|
||||
|
||||
`re-frame-trace` collects any intra-epoch subscription traces and shows them in the subs panel with the next epoch. They are broken out into a separate section marked: "Intra-Epoch Subscriptions".
|
||||
`re-frame-10x` collects any intra-epoch subscription traces and shows them in the subs panel with the next epoch. They are broken out into a separate section marked: "Intra-Epoch Subscriptions".
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
The `re-frame-trace` UI contains hyperlinks to the various documents in this directory. Within the UI, these hyperlinks have text like "guide me to greatness" and "why?", which indicates the purpose of the docs herein.
|
||||
The `re-frame-10x` UI contains hyperlinks to the various documents in this directory. Within the UI, these hyperlinks have text like "guide me to greatness" and "why?", which indicates the purpose of the docs herein.
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ This document explains the operation of the "Replay" button, and how to use **Th
|
|||
|
||||
### Epoch Navigation
|
||||
|
||||
By using the backwards and forwards arrows, `re-frame-trace` allows you to navigate through Epochs.
|
||||
By using the backwards and forwards arrows, `re-frame-10x` allows you to navigate through Epochs.
|
||||
At any one moment, you are inspecting a single Epoch, for which we'll use the term "The Observed Epoch".
|
||||
|
||||
### On Click
|
||||
|
||||
When you click the "Replay" button, you are asking `re-frame-trace` to perform
|
||||
When you click the "Replay" button, you are asking `re-frame-10x` to perform
|
||||
an "Action Replay" of "The Observed Epoch", and this happens in two Steps:
|
||||
- **Step 1** - the value in `app-db` is reset to the value it contained immediately prior to "The Observed Epoch"
|
||||
- **Step 2** - the event which caused "The Observed Epoch" is re-dispatched
|
||||
|
|
@ -27,7 +27,7 @@ So, Step 1 is "reestablish initial conditions" and Step 2 is "do it all again".
|
|||
### Useful?
|
||||
|
||||
It facilitates "The HotPlay Workflow":
|
||||
- A. You `Observe` an Epoch (in `re-frame-trace`) to see if an event was correctly processed
|
||||
- A. You `Observe` an Epoch (in `re-frame-10x`) to see if an event was correctly processed
|
||||
- B. You notice a problem, and you `Edit` (fix) the event handler (or subs handler, view, etc) via Cursive, Emacs, etc.
|
||||
- C. Figwheel will re-compile and `Hotload` your correction
|
||||
- D: You click the `Replay` button
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ Because `layer 2` subs run on every single modification of `app-db`, and because
|
|||
very often nothing has changed, their trace can be a bit noisy. Yes, it happened,
|
||||
but it just isn't that interesting.
|
||||
|
||||
So `re-frame-trace` gives you the option of filtering out trace for
|
||||
So `re-frame-10x` gives you the option of filtering out trace for
|
||||
the `layer 2` subscriptions where the value "this time" is the same as the
|
||||
value "last time".
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ be told all about it. :-)
|
|||
|
||||
### Why do I sometimes see "Layer ?" when viewing a subscription?
|
||||
|
||||
To determine whether a subscription is a layer 2 or layer 3, re-frame-trace
|
||||
To determine whether a subscription is a layer 2 or layer 3, re-frame-10x
|
||||
looks at the input signals to a subscription. If one of the input signals is
|
||||
app-db then the subscription is a layer 2 sub, otherwise it is a layer 3. If
|
||||
a subscription hasn't run yet, then we can't know if it is a layer 2 or 3.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
Some notes on the "Timing" tab in `re-frame-trace`.
|
||||
Some notes on the "Timing" tab in `re-frame-10x`.
|
||||
|
||||
## Be Sceptical Of The Numbers
|
||||
|
||||
|
|
@ -9,14 +9,14 @@ Two reasons:
|
|||
takes 10ms, and you’ll never know why. Noisy.
|
||||
|
||||
So, don't ever draw conclusions from one set of timings.
|
||||
Click the "replay" button ([#115](https://github.com/Day8/re-frame-trace/issues/155))
|
||||
Click the "replay" button ([#115](https://github.com/Day8/re-frame-10x/issues/155))
|
||||
a few times to ensure the numbers are stable.
|
||||
|
||||
2. Don't freak out about any apparent slowness. Not initially, anyway.
|
||||
|
||||
After all, you're running a dev build, right, not the
|
||||
production build? And I'm guessing you're also
|
||||
running a dev build of React? And `re-frame-trace` will itself also add
|
||||
running a dev build of React? And `re-frame-10x` will itself also add
|
||||
drag, what with all that creating and analysing of trace.
|
||||
|
||||
So, run the production version of your app first, before
|
||||
|
|
@ -47,4 +47,4 @@ accurate timing figures.
|
|||
|
||||
Here is (React 16) advice on [debugging React performance with Chrome Devtools](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad)
|
||||
|
||||
The [re-frame.core/debug](https://github.com/Day8/re-frame/blob/master/src/re_frame/std_interceptors.cljc) interceptor is relatively slow, and runs interleaved with your application's events being processed. re-frame-trace gives you the same information in the app-db panel, but saves the calculations until after your application has finished running, so you don't get the performance cost included in your timing.
|
||||
The [re-frame.core/debug](https://github.com/Day8/re-frame/blob/master/src/re_frame/std_interceptors.cljc) interceptor is relatively slow, and runs interleaved with your application's events being processed. re-frame-10x gives you the same information in the app-db panel, but saves the calculations until after your application has finished running, so you don't get the performance cost included in your timing.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## App DB path expansions
|
||||
|
||||
re-frame-trace preserves path expansions by using the through the JSONML
|
||||
re-frame-10x preserves path expansions by using the through the JSONML
|
||||
that is rendered, rather than the actual data path. This has the advantage
|
||||
of being feasible, but the disadvantage that if the HTML layout changes,
|
||||
then that can trigger expansion changes. This means that if the map keys
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
Conceptually, re-frame is built around an event loop. The user makes an action, which causes an event to be dispatched, which changes app-db, which causes subscriptions to rerun, which causes the UI to update. We will refer to this cycle as an epoch. A user developing a re-frame application will want to be able to debug from this perspective.
|
||||
|
||||
Currently, re-frame-trace offers three panels: app-db, subs, and traces. Each of these offers a view into the application state and allows the programmer to build up a mental model of what is happening. They are not going to go away, but there is room for a more integrated and holistic panel.
|
||||
Currently, re-frame-10x offers three panels: app-db, subs, and traces. Each of these offers a view into the application state and allows the programmer to build up a mental model of what is happening. They are not going to go away, but there is room for a more integrated and holistic panel.
|
||||
|
||||
### Requirements
|
||||
|
||||
|
|
|
|||
11
project.clj
11
project.clj
|
|
@ -1,6 +1,6 @@
|
|||
(defproject day8.re-frame/trace "0.1.22-react16"
|
||||
:description "Tracing and developer tools for re-frame apps"
|
||||
:url "https://github.com/Day8/re-frame-trace"
|
||||
(defproject day8.re-frame/re-frame-10x "0.2.0-react16"
|
||||
:description "Become 10x more productive when developing and debugging re-frame applications."
|
||||
:url "https://github.com/Day8/re-frame-10x"
|
||||
:license {:name "MIT"}
|
||||
:dependencies [[org.clojure/clojure "1.9.0"]
|
||||
[org.clojure/clojurescript "1.9.671"]
|
||||
|
|
@ -27,11 +27,6 @@
|
|||
["vcs" "commit"]
|
||||
["vcs" "push"]]
|
||||
|
||||
:figwheel {:css-dirs ["resources/day8/re_frame/trace"]}
|
||||
|
||||
:less {:source-paths ["resources/day8/re_frame/trace"]
|
||||
:target-path "resources/day8/re_frame/trace"}
|
||||
|
||||
:profiles {:dev {:dependencies [[binaryage/dirac "RELEASE"]]}
|
||||
:mranderson {:dependencies ^:replace [^:source-dep [re-frame "0.10.2"
|
||||
:exclusions [org.clojure/clojurescript
|
||||
|
|
|
|||
|
|
@ -1,925 +0,0 @@
|
|||
#--re-frame-trace-- {
|
||||
all: initial;
|
||||
line-height: 1.15;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- * {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- div,
|
||||
#--re-frame-trace-- nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- pre {
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- a,
|
||||
#--re-frame-trace-- a:visited {
|
||||
color: #222;
|
||||
border-bottom: 1px #333 dotted;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- a:hover,
|
||||
#--re-frame-trace-- a:focus {
|
||||
border-bottom: 1px #666666 solid;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- code {
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sub,
|
||||
#--re-frame-trace-- sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- option {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- input,
|
||||
#--re-frame-trace-- optgroup,
|
||||
#--re-frame-trace-- select,
|
||||
#--re-frame-trace-- textarea {
|
||||
font-family: "courier new", monospace;
|
||||
font-size: 100%;
|
||||
padding: 3px 3px 1px 3px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button:focus,
|
||||
#--re-frame-trace-- select:focus {
|
||||
outline: #999 dotted 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- html[type="button"],
|
||||
#--re-frame-trace-- [type="reset"],
|
||||
#--re-frame-trace-- [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button:-moz-focusring,
|
||||
#--re-frame-trace-- [type="button"] {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- [type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button {
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
-webkit-font-smoothing: inherit;
|
||||
letter-spacing: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table,
|
||||
#--re-frame-trace-- thead,
|
||||
#--re-frame-trace-- tbody,
|
||||
#--re-frame-trace-- tfoot,
|
||||
#--re-frame-trace-- tr,
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
width: auto;
|
||||
border-color: inherit;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border: none;
|
||||
vertical-align: inherit;
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-weight: inherit;
|
||||
-webkit-border-horizontal-spacing: 0;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
-webkit-border-vertical-spacing: 0;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- {
|
||||
background: white;
|
||||
font-family: "courier new", monospace;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .label {
|
||||
color: #222;
|
||||
background: #fafafa;
|
||||
border: 1px solid #efeef1;
|
||||
font-size: 0.9em;
|
||||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tbody {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th,
|
||||
#--re-frame-trace-- tr td {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--trace {
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr:nth-child(even) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--sub-create .trace--op {
|
||||
color: #008766;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--sub-run .trace--op {
|
||||
color: #762cff;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--event .trace--op {
|
||||
color: #a66900;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--render .trace--op {
|
||||
color: #007cc2;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--fsm-trigger .trace--op {
|
||||
color: #284694;
|
||||
}
|
||||
|
||||
#--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-- .text-button:focus {
|
||||
outline: #999 dotted 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .icon-button {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button.tab {
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .popout-icon {
|
||||
max-width: 15px;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#--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 gray;
|
||||
border-radius: 0;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items,
|
||||
#--re-frame-trace-- .subtrees {
|
||||
list-style-type: none;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item,
|
||||
#--re-frame-trace-- .subtrees .subtree-button,
|
||||
#--re-frame-trace-- .subtrees .filter-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button .filter-item-string,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item .filter-item-string,
|
||||
#--re-frame-trace-- .subtrees .subtree-button .filter-item-string,
|
||||
#--re-frame-trace-- .subtrees .filter-item .filter-item-string {
|
||||
color: #222;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button .subtree-button-string,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item .subtree-button-string,
|
||||
#--re-frame-trace-- .subtrees .subtree-button .subtree-button-string,
|
||||
#--re-frame-trace-- .subtrees .filter-item .subtree-button-string {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button:hover,
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button:focus,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item:hover,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item:focus,
|
||||
#--re-frame-trace-- .subtrees .subtree-button:hover,
|
||||
#--re-frame-trace-- .subtrees .subtree-button:focus,
|
||||
#--re-frame-trace-- .subtrees .filter-item:hover,
|
||||
#--re-frame-trace-- .subtrees .filter-item:focus {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#--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-- .filter {
|
||||
box-shadow: -7px 15px 6px -15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control select {
|
||||
border-bottom: 1px solid #8f8f8f;
|
||||
appearance: menulist;
|
||||
font-family: "courier new", monospace;
|
||||
-moz-appearance: menulist;
|
||||
-webkit-appearance: menulist;
|
||||
border: none;
|
||||
padding: 2px 0 0 0;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input {
|
||||
border-bottom: 1px solid #8f8f8f;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- {
|
||||
all: initial;
|
||||
line-height: 1.15;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- * {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- div,
|
||||
#--re-frame-trace-- nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- pre {
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- a,
|
||||
#--re-frame-trace-- a:visited {
|
||||
color: #222;
|
||||
border-bottom: 1px #333 dotted;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- a:hover,
|
||||
#--re-frame-trace-- a:focus {
|
||||
border-bottom: 1px #666666 solid;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- code {
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sub,
|
||||
#--re-frame-trace-- sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- option {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- input,
|
||||
#--re-frame-trace-- optgroup,
|
||||
#--re-frame-trace-- select,
|
||||
#--re-frame-trace-- textarea {
|
||||
font-family: "courier new", monospace;
|
||||
font-size: 100%;
|
||||
padding: 3px 3px 1px 3px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button:focus,
|
||||
#--re-frame-trace-- select:focus {
|
||||
outline: #999 dotted 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- html[type="button"],
|
||||
#--re-frame-trace-- [type="reset"],
|
||||
#--re-frame-trace-- [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button:-moz-focusring,
|
||||
#--re-frame-trace-- [type="button"] {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- [type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button {
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
-webkit-font-smoothing: inherit;
|
||||
letter-spacing: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table,
|
||||
#--re-frame-trace-- thead,
|
||||
#--re-frame-trace-- tbody,
|
||||
#--re-frame-trace-- tfoot,
|
||||
#--re-frame-trace-- tr,
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
width: auto;
|
||||
border-color: inherit;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border: none;
|
||||
vertical-align: inherit;
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-weight: inherit;
|
||||
-webkit-border-horizontal-spacing: 0;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
-webkit-border-vertical-spacing: 0;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- {
|
||||
background: white;
|
||||
font-family: 'courier new', monospace;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .label {
|
||||
color: #222;
|
||||
background: #fafafa;
|
||||
border: 1px solid #efeef1;
|
||||
font-size: 0.9em;
|
||||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tbody {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th,
|
||||
#--re-frame-trace-- tr td {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--trace {
|
||||
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr:nth-child(even) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--sub-create .trace--op {
|
||||
color: #008766;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--sub-run .trace--op {
|
||||
color: #762cff;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--event .trace--op {
|
||||
color: #A66900;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--render .trace--op {
|
||||
color: #007CC2;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--fsm-trigger .trace--op {
|
||||
color: #284694;
|
||||
}
|
||||
|
||||
#--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-- .text-button:focus {
|
||||
outline: #999 dotted 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .icon-button {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button.tab {
|
||||
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .popout-icon {
|
||||
max-width: 15px;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#--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 gray;
|
||||
border-radius: 0;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items,
|
||||
#--re-frame-trace-- .subtrees {
|
||||
list-style-type: none;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item,
|
||||
#--re-frame-trace-- .subtrees .subtree-button,
|
||||
#--re-frame-trace-- .subtrees .filter-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button .filter-item-string,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item .filter-item-string,
|
||||
#--re-frame-trace-- .subtrees .subtree-button .filter-item-string,
|
||||
#--re-frame-trace-- .subtrees .filter-item .filter-item-string {
|
||||
color: #222;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button .subtree-button-string,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item .subtree-button-string,
|
||||
#--re-frame-trace-- .subtrees .subtree-button .subtree-button-string,
|
||||
#--re-frame-trace-- .subtrees .filter-item .subtree-button-string {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button:hover,
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button:focus,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item:hover,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item:focus,
|
||||
#--re-frame-trace-- .subtrees .subtree-button:hover,
|
||||
#--re-frame-trace-- .subtrees .subtree-button:focus,
|
||||
#--re-frame-trace-- .subtrees .filter-item:hover,
|
||||
#--re-frame-trace-- .subtrees .filter-item:focus {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#--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-- .filter {
|
||||
box-shadow: -7px 15px 6px -15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control select {
|
||||
border-bottom: 1px solid #8f8f8f;
|
||||
appearance: menulist;
|
||||
font-family: 'courier new', monospace;
|
||||
-moz-appearance: menulist;
|
||||
-webkit-appearance: menulist;
|
||||
border: none;
|
||||
padding: 2px 0 0 0;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input {
|
||||
border-bottom: 1px solid #8f8f8f;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input:before {
|
||||
display: inline-block;
|
||||
color: #8f8f8f;
|
||||
content: "⚲";
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-control-input {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .nav {
|
||||
background: #efeef1;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace--.external-window {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .panel-content-top {
|
||||
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .panel-content-scrollable {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .tab-contents {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-control {
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-items-count.active {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-items-count.active:hover {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-fields {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-category {
|
||||
display: inline-block;
|
||||
background: #efeef1;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .re-frame-trace--object .toggle {
|
||||
color: #8f8f8f;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .re-frame-trace--objectspan {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .host-closed {
|
||||
font-size: 4em;
|
||||
background-color: hsla(60, 100%, 50%, 0.8);
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .expansion-button {
|
||||
font-family: sans-serif;
|
||||
width: 16px;
|
||||
padding: 0 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input:before {
|
||||
display: inline-block;
|
||||
color: #8f8f8f;
|
||||
content: "⚲";
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-control-input {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .nav {
|
||||
background: #efeef1;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#--re-frame-trace--.external-window {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .panel-content-top {
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .panel-content-scrollable {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .tab-contents {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-control {
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-items-count.active {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-items-count.active:hover {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-fields {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-category {
|
||||
display: inline-block;
|
||||
background: #efeef1;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .re-frame-trace--object .toggle {
|
||||
color: #8f8f8f;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .re-frame-trace--objectspan {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .host-closed {
|
||||
font-size: 4em;
|
||||
background-color: hsla(60, 100%, 50%, 0.8);
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .expansion-button {
|
||||
font-family: sans-serif;
|
||||
width: 16px;
|
||||
padding: 0 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1,582 +0,0 @@
|
|||
#--re-frame-trace-- {
|
||||
all: initial;
|
||||
/*! abridged from normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
line-height: 1.15;
|
||||
font-size: 12px;
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
/* re-frame-trace styles
|
||||
========================================================================== */
|
||||
background: white;
|
||||
font-family: "courier new", monospace;
|
||||
color: #222222;
|
||||
/* mixins */
|
||||
/* app-db data viewer
|
||||
========================================================================== */
|
||||
}
|
||||
|
||||
#--re-frame-trace-- * {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- div,
|
||||
#--re-frame-trace-- nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- a,
|
||||
#--re-frame-trace-- a:visited {
|
||||
color: #222222;
|
||||
border-bottom: 1px #333 dotted;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- a:hover,
|
||||
#--re-frame-trace-- a:focus {
|
||||
border-bottom: 1px #666666 solid;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- code {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sub,
|
||||
#--re-frame-trace-- sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- option {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- input,
|
||||
#--re-frame-trace-- optgroup,
|
||||
#--re-frame-trace-- select,
|
||||
#--re-frame-trace-- textarea {
|
||||
font-family: "courier new", monospace;
|
||||
font-size: 100%;
|
||||
padding: 3px 3px 1px 3px;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button:focus,
|
||||
#--re-frame-trace-- select:focus {
|
||||
outline: #999999 dotted 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- html [type="button"],
|
||||
#--re-frame-trace-- [type="reset"],
|
||||
#--re-frame-trace-- [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button:-moz-focusring,
|
||||
#--re-frame-trace-- [type="button"]:-moz-focusring,
|
||||
#--re-frame-trace-- [type="reset"]:-moz-focusring,
|
||||
#--re-frame-trace-- [type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- [type="checkbox"],
|
||||
#--re-frame-trace-- [type="radio"] {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- [type="number"]::-webkit-inner-spin-button,
|
||||
#--re-frame-trace-- [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- [type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- [hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- button {
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
-webkit-font-smoothing: inherit;
|
||||
letter-spacing: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table,
|
||||
#--re-frame-trace-- thead,
|
||||
#--re-frame-trace-- tbody,
|
||||
#--re-frame-trace-- tfoot,
|
||||
#--re-frame-trace-- tr,
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-color: inherit;
|
||||
vertical-align: inherit;
|
||||
text-align: left;
|
||||
font-weight: inherit;
|
||||
-webkit-border-horizontal-spacing: 0;
|
||||
-webkit-border-vertical-spacing: 0;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- th,
|
||||
#--re-frame-trace-- td {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .label {
|
||||
color: #8f8f8f;
|
||||
background: #fafafa;
|
||||
border: 1px solid #efeef1;
|
||||
font-size: 0.9em;
|
||||
margin: 10px 5px;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tbody {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th,
|
||||
#--re-frame-trace-- tr td {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr:nth-child(even) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--sub-create .trace--op {
|
||||
color: #008766;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--sub-run .trace--op {
|
||||
color: #762cff;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--event .trace--op {
|
||||
color: #a66900;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--render .trace--op {
|
||||
color: #007cc2;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--fsm-trigger .trace--op {
|
||||
color: #284694;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--details {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--details:hover,
|
||||
#--re-frame-trace-- tr.trace--details:focus {
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--details:hover .trace--details-icon:before,
|
||||
#--re-frame-trace-- tr.trace--details:focus .trace--details-icon:before {
|
||||
color: #222222;
|
||||
cursor: pointer;
|
||||
content: "🖶";
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr.trace--details:focus .trace--details-tags-text {
|
||||
border-left: 1px dotted #999999;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td.trace--toggle {
|
||||
color: #a8a8a8;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td.trace--toggle button:focus {
|
||||
color: #222222;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td.trace--op {
|
||||
color: #8f8f8f;
|
||||
padding-left: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td.trace--op-string {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td.trace--details-tags {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td.trace--details-tags .trace--details-tags-text {
|
||||
padding: 8px 5px;
|
||||
padding-left: 8px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td.trace--meta {
|
||||
color: #8f8f8f;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td .op-string {
|
||||
cursor: pointer;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr td .op-string:hover {
|
||||
border-bottom: 1px dotted #616cdb;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr:hover .trace--toggle {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th:first-child,
|
||||
#--re-frame-trace-- tr td:first-child {
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- tr th:last-child,
|
||||
#--re-frame-trace-- tr td:last-child {
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
#--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-- .text-button:focus {
|
||||
outline: #999999 dotted 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .icon-button {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .popout-icon {
|
||||
max-width: 15px;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#--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 #808080;
|
||||
border-radius: 0;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items,
|
||||
#--re-frame-trace-- .subtrees {
|
||||
list-style-type: none;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .filter-item,
|
||||
#--re-frame-trace-- .subtrees .filter-item,
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button,
|
||||
#--re-frame-trace-- .subtrees .subtree-button {
|
||||
color: #8f8f8f;
|
||||
background: #fafafa;
|
||||
border: 1px solid #efeef1;
|
||||
font-size: 0.9em;
|
||||
margin: 10px 5px;
|
||||
color: #222222;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .filter-item .filter-item-string,
|
||||
#--re-frame-trace-- .subtrees .filter-item .filter-item-string,
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button .filter-item-string,
|
||||
#--re-frame-trace-- .subtrees .subtree-button .filter-item-string {
|
||||
color: #222222;
|
||||
background: #ffff00;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .filter-item .subtree-button-string,
|
||||
#--re-frame-trace-- .subtrees .filter-item .subtree-button-string,
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button .subtree-button-string,
|
||||
#--re-frame-trace-- .subtrees .subtree-button .subtree-button-string {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- ul.filter-items .filter-item:hover,
|
||||
#--re-frame-trace-- .subtrees .filter-item:hover,
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button:hover,
|
||||
#--re-frame-trace-- .subtrees .subtree-button:hover,
|
||||
#--re-frame-trace-- ul.filter-items .filter-item:focus,
|
||||
#--re-frame-trace-- .subtrees .filter-item:focus,
|
||||
#--re-frame-trace-- ul.filter-items .subtree-button:focus,
|
||||
#--re-frame-trace-- .subtrees .subtree-button:focus {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#--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-- .filter {
|
||||
box-shadow: -7px 15px 6px -15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control select {
|
||||
border: none;
|
||||
border-bottom: 1px solid #8f8f8f;
|
||||
background: white;
|
||||
display: inline-block;
|
||||
font-family: "courier new", monospace;
|
||||
font-size: 1em;
|
||||
padding: 2px 0 0 0;
|
||||
-moz-appearance: menulist;
|
||||
-webkit-appearance: menulist;
|
||||
appearance: menulist;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input {
|
||||
border-bottom: 1px solid #8f8f8f;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input:before {
|
||||
display: inline-block;
|
||||
color: #8f8f8f;
|
||||
content: "⚲";
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter .filter-control .filter-control-input input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-control-input {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .nav {
|
||||
background: #efeef1;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#--re-frame-trace--.external-window {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .panel-content-scrollable {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .tab-contents {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-control {
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-items-count.active {
|
||||
background: #ffff00;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-items-count.active:hover {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-fields {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .filter-category {
|
||||
display: inline-block;
|
||||
background: #efeef1;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .re-frame-trace--object .toggle {
|
||||
color: #8f8f8f;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .re-frame-trace--object > span {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .host-closed {
|
||||
font-size: 4em;
|
||||
background-color: rgba(255, 255, 0, 0.8);
|
||||
}
|
||||
|
||||
#--re-frame-trace-- .expansion-button {
|
||||
font-family: sans-serif;
|
||||
width: 16px;
|
||||
padding: 0 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1,589 +0,0 @@
|
|||
@background-blue: #e7f1ff;
|
||||
@background-gray: #a8a8a8;
|
||||
@background-gray-hint: #fafafa;
|
||||
@dark-green: #008766;
|
||||
@dark-gold: #A66900;
|
||||
@dark-purple: #762cff;
|
||||
@dark-blue: #284694;
|
||||
@dark-gray: gray;
|
||||
@dark-skyblue: #007CC2;
|
||||
@medium-gray: #999;
|
||||
@light-purple: #616cdb;
|
||||
@light-blue: lightblue;
|
||||
@light-gray: #efeef1;
|
||||
@yellow: yellow;
|
||||
@text-color: #222;
|
||||
@text-color-muted: #8f8f8f;
|
||||
|
||||
#--re-frame-trace-- {
|
||||
|
||||
all: initial;
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
/*! abridged from normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
line-height: 1.15;
|
||||
font-size: 12px;
|
||||
|
||||
div,
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
a, a:visited {
|
||||
color: @text-color;
|
||||
border-bottom: 1px #333 dotted;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
border-bottom: 1px #666666 solid;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// Prevent `sub` and `sup` elements from affecting the line height
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
option {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: "courier new", monospace;
|
||||
font-size: 100%;
|
||||
// line-height: 1.15;
|
||||
padding: 3px 3px 1px 3px;
|
||||
border: 1px solid @medium-gray;
|
||||
}
|
||||
|
||||
button, // Show the overflow in IE.
|
||||
input { // Show the overflow in Edge.
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
&:focus {
|
||||
outline: @medium-gray dotted 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
// Restore the focus styles unset by the previous rule.
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto; // Remove the default vertical scrollbar in IE.
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; // IE 10-
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
|
||||
outline-offset: -2px; // Correct the outline style in Safari.
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
|
||||
}
|
||||
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
-webkit-font-smoothing: inherit;
|
||||
letter-spacing: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// tables
|
||||
|
||||
table,
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-color: inherit;
|
||||
vertical-align: inherit;
|
||||
text-align: left;
|
||||
font-weight: inherit;
|
||||
-webkit-border-horizontal-spacing: 0;
|
||||
-webkit-border-vertical-spacing: 0;
|
||||
}
|
||||
table {
|
||||
display: table;
|
||||
}
|
||||
th, td {
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
tr {
|
||||
display: table-row;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
th, td {
|
||||
display: table-cell;
|
||||
}
|
||||
tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
|
||||
/* re-frame-trace styles
|
||||
========================================================================== */
|
||||
|
||||
|
||||
background: white;
|
||||
font-family: 'courier new', monospace;
|
||||
color: @text-color;
|
||||
|
||||
/* mixins */
|
||||
.label {
|
||||
color: @text-color-muted;
|
||||
background: @background-gray-hint;
|
||||
border: 1px solid @light-gray;
|
||||
font-size: 0.9em;
|
||||
margin: 10px 5px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
tbody {
|
||||
color: @text-color;
|
||||
}
|
||||
thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
th, td {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
th:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.trace--trace {
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: @background-gray-hint;
|
||||
}
|
||||
|
||||
&.trace--sub-create {
|
||||
.trace--op{
|
||||
color: @dark-green;
|
||||
}
|
||||
}
|
||||
&.trace--sub-run {
|
||||
.trace--op{
|
||||
color: @dark-purple;
|
||||
}
|
||||
}
|
||||
&.trace--event {
|
||||
.trace--op{
|
||||
color: @dark-gold;
|
||||
}
|
||||
}
|
||||
&.trace--render {
|
||||
.trace--op{
|
||||
color: @dark-skyblue;
|
||||
}
|
||||
}
|
||||
&.trace--fsm-trigger {
|
||||
.trace--op{
|
||||
color: @dark-blue;
|
||||
}
|
||||
}
|
||||
&.trace--details {
|
||||
color: @text-color-muted;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken(@text-color-muted, 20);
|
||||
|
||||
.trace--details-icon:before {
|
||||
color: @text-color;
|
||||
cursor: pointer;
|
||||
content: "🖶";
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.trace--details-tags-text {
|
||||
border-left: 1px dotted @medium-gray;
|
||||
padding-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
&.trace--toggle {
|
||||
color: @background-gray;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
|
||||
button:focus {
|
||||
color: @text-color;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
&.trace--op {
|
||||
color: @text-color-muted;
|
||||
padding-left: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.trace--op-string {
|
||||
word-break: break-all;
|
||||
}
|
||||
&.trace--details-tags {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
.trace--details-tags-text {
|
||||
padding: 8px 5px;
|
||||
padding-left: 8px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
&.trace--meta {
|
||||
color: @text-color-muted;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
.op-string {
|
||||
cursor: pointer;
|
||||
padding: 1px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px dotted @light-purple;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.trace--toggle {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
&:first-child {
|
||||
padding-left: 7px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button {
|
||||
padding: 5px 5px 3px;
|
||||
margin: 5px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-button {
|
||||
border-bottom: 1px dotted #888;
|
||||
font-weight: normal;
|
||||
&:focus {
|
||||
outline: @medium-gray dotted 1px;
|
||||
}
|
||||
}
|
||||
.icon-button {
|
||||
font-size: 10px;
|
||||
}
|
||||
button.tab {
|
||||
|
||||
}
|
||||
|
||||
.popout-icon {
|
||||
max-width: 15px;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.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 @dark-gray;
|
||||
border-radius: 0;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
ul.filter-items,
|
||||
.subtrees {
|
||||
list-style-type: none;
|
||||
margin: 0 5px;
|
||||
|
||||
.filter-item,
|
||||
.subtree-button {
|
||||
.label;
|
||||
display: inline-block;
|
||||
|
||||
.filter-item-string {
|
||||
color: @text-color;
|
||||
background: @yellow;
|
||||
}
|
||||
|
||||
.subtree-button-string {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
}
|
||||
.icon-remove {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.filter {
|
||||
box-shadow: -7px 15px 6px -15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1001;
|
||||
|
||||
.filter-control {
|
||||
select {
|
||||
border: none;
|
||||
border-bottom: 1px solid @text-color-muted;
|
||||
background: white;
|
||||
display: inline-block;
|
||||
font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
padding: 2px 0 0 0;
|
||||
-moz-appearance: menulist;
|
||||
-webkit-appearance: menulist;
|
||||
appearance: menulist;
|
||||
}
|
||||
.filter-control-input {
|
||||
border-bottom: 1px solid @text-color-muted;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
color: @text-color-muted;
|
||||
content: "⚲";
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
input {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-control-input {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.nav {
|
||||
background: @light-gray;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&.external-window {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.panel-content-top {
|
||||
|
||||
}
|
||||
.panel-content-scrollable {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tab-contents {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
.filter-control {
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.filter-items-count {
|
||||
&.active {
|
||||
background: @yellow;
|
||||
|
||||
&:hover {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-fields {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.filter-category {
|
||||
display: inline-block;
|
||||
background: #efeef1;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* app-db data viewer
|
||||
========================================================================== */
|
||||
|
||||
.re-frame-trace--object {
|
||||
.toggle {
|
||||
color: @text-color-muted;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
& > span {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.host-closed {
|
||||
font-size: 4em;
|
||||
background-color: fade(@yellow, 80%);
|
||||
}
|
||||
|
||||
.expansion-button {
|
||||
font-family: sans-serif;
|
||||
width: 16px;
|
||||
padding: 0 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 518 B After Width: | Height: | Size: 518 B |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 194 B After Width: | Height: | Size: 194 B |
|
Before Width: | Height: | Size: 546 B After Width: | Height: | Size: 546 B |
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 531 B |
|
Before Width: | Height: | Size: 471 B After Width: | Height: | Size: 471 B |
|
Before Width: | Height: | Size: 660 B After Width: | Height: | Size: 660 B |
|
Before Width: | Height: | Size: 660 B After Width: | Height: | Size: 660 B |
|
Before Width: | Height: | Size: 894 B After Width: | Height: | Size: 894 B |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 957 B After Width: | Height: | Size: 957 B |
|
Before Width: | Height: | Size: 957 B After Width: | Height: | Size: 957 B |
|
Before Width: | Height: | Size: 730 B After Width: | Height: | Size: 730 B |
|
Before Width: | Height: | Size: 462 B After Width: | Height: | Size: 462 B |
|
Before Width: | Height: | Size: 544 B After Width: | Height: | Size: 544 B |
|
|
@ -1,12 +1,5 @@
|
|||
(ns day8.re-frame.trace.preload
|
||||
(:require [day8.re-frame.trace :as trace]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
|
||||
(:require [day8.re-frame-10x.preload]))
|
||||
|
||||
|
||||
;; Use this namespace with the :preloads compiler option to perform the necessary setup for enabling tracing:
|
||||
;; {:compiler {:preloads [day8.re-frame.trace.preload] ...}}
|
||||
(js/console.warn "re-frame-trace has been renamed to re-frame-10x: (https://clojars.org/day8.re-frame/re-frame-10x). Update to newer versions of this library by using the `day8.re-frame/re-frame-10x` artifact ID. Thanks!")
|
||||
(rf/clear-subscription-cache!)
|
||||
(trace/init-db!)
|
||||
(defonce _ (trace/init-tracing!))
|
||||
(trace/inject-devtools!)
|
||||
(js/console.warn
|
||||
"The preload at day8.re-frame.trace.preload is deprecated. Update your `:preloads` to use `day8.re-frame-10x.preload` instead. See https://github.com/Day8/re-frame-10x#installation for more details.")
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
(ns day8.re-frame.trace.view.views)
|
||||
|
||||
(defn render [])
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
(ns day8.re-frame.trace
|
||||
(:require [day8.re-frame.trace.styles :as styles]
|
||||
[day8.re-frame.trace.view.container :as container]
|
||||
[day8.re-frame.trace.subs]
|
||||
[day8.re-frame.trace.events]
|
||||
[day8.re-frame.trace.db :as trace.db]
|
||||
(ns day8.re-frame-10x
|
||||
(:require [day8.re-frame-10x.styles :as styles]
|
||||
[day8.re-frame-10x.view.container :as container]
|
||||
[day8.re-frame-10x.subs]
|
||||
[day8.re-frame-10x.events]
|
||||
[day8.re-frame-10x.db :as trace.db]
|
||||
[re-frame.trace :as trace :include-macros true]
|
||||
[clojure.string :as str]
|
||||
[reagent.interop :refer-macros [$ $!]]
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
|
||||
|
||||
(defn panel-div []
|
||||
(let [id "--re-frame-trace--"
|
||||
(let [id "--re-frame-10x--"
|
||||
panel (.getElementById js/document id)]
|
||||
(if panel
|
||||
panel
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(ns day8.re-frame.trace.common-styles
|
||||
(ns day8.re-frame-10x.common-styles
|
||||
(:require [mranderson047.garden.v1v3v3.garden.units :refer [px em]]
|
||||
[mranderson047.garden.v1v3v3.garden.compiler :refer [render-css]]))
|
||||
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
(def blue-modern
|
||||
|
||||
[;; ========== Specific blue-modern styles (must be added to :class arg)
|
||||
:#--re-frame-trace--
|
||||
:#--re-frame-10x--
|
||||
[:.bm-white-background {:background-color white-background-color
|
||||
:border (str "1px solid " white-background-border-color)}]
|
||||
[:.bm-standard-background {:background-color standard-background-color
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
(ns day8.re-frame.trace.db
|
||||
(ns day8.re-frame-10x.db
|
||||
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.utils.localstorage :as localstorage]))
|
||||
[day8.re-frame-10x.utils.localstorage :as localstorage]))
|
||||
|
||||
(defn init-db [debug?]
|
||||
(let [panel-width% (localstorage/get "panel-width-ratio" 0.35)
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
(ns day8.re-frame.trace.events
|
||||
(ns day8.re-frame-10x.events
|
||||
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[mranderson047.reagent.v0v8v0-alpha2.reagent.core :as r]
|
||||
[cljs.tools.reader.edn]
|
||||
[day8.re-frame.trace.utils.utils :as utils :refer [spy]]
|
||||
[day8.re-frame.trace.utils.localstorage :as localstorage]
|
||||
[day8.re-frame-10x.utils.utils :as utils :refer [spy]]
|
||||
[day8.re-frame-10x.utils.localstorage :as localstorage]
|
||||
[clojure.string :as str]
|
||||
[goog.object]
|
||||
[re-frame.db]
|
||||
[re-frame.interop]
|
||||
[day8.re-frame.trace.view.container :as container]
|
||||
[day8.re-frame.trace.styles :as styles]
|
||||
[day8.re-frame-10x.view.container :as container]
|
||||
[day8.re-frame-10x.styles :as styles]
|
||||
[clojure.set :as set]
|
||||
[day8.re-frame.trace.metamorphic :as metam]
|
||||
[day8.re-frame-10x.metamorphic :as metam]
|
||||
[re-frame.trace]))
|
||||
|
||||
(defn fixed-after
|
||||
|
|
@ -228,7 +228,7 @@
|
|||
;; Global
|
||||
|
||||
(defn mount [popup-window popup-document]
|
||||
(let [app (.getElementById popup-document "--re-frame-trace--")
|
||||
(let [app (.getElementById popup-document "--re-frame-10x--")
|
||||
doc js/document]
|
||||
(styles/inject-trace-styles popup-document)
|
||||
(goog.object/set popup-window "onunload" #(rf/dispatch [:global/external-closed]))
|
||||
|
|
@ -248,7 +248,7 @@
|
|||
|
||||
d (.-document w)]
|
||||
(.open d)
|
||||
(.write d "<head></head><body style=\"margin: 0px;\"><div id=\"--re-frame-trace--\" class=\"external-window\"></div></body>")
|
||||
(.write d "<head></head><body style=\"margin: 0px;\"><div id=\"--re-frame-10x--\" class=\"external-window\"></div></body>")
|
||||
(goog.object/set w "onload" #(mount w d))
|
||||
(.close d)))
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(ns day8.re-frame.trace.metamorphic)
|
||||
(ns day8.re-frame-10x.metamorphic)
|
||||
|
||||
(defn id-between-xf
|
||||
;; Copied here because I got undeclared Var warnings from figwheel when requiring a CLJC utils ns.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
(ns day8.re-frame-10x.preload
|
||||
(:require [day8.re-frame-10x :as trace]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
|
||||
|
||||
|
||||
;; Use this namespace with the :preloads compiler option to perform the necessary setup for enabling tracing:
|
||||
;; {:compiler {:preloads [day8.re-frame-10x.preload] ...}}
|
||||
(rf/clear-subscription-cache!)
|
||||
(trace/init-db!)
|
||||
(defonce _ (trace/init-tracing!))
|
||||
(trace/inject-devtools!)
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
(ns day8.re-frame.trace.styles
|
||||
(ns day8.re-frame-10x.styles
|
||||
(:require [mranderson047.garden.v1v3v3.garden.core :as garden]
|
||||
[mranderson047.garden.v1v3v3.garden.units :as units :refer [em px percent]]
|
||||
[mranderson047.garden.v1v3v3.garden.color :as color]
|
||||
[mranderson047.garden.v1v3v3.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.timing :as timing]
|
||||
[day8.re-frame.trace.view.settings :as settings]
|
||||
[day8.re-frame.trace.view.event :as event]))
|
||||
[day8.re-frame-10x.common-styles :as common]
|
||||
[day8.re-frame-10x.utils.re-com :as rc]
|
||||
[day8.re-frame-10x.view.app-db :as app-db]
|
||||
[day8.re-frame-10x.view.timing :as timing]
|
||||
[day8.re-frame-10x.view.settings :as settings]
|
||||
[day8.re-frame-10x.view.event :as event]))
|
||||
|
||||
(def background-gray common/background-gray)
|
||||
(def background-gray-hint common/background-gray-hint)
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
|
||||
(def css-reset
|
||||
[:#--re-frame-trace--
|
||||
[:#--re-frame-10x--
|
||||
{:all "initial"}
|
||||
[:* "*:before" "*:after"
|
||||
{:all "unset"}]
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
:z-index 1000})
|
||||
|
||||
(def re-frame-trace-styles
|
||||
[:#--re-frame-trace--
|
||||
[:#--re-frame-10x--
|
||||
{:background-color common/background-gray
|
||||
:font-family common/font-stack
|
||||
:color text-color}
|
||||
|
|
@ -405,7 +405,7 @@
|
|||
:opacity "0.3"}]
|
||||
[:.active {:opacity 1}]
|
||||
|
||||
[:.re-frame-trace--object
|
||||
[:.re-frame-10x--object
|
||||
[:.toggle {:color text-color-muted
|
||||
:cursor "pointer"
|
||||
:line-height 1}]
|
||||
|
|
@ -430,7 +430,7 @@
|
|||
|
||||
|
||||
(def panel-styles (apply garden/css [css-reset
|
||||
[:#--re-frame-trace-- rc/re-com-css]
|
||||
[:#--re-frame-10x-- rc/re-com-css]
|
||||
common/blue-modern
|
||||
re-frame-trace-styles
|
||||
app-db/app-db-styles
|
||||
|
|
@ -455,4 +455,4 @@
|
|||
new-styles-el))))
|
||||
|
||||
(defn inject-trace-styles [document]
|
||||
(inject-style document "--re-frame-trace-styles--" panel-styles))
|
||||
(inject-style document "--re-frame-10x-styles--" panel-styles))
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
(ns day8.re-frame.trace.subs
|
||||
(ns day8.re-frame-10x.subs
|
||||
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.metamorphic :as metam]
|
||||
[day8.re-frame.trace.utils.utils :as utils]
|
||||
[day8.re-frame-10x.metamorphic :as metam]
|
||||
[day8.re-frame-10x.utils.utils :as utils]
|
||||
[clojure.string :as str]
|
||||
[cljs.spec.alpha :as s]))
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(ns day8.re-frame.trace.utils.animated
|
||||
(ns day8.re-frame-10x.utils.animated
|
||||
"Provides animation support for Regent components
|
||||
|
||||
Depends on react-flip-move via cljsjs/react-flip-move
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(ns day8.re-frame.trace.utils.localstorage
|
||||
(ns day8.re-frame-10x.utils.localstorage
|
||||
(:require [goog.storage.Storage]
|
||||
[goog.storage.mechanism.HTML5LocalStorage]
|
||||
[cljs.reader :as reader]
|
||||
|
|
@ -7,14 +7,14 @@
|
|||
|
||||
(def storage (goog.storage.Storage. (goog.storage.mechanism.HTML5LocalStorage.)))
|
||||
|
||||
(def safe-prefix "day8.re-frame.trace.")
|
||||
(def safe-prefix "day8.re-frame-10x.")
|
||||
|
||||
(defn- safe-key [key]
|
||||
"Adds a unique prefix to local storage keys to ensure they don't collide with the host application"
|
||||
(str safe-prefix key))
|
||||
|
||||
(defn get
|
||||
"Gets a re-frame-trace value from local storage."
|
||||
"Gets a re-frame-10x value from local storage."
|
||||
([key]
|
||||
(get key nil))
|
||||
([key not-found]
|
||||
|
|
@ -24,12 +24,12 @@
|
|||
(reader/read-string value)))))
|
||||
|
||||
(defn save!
|
||||
"Saves a re-frame-trace value to local storage."
|
||||
"Saves a re-frame-10x value to local storage."
|
||||
[key value]
|
||||
(.set storage (safe-key key) (pr-str value)))
|
||||
|
||||
(defn delete-all-keys!
|
||||
"Deletes all re-frame-trace config keys"
|
||||
"Deletes all re-frame-10x config keys"
|
||||
[]
|
||||
(doseq [k (js/Object.keys js/localStorage)]
|
||||
(when (str/starts-with? k safe-prefix)
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(ns day8.re-frame.trace.utils.macros
|
||||
(ns day8.re-frame-10x.utils.macros
|
||||
(:require [clojure.java.io :as io]
|
||||
[clojure.string :as str]))
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
(ns ^{:doc "Utilities for pretty-printing abbreviated Clojure forms"
|
||||
:author "Matthew Huebert"}
|
||||
day8.re-frame.trace.utils.pretty-print-condensed
|
||||
day8.re-frame-10x.utils.pretty-print-condensed
|
||||
(:require [clojure.string :as str]))
|
||||
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(ns day8.re-frame.trace.utils.re-com)
|
||||
(ns day8.re-frame-10x.utils.re-com)
|
||||
|
||||
;; There is a trap when writing DOM event handlers. This looks innocent enough:
|
||||
;;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
(ns day8.re-frame.trace.utils.re-com
|
||||
(ns day8.re-frame-10x.utils.re-com
|
||||
"Shameless pilfered from re-com."
|
||||
(:require-macros [day8.re-frame.trace.utils.re-com :refer [handler-fn]])
|
||||
(:require-macros [day8.re-frame-10x.utils.re-com :refer [handler-fn]])
|
||||
(:require [mranderson047.reagent.v0v8v0-alpha2.reagent.ratom :as reagent :refer [RAtom Reaction RCursor Track Wrapper]]
|
||||
[clojure.string :as string]))
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
(ns day8.re-frame.trace.utils.utils)
|
||||
(ns day8.re-frame-10x.utils.utils)
|
||||
|
||||
(def diff-link "https://github.com/Day8/re-frame-trace/blob/master/docs/HyperlinkedInformation/Diffs.md")
|
||||
(def diff-link "https://github.com/Day8/re-frame-10x/blob/master/docs/HyperlinkedInformation/Diffs.md")
|
||||
|
||||
(defn last-in-vec
|
||||
"Get the last element in the vector"
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
(ns day8.re-frame.trace.view.app-db
|
||||
(ns day8.re-frame-10x.view.app-db
|
||||
(:require [devtools.prefs]
|
||||
[devtools.formatters.core]
|
||||
[day8.re-frame.trace.utils.utils :as utils]
|
||||
[day8.re-frame.trace.utils.animated :as animated]
|
||||
[day8.re-frame.trace.view.components :as components]
|
||||
[day8.re-frame-10x.utils.utils :as utils]
|
||||
[day8.re-frame-10x.utils.animated :as animated]
|
||||
[day8.re-frame-10x.view.components :as components]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[mranderson047.reagent.v0v8v0-alpha2.reagent.core :as r]
|
||||
[day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
|
||||
[day8.re-frame.trace.common-styles :as common]
|
||||
[day8.re-frame-10x.utils.re-com :as rc :refer [css-join]]
|
||||
[day8.re-frame-10x.common-styles :as common]
|
||||
[clojure.data])
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :as macros]))
|
||||
(:require-macros [day8.re-frame-10x.utils.macros :as macros]))
|
||||
|
||||
(def delete (macros/slurp-macro "day8/re_frame/trace/images/delete.svg"))
|
||||
(def reload (macros/slurp-macro "day8/re_frame/trace/images/reload.svg"))
|
||||
(def reload-disabled (macros/slurp-macro "day8/re_frame/trace/images/reload-disabled.svg"))
|
||||
(def snapshot (macros/slurp-macro "day8/re_frame/trace/images/snapshot.svg"))
|
||||
(def snapshot-ready (macros/slurp-macro "day8/re_frame/trace/images/snapshot-ready.svg"))
|
||||
(def round-arrow (macros/slurp-macro "day8/re_frame/trace/images/round-arrow.svg"))
|
||||
(def arrow-right (macros/slurp-macro "day8/re_frame/trace/images/arrow-right.svg"))
|
||||
(def copy (macros/slurp-macro "day8/re_frame/trace/images/copy.svg"))
|
||||
(def trash (macros/slurp-macro "day8/re_frame/trace/images/trash.svg"))
|
||||
(def delete (macros/slurp-macro "day8/re_frame_10x/images/delete.svg"))
|
||||
(def reload (macros/slurp-macro "day8/re_frame_10x/images/reload.svg"))
|
||||
(def reload-disabled (macros/slurp-macro "day8/re_frame_10x/images/reload-disabled.svg"))
|
||||
(def snapshot (macros/slurp-macro "day8/re_frame_10x/images/snapshot.svg"))
|
||||
(def snapshot-ready (macros/slurp-macro "day8/re_frame_10x/images/snapshot-ready.svg"))
|
||||
(def round-arrow (macros/slurp-macro "day8/re_frame_10x/images/round-arrow.svg"))
|
||||
(def arrow-right (macros/slurp-macro "day8/re_frame_10x/images/arrow-right.svg"))
|
||||
(def copy (macros/slurp-macro "day8/re_frame_10x/images/copy.svg"))
|
||||
(def trash (macros/slurp-macro "day8/re_frame_10x/images/trash.svg"))
|
||||
|
||||
(def cljs-dev-tools-background "#e8ffe8")
|
||||
(def pod-gap common/gs-19s)
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
(def animation-duration 150)
|
||||
|
||||
(def app-db-styles
|
||||
[:#--re-frame-trace--
|
||||
[:#--re-frame-10x--
|
||||
#_[:.app-db-path
|
||||
{:background-color common/white-background-color
|
||||
:border-bottom-left-radius border-radius
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
(ns day8.re-frame.trace.view.code
|
||||
(:require [day8.re-frame.trace.utils.re-com :as rc]
|
||||
(ns day8.re-frame-10x.view.code
|
||||
(:require [day8.re-frame-10x.utils.re-com :as rc]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
|
||||
|
||||
(defn render []
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
(ns day8.re-frame.trace.view.components
|
||||
(ns day8.re-frame-10x.view.components
|
||||
(:require [clojure.string :as str]
|
||||
[goog.fx.dom :as fx]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[clojure.string :as str]
|
||||
[day8.re-frame.trace.utils.re-com :as rc]
|
||||
[mranderson047.reagent.v0v8v0-alpha2.reagent.core :as r])
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :refer [with-cljs-devtools-prefs]]))
|
||||
[day8.re-frame-10x.utils.re-com :as rc]
|
||||
[mranderson047.reagent.v0v8v0-alpha2.reagent.core :as r]
|
||||
[devtools.prefs])
|
||||
(:require-macros [day8.re-frame-10x.utils.macros :refer [with-cljs-devtools-prefs]]))
|
||||
|
||||
(defn search-input [{:keys [title placeholder on-save on-change on-stop]}]
|
||||
(let [val (r/atom title)
|
||||
|
|
@ -126,7 +127,7 @@
|
|||
(let [expanded? (rf/subscribe [:app-db/node-expanded? path])]
|
||||
(fn [jsonml path]
|
||||
[:span
|
||||
{:class (str "re-frame-trace--object" (when @expanded? " expanded"))}
|
||||
{:class (str "re-frame-10x--object" (when @expanded? " expanded"))}
|
||||
[:span {:class "toggle"
|
||||
:on-click #(rf/dispatch [:app-db/toggle-expansion path])}
|
||||
[:button.expansion-button (if @expanded? "▼" "▶")]]
|
||||
|
|
@ -172,7 +173,7 @@
|
|||
:children
|
||||
[[rc/h-box
|
||||
:align :center
|
||||
:class (str/join " " ["re-frame-trace--object"
|
||||
:class (str/join " " ["re-frame-10x--object"
|
||||
(when @expanded? "expanded")])
|
||||
:children
|
||||
[[:span {:class "toggle"
|
||||
|
|
@ -193,7 +194,7 @@
|
|||
(let [expanded? (r/atom true) #_(rf/subscribe [:app-db/node-expanded? path])]
|
||||
(fn [data]
|
||||
[:div
|
||||
{:class (str/join " " ["re-frame-trace--object"
|
||||
{:class (str/join " " ["re-frame-10x--object"
|
||||
(when @expanded? "expanded")])}
|
||||
#_[:span {:class "toggle"
|
||||
:on-click #(rf/dispatch [:app-db/toggle-expansion path])}
|
||||
|
|
@ -212,7 +213,7 @@
|
|||
(let [expanded? (r/atom true) #_(rf/subscribe [:app-db/node-expanded? path])]
|
||||
(fn [data]
|
||||
[:div
|
||||
{:class (str/join " " ["re-frame-trace--object"
|
||||
{:class (str/join " " ["re-frame-10x--object"
|
||||
(when @expanded? "expanded")
|
||||
class])}
|
||||
#_[:span {:class "toggle"
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
(ns day8.re-frame.trace.view.container
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :as macros])
|
||||
(ns day8.re-frame-10x.view.container
|
||||
(:require-macros [day8.re-frame-10x.utils.macros :as macros])
|
||||
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[re-frame.db :as db]
|
||||
[day8.re-frame.trace.view.event :as event]
|
||||
[day8.re-frame.trace.view.app-db :as app-db]
|
||||
[day8.re-frame.trace.view.subs :as subs]
|
||||
[day8.re-frame.trace.view.views :as views]
|
||||
[day8.re-frame.trace.view.traces :as traces]
|
||||
[day8.re-frame.trace.view.code :as code]
|
||||
[day8.re-frame.trace.view.parts :as parts]
|
||||
[day8.re-frame.trace.view.timing :as timing]
|
||||
[day8.re-frame.trace.view.debug :as debug]
|
||||
[day8.re-frame.trace.view.settings :as settings]
|
||||
[day8.re-frame-10x.view.event :as event]
|
||||
[day8.re-frame-10x.view.app-db :as app-db]
|
||||
[day8.re-frame-10x.view.subs :as subs]
|
||||
[day8.re-frame-10x.view.views :as views]
|
||||
[day8.re-frame-10x.view.traces :as traces]
|
||||
[day8.re-frame-10x.view.code :as code]
|
||||
[day8.re-frame-10x.view.parts :as parts]
|
||||
[day8.re-frame-10x.view.timing :as timing]
|
||||
[day8.re-frame-10x.view.debug :as debug]
|
||||
[day8.re-frame-10x.view.settings :as settings]
|
||||
[mranderson047.garden.v1v3v3.garden.core :refer [css style]]
|
||||
[mranderson047.garden.v1v3v3.garden.units :refer [px]]
|
||||
[re-frame.trace]
|
||||
[day8.re-frame.trace.utils.re-com :as rc]
|
||||
[day8.re-frame.trace.common-styles :as common]))
|
||||
[day8.re-frame-10x.utils.re-com :as rc]
|
||||
[day8.re-frame-10x.common-styles :as common]))
|
||||
|
||||
(def triangle-down (macros/slurp-macro "day8/re_frame/trace/images/triangle-down.svg"))
|
||||
(def triangle-down (macros/slurp-macro "day8/re_frame_10x/images/triangle-down.svg"))
|
||||
(defn tab-button [panel-id title]
|
||||
(let [selected-tab @(rf/subscribe [:settings/selected-tab])]
|
||||
[rc/v-box
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
[:img {:src (str "data:image/svg+xml;utf8," triangle-down)
|
||||
:style {:opacity (if (= selected-tab panel-id) "1" "0")}}]]]))
|
||||
|
||||
(def open-external (macros/slurp-macro "day8/re_frame/trace/images/logout.svg"))
|
||||
(def settings-svg (macros/slurp-macro "day8/re_frame/trace/images/wrench.svg"))
|
||||
(def orange-settings-svg (macros/slurp-macro "day8/re_frame/trace/images/orange-wrench.svg"))
|
||||
(def pause-svg (macros/slurp-macro "day8/re_frame/trace/images/pause.svg"))
|
||||
(def play-svg (macros/slurp-macro "day8/re_frame/trace/images/play.svg"))
|
||||
(def open-external (macros/slurp-macro "day8/re_frame_10x/images/logout.svg"))
|
||||
(def settings-svg (macros/slurp-macro "day8/re_frame_10x/images/wrench.svg"))
|
||||
(def orange-settings-svg (macros/slurp-macro "day8/re_frame_10x/images/orange-wrench.svg"))
|
||||
(def pause-svg (macros/slurp-macro "day8/re_frame_10x/images/pause.svg"))
|
||||
(def play-svg (macros/slurp-macro "day8/re_frame_10x/images/play.svg"))
|
||||
|
||||
(def outer-margins {:margin (str "0px " common/gs-19s)})
|
||||
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
(when (and external-window? @unloading?)
|
||||
[:h1.host-closed "Host window has closed. Reopen external window to continue tracing."])
|
||||
(when-not (re-frame.trace/is-trace-enabled?)
|
||||
[:h1.host-closed {:style {:word-wrap "break-word"}} "Tracing is not enabled. Please set " [:pre "{\"re_frame.trace.trace_enabled_QMARK_\" true}"] " in " [:pre ":closure-defines"]])
|
||||
[:h1.host-closed {:style {:word-wrap "break-word"}} "Tracing is not enabled. Please set " [:pre "{\"re_frame_10x.trace.trace_enabled_QMARK_\" true}"] " in " [:pre ":closure-defines"]])
|
||||
[rc/v-box
|
||||
:size "auto"
|
||||
:style {:margin-left common/gs-19s
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
(ns day8.re-frame.trace.view.debug
|
||||
(:require [day8.re-frame.trace.utils.re-com :as rc]
|
||||
[day8.re-frame.trace.view.components :as components]
|
||||
(ns day8.re-frame-10x.view.debug
|
||||
(:require [day8.re-frame-10x.utils.re-com :as rc]
|
||||
[day8.re-frame-10x.view.components :as components]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.metamorphic :as metam]))
|
||||
[day8.re-frame-10x.metamorphic :as metam]))
|
||||
|
||||
(defn render []
|
||||
[rc/v-box
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
(ns day8.re-frame.trace.view.event
|
||||
(:require [day8.re-frame.trace.utils.re-com :as rc]
|
||||
[day8.re-frame.trace.view.components :as components]
|
||||
[day8.re-frame.trace.common-styles :as common]
|
||||
(ns day8.re-frame-10x.view.event
|
||||
(:require [day8.re-frame-10x.utils.re-com :as rc]
|
||||
[day8.re-frame-10x.view.components :as components]
|
||||
[day8.re-frame-10x.common-styles :as common]
|
||||
[mranderson047.garden.v1v3v3.garden.units :as units]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf])
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :refer [with-cljs-devtools-prefs]]))
|
||||
(:require-macros [day8.re-frame-10x.utils.macros :refer [with-cljs-devtools-prefs]]))
|
||||
|
||||
(def pod-border-color "#daddde")
|
||||
(def pod-border-edge (str "1px solid " pod-border-color))
|
||||
(def border-radius "3px")
|
||||
|
||||
(def event-styles
|
||||
[:#--re-frame-trace--
|
||||
[:#--re-frame-10x--
|
||||
[:.event-panel
|
||||
{:padding "39px 19px 0px 0px"}]
|
||||
[:.event-section]
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
(ns day8.re-frame.trace.view.parts
|
||||
(:require [day8.re-frame.trace.utils.re-com :as rc]
|
||||
(ns day8.re-frame-10x.view.parts
|
||||
(:require [day8.re-frame-10x.utils.re-com :as rc]
|
||||
[re-frame.registrar]
|
||||
[re-frame.events]))
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
(ns day8.re-frame.trace.view.settings
|
||||
(ns day8.re-frame-10x.view.settings
|
||||
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
|
||||
[day8.re-frame.trace.common-styles :as common]
|
||||
[day8.re-frame-10x.utils.re-com :as rc :refer [css-join]]
|
||||
[day8.re-frame-10x.common-styles :as common]
|
||||
[mranderson047.garden.v1v3v3.garden.units :as units]
|
||||
[mranderson047.garden.v1v3v3.garden.compiler :refer [render-css]]))
|
||||
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
(def settings-box-131 (render-css (units/px- common/gs-131 (units/px* 2 settings-box-vertical-padding))))
|
||||
|
||||
(def settings-styles
|
||||
[:#--re-frame-trace--
|
||||
[:#--re-frame-10x--
|
||||
[:.settings
|
||||
{:background-color common/white-background-color}]
|
||||
])
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
(ns day8.re-frame.trace.view.subs
|
||||
(:require [day8.re-frame.trace.view.app-db :refer [pod-gap pod-padding border-radius]]
|
||||
[day8.re-frame.trace.utils.utils :as utils]
|
||||
[day8.re-frame.trace.utils.animated :as animated]
|
||||
(ns day8.re-frame-10x.view.subs
|
||||
(:require [day8.re-frame-10x.view.app-db :refer [pod-gap pod-padding border-radius]]
|
||||
[day8.re-frame-10x.utils.utils :as utils]
|
||||
[day8.re-frame-10x.utils.animated :as animated]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[mranderson047.reagent.v0v8v0-alpha2.reagent.core :as r]
|
||||
[day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
|
||||
[day8.re-frame.trace.common-styles :as common]
|
||||
[day8.re-frame.trace.view.components :as components]
|
||||
[day8.re-frame-10x.utils.re-com :as rc :refer [css-join]]
|
||||
[day8.re-frame-10x.common-styles :as common]
|
||||
[day8.re-frame-10x.view.components :as components]
|
||||
[mranderson047.garden.v1v3v3.garden.units :as units])
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :as macros]))
|
||||
(:require-macros [day8.re-frame-10x.utils.macros :as macros]))
|
||||
|
||||
;(s/def ::query-v any?)
|
||||
;(s/def ::dyn-v any?)
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
;(s/def ::query-cache (s/map-of ::query-cache-params ::deref))
|
||||
;(assert (s/valid? ::query-cache (rc/deref-or-value-peek subs/query->reaction)))
|
||||
|
||||
(def copy (macros/slurp-macro "day8/re_frame/trace/images/copy.svg"))
|
||||
(def copy (macros/slurp-macro "day8/re_frame_10x/images/copy.svg"))
|
||||
|
||||
(defn sub-tag-class [type]
|
||||
(case type
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
:model ignore-unchanged-l2-subs?
|
||||
:label [:span "Ignore " [:b {:style {:font-weight "700"}} @ignore-unchanged-l2-count] " unchanged" [:br]
|
||||
[rc/link {:label (str "layer 2 " (utils/pluralize- @ignore-unchanged-l2-count "sub"))
|
||||
:href "https://github.com/Day8/re-frame-trace/blob/master/docs/HyperlinkedInformation/UnchangedLayer2.md"}]]
|
||||
:href "https://github.com/Day8/re-frame-10x/blob/master/docs/HyperlinkedInformation/UnchangedLayer2.md"}]]
|
||||
:style {:margin-top "6px"}
|
||||
:on-change #(rf/dispatch [:subs/ignore-unchanged-l2-subs? %])]]]]]))
|
||||
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
[rc/label :label (if (some? layer)
|
||||
(str "Layer " layer)
|
||||
[rc/link {:label "Layer ?"
|
||||
:href "https://github.com/Day8/re-frame-trace/blob/master/docs/HyperlinkedInformation/UnchangedLayer2.md#why-do-i-sometimes-see-layer--when-viewing-a-subscription"}])]
|
||||
:href "https://github.com/Day8/re-frame-10x/blob/master/docs/HyperlinkedInformation/UnchangedLayer2.md#why-do-i-sometimes-see-layer--when-viewing-a-subscription"}])]
|
||||
|
||||
[rc/gap-f :size common/gs-12s]
|
||||
[rc/box
|
||||
|
|
@ -301,7 +301,7 @@
|
|||
[:h2 {:class "bm-heading-text"
|
||||
:style {:margin "19px 0px"}}
|
||||
[rc/link
|
||||
{:href "https://github.com/Day8/re-frame-trace/blob/master/docs/HyperlinkedInformation/InterEpoch.md"
|
||||
{:href "https://github.com/Day8/re-frame-10x/blob/master/docs/HyperlinkedInformation/InterEpoch.md"
|
||||
:label "Inter-Epoch Subscriptions"}]]
|
||||
|
||||
(for [p inter-epoch-subs]
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
(ns day8.re-frame.trace.view.timing
|
||||
(ns day8.re-frame-10x.view.timing
|
||||
(:require [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.common-styles :as common]
|
||||
[day8.re-frame.trace.view.components :as components]))
|
||||
[day8.re-frame-10x.utils.re-com :as rc]
|
||||
[day8.re-frame-10x.common-styles :as common]
|
||||
[day8.re-frame-10x.view.components :as components]))
|
||||
|
||||
(def timing-styles
|
||||
[:#--re-frame-trace--
|
||||
[:#--re-frame-10x--
|
||||
[:.timing-details
|
||||
{:margin-top common/gs-31s}]
|
||||
[:.timing-details--line
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
:style {:margin-left common/gs-19s}
|
||||
:attr {:rel "noopener noreferrer"}
|
||||
:target "_blank"
|
||||
:href "https://github.com/Day8/re-frame-trace/blob/master/docs/HyperlinkedInformation/UnderstandingTiming.md"]]]
|
||||
:href "https://github.com/Day8/re-frame-10x/blob/master/docs/HyperlinkedInformation/UnderstandingTiming.md"]]]
|
||||
[rc/h-box
|
||||
:gap common/gs-12s
|
||||
:class "timing-part-panel"
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
(ns day8.re-frame.trace.view.traces
|
||||
(:require [day8.re-frame.trace.view.components :as components]
|
||||
[day8.re-frame.trace.utils.pretty-print-condensed :as pp]
|
||||
(ns day8.re-frame-10x.view.traces
|
||||
(:require [day8.re-frame-10x.view.components :as components]
|
||||
[day8.re-frame-10x.utils.pretty-print-condensed :as pp]
|
||||
[clojure.string :as str]
|
||||
[mranderson047.reagent.v0v8v0-alpha2.reagent.core :as r]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.utils.re-com :as rc]))
|
||||
[day8.re-frame-10x.utils.re-com :as rc]))
|
||||
|
||||
(defn query->fn [query]
|
||||
(if (= :contains (:filter-type query))
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
(ns day8.re-frame-10x.view.views)
|
||||
|
||||
(defn render [])
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
[key f]
|
||||
(if trace-enabled?
|
||||
(swap! trace-cbs assoc key f)
|
||||
(console :warn "Tracing is not enabled. Please set {\"re_frame.trace.trace_enabled_QMARK_\" true} in :closure-defines. See: https://github.com/Day8/re-frame-trace#installation.")))
|
||||
(console :warn "Tracing is not enabled. Please set {\"re_frame.trace.trace_enabled_QMARK_\" true} in :closure-defines. See: https://github.com/Day8/re-frame-10x#installation.")))
|
||||
|
||||
(defn remove-trace-cb [key]
|
||||
(swap! trace-cbs dissoc key)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
(ns day8.re-frame.trace.metamorphic-test
|
||||
(ns day8.re-frame-10x.metamorphic-test
|
||||
(:require [clojure.test :refer :all])
|
||||
(:require [day8.re-frame.trace.metamorphic :as m]))
|
||||
(:require [day8.re-frame-10x.metamorphic :as m]))
|
||||
|
||||
(defn trace-events [file]
|
||||
(->> (slurp (str "test-resources/" file))
|
||||
Loading…
Reference in New Issue