TracePanel.css (1600B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ 4 5 /* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */ 6 .trace-inline-panel-container { 7 padding-block: 1em; 8 /* we want the inline trace panel to be to the right of the gutter… */ 9 left: var(--cm-gutter-width, 0); 10 /* and to stick horizontally to it so it appears "fixed" … */ 11 position: sticky; 12 /* finally, we need to set it's width as the scroller width minus the gutter width so 13 it takes the whole horizontal visual space */ 14 width: calc(var(--cm-editor-scroller-width, 100%) - var(--cm-gutter-width, 0) - /* borders */ 2px); 15 } 16 17 .trace-panel { 18 position: relative; 19 20 background: var(--theme-toolbar-background); 21 background-image: url("chrome://devtools/content/debugger/images/trace.svg"); 22 background-size: 1.25em; 23 background-repeat: no-repeat; 24 background-position: 0.5em; 25 -moz-context-properties: fill; 26 fill: var(--theme-inline-preview-label-trace-color); 27 28 border: 1px solid var(--theme-splitter-color); 29 border-inline-start-width: 0; 30 31 padding: 1em 2em; 32 33 .trace-item { 34 display: inline-block; 35 margin-inline-start: 10px; 36 border: 1px solid var(--theme-splitter-color); 37 38 &.selected { 39 color: var(--theme-selection-color); 40 background-color: var(--theme-selection-background); 41 } 42 ² &:focus { 43 outline: var(--theme-focus-outline); 44 outline-offset: -2px; 45 } 46 } 47 }