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