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 { |
c29b709d | 20 | min-width: 150px; |
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; | |
c29b709d RK |
59 | max-height: 150px; |
60 | } | |
61 | ||
b8384c33 | 62 | .dbg-source-results:not(:last-child) { |
c29b709d RK |
63 | border-bottom: 1px dotted #9C9CFF; |
64 | } | |
65 | ||
66 | .dbg-results-header { | |
67 | -moz-padding-start: 6px; | |
68 | } | |
69 | ||
b8384c33 | 70 | .dbg-results-header .location { |
c29b709d RK |
71 | font-weight: 600; |
72 | } | |
73 | ||
74 | .dbg-results-header .match-count { | |
75 | -moz-padding-start: 6px; | |
b8384c33 | 76 | color: #8050B0; |
c29b709d RK |
77 | } |
78 | ||
79 | .dbg-results-container .line-number { | |
80 | background: #000000; | |
b8384c33 | 81 | min-width: 40px; |
c29b709d RK |
82 | -moz-padding-end: 4px; |
83 | -moz-border-end: 1px dotted #9C9CFF; | |
84 | text-align: end; | |
85 | font: 8pt monospace; | |
b8384c33 | 86 | color: #FF9F00; |
c29b709d RK |
87 | } |
88 | ||
89 | .dbg-results-container .line-contents { | |
90 | -moz-padding-start: 4px; | |
91 | font: 8pt monospace; | |
92 | } | |
93 | ||
94 | .dbg-results-container .line-contents:hover { | |
95 | background: #000000; | |
96 | } | |
97 | ||
98 | .dbg-results-container .line-contents > .string { | |
99 | padding: 1px; | |
100 | } | |
101 | ||
102 | .dbg-results-container .line-contents > .string[match=true] { | |
103 | background: #E7ADE7; | |
104 | color: #000000; | |
105 | padding: 0; | |
106 | border: 1px solid #9C9CFF; | |
107 | border-radius: 4px; | |
108 | cursor: pointer; | |
b8384c33 | 109 | transition: transform 0.25s ease-in-out; |
c29b709d RK |
110 | } |
111 | ||
112 | .dbg-results-container .line-contents > .string[match=true][focused] { | |
113 | transition-duration: 0.1s; | |
114 | transform: scale(1.75, 1.75); | |
115 | } | |
116 | ||
b8384c33 RK |
117 | #searchbox-panel .description { |
118 | margin: -6px 0 8px; | |
7bc075b6 RK |
119 | } |
120 | ||
b8384c33 | 121 | #searchbox-panel button.operator { |
7bc075b6 RK |
122 | min-width: 0; |
123 | margin: 0; | |
124 | padding: 0; | |
125 | font: 9pt "Liberation Mono", Consolas, "Courier New", monospace; | |
126 | } | |
127 | ||
b8384c33 | 128 | #searchbox-panel label.operator { |
7bc075b6 RK |
129 | -moz-padding-start: 6px; |
130 | padding-bottom: 1px; | |
131 | } | |
132 | ||
c29b709d | 133 | /** |
b8384c33 | 134 | * Stack frames and breakpoints pane |
c29b709d RK |
135 | */ |
136 | ||
137 | #stackframes\+breakpoints { | |
138 | background-color: #000000; | |
139 | min-width: 50px; | |
140 | } | |
141 | ||
142 | #stackframes\+breakpoints[animated] { | |
b8384c33 | 143 | transition: margin 0.25s ease-in-out; |
c29b709d RK |
144 | } |
145 | ||
990cba4b RK |
146 | /** |
147 | * Variables and watch expressions pane | |
148 | */ | |
149 | ||
150 | #variables\+expressions { | |
151 | background-color: #000000; | |
152 | min-width: 50px; | |
153 | } | |
154 | ||
155 | #variables\+expressions[animated] { | |
156 | transition: margin 0.25s ease-in-out; | |
157 | } | |
158 | ||
c29b709d RK |
159 | /** |
160 | * Stack frames view | |
eec397be RK |
161 | */ |
162 | ||
163 | #stackframes { | |
164 | /* background-color: white; */ | |
990cba4b | 165 | min-height: 10px; |
eec397be RK |
166 | } |
167 | ||
168 | .dbg-stackframe { | |
169 | -moz-padding-start: 4px; | |
170 | -moz-padding-end: 4px; | |
171 | } | |
172 | ||
173 | .dbg-stackframe-name { | |
174 | font-weight: 600; | |
175 | } | |
176 | ||
990cba4b RK |
177 | .dbg-stackframe-details { |
178 | -moz-padding-start: 4px; | |
179 | } | |
180 | ||
889649fd RK |
181 | /** |
182 | * Breakpoints view | |
183 | */ | |
184 | ||
185 | #breakpoints { | |
186 | background-color: #000000; | |
990cba4b RK |
187 | min-height: 10px; |
188 | } | |
189 | ||
190 | #breakpoints > vbox:not(:empty) { | |
191 | min-height: 10px; | |
192 | max-height: 200px; | |
193 | } | |
194 | ||
195 | .dbg-breakpoint:not(:last-child) { | |
196 | border-bottom: 1px solid #008484; | |
889649fd RK |
197 | } |
198 | ||
199 | .dbg-breakpoint-info { | |
200 | font-weight: 600; | |
201 | } | |
202 | ||
203 | .dbg-breakpoint-text { | |
204 | font: 12px "Liberation Mono", Consolas, "Courier New", monospace; | |
205 | } | |
206 | ||
990cba4b RK |
207 | #conditional-breakpoint-panel .description { |
208 | margin: -6px 0 8px 0; | |
209 | } | |
210 | ||
211 | #conditional-breakpoint-panel textbox { | |
212 | margin: 0 0 -2px 0; | |
213 | } | |
214 | ||
215 | /** | |
216 | * Watch expressions view | |
217 | */ | |
218 | ||
219 | #expressions { | |
220 | background-color: #000000; | |
221 | min-height: 10px; | |
222 | } | |
223 | ||
224 | .dbg-expression { | |
225 | height: 20px; | |
226 | -moz-padding-start: 8px; | |
227 | } | |
228 | ||
229 | .dbg-expression-arrow { | |
230 | width: 10px; | |
231 | height: auto; | |
232 | background: url("chrome://browser/skin/devtools/commandline.png") 0px 4px no-repeat; | |
233 | } | |
234 | ||
235 | .dbg-expression-input { | |
236 | font: 9pt monospace; | |
237 | } | |
238 | ||
239 | .dbg-expression-delete { | |
240 | -moz-image-region: rect(0, 32px, 16px, 16px); | |
241 | } | |
242 | ||
eec397be | 243 | /** |
b8384c33 | 244 | * Variables view |
eec397be RK |
245 | */ |
246 | ||
247 | #variables { | |
248 | /* background-color: white; */ | |
990cba4b | 249 | min-height: 10px; |
c29b709d RK |
250 | } |
251 | ||
990cba4b RK |
252 | .dbg-variables-delete:not(:hover) { |
253 | -moz-image-region: rect(0, 32px, 16px, 16px); | |
254 | opacity: 0.5; | |
eec397be RK |
255 | } |
256 | ||
257 | /** | |
258 | * Scope element | |
259 | */ | |
260 | ||
261 | .scope > .title { | |
eec397be RK |
262 | background: #E7ADE7; |
263 | border-radius: 5px; | |
264 | color: #000000; | |
265 | } | |
266 | ||
eec397be RK |
267 | .scope > .details { |
268 | -moz-margin-start: 2px; | |
269 | -moz-margin-end: 2px; | |
270 | } | |
271 | ||
b8384c33 RK |
272 | .scope > .details.nonenum:not(:empty) { |
273 | border-top: 1px solid #9C9CFF; | |
274 | } | |
275 | ||
eec397be RK |
276 | /** |
277 | * Variable element | |
278 | */ | |
279 | ||
280 | .variable { | |
281 | -moz-margin-start: 1px; | |
282 | -moz-margin-end: 1px; | |
990cba4b | 283 | border-bottom: 1px solid #008484; |
85cfb236 | 284 | background: #000000; |
990cba4b | 285 | transition: background 1s ease-in-out; |
c29b709d RK |
286 | } |
287 | ||
85cfb236 | 288 | .variable[changed] { |
85cfb236 | 289 | background: #FFCF00; |
990cba4b | 290 | transition-duration: 0.4s; |
85cfb236 RK |
291 | } |
292 | ||
b8384c33 RK |
293 | .variable > .title > .name { |
294 | color: #FF9F00; | |
295 | font-weight: 600; | |
85cfb236 RK |
296 | } |
297 | ||
b8384c33 RK |
298 | .variable > .title > .value { |
299 | -moz-padding-start: 6px; | |
990cba4b | 300 | -moz-padding-end: 4px; |
eec397be RK |
301 | } |
302 | ||
b8384c33 RK |
303 | .variable:not([non-header]) > .details { |
304 | -moz-margin-start: 10px; | |
eec397be RK |
305 | } |
306 | ||
307 | /** | |
308 | * Property element | |
309 | */ | |
310 | ||
b8384c33 RK |
311 | .property { |
312 | transition: background 1s ease-in-out; | |
313 | background: #000000; | |
314 | border-radius: 8px; | |
315 | } | |
316 | ||
317 | .property[changed] { | |
318 | transition-duration: 0.4s; | |
319 | background: rgba(255, 207, 0, 0.8); | |
eec397be RK |
320 | } |
321 | ||
b8384c33 | 322 | .property > .title > .name { |
85cfb236 | 323 | color: #E7ADE7; |
eec397be RK |
324 | } |
325 | ||
b8384c33 RK |
326 | .property > .title > .value { |
327 | -moz-padding-start: 6px; | |
990cba4b | 328 | -moz-padding-end: 4px; |
b8384c33 RK |
329 | } |
330 | ||
331 | .property:not([non-header]) > .details { | |
332 | -moz-margin-start: 10px; | |
333 | } | |
334 | ||
eec397be | 335 | /** |
37953ab4 RK |
336 | * Non enumerable, configurable and writable variables and properties. |
337 | */ | |
338 | ||
b8384c33 RK |
339 | .variable[proto] > .title > .name, |
340 | .property[proto] > .title > .name, | |
341 | .variable[non-enumerable]:not([self]):not([exception]) > .title > .name, | |
342 | .property[non-enumerable]:not([self]):not([exception]) > .title > .name { | |
37953ab4 RK |
343 | opacity: 0.5; |
344 | } | |
345 | ||
346 | .variable[non-configurable] > .title > .name, | |
b8384c33 | 347 | .property[non-configurable] > .title > .name { |
37953ab4 RK |
348 | border-bottom: 1px dashed #9C9CFF; |
349 | } | |
350 | ||
b8384c33 RK |
351 | .variable[non-configurable][non-writable] > .title > .name, |
352 | .property[non-configurable][non-writable] > .title > .name { | |
37953ab4 RK |
353 | border-bottom: 1px dashed #FF0000; |
354 | } | |
355 | ||
356 | .variable[non-writable] > .title:after, | |
357 | .property[non-writable] > .title:after { | |
358 | content: " "; | |
359 | display: inline-block; | |
360 | width: 16px; | |
361 | height: 16px; | |
362 | background: url("chrome://browser/skin/identity-icons-https.png") no-repeat; | |
363 | opacity: 0.5; | |
364 | } | |
365 | ||
b8384c33 RK |
366 | /* |
367 | @media (min-resolution: 2dppx) { | |
368 | .variable[non-writable] > .title:after, | |
369 | .property[non-writable] > .title:after { | |
370 | background-image: url("chrome://browser/skin/identity-icons-https@2x.png"); | |
371 | background-size: 32px; | |
372 | } | |
373 | } | |
374 | */ | |
375 | ||
376 | .variable[exception] > .title > .name, | |
377 | .property[exception] > .title > .name { | |
378 | color: #FF0000; | |
379 | } | |
380 | ||
381 | .variable > tooltip > label, | |
382 | .property > tooltip > label { | |
889649fd RK |
383 | margin: 0 2px 0 2px; |
384 | } | |
385 | ||
b8384c33 RK |
386 | .variable[non-enumerable] > tooltip > label[value="enumerable"], |
387 | .property[non-enumerable] > tooltip > label[value="enumerable"], | |
388 | .variable[non-configurable] > tooltip > label[value="configurable"], | |
389 | .property[non-configurable] > tooltip > label[value="configurable"], | |
390 | .variable[non-writable] > tooltip > label[value="writable"], | |
391 | .property[non-writable] > tooltip > label[value="writable"] { | |
889649fd RK |
392 | text-decoration: line-through; |
393 | } | |
394 | ||
990cba4b RK |
395 | /** |
396 | * Variables and properties editing | |
397 | */ | |
398 | ||
399 | #variables .element-value-input { | |
400 | -moz-margin-start: 5px !important; | |
401 | } | |
402 | ||
403 | #variables .element-name-input { | |
404 | -moz-margin-start: -1px !important; | |
405 | color: #E7ADE7; | |
406 | font-weight: 600; | |
407 | } | |
408 | ||
37953ab4 | 409 | /** |
b8384c33 RK |
410 | * Variables and properties searching |
411 | */ | |
412 | ||
413 | #variables .devtools-searchinput { | |
414 | min-height: 24px; | |
415 | } | |
416 | ||
417 | .variable[non-match], | |
418 | .property[non-match] { | |
419 | border: none; | |
420 | margin: 0; | |
421 | } | |
422 | ||
423 | /** | |
424 | * Token value colors | |
eec397be RK |
425 | */ |
426 | ||
427 | .token-undefined { | |
eec397be RK |
428 | color: #8050B0; |
429 | } | |
430 | ||
431 | .token-null { | |
eec397be RK |
432 | color: #008484; |
433 | } | |
434 | ||
435 | .token-boolean { | |
eec397be RK |
436 | color: #FFCF00; |
437 | } | |
438 | ||
439 | .token-number { | |
eec397be RK |
440 | color: #E7ADE7; |
441 | } | |
442 | ||
443 | .token-string { | |
eec397be RK |
444 | color: #9C9CFF; |
445 | } | |
446 | ||
447 | .token-other { | |
eec397be RK |
448 | color: #FF9F00; |
449 | } | |
450 | ||
451 | /** | |
452 | * Expand/collapse arrow | |
453 | */ | |
454 | ||
455 | .arrow { | |
456 | width: 9px; | |
457 | height: 9px; | |
458 | -moz-margin-start: 5px; | |
459 | -moz-margin-end: 5px; | |
85cfb236 | 460 | margin-top: -2px; |
eec397be RK |
461 | background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat; |
462 | } | |
463 | ||
464 | .arrow[open] { | |
465 | background-image: url("chrome://global/skin/tree/twisty-open.gif"); | |
466 | } | |
467 | ||
468 | .scope > .title > .arrow { | |
469 | background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif"); | |
470 | } | |
471 | ||
472 | .scope > .title > .arrow[open] { | |
473 | background-image: url("chrome://global/skin/tree/twisty-open-selected.gif"); | |
474 | } | |
475 | ||
b8384c33 RK |
476 | .arrow[invisible] { |
477 | visibility: hidden; | |
478 | } | |
479 | ||
5322a392 RK |
480 | /** |
481 | * Toolbar Controls | |
482 | */ | |
483 | ||
c29b709d | 484 | #toggle-panes { |
c29b709d RK |
485 | list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); |
486 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
487 | } | |
488 | ||
b8384c33 | 489 | #toggle-panes:not([panesHidden]) { |
c29b709d RK |
490 | list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); |
491 | } | |
492 | ||
493 | #toggle-panes:hover, | |
494 | #toggle-panes:hover:active { | |
495 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
496 | } | |
497 | ||
5322a392 | 498 | #resume { |
37953ab4 | 499 | list-style-image: url("chrome://browser/skin/devtools/debugger-play.png"); |
5322a392 RK |
500 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
501 | } | |
502 | ||
503 | #resume[checked=true], | |
504 | #resume:hover { | |
505 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
506 | } | |
507 | ||
508 | #step-over { | |
509 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png"); | |
510 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
511 | } | |
512 | #step-over:hover { | |
513 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
514 | } | |
515 | ||
516 | #step-in { | |
517 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png"); | |
518 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
519 | } | |
520 | #step-in:hover { | |
521 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
522 | } | |
523 | ||
524 | #step-out { | |
525 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png"); | |
526 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
527 | } | |
528 | #step-out:hover { | |
529 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
530 | } | |
531 | ||
532 | #debugger-controls > toolbarbutton { | |
533 | } | |
534 | ||
535 | #debugger-controls > toolbarbutton:last-of-type { | |
536 | } | |
537 | ||
538 | #debugger-controls { | |
539 | } |