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
.frames div[role="listbox"] {
list-style: none;
margin: 0;
padding: 4px 0;
outline-offset: -2px;
}
.frames div[role="listbox"] .frame {
padding: 2px;
overflow: hidden;
display: flex;
justify-content: space-between;
column-gap: 0.5em;
flex-direction: row;
align-items: center;
margin: 2px;
max-width: 100%;
flex-wrap: wrap;
outline-offset: -2px;
}
.frames div[role="listbox"] .frame * {
user-select: none;
}
.frames .badge {
flex-shrink: 0;
margin-inline-end: 10px;
}
.frames .location {
font-weight: normal;
color: var(--theme-comment);
margin: 0;
flex-grow: 1;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
/* Trick to get the ellipsis at the start of the string */
text-overflow: ellipsis;
direction: rtl;
}
.call-stack-pane:dir(ltr) .frames .location {
padding-right: 10px;
text-align: right;
}
.call-stack-pane:dir(rtl) .frames .location {
padding-left: 10px;
text-align: left;
}
.call-stack-pane .location-async-cause {
color: var(--theme-comment);
}
.frames .title {
text-overflow: ellipsis;
overflow: hidden;
padding-inline-start: 20px;
}
.frames-group .title {
padding-inline-start: 30px;
}
.frames div[role="listbox"] .frame:hover,
.frames div[role="listbox"] .frame:focus {
background-color: var(--theme-toolbar-background-alt);
}
.frames div[role="listbox"] .location-async-cause:hover,
.frames div[role="listbox"] .location-async-cause:focus,
.frames div[role="listbox"] .location-async-cause:hover .async-label,
.frames div[role="listbox"] .location-async-cause:focus .async-label {
background-color: var(--theme-body-background);
}
.frames div[role="listbox"] .frame:focus {
box-shadow: none;
}
.frames div[role="listbox"] .frame.selected {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
outline-offset: 1px;
}
.frames div[role="listbox"] .frame.dead {
color: var(--theme-text-color-inactive);
}
.frames div[role="listbox"] .frame.inactive,
.frames div[role="listbox"] .frame.inactive.async-label {
background-color: light-dark(var(--theme-toolbar-background-alt), var(--theme-body-alternate-emphasized-background));
}
.frames div[role="listbox"] .frame.selected i.annotation-logo svg path {
fill: var(--theme-selection-color);
}
:root.theme-light .frames div[role="listbox"] .frame.selected .location,
:root.theme-dark .frames div[role="listbox"] .frame.selected .location {
color: var(--theme-selection-color);
}
.frames .show-more-container {
display: flex;
min-height: 24px;
padding: 4px 0;
}
.frames .show-more {
text-align: center;
padding: 8px 0;
margin: 7px 10px 7px 7px;
border: 1px solid var(--theme-splitter-color);
background-color: var(--theme-tab-toolbar-background);
width: 100%;
font-size: inherit;
color: inherit;
}
.frames .show-more:hover {
background-color: var(--theme-toolbar-background-hover);
}
.frames .img.annotation-logo {
margin-inline-end: 4px;
background-color: currentColor;
}
/*
* We also show the library icon in locations, which are forced to RTL.
*/
.frames .location .img.annotation-logo {
margin-inline-start: 4px;
}
/* Some elements are added to the DOM only to be printed into the clipboard
when the user copy some elements. We don't want those elements to mess with
the layout so we put them outside of the screen
*/
.frames .clipboard-only {
position: absolute;
left: -9999px;
}
.call-stack-pane .location-async-cause {
--label-padding: 20px;
color: var(--theme-text-color-alt);
display: flex;
align-items: center;
padding-block: 2px;
width: 100%;
pointer-events: none;
&::before,
&::after {
content: "";
height: 1px;
translate: 0 1px;
background-color: var(--theme-splitter-color);
}
&::before {
width: var(--label-padding);
}
&::after {
flex: 1;
}
}
.frames-group .location-async-cause {
--label-padding: 50px;
}
.call-stack-pane .async-label {
padding: 0 3px;
display: inline-block;
font-style: italic;
}