Merge pull request #65 from Day8/reset-panel-styles
Isolate panel styles from host project
This commit is contained in:
Dexter Gramfors
GitHub
commit
3a3faca0b3
14
README.md
14
README.md
|
|
@ -117,10 +117,20 @@ You need both the re-frame-trace project _and_ a test project to develop it agai
|
|||
|
||||
### Developing CSS
|
||||
|
||||
The CSS for the trace panel are defined both inline and within `src/day8/re_frame/less`. To develop the styles, run
|
||||
The styles for the trace panel are defined both inline and in a LESS file. To develop the styles, edit `resources/day8/re_frame/trace/main.less` and run
|
||||
|
||||
```
|
||||
lein less auto
|
||||
```
|
||||
|
||||
and the .less file will automatically compile to css on file changes. Don't edit the file within `src/day8/re_frame/css` directly, or it will be overwriten. We are using css preprocessing because in order to isolate the panel styles, we are namespacing the panel styles with the id `#--re-frame-trace--`.
|
||||
to watch the LESS file and automatically recompile on changes.
|
||||
|
||||
**Don't edit the CSS file `resources/day8/re_frame/trace/main.css` directly**, as it will be overwritten.
|
||||
|
||||
We are using CSS preprocessing because in order to isolate the panel styles, we are namespacing the panel styles with the id `#--re-frame-trace--`.
|
||||
|
||||
#### Problems while developing CSS
|
||||
|
||||
- You may need to then save a `.cljs` file to trigger a figwheel reload.
|
||||
- Did you run `lein less auto` to compile LESS to CSS?
|
||||
- Try clearing your browser cache/hard-reloading
|
||||
|
|
|
|||
|
|
@ -1,8 +1,178 @@
|
|||
#--re-frame-trace-- {
|
||||
all: initial;
|
||||
/*! abridged from normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
line-height: 1.15;
|
||||
/* 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;
|
||||
color: black;
|
||||
font-family: 'courier new', monospace;
|
||||
}
|
||||
#--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: #333;
|
||||
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 black;
|
||||
}
|
||||
#--re-frame-trace-- button,
|
||||
#--re-frame-trace-- input {
|
||||
overflow: visible;
|
||||
}
|
||||
#--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-- 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-- table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
#--re-frame-trace-- tbody {
|
||||
color: #aaa;
|
||||
}
|
||||
|
|
@ -81,6 +251,10 @@
|
|||
background: white;
|
||||
font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
padding: 2px 0 0 0;
|
||||
-moz-appearance: menulist;
|
||||
-webkit-appearance: menulist;
|
||||
appearance: menulist;
|
||||
}
|
||||
#--re-frame-trace-- .nav {
|
||||
background: #efeef1;
|
||||
|
|
@ -90,7 +264,7 @@
|
|||
flex: 1;
|
||||
}
|
||||
#--re-frame-trace-- .panel-content-scrollable {
|
||||
margin: 10px 0 0 10px;
|
||||
margin: 0 10px;
|
||||
flex: 1 0 auto;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,226 @@
|
|||
@light-purple: #616cdb;
|
||||
@light-blue: lightblue;
|
||||
@light-gray: #efeef1;
|
||||
@text-color: #222;
|
||||
@text-color-muted: #aaa;
|
||||
|
||||
#--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;
|
||||
|
||||
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 black;
|
||||
}
|
||||
|
||||
button, // Show the overflow in IE.
|
||||
input { // Show the overflow in Edge.
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
th, td {
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
tr {
|
||||
display: table-row;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* re-frame-trace styles
|
||||
========================================================================== */
|
||||
|
||||
|
||||
background: white;
|
||||
color: black;
|
||||
font-family: 'courier new', monospace;
|
||||
|
||||
tbody {
|
||||
color: #aaa;
|
||||
color: @text-color-muted;
|
||||
}
|
||||
tr:hover {
|
||||
transition: all 0.1s ease-out;
|
||||
|
|
@ -48,7 +264,7 @@
|
|||
}
|
||||
.tab.active {
|
||||
background: transparent;
|
||||
border-bottom: 3px solid lightblue;
|
||||
border-bottom: 3px solid @light-blue;
|
||||
border-radius: 0;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
|
@ -60,7 +276,7 @@
|
|||
}
|
||||
.filter-items li {
|
||||
color: #333;
|
||||
background: #efefef;
|
||||
background: @light-gray;
|
||||
display: inline-block;
|
||||
font-size: 0.9em;
|
||||
margin: 5px;
|
||||
|
|
@ -68,7 +284,7 @@
|
|||
.filter-items {
|
||||
li {
|
||||
.filter-item-string {
|
||||
color: #616cdb;
|
||||
color: @light-purple;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -88,16 +304,20 @@
|
|||
background: white;
|
||||
font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
padding: 2px 0 0 0;
|
||||
-moz-appearance: menulist;
|
||||
-webkit-appearance: menulist;
|
||||
appearance: menulist;
|
||||
}
|
||||
.nav {
|
||||
background: #efeef1;
|
||||
color: #222;
|
||||
background: @light-gray;
|
||||
color: @text-color;
|
||||
}
|
||||
.panel-content-top {
|
||||
flex: 1;
|
||||
}
|
||||
.panel-content-scrollable {
|
||||
margin: 10px 0 0 10px;
|
||||
margin: 0 10px;
|
||||
flex: 1 0 auto;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -164,8 +164,7 @@
|
|||
(defn render-traces [showing-traces filter-items filter-input trace-detail-expansions]
|
||||
(doall
|
||||
(for [{:keys [op-type id operation tags duration] :as trace} showing-traces]
|
||||
(let [padding {:padding "0px 5px 0px 5px"}
|
||||
row-style (merge padding {:border-top (case op-type :event "1px solid lightgrey" nil)})
|
||||
(let [row-style {:border-top (case op-type :event "1px solid lightgrey" nil)}
|
||||
show-row? (get-in @trace-detail-expansions [:overrides id]
|
||||
(:show-all? @trace-detail-expansions))
|
||||
op-name (if (vector? operation)
|
||||
|
|
@ -207,14 +206,13 @@
|
|||
(.toFixed duration 1) " ms"]]
|
||||
(when show-row?
|
||||
[:tr {:key (str id "-details")}
|
||||
[:td.trace-details {:col-span 3
|
||||
[:td.trace-details {:col-span 4
|
||||
:on-click #(.log js/console tags)}
|
||||
(let [tag-str (with-out-str (pprint/pprint tags))
|
||||
string-size-limit 400]
|
||||
(if (< string-size-limit (count tag-str))
|
||||
(str (subs tag-str 0 string-size-limit) " ...")
|
||||
tag-str))]]))))))
|
||||
|
||||
(defn render-trace-panel []
|
||||
(let [filter-input (r/atom "")
|
||||
filter-items (r/atom (localstorage/get "filter-items" []))
|
||||
|
|
|
|||
Loading…
Reference in New Issue