Commit | Line | Data |
---|---|---|
9099c61d RK |
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/. */ | |
eec397be RK |
4 | |
5 | window { | |
6 | padding: 0; | |
7 | } | |
8 | ||
45dc7657 | 9 | /* === BEGIN debugger.inc.css === */ |
eec397be | 10 | |
45dc7657 | 11 | /* Sources and breakpoints pane */ |
de57e474 | 12 | |
dfa34f73 RK |
13 | #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter { |
14 | border-color: transparent; | |
eec397be RK |
15 | } |
16 | ||
45dc7657 RK |
17 | #sources-pane > tabs { |
18 | -moz-border-end: 1px solid #9C9CFF; /* Match the splitter color. */ | |
19 | } | |
20 | ||
2a8b2b48 RK |
21 | #sources-toolbar > .devtools-toolbarbutton, |
22 | #sources-controls > .devtools-toolbarbutton { | |
6568957a RK |
23 | min-width: 32px; |
24 | } | |
25 | ||
2a8b2b48 RK |
26 | #black-box { |
27 | list-style-image: url("debugger-blackbox.png"); | |
28 | } | |
29 | ||
3a0880a9 | 30 | #pretty-print { |
3a0880a9 RK |
31 | font-weight: bold; |
32 | } | |
33 | ||
2a8b2b48 RK |
34 | #toggle-breakpoints { |
35 | list-style-image: url("debugger-toggleBreakpoints.png"); | |
36 | } | |
37 | ||
38 | #sources-toolbar .devtools-toolbarbutton:not([label]) { | |
7600e0b1 | 39 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
fe524e0c RK |
40 | } |
41 | ||
2a8b2b48 RK |
42 | #sources-toolbar .devtools-toolbarbutton:not([label]):hover { |
43 | -moz-image-region: rect(16px, 16px, 32px, 0px); | |
44 | } | |
45 | ||
46 | #sources-toolbar .devtools-toolbarbutton:not([label])[checked] { | |
7600e0b1 | 47 | -moz-image-region: rect(0px, 32px, 16px, 16px); |
fe524e0c RK |
48 | } |
49 | ||
2a8b2b48 RK |
50 | #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover { |
51 | -moz-image-region: rect(16px, 32px, 32px, 16px); | |
52 | } | |
53 | ||
7600e0b1 | 54 | #sources .black-boxed { |
1b13529a RK |
55 | color: #8050B0; |
56 | } | |
57 | ||
45dc7657 RK |
58 | #sources .selected > .black-boxed { |
59 | color: #000000; | |
60 | } | |
61 | ||
7600e0b1 | 62 | #sources .black-boxed > .dbg-breakpoint { |
fe524e0c RK |
63 | display: none; |
64 | } | |
65 | ||
7600e0b1 | 66 | #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { |
3a0880a9 RK |
67 | background-image: none; |
68 | /* box-shadow: inset -1px 0 0 #222426; */ | |
69 | } | |
70 | ||
7600e0b1 | 71 | #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { |
3a0880a9 RK |
72 | background-image: none; |
73 | /* box-shadow: inset 1px 0 0 #222426; */ | |
74 | } | |
75 | ||
76 | /* Black box message and source progress meter */ | |
fe524e0c | 77 | |
3a0880a9 RK |
78 | #black-boxed-message, |
79 | #source-progress-container { | |
80 | background-color: #A09090; | |
dfa34f73 RK |
81 | /* Prevent the container deck from aquiring the size from this message. */ |
82 | min-width: 1px; | |
fe524e0c | 83 | min-height: 1px; |
fe524e0c RK |
84 | color: #000000; |
85 | } | |
86 | ||
3a0880a9 RK |
87 | #source-progress { |
88 | min-height: 2em; | |
89 | min-width: 40em; | |
90 | } | |
91 | ||
fe524e0c RK |
92 | #black-boxed-message-label, |
93 | #black-boxed-message-button { | |
94 | text-align: center; | |
95 | font-size: 120%; | |
96 | } | |
97 | ||
98 | #black-boxed-message-button { | |
99 | margin-top: 1em; | |
100 | padding: .25em; | |
101 | } | |
102 | ||
dfa34f73 RK |
103 | /* Tracer */ |
104 | ||
105 | #trace { | |
106 | list-style-image: url("tracer-icon.png"); | |
107 | -moz-image-region: rect(0px,16px,16px,0px); | |
108 | } | |
109 | ||
110 | #trace:hover, | |
111 | #trace[checked] { | |
112 | -moz-image-region: rect(0px,32px,16px,16px); | |
113 | } | |
114 | ||
dfa34f73 RK |
115 | #clear-tracer { |
116 | /* Make this button as narrow as the text inside it. */ | |
117 | min-width: 1px; | |
118 | } | |
119 | ||
dfa34f73 RK |
120 | .trace-name { |
121 | -moz-padding-start: 4px !important; | |
122 | } | |
123 | ||
dfa34f73 RK |
124 | /* Tracer dark+light theme */ |
125 | ||
dfa34f73 RK |
126 | .trace-item { |
127 | color: #FF9F00; /* Light foreground text */ | |
128 | } | |
129 | ||
130 | .trace-item.selected-matching { | |
131 | background-color: #004242; /* Select highlight blue at 40% alpha */ | |
132 | } | |
133 | ||
134 | .selected > .trace-item { | |
135 | background-color: #004242; /* Select highlight blue at 75% alpha */ | |
136 | } | |
137 | ||
138 | .trace-call { | |
139 | color: #9C9CFF; /* highlight blue */ | |
140 | } | |
141 | ||
142 | .trace-return, | |
143 | .trace-yield { | |
144 | color: #008484; /* highlight green */ | |
145 | } | |
146 | ||
147 | .trace-throw { | |
148 | color: #FF0000; /* highlight red */ | |
149 | } | |
150 | ||
151 | .trace-param { | |
152 | color: #E7ADE7; /* Content text light */ | |
153 | } | |
154 | ||
155 | .trace-syntax { | |
156 | color: #A09090; /* highlight grey */ | |
157 | } | |
158 | ||
de57e474 RK |
159 | /* Breadcrumbs stack frames view */ |
160 | ||
161 | .breadcrumbs-widget-item { | |
162 | max-width: none; | |
163 | } | |
eec397be | 164 | |
f7774352 RK |
165 | #stackframes { |
166 | min-height: 25px; | |
167 | } | |
168 | ||
82b4252f | 169 | .dbg-stackframe-details { |
eec397be | 170 | -moz-padding-start: 4px; |
eec397be RK |
171 | } |
172 | ||
de57e474 RK |
173 | /* Classic stack frames view */ |
174 | ||
175 | .dbg-classic-stackframe { | |
176 | display: block; | |
45dc7657 | 177 | padding: 0 4px; |
de57e474 RK |
178 | } |
179 | ||
180 | .dbg-classic-stackframe-title { | |
eec397be | 181 | font-weight: 600; |
de57e474 RK |
182 | color: #9C9CFF; |
183 | } | |
184 | ||
185 | .dbg-classic-stackframe-details:-moz-locale-dir(ltr) { | |
186 | float: right; | |
187 | } | |
188 | ||
189 | .dbg-classic-stackframe-details:-moz-locale-dir(rtl) { | |
190 | float: left; | |
eec397be RK |
191 | } |
192 | ||
de57e474 RK |
193 | .dbg-classic-stackframe-details-url { |
194 | max-width: 90%; | |
195 | text-align: end; | |
196 | color: #3333FF; | |
197 | } | |
198 | ||
199 | .dbg-classic-stackframe-details-sep { | |
200 | color: #A09090; | |
201 | } | |
202 | ||
203 | .dbg-classic-stackframe-details-line { | |
204 | color: #9C9CFF; | |
205 | } | |
206 | ||
207 | #callstack-list .side-menu-widget-item.selected label { | |
208 | color: #FFCF00; | |
990cba4b RK |
209 | } |
210 | ||
82b4252f | 211 | /* Sources and breakpoints view */ |
889649fd | 212 | |
82b4252f | 213 | .dbg-breakpoint { |
7600e0b1 | 214 | -moz-margin-start: 4px; |
990cba4b RK |
215 | } |
216 | ||
82b4252f | 217 | .dbg-breakpoint-line { |
889649fd RK |
218 | font-weight: 600; |
219 | } | |
220 | ||
221 | .dbg-breakpoint-text { | |
82b4252f RK |
222 | -moz-margin-start: 10px !important; |
223 | font-style: italic; | |
1b13529a RK |
224 | font-size: 90%; |
225 | } | |
226 | ||
227 | .dbg-breakpoint-checkbox { | |
228 | width: 16px; | |
229 | height: 16px; | |
230 | margin: 2px; | |
990cba4b RK |
231 | } |
232 | ||
d2ce251d RK |
233 | /* Variable bubble view */ |
234 | ||
235 | .devtools-tooltip-simple-text.token-undefined, | |
236 | .devtools-tooltip-simple-text.token-null { | |
237 | text-align: center; | |
238 | color: #A09090 !important; /* Override the theme's color. */ | |
239 | } | |
240 | ||
241 | .devtools-tooltip-simple-text.token-boolean { | |
242 | text-align: center; | |
243 | color: #9C9CFF !important; | |
244 | } | |
245 | ||
246 | .devtools-tooltip-simple-text.token-number { | |
247 | text-align: center; | |
248 | color: #E7ADE7 !important; | |
249 | } | |
250 | ||
251 | .devtools-tooltip-simple-text.token-string { | |
252 | text-align: start; | |
253 | color: #008484 !important; | |
254 | } | |
255 | ||
256 | .devtools-tooltip-simple-text.token-other { | |
257 | text-align: center; | |
258 | color: #FF9F00 !important; | |
259 | } | |
260 | ||
3a0880a9 RK |
261 | /* Instruments pane (watch expressions, variables, event listeners...) */ |
262 | ||
de57e474 | 263 | #instruments-pane .side-menu-widget-container, |
45dc7657 | 264 | #instruments-pane .side-menu-widget-empty-text { |
de57e474 | 265 | /* box-shadow: none !important; */ |
3a0880a9 RK |
266 | } |
267 | ||
82b4252f | 268 | /* Watch expressions view */ |
990cba4b RK |
269 | |
270 | #expressions { | |
990cba4b | 271 | min-height: 10px; |
56ab361a | 272 | max-height: 125px; |
990cba4b RK |
273 | } |
274 | ||
275 | .dbg-expression { | |
276 | height: 20px; | |
990cba4b RK |
277 | } |
278 | ||
279 | .dbg-expression-arrow { | |
b27cc46e | 280 | width: 16px; |
990cba4b | 281 | height: auto; |
45dc7657 | 282 | margin: 2px; |
3a0880a9 | 283 | background: -moz-image-rect(url("commandline-icon.png"), 0, 32, 16, 16); |
990cba4b RK |
284 | } |
285 | ||
286 | .dbg-expression-input { | |
de57e474 | 287 | color: inherit; |
990cba4b RK |
288 | } |
289 | ||
45dc7657 RK |
290 | .dbg-expression-button { |
291 | border: none; | |
292 | background: none; | |
293 | cursor: pointer; | |
294 | text-decoration: underline; | |
295 | } | |
296 | ||
297 | .dbg-expression-button { | |
298 | color: #9C9CFF; /* Blue highlight color */ | |
299 | } | |
300 | ||
3a0880a9 RK |
301 | /* Event listeners view */ |
302 | ||
303 | .dbg-event-listener { | |
45dc7657 | 304 | padding: 0 8px; |
3a0880a9 RK |
305 | } |
306 | ||
307 | .dbg-event-listener-type { | |
308 | font-weight: 600; | |
309 | } | |
310 | ||
311 | .dbg-event-listener-separator { | |
312 | color: #A09090; | |
313 | } | |
314 | ||
315 | .dbg-event-listener-targets { | |
316 | color: #9C9CFF; | |
317 | } | |
318 | ||
319 | .dbg-event-listener-location { | |
320 | color: #E7ADE7; | |
321 | } | |
322 | ||
de57e474 RK |
323 | #event-listeners .side-menu-widget-item.selected { |
324 | background: none !important; | |
325 | } | |
326 | ||
82b4252f | 327 | /* Searchbox and the search operations help panel */ |
56ab361a | 328 | |
d2ce251d | 329 | #searchbox { |
82b4252f RK |
330 | min-width: 220px; |
331 | -moz-margin-start: 1px; | |
56ab361a RK |
332 | } |
333 | ||
fe524e0c RK |
334 | #filter-label { |
335 | -moz-margin-start: 2px; | |
336 | } | |
337 | ||
338 | #searchbox-panel-operators { | |
339 | margin-top: 5px; | |
82b4252f RK |
340 | margin-bottom: 8px; |
341 | -moz-margin-start: 2px; | |
c29b709d RK |
342 | } |
343 | ||
82b4252f RK |
344 | .searchbox-panel-operator-button { |
345 | min-width: 26px; | |
346 | margin-top: 0; | |
347 | margin-bottom: 0; | |
348 | -moz-margin-start: 2px; | |
349 | -moz-margin-end: 6px; | |
350 | text-align: center; | |
56ab361a RK |
351 | } |
352 | ||
82b4252f RK |
353 | .searchbox-panel-operator-label { |
354 | padding-bottom: 2px; | |
56ab361a RK |
355 | } |
356 | ||
82b4252f | 357 | /* Searchbox results panel */ |
56ab361a | 358 | |
82b4252f RK |
359 | .results-panel { |
360 | padding: 4px; | |
56ab361a RK |
361 | } |
362 | ||
82b4252f RK |
363 | .results-panel-item { |
364 | border: 1px solid #A09090; | |
365 | border-top-color: #8050B0; | |
366 | padding: 5px; | |
56ab361a RK |
367 | cursor: pointer; |
368 | } | |
eec397be | 369 | |
82b4252f RK |
370 | .results-panel-item:first-of-type { |
371 | border-top-color: #9C9CFF; | |
372 | border-radius: 4px 4px 0 0; | |
eec397be RK |
373 | } |
374 | ||
82b4252f RK |
375 | .results-panel-item:last-of-type { |
376 | border-radius: 0 0 4px 4px; | |
b8384c33 RK |
377 | } |
378 | ||
82b4252f RK |
379 | .results-panel-item:only-of-type { |
380 | border-radius: 4px; | |
c29b709d RK |
381 | } |
382 | ||
82b4252f RK |
383 | .results-panel-item:not(.selected):not(:hover) { |
384 | /* text-shadow: 0 1px #fff;*/ | |
85cfb236 RK |
385 | } |
386 | ||
45dc7657 | 387 | .results-panel-item-label-before { |
82b4252f RK |
388 | -moz-margin-end: 5px !important; |
389 | color: #A09090; | |
390 | cursor: inherit; | |
56ab361a RK |
391 | } |
392 | ||
45dc7657 | 393 | .results-panel-item-label { |
82b4252f | 394 | color: #9C9CFF; |
b8384c33 | 395 | font-weight: 600; |
82b4252f | 396 | cursor: inherit; |
85cfb236 RK |
397 | } |
398 | ||
45dc7657 | 399 | .results-panel-item-label-below { |
56ab361a | 400 | color: #FF9F00; |
82b4252f | 401 | cursor: inherit; |
56ab361a RK |
402 | } |
403 | ||
82b4252f | 404 | /* Sources search view */ |
eec397be | 405 | |
82b4252f RK |
406 | #globalsearch { |
407 | min-height: 10px; | |
82b4252f | 408 | max-height: 125px; |
eec397be RK |
409 | } |
410 | ||
82b4252f RK |
411 | #globalsearch + .devtools-horizontal-splitter { |
412 | -moz-border-top-colors: #9C9CFF; | |
56ab361a RK |
413 | } |
414 | ||
82b4252f RK |
415 | .dbg-source-results { |
416 | padding: 0; | |
417 | background: none !important; | |
eec397be RK |
418 | } |
419 | ||
46e71434 RK |
420 | .dbg-source-results:not(.selected):hover { |
421 | background-color: #000000; /* Sidebar background */ | |
422 | } | |
423 | ||
82b4252f | 424 | .dbg-results-header { |
b8384c33 | 425 | -moz-padding-start: 6px; |
37953ab4 RK |
426 | } |
427 | ||
82b4252f | 428 | .dbg-results-header-location { |
990cba4b RK |
429 | font-weight: 600; |
430 | } | |
431 | ||
82b4252f RK |
432 | .dbg-results-header-match-count { |
433 | -moz-padding-start: 6px; | |
eec397be RK |
434 | color: #8050B0; |
435 | } | |
436 | ||
82b4252f RK |
437 | .dbg-results-line-number { |
438 | background: #000000; | |
439 | min-width: 40px; | |
440 | -moz-border-end: 1px solid #9C9CFF; | |
441 | -moz-padding-end: 4px; | |
442 | padding-top: 2px; | |
443 | text-align: end; | |
eec397be RK |
444 | color: #FF9F00; |
445 | } | |
446 | ||
82b4252f RK |
447 | .dbg-results-line-contents { |
448 | -moz-padding-start: 4px; | |
449 | padding-top: 1px; | |
450 | padding-bottom: 1px; | |
eec397be RK |
451 | } |
452 | ||
82b4252f RK |
453 | .dbg-results-line-contents-string { |
454 | padding: 1px; | |
eec397be RK |
455 | } |
456 | ||
82b4252f RK |
457 | .dbg-results-line-contents-string[match=true] { |
458 | background: #E7ADE7; | |
459 | color: #000000; | |
460 | padding: 0; | |
461 | border: 1px solid #9C9CFF; | |
462 | border-radius: 4px; | |
463 | cursor: pointer; | |
eec397be RK |
464 | } |
465 | ||
82b4252f RK |
466 | .dbg-results-line-contents-string[match=true][focusing] { |
467 | transition: transform 0.3s ease-in-out; | |
eec397be RK |
468 | } |
469 | ||
82b4252f RK |
470 | .dbg-results-line-contents-string[match=true][focused] { |
471 | transition-duration: 0.1s; | |
472 | transform: scale(1.75, 1.75); | |
b8384c33 RK |
473 | } |
474 | ||
3a0880a9 | 475 | /* Toolbar controls */ |
5322a392 | 476 | |
de57e474 RK |
477 | .devtools-sidebar-tabs > tabs > tab { |
478 | /* min-height: 25px !important; | |
479 | padding: 0 !important; */ | |
480 | } | |
481 | ||
c29b709d | 482 | #toggle-panes { |
c29b709d RK |
483 | list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); |
484 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
485 | } | |
486 | ||
b8384c33 | 487 | #toggle-panes:not([panesHidden]) { |
c29b709d RK |
488 | list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); |
489 | } | |
490 | ||
491 | #toggle-panes:hover, | |
492 | #toggle-panes:hover:active { | |
493 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
494 | } | |
495 | ||
5322a392 | 496 | #resume { |
3886293f | 497 | list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png"); |
5322a392 | 498 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
3886293f | 499 | /* transition: background 0.15s ease-in-out; */ |
5322a392 RK |
500 | } |
501 | ||
5322a392 RK |
502 | #resume:hover { |
503 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
504 | } | |
505 | ||
3886293f RK |
506 | #resume[checked=true] { |
507 | /* background: none; */ | |
508 | list-style-image: url("chrome://browser/skin/devtools/debugger-play.png"); | |
509 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
510 | } | |
511 | ||
512 | #resume[checked=true]:hover { | |
513 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
514 | } | |
515 | ||
516 | #resume ~ toolbarbutton { | |
517 | /* transition: opacity 0.15s ease-in-out; */ | |
518 | } | |
519 | ||
520 | #resume:not([checked]) ~ toolbarbutton { | |
521 | /* opacity: 0.5; */ | |
522 | } | |
523 | ||
5322a392 RK |
524 | #step-over { |
525 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png"); | |
526 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
527 | } | |
528 | #step-over:hover { | |
529 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
530 | } | |
531 | ||
532 | #step-in { | |
533 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png"); | |
534 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
535 | } | |
536 | #step-in:hover { | |
537 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
538 | } | |
539 | ||
540 | #step-out { | |
541 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png"); | |
542 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
543 | } | |
544 | #step-out:hover { | |
545 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
546 | } | |
547 | ||
82b4252f | 548 | #instruments-pane-toggle { |
f7774352 | 549 | /* background: none; |
82b4252f | 550 | box-shadow: none; |
f7774352 | 551 | border: none; */ |
ed1a91c6 | 552 | list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); |
82b4252f RK |
553 | -moz-image-region: rect(0px,16px,16px,0px); |
554 | } | |
555 | ||
ed1a91c6 RK |
556 | #instruments-pane-toggle[pane-collapsed] { |
557 | list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); | |
82b4252f RK |
558 | } |
559 | ||
560 | #instruments-pane-toggle:hover, | |
561 | #instruments-pane-toggle:hover:active { | |
562 | -moz-image-region: rect(0px,32px,16px,16px); | |
563 | } | |
3a0880a9 RK |
564 | |
565 | /* Horizontal vs. vertical layout */ | |
566 | ||
567 | #vertical-layout-panes-container { | |
568 | min-height: 35vh; | |
569 | max-height: 80vh; | |
570 | } | |
571 | ||
572 | #body[layout=vertical] #instruments-pane { | |
573 | margin: 0 !important; | |
574 | /* To prevent all the margin hacks to hide the sidebar. */ | |
575 | } | |
576 | ||
de57e474 RK |
577 | #body[layout=vertical] #sources-pane > tabs { |
578 | -moz-border-end: none; | |
579 | } | |
580 | ||
581 | #body[layout=vertical] .side-menu-widget-container, | |
45dc7657 | 582 | #body[layout=vertical] .side-menu-widget-empty-text { |
3a0880a9 RK |
583 | box-shadow: none !important; |
584 | } | |
585 | ||
586 | #body[layout=vertical] .side-menu-widget-item-arrow { | |
587 | background-image: none !important; | |
588 | } | |
45dc7657 RK |
589 | |
590 | /* === END debugger.inc.css === */ |