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 { | |
189 | background-color: #000000; | |
190 | min-width: 50px; | |
191 | } | |
192 | ||
193 | #stackframes\+breakpoints[animated] { | |
b8384c33 | 194 | transition: margin 0.25s ease-in-out; |
c29b709d RK |
195 | } |
196 | ||
990cba4b RK |
197 | /** |
198 | * Variables and watch expressions pane | |
199 | */ | |
200 | ||
201 | #variables\+expressions { | |
202 | background-color: #000000; | |
203 | min-width: 50px; | |
204 | } | |
205 | ||
206 | #variables\+expressions[animated] { | |
207 | transition: margin 0.25s ease-in-out; | |
208 | } | |
209 | ||
c29b709d RK |
210 | /** |
211 | * Stack frames view | |
eec397be RK |
212 | */ |
213 | ||
214 | #stackframes { | |
215 | /* background-color: white; */ | |
990cba4b | 216 | min-height: 10px; |
eec397be RK |
217 | } |
218 | ||
219 | .dbg-stackframe { | |
220 | -moz-padding-start: 4px; | |
221 | -moz-padding-end: 4px; | |
222 | } | |
223 | ||
224 | .dbg-stackframe-name { | |
225 | font-weight: 600; | |
226 | } | |
227 | ||
990cba4b RK |
228 | .dbg-stackframe-details { |
229 | -moz-padding-start: 4px; | |
230 | } | |
231 | ||
889649fd RK |
232 | /** |
233 | * Breakpoints view | |
234 | */ | |
235 | ||
236 | #breakpoints { | |
237 | background-color: #000000; | |
990cba4b RK |
238 | min-height: 10px; |
239 | } | |
240 | ||
241 | #breakpoints > vbox:not(:empty) { | |
242 | min-height: 10px; | |
243 | max-height: 200px; | |
244 | } | |
245 | ||
246 | .dbg-breakpoint:not(:last-child) { | |
247 | border-bottom: 1px solid #008484; | |
889649fd RK |
248 | } |
249 | ||
250 | .dbg-breakpoint-info { | |
251 | font-weight: 600; | |
252 | } | |
253 | ||
254 | .dbg-breakpoint-text { | |
255 | font: 12px "Liberation Mono", Consolas, "Courier New", monospace; | |
256 | } | |
257 | ||
990cba4b RK |
258 | #conditional-breakpoint-panel .description { |
259 | margin: -6px 0 8px 0; | |
260 | } | |
261 | ||
262 | #conditional-breakpoint-panel textbox { | |
263 | margin: 0 0 -2px 0; | |
264 | } | |
265 | ||
266 | /** | |
267 | * Watch expressions view | |
268 | */ | |
269 | ||
270 | #expressions { | |
271 | background-color: #000000; | |
272 | min-height: 10px; | |
273 | } | |
274 | ||
275 | .dbg-expression { | |
276 | height: 20px; | |
277 | -moz-padding-start: 8px; | |
278 | } | |
279 | ||
280 | .dbg-expression-arrow { | |
281 | width: 10px; | |
282 | height: auto; | |
283 | background: url("chrome://browser/skin/devtools/commandline.png") 0px 4px no-repeat; | |
284 | } | |
285 | ||
286 | .dbg-expression-input { | |
287 | font: 9pt monospace; | |
288 | } | |
289 | ||
290 | .dbg-expression-delete { | |
291 | -moz-image-region: rect(0, 32px, 16px, 16px); | |
292 | } | |
293 | ||
eec397be | 294 | /** |
b8384c33 | 295 | * Variables view |
eec397be RK |
296 | */ |
297 | ||
298 | #variables { | |
299 | /* background-color: white; */ | |
990cba4b | 300 | min-height: 10px; |
c29b709d RK |
301 | } |
302 | ||
990cba4b RK |
303 | .dbg-variables-delete:not(:hover) { |
304 | -moz-image-region: rect(0, 32px, 16px, 16px); | |
305 | opacity: 0.5; | |
eec397be RK |
306 | } |
307 | ||
308 | /** | |
309 | * Scope element | |
310 | */ | |
311 | ||
312 | .scope > .title { | |
eec397be RK |
313 | background: #E7ADE7; |
314 | border-radius: 5px; | |
315 | color: #000000; | |
316 | } | |
317 | ||
eec397be RK |
318 | .scope > .details { |
319 | -moz-margin-start: 2px; | |
320 | -moz-margin-end: 2px; | |
321 | } | |
322 | ||
b8384c33 RK |
323 | .scope > .details.nonenum:not(:empty) { |
324 | border-top: 1px solid #9C9CFF; | |
325 | } | |
326 | ||
eec397be RK |
327 | /** |
328 | * Variable element | |
329 | */ | |
330 | ||
331 | .variable { | |
332 | -moz-margin-start: 1px; | |
333 | -moz-margin-end: 1px; | |
990cba4b | 334 | border-bottom: 1px solid #008484; |
85cfb236 | 335 | background: #000000; |
990cba4b | 336 | transition: background 1s ease-in-out; |
c29b709d RK |
337 | } |
338 | ||
85cfb236 | 339 | .variable[changed] { |
85cfb236 | 340 | background: #FFCF00; |
990cba4b | 341 | transition-duration: 0.4s; |
85cfb236 RK |
342 | } |
343 | ||
b8384c33 RK |
344 | .variable > .title > .name { |
345 | color: #FF9F00; | |
346 | font-weight: 600; | |
85cfb236 RK |
347 | } |
348 | ||
b8384c33 RK |
349 | .variable > .title > .value { |
350 | -moz-padding-start: 6px; | |
990cba4b | 351 | -moz-padding-end: 4px; |
eec397be RK |
352 | } |
353 | ||
b8384c33 RK |
354 | .variable:not([non-header]) > .details { |
355 | -moz-margin-start: 10px; | |
eec397be RK |
356 | } |
357 | ||
358 | /** | |
359 | * Property element | |
360 | */ | |
361 | ||
b8384c33 RK |
362 | .property { |
363 | transition: background 1s ease-in-out; | |
364 | background: #000000; | |
365 | border-radius: 8px; | |
366 | } | |
367 | ||
368 | .property[changed] { | |
369 | transition-duration: 0.4s; | |
370 | background: rgba(255, 207, 0, 0.8); | |
eec397be RK |
371 | } |
372 | ||
b8384c33 | 373 | .property > .title > .name { |
85cfb236 | 374 | color: #E7ADE7; |
eec397be RK |
375 | } |
376 | ||
b8384c33 RK |
377 | .property > .title > .value { |
378 | -moz-padding-start: 6px; | |
990cba4b | 379 | -moz-padding-end: 4px; |
b8384c33 RK |
380 | } |
381 | ||
382 | .property:not([non-header]) > .details { | |
383 | -moz-margin-start: 10px; | |
384 | } | |
385 | ||
eec397be | 386 | /** |
37953ab4 RK |
387 | * Non enumerable, configurable and writable variables and properties. |
388 | */ | |
389 | ||
b8384c33 RK |
390 | .variable[proto] > .title > .name, |
391 | .property[proto] > .title > .name, | |
392 | .variable[non-enumerable]:not([self]):not([exception]) > .title > .name, | |
393 | .property[non-enumerable]:not([self]):not([exception]) > .title > .name { | |
37953ab4 RK |
394 | opacity: 0.5; |
395 | } | |
396 | ||
397 | .variable[non-configurable] > .title > .name, | |
b8384c33 | 398 | .property[non-configurable] > .title > .name { |
37953ab4 RK |
399 | border-bottom: 1px dashed #9C9CFF; |
400 | } | |
401 | ||
b8384c33 RK |
402 | .variable[non-configurable][non-writable] > .title > .name, |
403 | .property[non-configurable][non-writable] > .title > .name { | |
37953ab4 RK |
404 | border-bottom: 1px dashed #FF0000; |
405 | } | |
406 | ||
407 | .variable[non-writable] > .title:after, | |
408 | .property[non-writable] > .title:after { | |
409 | content: " "; | |
410 | display: inline-block; | |
411 | width: 16px; | |
412 | height: 16px; | |
413 | background: url("chrome://browser/skin/identity-icons-https.png") no-repeat; | |
414 | opacity: 0.5; | |
415 | } | |
416 | ||
b8384c33 RK |
417 | /* |
418 | @media (min-resolution: 2dppx) { | |
419 | .variable[non-writable] > .title:after, | |
420 | .property[non-writable] > .title:after { | |
421 | background-image: url("chrome://browser/skin/identity-icons-https@2x.png"); | |
422 | background-size: 32px; | |
423 | } | |
424 | } | |
425 | */ | |
426 | ||
427 | .variable[exception] > .title > .name, | |
428 | .property[exception] > .title > .name { | |
429 | color: #FF0000; | |
430 | } | |
431 | ||
432 | .variable > tooltip > label, | |
433 | .property > tooltip > label { | |
889649fd RK |
434 | margin: 0 2px 0 2px; |
435 | } | |
436 | ||
b8384c33 RK |
437 | .variable[non-enumerable] > tooltip > label[value="enumerable"], |
438 | .property[non-enumerable] > tooltip > label[value="enumerable"], | |
439 | .variable[non-configurable] > tooltip > label[value="configurable"], | |
440 | .property[non-configurable] > tooltip > label[value="configurable"], | |
441 | .variable[non-writable] > tooltip > label[value="writable"], | |
442 | .property[non-writable] > tooltip > label[value="writable"] { | |
889649fd RK |
443 | text-decoration: line-through; |
444 | } | |
445 | ||
990cba4b RK |
446 | /** |
447 | * Variables and properties editing | |
448 | */ | |
449 | ||
450 | #variables .element-value-input { | |
451 | -moz-margin-start: 5px !important; | |
452 | } | |
453 | ||
454 | #variables .element-name-input { | |
455 | -moz-margin-start: -1px !important; | |
456 | color: #E7ADE7; | |
457 | font-weight: 600; | |
458 | } | |
459 | ||
37953ab4 | 460 | /** |
b8384c33 RK |
461 | * Variables and properties searching |
462 | */ | |
463 | ||
0142a07b | 464 | .variables-searchinput.devtools-searchinput { |
b8384c33 RK |
465 | min-height: 24px; |
466 | } | |
467 | ||
468 | .variable[non-match], | |
469 | .property[non-match] { | |
470 | border: none; | |
471 | margin: 0; | |
472 | } | |
473 | ||
474 | /** | |
475 | * Token value colors | |
eec397be RK |
476 | */ |
477 | ||
478 | .token-undefined { | |
eec397be RK |
479 | color: #8050B0; |
480 | } | |
481 | ||
482 | .token-null { | |
eec397be RK |
483 | color: #008484; |
484 | } | |
485 | ||
486 | .token-boolean { | |
eec397be RK |
487 | color: #FFCF00; |
488 | } | |
489 | ||
490 | .token-number { | |
eec397be RK |
491 | color: #E7ADE7; |
492 | } | |
493 | ||
494 | .token-string { | |
eec397be RK |
495 | color: #9C9CFF; |
496 | } | |
497 | ||
498 | .token-other { | |
eec397be RK |
499 | color: #FF9F00; |
500 | } | |
501 | ||
502 | /** | |
503 | * Expand/collapse arrow | |
504 | */ | |
505 | ||
506 | .arrow { | |
507 | width: 9px; | |
508 | height: 9px; | |
509 | -moz-margin-start: 5px; | |
510 | -moz-margin-end: 5px; | |
85cfb236 | 511 | margin-top: -2px; |
eec397be RK |
512 | background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat; |
513 | } | |
514 | ||
515 | .arrow[open] { | |
516 | background-image: url("chrome://global/skin/tree/twisty-open.gif"); | |
517 | } | |
518 | ||
519 | .scope > .title > .arrow { | |
520 | background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif"); | |
521 | } | |
522 | ||
523 | .scope > .title > .arrow[open] { | |
524 | background-image: url("chrome://global/skin/tree/twisty-open-selected.gif"); | |
525 | } | |
526 | ||
b8384c33 RK |
527 | .arrow[invisible] { |
528 | visibility: hidden; | |
529 | } | |
530 | ||
5322a392 RK |
531 | /** |
532 | * Toolbar Controls | |
533 | */ | |
534 | ||
c29b709d | 535 | #toggle-panes { |
c29b709d RK |
536 | list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); |
537 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
538 | } | |
539 | ||
b8384c33 | 540 | #toggle-panes:not([panesHidden]) { |
c29b709d RK |
541 | list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); |
542 | } | |
543 | ||
544 | #toggle-panes:hover, | |
545 | #toggle-panes:hover:active { | |
546 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
547 | } | |
548 | ||
5322a392 | 549 | #resume { |
37953ab4 | 550 | list-style-image: url("chrome://browser/skin/devtools/debugger-play.png"); |
5322a392 RK |
551 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
552 | } | |
553 | ||
554 | #resume[checked=true], | |
555 | #resume:hover { | |
556 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
557 | } | |
558 | ||
559 | #step-over { | |
560 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png"); | |
561 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
562 | } | |
563 | #step-over:hover { | |
564 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
565 | } | |
566 | ||
567 | #step-in { | |
568 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png"); | |
569 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
570 | } | |
571 | #step-in:hover { | |
572 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
573 | } | |
574 | ||
575 | #step-out { | |
576 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png"); | |
577 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
578 | } | |
579 | #step-out:hover { | |
580 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
581 | } | |
582 | ||
583 | #debugger-controls > toolbarbutton { | |
584 | } | |
585 | ||
586 | #debugger-controls > toolbarbutton:last-of-type { | |
587 | } | |
588 | ||
589 | #debugger-controls { | |
590 | } |