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