second and last part of syncing LCARStrek with Firefox 49/50 windows theme changes
[themes.git] / LCARStrek / devtools / debugger.css
... / ...
CommitLineData
1/* vim:set ts=2 sw=2 sts=2 et: */
2/* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5
6window {
7 padding: 0;
8}
9
10/* Sources and breakpoints pane */
11
12#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
13 border-color: transparent;
14}
15
16#sources-pane > tabs {
17/* border-inline-end: 1px solid;*/
18}
19
20#sources-pane .devtools-toolbar {
21 border: none; /* Remove the devtools-toolbar bottom border. */
22/* border-inline-end: 1px solid;*/
23}
24
25#sources-pane > tabs,
26#sources-pane .devtools-toolbar {
27 border-inline-end-color: var(--theme-splitter-color);
28}
29
30/* Sources and breakpoints list */
31
32.dbg-source-item {
33 padding: 2px 0px;
34}
35
36.dbg-wasm-item .icon {
37 display: block;
38 background-image: url(chrome://devtools/skin/images/webconsole.svg);
39 background-repeat: no-repeat;
40 background-size: 72px 60px;
41 /* show warning icon */
42 background-position: -24px -24px;
43 width: 10px;
44 height: 10px;
45 position: absolute;
46 margin-inline-start: -15px;
47 margin-top: 3px;
48}
49
50.dbg-breakpoint-line {
51 font-weight: 600;
52}
53
54.dbg-breakpoint-text {
55 padding-inline-start: 6px;
56 font-style: italic;
57 font-size: 90%;
58}
59
60.dbg-breakpoint-checkbox {
61 width: 16px;
62 height: 16px;
63 margin: 2px;
64}
65
66.dbg-breakpoint-condition-thrown-message {
67 display: none;
68 color: var(--theme-highlight-red);
69}
70
71.dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message {
72 display: block;
73 padding-inline-start: 0;
74}
75
76/* Sources toolbar */
77
78#sources-toolbar > .devtools-toolbarbutton,
79#sources-controls > .devtools-toolbarbutton {
80 min-width: 16px;
81}
82
83#sources-toolbar .devtools-toolbarbutton:not([label]) {
84 -moz-image-region: rect(0,16px,16px,0);
85}
86
87@media (min-resolution: 1.1dppx) {
88 #sources-toolbar .devtools-toolbarbutton:not([label]) {
89 -moz-image-region: rect(0,32px,32px,0);
90 }
91}
92
93#black-box {
94 list-style-image: url("images/debugger-blackbox.png");
95}
96
97@media (min-resolution: 1.1dppx) {
98 #black-box {
99 list-style-image: url(images/debugger-blackbox@2x.png);
100 }
101}
102
103#pretty-print {
104 list-style-image: url(images/debugger-prettyprint.png);
105}
106
107@media (min-resolution: 1.1dppx) {
108 #pretty-print {
109 list-style-image: url(images/debugger-prettyprint@2x.png);
110 }
111}
112
113#toggle-breakpoints {
114 list-style-image: url(images/debugger-toggleBreakpoints.svg);
115 -moz-image-region: rect(0,32px,16px,16px) !important;
116}
117
118#toggle-breakpoints[checked] {
119 -moz-image-region: rect(0,16px,16px,0) !important;
120}
121
122#toggle-breakpoints[checked] > image {
123 /* This button has a special checked image, don't make it blue */
124 filter: none;
125}
126
127#toggle-promise-debugger {
128 /* TODO Bug 1186119: Add a toggle promise debugger image */
129}
130
131#sources .black-boxed {
132 color: #8050B0;
133}
134
135#sources .selected .black-boxed {
136 color: #000000;
137}
138
139#sources .black-boxed ~ .dbg-breakpoint {
140 display: none;
141}
142
143/* Debugger unblackbox button */
144
145#black-boxed-message-button > .button-box > .button-icon {
146 width: 16px;
147 height: 16px;
148 background-image: url("images/debugger-blackbox.png");
149 background-position: 0 0;
150 background-size: 32px 16px;
151 background-repeat: no-repeat;
152 margin-inline-end: 5px;
153}
154
155@media (min-resolution: 1.1dppx) {
156 #black-boxed-message-button > .button-box > .button-icon {
157 background-image: url("images/debugger-blackbox@2x.png");
158 }
159}
160
161/* Black box message and source progress meter */
162
163#black-boxed-message,
164#source-progress-container {
165 background-color: #A09090;
166 /* Prevent the container deck from aquiring the size from this message. */
167 min-width: 1px;
168 min-height: 1px;
169 color: #000000;
170}
171
172#source-progress {
173 min-height: 2em;
174 min-width: 40em;
175}
176
177#black-boxed-message-label,
178#black-boxed-message-button {
179 text-align: center;
180 font-size: 120%;
181}
182
183#black-boxed-message-button {
184 margin-top: 1em;
185 padding: .25em;
186}
187
188/* Breadcrumbs stack frames view */
189
190.dbg-stackframe-details {
191 padding-inline-start: 4px;
192}
193
194/* Classic stack frames view */
195
196.dbg-classic-stackframe {
197 display: block;
198}
199
200.dbg-classic-stackframe-title {
201 font-weight: 600;
202}
203
204.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
205 float: right;
206}
207
208.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
209 float: left;
210}
211
212.dbg-classic-stackframe-details-url {
213 max-width: 90%;
214 text-align: end;
215}
216
217.dbg-classic-stackframe-details-url {
218 color: var(--theme-content-color1);
219}
220
221.dbg-classic-stackframe-details-sep {
222 color: var(--theme-body-color-alt)
223}
224
225.dbg-classic-stackframe-details-line {
226 color: var(--theme-highlight-bluegrey);
227}
228
229#callstack-list .selected label {
230 /* Text inside a selected item should not be custom colored. */
231 color: inherit !important;
232}
233
234/* Tracer */
235
236#trace {
237 list-style-image: url("images/tracer-icon.png");
238}
239
240@media (min-resolution: 1.1dppx) {
241 #trace {
242 list-style-image: url("images/tracer-icon@2x.png");
243 }
244}
245
246#clear-tracer {
247 /* Make this button as narrow as the text inside it. */
248 min-width: 1px;
249}
250
251.trace-name {
252 padding-inline-start: 4px;
253}
254
255/* Tracer dark+light theme */
256
257.trace-item {
258 color: var(--theme-content-color1);
259}
260
261.trace-item.black-boxed {
262 color: #A09090;
263}
264
265.trace-item.selected-matching {
266 background-color: #004242; /* Select highlight blue at 40% alpha */
267}
268
269.selected > .trace-item {
270 background-color: #004242; /* Select highlight blue at 75% alpha */
271}
272
273.trace-call {
274 color: var(--theme-highlight-blue);
275}
276
277.trace-return,
278.trace-yield {
279 color: var(--theme-highlight-green);
280}
281
282.trace-throw {
283 color: var(--theme-highlight-red);
284}
285
286.trace-param {
287 color: var(--theme-highlight-pink);
288}
289
290.trace-syntax {
291 color: var(--theme-content-color2);
292}
293
294/* Watch expressions view */
295
296#expressions {
297 min-height: 10px;
298 max-height: 125px;
299}
300
301.dbg-expression {
302 height: 20px;
303}
304
305.dbg-expression-arrow {
306 background-image: url("images/commandline-icon.png");
307 background-position: -16px 0;
308 background-repeat: no-repeat;
309 background-size: 32px 16px;
310 width: 16px;
311 height: 16px;
312 margin: 2px;
313}
314
315@media (min-resolution: 1.1dppx) {
316 .dbg-expression-arrow {
317 background-image: url("images/commandline-icon@2x.png");
318 }
319}
320
321.dbg-expression-input {
322 color: inherit;
323}
324
325.dbg-expression-button {
326 border: none;
327 background: none;
328 text-decoration: underline;
329 cursor: pointer;
330 color: var(--theme-highlight-blue);
331}
332
333/* Event listeners view */
334
335.dbg-event-listener-type {
336 font-weight: 600;
337}
338
339.dbg-event-listener-location {
340 color: var(--theme-highlight-pink);
341}
342
343.dbg-event-listener-separator {
344 color: var(--theme-body-color-alt);
345}
346
347.dbg-event-listener-targets {
348 color: var(--theme-highlight-blue);
349}
350
351#event-listeners .selected {
352 /* Selected items shouldn't be displayed differently. */
353 background: none;
354 color: var(--theme-content-color1);
355}
356
357/* Searchbox and the search operations help panel */
358
359#searchbox {
360 min-width: 220px;
361 margin-inline-start: 1px;
362}
363
364#filter-label {
365 margin-inline-start: 2px;
366}
367
368#searchbox-panel-operators {
369 margin-top: 5px;
370 margin-bottom: 8px;
371 margin-inline-start: 2px;
372}
373
374.searchbox-panel-operator-button {
375 min-width: 26px;
376 margin-top: 0;
377 margin-bottom: 0;
378 margin-inline-start: 2px;
379 margin-inline-end: 6px;
380 text-align: center;
381}
382
383.searchbox-panel-operator-label {
384 padding-bottom: 2px;
385}
386
387/* Searchbox results panel */
388
389#results-panel {
390 border: none;
391}
392
393.results-panel-item {
394 padding: 6px 8px;
395 border-top: 1px solid #A09090;
396}
397
398.results-panel-item:first-of-type {
399 border-top: none;
400 border-radius: 4px 4px 0 0;
401}
402
403.results-panel-item:last-of-type {
404 border-radius: 0 0 4px 4px;
405}
406
407.results-panel-item:only-of-type {
408 border-radius: 4px;
409}
410
411.results-panel-item-label {
412 font-weight: 600;
413}
414
415.results-panel-item-label-before {
416 padding-inline-end: 6px;
417}
418
419.results-panel-item-label {
420 color: var(--theme-highlight-blue);
421}
422
423.results-panel-item-label-before {
424 color: var(--theme-content-color2);
425}
426
427.results-panel-item-label-below {
428 color: var(--theme-content-color3);
429}
430
431#results-panel .selected label {
432 /* Text inside a selected item should not be custom colored. */
433 color: inherit !important;
434}
435
436/* Sources search view */
437
438#globalsearch {
439 min-height: 10px;
440 max-height: 50vh;
441}
442
443#globalsearch + .devtools-horizontal-splitter {
444 -moz-border-top-colors: var(--theme-splitter-color);
445}
446
447.dbg-source-results {
448 padding: 0;
449 background: none !important;
450}
451
452.dbg-source-results:not(.selected):hover {
453 background-color: var(--theme-sidebar-background);
454}
455
456.dbg-results-header {
457 padding-inline-start: 6px;
458}
459
460.dbg-results-header-location {
461 font-weight: 600;
462}
463
464.dbg-results-header-match-count {
465 padding-inline-start: 6px;
466 color: var(--theme-body-color-inactive);
467}
468
469.dbg-results-line-number {
470 min-width: 3em;
471 border-inline-end: 1px solid #9C9CFF;
472 padding-inline-end: 4px;
473 text-align: end;
474}
475
476.dbg-results-line-contents {
477 padding-inline-start: 4px;
478}
479
480.dbg-results-line-contents-string[match=true] {
481 background: #E7ADE7;
482 color: var(--theme-selection-color);
483 border: 1px solid #9C9CFF;
484 border-radius: 4px;
485 margin-top: -1px !important;
486 margin-bottom: -1px !important;
487 cursor: pointer;
488}
489
490.dbg-results-line-contents-string[match=true][focusing] {
491 transition: transform 0.3s ease-in-out;
492}
493
494.dbg-results-line-contents-string[match=true][focused] {
495 transition-duration: 0.1s;
496 transform: scale(1.75, 1.75);
497}
498
499.dbg-source-results:not(.selected):hover {
500 background-color: var(--theme-sidebar-background);
501}
502
503.dbg-results-header {
504 background-color: var(--theme-tab-toolbar-background);
505}
506
507.dbg-results-header {
508 color: var(--theme-content-color1);
509}
510
511.dbg-search-result:hover {
512 background-color: #004242; /* Select highlight blue at 40% alpha */
513}
514
515.dbg-results-header-match-count {
516 color: var(--theme-content-color3);
517}
518
519.dbg-results-line-number {
520 background-color: var(--theme-tab-toolbar-background);
521 color: var(--theme-body-color-alt);
522}
523
524.dbg-results-line-contents-string {
525 color: var(--theme-body-color-alt);
526}
527
528.theme-dark .dbg-results-line-contents-string[match=true] {
529 color: var(--theme-selection-color);
530}
531
532.theme-light .dbg-results-line-contents-string[match=true] {
533 color: var(--theme-body-color);
534}
535
536/* Toolbar controls */
537
538#resume {
539 list-style-image: url(images/debugger-pause.png);
540}
541
542#resume[checked] {
543 list-style-image: url(images/debugger-play.png);
544}
545
546@media (min-resolution: 1.1dppx) {
547 #resume {
548 list-style-image: url(images/debugger-pause@2x.png);
549 }
550
551 #resume[checked] {
552 list-style-image: url(images/debugger-play@2x.png);
553 }
554}
555
556#resume[break-on-next] {
557 background: var(--theme-highlight-lightorange);
558}
559
560#step-over {
561 list-style-image: url(images/debugger-step-over.png);
562}
563
564#step-in {
565 list-style-image: url(images/debugger-step-in.png);
566}
567
568#step-out {
569 list-style-image: url(images/debugger-step-out.png);
570}
571
572@media (min-resolution: 1.1dppx) {
573 #step-over {
574 list-style-image: url(images/debugger-step-over@2x.png);
575 }
576
577 #step-in {
578 list-style-image: url(images/debugger-step-in@2x.png);
579 }
580
581 #step-out {
582 list-style-image: url(images/debugger-step-out@2x.png);
583 }
584}
585
586#instruments-pane-toggle {
587 list-style-image: var(--theme-pane-collapse-image);
588}
589
590#instruments-pane-toggle[pane-collapsed] {
591 list-style-image: var(--theme-pane-expand-image);
592}
593
594/* Horizontal vs. vertical layout */
595
596#vertical-layout-panes-container {
597 min-height: 35vh;
598 max-height: 80vh;
599}
600
601#body[layout=vertical] #sources-pane > tabs {
602 border-inline-end: none;
603}
604
605#body[layout=vertical] #instruments-pane {
606 margin: 0 !important;
607 /* To prevent all the margin hacks to hide the sidebar. */
608}
609
610#body[layout=vertical] .side-menu-widget-container,
611#body[layout=vertical] .side-menu-widget-empty-text {
612 box-shadow: none !important;
613}
614
615#body[layout=vertical] .side-menu-widget-item-arrow {
616 background-image: none !important;
617}
618
619#body[layout=vertical] .side-menu-widget-group,
620#body[layout=vertical] .side-menu-widget-item {
621 margin-inline-end: 0;
622}