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
.preview-popup {
border: 1px solid var(--theme-splitter-color);
height: auto;
overflow: auto;
background: var(--theme-body-background);
box-shadow: 1px 1px 3px var(--popup-shadow-color);
}
/* Popover is used when previewing objects */
.popover .preview-popup {
max-width: 450px;
min-width: 200px;
&.preview-type-pause {
padding: 5px 10px;
}
/* Because of tracer header, we can't put a padding on the popup */
/* Nor can we put a margin on the .tree or .objectBox which causes overflows */
&.preview-type-tracer {
padding-bottom: 5px;
.tree {
padding: 0 5px;
}
}
}
/* Tooltip is used when previewing primitives */
.tooltip .preview-popup {
max-width: inherit;
min-height: inherit;
max-height: 200px;
&.preview-type-pause {
padding: 5px;
}
&.preview-type-tracer {
padding-bottom: 5px;
.preview-tracer-header {
margin-bottom: 5px;
}
.objectBox {
padding: 0 5px;
}
}
}
.preview-tracer-header {
--icon-url: url("chrome://devtools/content/debugger/images/trace.svg");
--icon-color: var(--theme-inline-preview-label-trace-color);
color: var(--theme-inline-preview-label-trace-color);
background-color: var(--theme-inline-preview-label-trace-background);
border-block-end: 1px solid oklch(from var(--theme-inline-preview-label-trace-color) l c h / 0.25);
/* Make sure the header is always visible */
position: sticky;
top: 0;
z-index: 1;
/* Add a bit more padding on the end to balance the icon, especially when have a small primitive value in preview */
padding-inline-end: 10px !important;
}
.preview-tracer-warning {
--icon-url: url("chrome://devtools/skin/images/info.svg");
--icon-color: currentColor;
background-color: var(--theme-body-alternate-emphasized-background);
border-bottom: 1px solid var(--theme-splitter-color);
margin-bottom: 5px;
}
.preview-tracer-header, .preview-tracer-warning {
display: flex;
gap: 5px;
padding: 5px;
align-items: center;
&::before {
flex-shrink: 0;
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-image: var(--icon-url);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: var(--icon-color);
}
}
.preview-popup .tree {
/* Setting a fixed line height to avoid issues in custom formatters changing
* the line height like the CLJS DevTools */
line-height: 15px;
}
.gap svg {
pointer-events: none;
}
.gap polygon {
pointer-events: auto;
}
.popover .preview-popup .object-node {
padding-inline-start: 0px;
}
.preview-token:hover {
cursor: default;
}
.preview-token,
.debug-expression.preview-token {
background-color: var(--theme-highlight-yellow);
}
.theme-dark .preview-token,
.theme-dark .debug-expression.preview-token {
background-color: #743884;
}
.theme-dark .cm-s-mozilla .preview-token,
.theme-dark .cm-s-mozilla .debug-expression.preview-token {
color: #e7ebee;
}
.theme-dark .popover .preview-popup {
border-color: var(--theme-body-color);
}
.tooltip {
position: fixed;
z-index: 100;
}
.theme-dark .tooltip .preview-popup {
border-color: var(--theme-body-color);
}
.tooltip .gap {
height: 4px;
padding-top: 0px;
}
/* Exception popup */
.exception-popup .exception-text {
color: var(--red-70);
}
.theme-dark .exception-popup .exception-text {
color: var(--red-20);
}
.exception-popup .exception-message {
display: flex;
align-items: center;
}
.exception-message .arrow {
margin-inline-end: 4px;
}
.exception-popup .exception-stacktrace {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 8px;
padding-inline: 20px 3px;
line-height: var(--theme-code-line-height);
}
.exception-stacktrace .frame {
display: contents;
cursor: pointer;
}
.exception-stacktrace .title {
grid-column: 1/2;
color: var(--grey-90);
}
.theme-dark .exception-stacktrace .title {
color: white;
}
.exception-stacktrace .location {
grid-column: -1/-2;
color: var(--theme-highlight-purple);
direction: rtl;
text-align: end;
white-space: nowrap;
/* Force the location to be on one line and crop at start if wider then max-width */
overflow: hidden;
text-overflow: ellipsis;
max-width: 350px;
}
.theme-dark .exception-stacktrace .location {
color: var(--blue-40);
}
.exception-stacktrace .line {
color: var(--theme-highlight-blue);
}
.theme-dark .exception-stacktrace .line {
color: hsl(210, 40%, 60%);
}