Breakpoints.css (7107B)
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 .theme-light { 6 --gutter-hover-background-color: #dde1e4; 7 --breakpoint-fill: var(--blue-50); 8 --breakpoint-stroke: var(--blue-60); 9 } 10 11 .theme-dark { 12 --gutter-hover-background-color: #414141; 13 --breakpoint-fill: var(--blue-55); 14 --breakpoint-stroke: var(--blue-40); 15 } 16 17 .theme-light, 18 .theme-dark { 19 --logpoint-fill: var(--theme-graphs-purple); 20 --logpoint-stroke: var(--purple-60); 21 --breakpoint-condition-fill: var(--theme-graphs-yellow); 22 --breakpoint-condition-stroke: var(--theme-graphs-orange); 23 --breakpoint-skipped-opacity: 0.15; 24 --breakpoint-inactive-opacity: 0.3; 25 --breakpoint-disabled-opacity: 0.6; 26 } 27 28 /* Standard gutter breakpoints */ 29 .editor-wrapper .breakpoints { 30 position: absolute; 31 top: 0; 32 left: 0; 33 } 34 35 .new-breakpoint .CodeMirror-linenumber { 36 pointer-events: none; 37 } 38 39 /* CM6 */ 40 .cm-lineNumbers .cm-gutterElement:not(.empty-line, .cm6-gutter-breakpoint):hover { 41 background: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat; 42 background-size: auto 15px; 43 background-position: top right; 44 -moz-context-properties: fill, stroke; 45 fill: var(--gutter-hover-background-color); 46 stroke: var(--gutter-hover-background-color); 47 } 48 49 .editor-wrapper .cm-lineNumbers .cm-gutterElement { 50 min-width: 40px; 51 /* 52 * Since we're toggling breakpoint when the __code folding__ gutter is clicked 53 * we want to show the "preview breakpoint" on hover when hovering the code folding gutter too. 54 * The different gutters (line and code folding) are sibling divs which 55 * are laid out side-by-side: 56 * |1 | ▼| 57 * |2 | | 58 * |3 | ▶︎| 59 * … 60 * so we don't have a simple way to target the line number element when hovering 61 * the code folding gutter. 62 * The solution is to make the line number take the whole gutters element width, 63 * using a pseudo-element so it will widen the :hover target for line number elements. 64 */ 65 /* prettier-ignore */ 66 :is( 67 &:not(.cm6-gutter-breakpoint), 68 &.cm6-gutter-breakpoint .breakpoint-marker 69 )::after { 70 content: ""; 71 position: absolute; 72 height: 1lh; 73 right: 0; 74 left: 0; 75 } 76 } 77 78 /* CodeMirror puts a padding on the line gutter, but we want the breakpoint to take the whole gutter */ 79 .cm-lineNumbers .cm-gutterElement.cm6-gutter-breakpoint { 80 padding: 0; 81 } 82 /* Put the same padding on lines with and without breakpoints */ 83 .cm-lineNumbers .cm-gutterElement:not(.cm6-gutter-breakpoint), 84 /* For lines with breakpoints, put the padding inside the marker */ 85 .cm-lineNumbers .cm-gutterElement.cm6-gutter-breakpoint .breakpoint-marker { 86 padding: 0 13px 0 10px; 87 } 88 89 .cm6-gutter-breakpoint .breakpoint-marker { 90 --breakpoint-marker-opacity: 1; 91 --breakpoint-marker-fill: var(--breakpoint-fill); 92 --breakpoint-marker-stroke: var(--breakpoint-stroke); 93 94 background: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat; 95 background-size: auto 15px; 96 background-position: right; 97 -moz-context-properties: fill, stroke; 98 99 /* When the breakpoint is disabled, we don't want to lower the opacity of the line number, 100 so we can't use opacity on the whole element. Instead, we use relative color syntax 101 to lower the stroke and fill opacity. */ 102 fill: rgba(from var(--breakpoint-marker-fill) r g b / var(--breakpoint-marker-opacity)); 103 stroke: rgba(from var(--breakpoint-marker-stroke) r g b / var(--breakpoint-marker-opacity)); 104 color: white; 105 106 &.breakpoint-disabled { 107 --breakpoint-marker-opacity: var(--breakpoint-disabled-opacity); 108 } 109 } 110 111 .cm6-gutter-breakpoint .breakpoint-marker.has-condition { 112 --breakpoint-marker-fill: var(--breakpoint-condition-fill); 113 --breakpoint-marker-stroke: var(--breakpoint-condition-stroke); 114 } 115 116 .cm6-gutter-breakpoint .breakpoint-marker.has-log { 117 --breakpoint-marker-fill: var(--logpoint-fill); 118 --breakpoint-marker-stroke: var(--logpoint-stroke); 119 } 120 /* End CM6 */ 121 122 .editor-wrapper :not(.new-breakpoint) > .CodeMirror-gutter-wrapper > .CodeMirror-linenumber:hover::after { 123 content: ""; 124 position: absolute; 125 /* paint below the number */ 126 z-index: -1; 127 top: 0; 128 left: 0; 129 right: -4px; 130 bottom: 0; 131 height: 15px; 132 background-color: var(--gutter-hover-background-color); 133 mask: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat; 134 mask-size: auto 15px; 135 mask-position: right; 136 } 137 138 /* set the linenumber white when there is a breakpoint */ 139 .editor-wrapper:not(.skip-pausing) .new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber { 140 color: white; 141 } 142 143 /* move the breakpoint below the other gutter elements */ 144 .new-breakpoint .CodeMirror-gutter-elt:nth-child(2) { 145 z-index: 0; 146 } 147 148 .editor.new-breakpoint svg { 149 fill: var(--breakpoint-fill); 150 stroke: var(--breakpoint-stroke); 151 width: 60px; 152 height: 15px; 153 position: absolute; 154 top: 0; 155 right: -4px; 156 } 157 158 .editor .breakpoint { 159 position: absolute; 160 right: -2px; 161 } 162 163 .editor.new-breakpoint.folding-enabled svg { 164 right: -16px; 165 } 166 167 .new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg { 168 fill: var(--breakpoint-condition-fill); 169 stroke: var(--breakpoint-condition-stroke); 170 } 171 172 .new-breakpoint.has-log .CodeMirror-gutter-wrapper svg { 173 fill: var(--logpoint-fill); 174 stroke: var(--logpoint-stroke); 175 } 176 177 .editor.new-breakpoint.breakpoint-disabled svg, 178 .blackboxed-line .editor.new-breakpoint svg, 179 .cm6-gutter-breakpoint.blackboxed-line .breakpoint-marker svg { 180 fill-opacity: var(--breakpoint-disabled-opacity); 181 stroke-opacity: var(--breakpoint-disabled-opacity); 182 } 183 184 .editor-wrapper.skip-pausing .editor.new-breakpoint svg { 185 fill-opacity: var(--breakpoint-skipped-opacity); 186 } 187 188 /* Columnn breakpoints */ 189 .column-breakpoint { 190 display: inline; 191 padding-inline-start: 1px; 192 padding-inline-end: 1px; 193 } 194 195 .column-breakpoint:hover { 196 background-color: transparent; 197 } 198 199 .column-breakpoint svg { 200 display: inline-block; 201 cursor: pointer; 202 height: 13px; 203 width: 11px; 204 vertical-align: top; 205 fill: var(--breakpoint-fill); 206 stroke: var(--breakpoint-stroke); 207 fill-opacity: var(--breakpoint-inactive-opacity); 208 stroke-opacity: var(--breakpoint-inactive-opacity); 209 } 210 211 .column-breakpoint.active svg { 212 fill: var(--breakpoint-fill); 213 stroke: var(--breakpoint-stroke); 214 fill-opacity: 1; 215 stroke-opacity: 1; 216 } 217 218 .column-breakpoint.disabled svg { 219 fill-opacity: var(--breakpoint-disabled-opacity); 220 stroke-opacity: var(--breakpoint-disabled-opacity); 221 } 222 223 .column-breakpoint.has-log.disabled svg { 224 fill-opacity: 0.5; 225 stroke-opacity: 0.5; 226 } 227 228 .column-breakpoint.has-condition svg { 229 fill: var(--breakpoint-condition-fill); 230 stroke: var(--breakpoint-condition-stroke); 231 } 232 233 .column-breakpoint.has-log svg { 234 fill: var(--logpoint-fill); 235 stroke: var(--logpoint-stroke); 236 } 237 238 .editor-wrapper.skip-pausing .column-breakpoint svg { 239 fill-opacity: var(--breakpoint-skipped-opacity); 240 } 241 242 .dbg-img.dbg-img-column-marker { 243 background-image: url(chrome://devtools/content/debugger/images/column-marker.svg); 244 }