some corrections and finishing touches to that LCARStrek works well for Firefox 55...
[themes.git] / devtools / debugger.css
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 window {
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 === */