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
.theme-light {
--gutter-hover-background-color: #dde1e4;
--breakpoint-fill: var(--blue-50);
--breakpoint-stroke: var(--blue-60);
}
.theme-dark {
--gutter-hover-background-color: #414141;
--breakpoint-fill: var(--blue-55);
--breakpoint-stroke: var(--blue-40);
}
.theme-light,
.theme-dark {
--logpoint-fill: var(--theme-graphs-purple);
--logpoint-stroke: var(--purple-60);
--breakpoint-condition-fill: var(--theme-graphs-yellow);
--breakpoint-condition-stroke: var(--theme-graphs-orange);
--breakpoint-skipped-opacity: 0.15;
--breakpoint-inactive-opacity: 0.3;
--breakpoint-disabled-opacity: 0.6;
}
/* Standard gutter breakpoints */
.editor-wrapper .breakpoints {
position: absolute;
top: 0;
left: 0;
}
.new-breakpoint .CodeMirror-linenumber {
pointer-events: none;
}
/* CM6 */
.cm-lineNumbers .cm-gutterElement:not(.empty-line, .cm6-gutter-breakpoint):hover {
background: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat;
background-size: auto 15px;
background-position: top right;
-moz-context-properties: fill, stroke;
fill: var(--gutter-hover-background-color);
stroke: var(--gutter-hover-background-color);
}
.editor-wrapper .cm-lineNumbers .cm-gutterElement {
min-width: 40px;
/*
* Since we're toggling breakpoint when the __code folding__ gutter is clicked
* we want to show the "preview breakpoint" on hover when hovering the code folding gutter too.
* The different gutters (line and code folding) are sibling divs which
* are laid out side-by-side:
* |1 | ▼|
* |2 | |
* |3 | ▶︎|
* …
* so we don't have a simple way to target the line number element when hovering
* the code folding gutter.
* The solution is to make the line number take the whole gutters element width,
* using a pseudo-element so it will widen the :hover target for line number elements.
*/
/* prettier-ignore */
:is(
&:not(.cm6-gutter-breakpoint),
&.cm6-gutter-breakpoint .breakpoint-marker
)::after {
content: "";
position: absolute;
height: 1lh;
right: 0;
left: 0;
}
}
/* CodeMirror puts a padding on the line gutter, but we want the breakpoint to take the whole gutter */
.cm-lineNumbers .cm-gutterElement.cm6-gutter-breakpoint {
padding: 0;
}
/* Put the same padding on lines with and without breakpoints */
.cm-lineNumbers .cm-gutterElement:not(.cm6-gutter-breakpoint),
/* For lines with breakpoints, put the padding inside the marker */
.cm-lineNumbers .cm-gutterElement.cm6-gutter-breakpoint .breakpoint-marker {
padding: 0 13px 0 10px;
}
.cm6-gutter-breakpoint .breakpoint-marker {
--breakpoint-marker-opacity: 1;
--breakpoint-marker-fill: var(--breakpoint-fill);
--breakpoint-marker-stroke: var(--breakpoint-stroke);
background: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat;
background-size: auto 15px;
background-position: right;
-moz-context-properties: fill, stroke;
/* When the breakpoint is disabled, we don't want to lower the opacity of the line number,
so we can't use opacity on the whole element. Instead, we use relative color syntax
to lower the stroke and fill opacity. */
fill: rgba(from var(--breakpoint-marker-fill) r g b / var(--breakpoint-marker-opacity));
stroke: rgba(from var(--breakpoint-marker-stroke) r g b / var(--breakpoint-marker-opacity));
color: white;
&.breakpoint-disabled {
--breakpoint-marker-opacity: var(--breakpoint-disabled-opacity);
}
}
.cm6-gutter-breakpoint .breakpoint-marker.has-condition {
--breakpoint-marker-fill: var(--breakpoint-condition-fill);
--breakpoint-marker-stroke: var(--breakpoint-condition-stroke);
}
.cm6-gutter-breakpoint .breakpoint-marker.has-log {
--breakpoint-marker-fill: var(--logpoint-fill);
--breakpoint-marker-stroke: var(--logpoint-stroke);
}
/* End CM6 */
.editor-wrapper :not(.new-breakpoint) > .CodeMirror-gutter-wrapper > .CodeMirror-linenumber:hover::after {
content: "";
position: absolute;
/* paint below the number */
z-index: -1;
top: 0;
left: 0;
right: -4px;
bottom: 0;
height: 15px;
background-color: var(--gutter-hover-background-color);
mask: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat;
mask-size: auto 15px;
mask-position: right;
}
/* set the linenumber white when there is a breakpoint */
.editor-wrapper:not(.skip-pausing) .new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
color: white;
}
/* move the breakpoint below the other gutter elements */
.new-breakpoint .CodeMirror-gutter-elt:nth-child(2) {
z-index: 0;
}
.editor.new-breakpoint svg {
fill: var(--breakpoint-fill);
stroke: var(--breakpoint-stroke);
width: 60px;
height: 15px;
position: absolute;
top: 0;
right: -4px;
}
.editor .breakpoint {
position: absolute;
right: -2px;
}
.editor.new-breakpoint.folding-enabled svg {
right: -16px;
}
.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg {
fill: var(--breakpoint-condition-fill);
stroke: var(--breakpoint-condition-stroke);
}
.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg {
fill: var(--logpoint-fill);
stroke: var(--logpoint-stroke);
}
.editor.new-breakpoint.breakpoint-disabled svg,
.blackboxed-line .editor.new-breakpoint svg,
.cm6-gutter-breakpoint.blackboxed-line .breakpoint-marker svg {
fill-opacity: var(--breakpoint-disabled-opacity);
stroke-opacity: var(--breakpoint-disabled-opacity);
}
.editor-wrapper.skip-pausing .editor.new-breakpoint svg {
fill-opacity: var(--breakpoint-skipped-opacity);
}
/* Columnn breakpoints */
.column-breakpoint {
display: inline;
padding-inline-start: 1px;
padding-inline-end: 1px;
}
.column-breakpoint:hover {
background-color: transparent;
}
.column-breakpoint svg {
display: inline-block;
cursor: pointer;
height: 13px;
width: 11px;
vertical-align: top;
fill: var(--breakpoint-fill);
stroke: var(--breakpoint-stroke);
fill-opacity: var(--breakpoint-inactive-opacity);
stroke-opacity: var(--breakpoint-inactive-opacity);
}
.column-breakpoint.active svg {
fill: var(--breakpoint-fill);
stroke: var(--breakpoint-stroke);
fill-opacity: 1;
stroke-opacity: 1;
}
.column-breakpoint.disabled svg {
fill-opacity: var(--breakpoint-disabled-opacity);
stroke-opacity: var(--breakpoint-disabled-opacity);
}
.column-breakpoint.has-log.disabled svg {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
.column-breakpoint.has-condition svg {
fill: var(--breakpoint-condition-fill);
stroke: var(--breakpoint-condition-stroke);
}
.column-breakpoint.has-log svg {
fill: var(--logpoint-fill);
stroke: var(--logpoint-stroke);
}
.editor-wrapper.skip-pausing .column-breakpoint svg {
fill-opacity: var(--breakpoint-skipped-opacity);
}
.img.column-marker {
background-image: url(chrome://devtools/content/debugger/images/column-marker.svg);
}