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 */
.conditional-breakpoint-panel-container {
padding-block: 1em;
/* we want the conditional breakpoint/log point 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);
}
.conditional-breakpoint-panel {
cursor: initial;
position: relative;
background: var(--theme-toolbar-background);
border-top: 1px solid var(--theme-splitter-color);
border-bottom: 1px solid var(--theme-splitter-color);
border-right: 1px solid var(--theme-splitter-color);
}
.conditional-breakpoint-panel .input-container:focus-within {
outline: var(--theme-focus-outline);
outline-offset: -4px;
}
.conditional-breakpoint-panel .prompt {
font-size: 1.8em;
color: var(--theme-graphs-orange);
padding-left: 3px;
padding-right: 3px;
padding-bottom: 3px;
text-align: right;
width: 30px;
flex-shrink: 0;
}
.conditional-breakpoint-panel .input-container {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.conditional-breakpoint-panel button[type="submit"] {
background-color: var(--blue-60);
color: white;
&:hover {
background-color: var(--blue-70);
color: white;
}
}
/* This is the panel "footer", with the "Show stacktrace" checkbox and Create/Cancel button
*/
.conditional-breakpoint-panel-controls {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
border-top: 1px solid var(--theme-splitter-color);
gap: 8px 20px;
/* CodeMirror sets a monospace font on its content, let's go back to the defaut set on :root in common.css */
font: message-box;
font-size: var(--theme-body-font-size);
}
.conditional-breakpoint-panel-buttons {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
gap: 4px;
button {
outline-offset: 2px;
}
}
.conditional-breakpoint-panel-checkbox-label {
display: flex;
align-items: center;
}
.conditional-breakpoint-panel.log-point .prompt {
color: var(--purple-60);
}
.conditional-breakpoint-panel .CodeMirror {
margin: 6px 10px;
}
.conditional-breakpoint-panel .CodeMirror pre.CodeMirror-placeholder {
/* Match the color of the placeholder text to existing inputs in the Debugger */
color: var(--theme-text-color-alt);
}
/* cm6 style */
.conditional-breakpoint-panel .inline-codemirror-container {
flex: 1 1 100%;
/* We already set an outline on the conditional panel, so hide the default codemirror one */
.cm-editor.cm-focused {
outline: none;
}
}