Commit | Line | Data |
---|---|---|
eec397be RK |
1 | /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ |
2 | /* vim: set ft=javascript ts=2 et sw=2 tw=80: */ | |
9099c61d RK |
3 | /* This Source Code Form is subject to the terms of the Mozilla Public |
4 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
5 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
eec397be RK |
6 | |
7 | window { | |
8 | padding: 0; | |
9 | } | |
10 | ||
11 | #body { | |
7bc075b6 | 12 | background-color: #000000; |
eec397be RK |
13 | } |
14 | ||
eec397be RK |
15 | /** |
16 | * Debugger content | |
17 | */ | |
18 | ||
b8384c33 | 19 | #chrome-globals, #sources { |
0142a07b | 20 | width: 200px; |
37953ab4 RK |
21 | } |
22 | ||
889649fd RK |
23 | /** |
24 | * This hardcoded width likely due to a toolkit Windows specific bug. | |
25 | * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7 | |
26 | */ | |
b8384c33 | 27 | #searchbox { |
889649fd RK |
28 | width: 200px; |
29 | } | |
30 | ||
eec397be RK |
31 | /** |
32 | * Lists and headers | |
33 | */ | |
34 | ||
35 | .list-item { | |
36 | padding: 2px; | |
eec397be RK |
37 | } |
38 | ||
889649fd RK |
39 | .list-item:not(.selected):not(.empty):hover { |
40 | /* background: #cddae5; */ | |
41 | } | |
42 | ||
eec397be RK |
43 | .list-item.selected { |
44 | background: #008484; | |
45 | color: #FFCF00; | |
46 | } | |
47 | ||
48 | .list-item.empty { | |
49 | color: #8050B0; | |
889649fd | 50 | /* padding: 4px; */ |
eec397be RK |
51 | } |
52 | ||
53 | /** | |
b8384c33 | 54 | * Sources searching |
c29b709d RK |
55 | */ |
56 | ||
57 | #globalsearch { | |
58 | background-color: #000000; | |
0142a07b RK |
59 | min-height: 10px; |
60 | } | |
61 | ||
62 | #globalsearch > vbox:not(:empty) { | |
63 | min-height: 10px; | |
c29b709d RK |
64 | max-height: 150px; |
65 | } | |
66 | ||
b8384c33 | 67 | .dbg-source-results:not(:last-child) { |
c29b709d RK |
68 | border-bottom: 1px dotted #9C9CFF; |
69 | } | |
70 | ||
71 | .dbg-results-header { | |
72 | -moz-padding-start: 6px; | |
73 | } | |
74 | ||
b8384c33 | 75 | .dbg-results-header .location { |
c29b709d RK |
76 | font-weight: 600; |
77 | } | |
78 | ||
79 | .dbg-results-header .match-count { | |
80 | -moz-padding-start: 6px; | |
b8384c33 | 81 | color: #8050B0; |
c29b709d RK |
82 | } |
83 | ||
84 | .dbg-results-container .line-number { | |
85 | background: #000000; | |
b8384c33 | 86 | min-width: 40px; |
c29b709d RK |
87 | -moz-padding-end: 4px; |
88 | -moz-border-end: 1px dotted #9C9CFF; | |
89 | text-align: end; | |
90 | font: 8pt monospace; | |
b8384c33 | 91 | color: #FF9F00; |
c29b709d RK |
92 | } |
93 | ||
94 | .dbg-results-container .line-contents { | |
95 | -moz-padding-start: 4px; | |
96 | font: 8pt monospace; | |
97 | } | |
98 | ||
99 | .dbg-results-container .line-contents:hover { | |
100 | background: #000000; | |
101 | } | |
102 | ||
103 | .dbg-results-container .line-contents > .string { | |
104 | padding: 1px; | |
105 | } | |
106 | ||
107 | .dbg-results-container .line-contents > .string[match=true] { | |
108 | background: #E7ADE7; | |
109 | color: #000000; | |
110 | padding: 0; | |
111 | border: 1px solid #9C9CFF; | |
112 | border-radius: 4px; | |
113 | cursor: pointer; | |
b8384c33 | 114 | transition: transform 0.25s ease-in-out; |
c29b709d RK |
115 | } |
116 | ||
117 | .dbg-results-container .line-contents > .string[match=true][focused] { | |
118 | transition-duration: 0.1s; | |
119 | transform: scale(1.75, 1.75); | |
120 | } | |
121 | ||
0142a07b RK |
122 | /** |
123 | * Searchbox panel | |
124 | */ | |
125 | ||
b8384c33 RK |
126 | #searchbox-panel .description { |
127 | margin: -6px 0 8px; | |
7bc075b6 RK |
128 | } |
129 | ||
b8384c33 | 130 | #searchbox-panel button.operator { |
7bc075b6 RK |
131 | min-width: 0; |
132 | margin: 0; | |
133 | padding: 0; | |
134 | font: 9pt "Liberation Mono", Consolas, "Courier New", monospace; | |
135 | } | |
136 | ||
b8384c33 | 137 | #searchbox-panel label.operator { |
7bc075b6 RK |
138 | -moz-padding-start: 6px; |
139 | padding-bottom: 1px; | |
140 | } | |
141 | ||
0142a07b RK |
142 | /** |
143 | * Filtered sources panel | |
144 | */ | |
145 | ||
146 | #filtered-sources-panel { | |
147 | padding: 4px; | |
148 | } | |
149 | ||
150 | .dbg-source-item { | |
151 | border: 1px solid #A09090; | |
152 | border-top-color: #8050B0; | |
153 | } | |
154 | ||
155 | .dbg-source-item.selected { | |
156 | } | |
157 | ||
158 | .dbg-source-item:first-of-type { | |
159 | border-top-color: #9C9CFF; | |
160 | border-radius: 4px 4px 0 0; | |
161 | } | |
162 | ||
163 | .dbg-source-item:last-of-type { | |
164 | border-radius: 0 0 4px 4px; | |
165 | } | |
166 | ||
167 | .dbg-source-item:only-of-type { | |
168 | border-radius: 4px 4px 4px 4px; | |
169 | } | |
170 | ||
171 | .dbg-source-item:not(:hover) { | |
172 | /* text-shadow: 0 1px #fff;*/ | |
173 | } | |
174 | ||
175 | .dbg-source-item-name { | |
176 | color: #9C9CFF; | |
177 | font-weight: 600; | |
178 | } | |
179 | ||
180 | .dbg-source-item-details { | |
181 | color: #FF9F00; | |
182 | } | |
183 | ||
c29b709d | 184 | /** |
b8384c33 | 185 | * Stack frames and breakpoints pane |
c29b709d RK |
186 | */ |
187 | ||
188 | #stackframes\+breakpoints { | |
c29b709d RK |
189 | min-width: 50px; |
190 | } | |
191 | ||
192 | #stackframes\+breakpoints[animated] { | |
b8384c33 | 193 | transition: margin 0.25s ease-in-out; |
c29b709d RK |
194 | } |
195 | ||
990cba4b RK |
196 | /** |
197 | * Variables and watch expressions pane | |
198 | */ | |
199 | ||
200 | #variables\+expressions { | |
990cba4b RK |
201 | min-width: 50px; |
202 | } | |
203 | ||
204 | #variables\+expressions[animated] { | |
205 | transition: margin 0.25s ease-in-out; | |
206 | } | |
207 | ||
c29b709d RK |
208 | /** |
209 | * Stack frames view | |
eec397be RK |
210 | */ |
211 | ||
212 | #stackframes { | |
990cba4b | 213 | min-height: 10px; |
eec397be RK |
214 | } |
215 | ||
216 | .dbg-stackframe { | |
217 | -moz-padding-start: 4px; | |
218 | -moz-padding-end: 4px; | |
219 | } | |
220 | ||
221 | .dbg-stackframe-name { | |
222 | font-weight: 600; | |
223 | } | |
224 | ||
990cba4b RK |
225 | .dbg-stackframe-details { |
226 | -moz-padding-start: 4px; | |
227 | } | |
228 | ||
889649fd RK |
229 | /** |
230 | * Breakpoints view | |
231 | */ | |
232 | ||
233 | #breakpoints { | |
990cba4b RK |
234 | min-height: 10px; |
235 | } | |
236 | ||
237 | #breakpoints > vbox:not(:empty) { | |
238 | min-height: 10px; | |
239 | max-height: 200px; | |
240 | } | |
241 | ||
242 | .dbg-breakpoint:not(:last-child) { | |
243 | border-bottom: 1px solid #008484; | |
889649fd RK |
244 | } |
245 | ||
246 | .dbg-breakpoint-info { | |
247 | font-weight: 600; | |
248 | } | |
249 | ||
250 | .dbg-breakpoint-text { | |
251 | font: 12px "Liberation Mono", Consolas, "Courier New", monospace; | |
252 | } | |
253 | ||
990cba4b RK |
254 | #conditional-breakpoint-panel .description { |
255 | margin: -6px 0 8px 0; | |
256 | } | |
257 | ||
258 | #conditional-breakpoint-panel textbox { | |
259 | margin: 0 0 -2px 0; | |
260 | } | |
261 | ||
262 | /** | |
263 | * Watch expressions view | |
264 | */ | |
265 | ||
266 | #expressions { | |
990cba4b | 267 | min-height: 10px; |
56ab361a | 268 | max-height: 125px; |
990cba4b RK |
269 | } |
270 | ||
271 | .dbg-expression { | |
272 | height: 20px; | |
273 | -moz-padding-start: 8px; | |
274 | } | |
275 | ||
276 | .dbg-expression-arrow { | |
277 | width: 10px; | |
278 | height: auto; | |
279 | background: url("chrome://browser/skin/devtools/commandline.png") 0px 4px no-repeat; | |
280 | } | |
281 | ||
282 | .dbg-expression-input { | |
283 | font: 9pt monospace; | |
284 | } | |
285 | ||
286 | .dbg-expression-delete { | |
56ab361a RK |
287 | opacity: 0; |
288 | } | |
289 | ||
290 | .dbg-expression-delete:not(:hover) { | |
990cba4b RK |
291 | -moz-image-region: rect(0, 32px, 16px, 16px); |
292 | } | |
293 | ||
56ab361a RK |
294 | .dbg-expression-delete:hover { |
295 | opacity: 1; | |
296 | } | |
297 | ||
298 | .dbg-expression:hover > .dbg-expression-delete:not(:hover) { | |
299 | opacity: 0.5; | |
300 | transition: opacity 0.2s ease-in-out; | |
301 | } | |
302 | ||
eec397be | 303 | /** |
b8384c33 | 304 | * Variables view |
eec397be RK |
305 | */ |
306 | ||
307 | #variables { | |
990cba4b | 308 | min-height: 10px; |
c29b709d RK |
309 | } |
310 | ||
56ab361a RK |
311 | .dbg-variable-delete { |
312 | opacity: 0; | |
313 | } | |
314 | ||
315 | .dbg-variable-delete:not(:hover) { | |
990cba4b | 316 | -moz-image-region: rect(0, 32px, 16px, 16px); |
56ab361a RK |
317 | } |
318 | ||
319 | .dbg-variable-delete:hover { | |
320 | opacity: 1; | |
321 | } | |
322 | ||
323 | .variable-or-property:hover > .title > .dbg-variable-delete:not(:hover), | |
324 | .variable-or-property:focus > .title > .dbg-variable-delete:not(:hover) { | |
990cba4b | 325 | opacity: 0.5; |
56ab361a RK |
326 | transition: opacity 0.2s ease-in-out; |
327 | } | |
328 | ||
329 | .dbg-variable-edit { | |
330 | background: url("chrome://browser/skin/tabview/edit-light.png") center no-repeat; | |
331 | width: 20px; | |
332 | height: 16px; | |
333 | cursor: pointer; | |
334 | } | |
335 | .dbg-variable-throbber { | |
336 | background: url("chrome://global/skin/icons/loading.gif") center no-repeat; | |
337 | width: 16px; | |
338 | height: 16px; | |
eec397be RK |
339 | } |
340 | ||
341 | /** | |
342 | * Scope element | |
343 | */ | |
344 | ||
56ab361a RK |
345 | .scope:focus > .title { |
346 | background: #008484; | |
347 | color: #000000; | |
348 | } | |
349 | ||
eec397be | 350 | .scope > .title { |
eec397be RK |
351 | background: #E7ADE7; |
352 | border-radius: 5px; | |
353 | color: #000000; | |
354 | } | |
355 | ||
eec397be RK |
356 | .scope > .details { |
357 | -moz-margin-start: 2px; | |
358 | -moz-margin-end: 2px; | |
359 | } | |
360 | ||
b8384c33 RK |
361 | .scope > .details.nonenum:not(:empty) { |
362 | border-top: 1px solid #9C9CFF; | |
363 | } | |
364 | ||
eec397be RK |
365 | /** |
366 | * Variable element | |
367 | */ | |
368 | ||
369 | .variable { | |
370 | -moz-margin-start: 1px; | |
371 | -moz-margin-end: 1px; | |
990cba4b | 372 | border-bottom: 1px solid #008484; |
990cba4b | 373 | transition: background 1s ease-in-out; |
c29b709d RK |
374 | } |
375 | ||
85cfb236 | 376 | .variable[changed] { |
85cfb236 | 377 | background: #FFCF00; |
990cba4b | 378 | transition-duration: 0.4s; |
85cfb236 RK |
379 | } |
380 | ||
56ab361a RK |
381 | .scope:focus > .title { |
382 | background: #008484; | |
383 | color: #000000; | |
384 | border-radius: 4px; | |
385 | } | |
386 | ||
b8384c33 | 387 | .variable > .title > .name { |
b8384c33 | 388 | font-weight: 600; |
85cfb236 RK |
389 | } |
390 | ||
56ab361a RK |
391 | .variable:not(:focus) > .title > .name { |
392 | color: #FF9F00; | |
393 | } | |
394 | ||
b8384c33 RK |
395 | .variable > .title > .value { |
396 | -moz-padding-start: 6px; | |
990cba4b | 397 | -moz-padding-end: 4px; |
eec397be RK |
398 | } |
399 | ||
56ab361a RK |
400 | .variable[editable] > .title > .value { |
401 | cursor: text; | |
402 | } | |
403 | ||
b8384c33 RK |
404 | .variable:not([non-header]) > .details { |
405 | -moz-margin-start: 10px; | |
eec397be RK |
406 | } |
407 | ||
408 | /** | |
409 | * Property element | |
410 | */ | |
411 | ||
b8384c33 RK |
412 | .property { |
413 | transition: background 1s ease-in-out; | |
b8384c33 RK |
414 | border-radius: 8px; |
415 | } | |
416 | ||
417 | .property[changed] { | |
418 | transition-duration: 0.4s; | |
419 | background: rgba(255, 207, 0, 0.8); | |
eec397be RK |
420 | } |
421 | ||
56ab361a RK |
422 | .property:focus > .title { |
423 | background: #008484; | |
424 | color: #000000; | |
425 | border-radius: 4px; | |
426 | } | |
427 | ||
428 | .property:not(:focus) > .title > .name { | |
85cfb236 | 429 | color: #E7ADE7; |
eec397be RK |
430 | } |
431 | ||
b8384c33 RK |
432 | .property > .title > .value { |
433 | -moz-padding-start: 6px; | |
990cba4b | 434 | -moz-padding-end: 4px; |
56ab361a RK |
435 | cursor: text; |
436 | } | |
437 | ||
438 | .property[editable] > .title > .value { | |
439 | cursor: text; | |
b8384c33 RK |
440 | } |
441 | ||
442 | .property:not([non-header]) > .details { | |
443 | -moz-margin-start: 10px; | |
444 | } | |
445 | ||
eec397be | 446 | /** |
56ab361a | 447 | * Non enumerable, configurable and writable variables and properties |
37953ab4 RK |
448 | */ |
449 | ||
b8384c33 RK |
450 | .variable[proto] > .title > .name, |
451 | .property[proto] > .title > .name, | |
452 | .variable[non-enumerable]:not([self]):not([exception]) > .title > .name, | |
453 | .property[non-enumerable]:not([self]):not([exception]) > .title > .name { | |
37953ab4 RK |
454 | opacity: 0.5; |
455 | } | |
456 | ||
457 | .variable[non-configurable] > .title > .name, | |
b8384c33 | 458 | .property[non-configurable] > .title > .name { |
37953ab4 RK |
459 | border-bottom: 1px dashed #9C9CFF; |
460 | } | |
461 | ||
b8384c33 RK |
462 | .variable[non-configurable][non-writable] > .title > .name, |
463 | .property[non-configurable][non-writable] > .title > .name { | |
37953ab4 RK |
464 | border-bottom: 1px dashed #FF0000; |
465 | } | |
466 | ||
467 | .variable[non-writable] > .title:after, | |
468 | .property[non-writable] > .title:after { | |
469 | content: " "; | |
470 | display: inline-block; | |
471 | width: 16px; | |
472 | height: 16px; | |
473 | background: url("chrome://browser/skin/identity-icons-https.png") no-repeat; | |
474 | opacity: 0.5; | |
475 | } | |
476 | ||
b8384c33 RK |
477 | /* |
478 | @media (min-resolution: 2dppx) { | |
479 | .variable[non-writable] > .title:after, | |
480 | .property[non-writable] > .title:after { | |
481 | background-image: url("chrome://browser/skin/identity-icons-https@2x.png"); | |
482 | background-size: 32px; | |
483 | } | |
484 | } | |
485 | */ | |
486 | ||
56ab361a RK |
487 | .variable[exception]:not(:focus) > .title > .name, |
488 | .property[exception]:not(:focus) > .title > .name { | |
b8384c33 RK |
489 | color: #FF0000; |
490 | } | |
491 | ||
492 | .variable > tooltip > label, | |
493 | .property > tooltip > label { | |
889649fd RK |
494 | margin: 0 2px 0 2px; |
495 | } | |
496 | ||
b8384c33 RK |
497 | .variable[non-enumerable] > tooltip > label[value="enumerable"], |
498 | .property[non-enumerable] > tooltip > label[value="enumerable"], | |
499 | .variable[non-configurable] > tooltip > label[value="configurable"], | |
500 | .property[non-configurable] > tooltip > label[value="configurable"], | |
501 | .variable[non-writable] > tooltip > label[value="writable"], | |
502 | .property[non-writable] > tooltip > label[value="writable"] { | |
889649fd RK |
503 | text-decoration: line-through; |
504 | } | |
505 | ||
990cba4b RK |
506 | /** |
507 | * Variables and properties editing | |
508 | */ | |
509 | ||
56ab361a RK |
510 | .element-value-input { |
511 | -moz-margin-start: 4px !important; | |
990cba4b RK |
512 | } |
513 | ||
56ab361a RK |
514 | .element-name-input { |
515 | -moz-margin-start: -2px !important; | |
990cba4b RK |
516 | color: #E7ADE7; |
517 | font-weight: 600; | |
518 | } | |
519 | ||
56ab361a RK |
520 | .element-value-input, |
521 | .element-name-input { | |
522 | max-width: 30em; | |
523 | border: 1px solid #9C9CFF !important; | |
524 | } | |
525 | ||
37953ab4 | 526 | /** |
b8384c33 RK |
527 | * Variables and properties searching |
528 | */ | |
529 | ||
0142a07b | 530 | .variables-searchinput.devtools-searchinput { |
b8384c33 RK |
531 | min-height: 24px; |
532 | } | |
533 | ||
534 | .variable[non-match], | |
535 | .property[non-match] { | |
536 | border: none; | |
537 | margin: 0; | |
538 | } | |
539 | ||
540 | /** | |
541 | * Token value colors | |
eec397be RK |
542 | */ |
543 | ||
56ab361a | 544 | .variable-or-property:not(:focus) > .title > .token-undefined { |
eec397be RK |
545 | color: #8050B0; |
546 | } | |
547 | ||
56ab361a | 548 | .variable-or-property:not(:focus) > .title > .token-null { |
eec397be RK |
549 | color: #008484; |
550 | } | |
551 | ||
56ab361a | 552 | .variable-or-property:not(:focus) > .title > .token-boolean { |
eec397be RK |
553 | color: #FFCF00; |
554 | } | |
555 | ||
56ab361a | 556 | .variable-or-property:not(:focus) > .title > .token-number { |
eec397be RK |
557 | color: #E7ADE7; |
558 | } | |
559 | ||
56ab361a RK |
560 | .variable-or-property:not(:focus) > .title > .token-string { |
561 | max-width: 30em; | |
eec397be RK |
562 | color: #9C9CFF; |
563 | } | |
564 | ||
56ab361a | 565 | .variable-or-property:not(:focus) > .title > .token-other { |
eec397be RK |
566 | color: #FF9F00; |
567 | } | |
568 | ||
569 | /** | |
570 | * Expand/collapse arrow | |
571 | */ | |
572 | ||
573 | .arrow { | |
574 | width: 9px; | |
575 | height: 9px; | |
576 | -moz-margin-start: 5px; | |
577 | -moz-margin-end: 5px; | |
85cfb236 | 578 | margin-top: -2px; |
eec397be RK |
579 | background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat; |
580 | } | |
581 | ||
582 | .arrow[open] { | |
583 | background-image: url("chrome://global/skin/tree/twisty-open.gif"); | |
584 | } | |
585 | ||
586 | .scope > .title > .arrow { | |
587 | background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif"); | |
588 | } | |
589 | ||
590 | .scope > .title > .arrow[open] { | |
591 | background-image: url("chrome://global/skin/tree/twisty-open-selected.gif"); | |
592 | } | |
593 | ||
b8384c33 RK |
594 | .arrow[invisible] { |
595 | visibility: hidden; | |
596 | } | |
597 | ||
5322a392 RK |
598 | /** |
599 | * Toolbar Controls | |
600 | */ | |
601 | ||
c29b709d | 602 | #toggle-panes { |
c29b709d RK |
603 | list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); |
604 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
605 | } | |
606 | ||
b8384c33 | 607 | #toggle-panes:not([panesHidden]) { |
c29b709d RK |
608 | list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); |
609 | } | |
610 | ||
611 | #toggle-panes:hover, | |
612 | #toggle-panes:hover:active { | |
613 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
614 | } | |
615 | ||
5322a392 | 616 | #resume { |
37953ab4 | 617 | list-style-image: url("chrome://browser/skin/devtools/debugger-play.png"); |
5322a392 RK |
618 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
619 | } | |
620 | ||
621 | #resume[checked=true], | |
622 | #resume:hover { | |
623 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
624 | } | |
625 | ||
626 | #step-over { | |
627 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png"); | |
628 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
629 | } | |
630 | #step-over:hover { | |
631 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
632 | } | |
633 | ||
634 | #step-in { | |
635 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png"); | |
636 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
637 | } | |
638 | #step-in:hover { | |
639 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
640 | } | |
641 | ||
642 | #step-out { | |
643 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png"); | |
644 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
645 | } | |
646 | #step-out:hover { | |
647 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
648 | } | |
649 | ||
650 | #debugger-controls > toolbarbutton { | |
651 | } | |
652 | ||
653 | #debugger-controls > toolbarbutton:last-of-type { | |
654 | } | |
655 | ||
656 | #debugger-controls { | |
657 | } |