Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */
.trace-inline-panel-container {
padding-block: 1em;
/* we want the inline trace panel to be to the right of the gutter… */
left: var(--cm-gutter-width, 0);
/* and to stick horizontally to it so it appears "fixed" … */
position: sticky;
/* finally, we need to set it's width as the scroller width minus the gutter width so
it takes the whole horizontal visual space */
width: calc(var(--cm-editor-scroller-width, 100%) - var(--cm-gutter-width, 0) - /* borders */ 2px);
}
.trace-panel {
position: relative;
background: var(--theme-toolbar-background);
background-image: url("chrome://devtools/content/debugger/images/trace.svg");
background-size: 1.25em;
background-repeat: no-repeat;
background-position: 0.5em;
-moz-context-properties: fill;
fill: var(--theme-inline-preview-label-trace-color);
border: 1px solid var(--theme-splitter-color);
border-inline-start-width: 0;
padding: 1em 2em;
.trace-item {
display: inline-block;
margin-inline-start: 10px;
border: 1px solid var(--theme-splitter-color);
&.selected {
color: var(--theme-selection-color);
background-color: var(--theme-selection-background);
}
² &:focus {
outline: var(--theme-focus-outline);
outline-offset: -2px;
}
}
}