browser/themes/shared/devtools/debugger.inc.css@6474c204b198
browser/themes/shared/devtools/debugger.inc.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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/. */
6 /* Sources and breakpoints pane */
8 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
9 border-color: transparent;
10 }
12 #sources-pane > tabs {
13 -moz-border-end: 1px solid;
14 }
16 #sources-pane .devtools-toolbar {
17 border: none; /* Remove the devtools-toolbar bottom border. */
18 -moz-border-end: 1px solid;
19 }
21 .theme-dark #sources-pane > tabs,
22 .theme-dark #sources-pane .devtools-toolbar {
23 -moz-border-end-color: black; /* Match the splitter color. */
24 }
26 .theme-light #sources-pane > tabs,
27 .theme-light #sources-pane .devtools-toolbar {
28 -moz-border-end-color: #aaa; /* Match the splitter color. */
29 }
31 /* Sources and breakpoints list */
33 .dbg-source-item {
34 padding: 2px 0px;
35 }
37 .dbg-breakpoint-line {
38 font-weight: 600;
39 }
41 .dbg-breakpoint-text {
42 -moz-padding-start: 6px;
43 font-style: italic;
44 font-size: 90%;
45 }
47 .dbg-breakpoint-checkbox {
48 width: 16px;
49 height: 16px;
50 margin: 2px;
51 }
53 /* Sources toolbar */
55 #sources-toolbar > .devtools-toolbarbutton,
56 #sources-controls > .devtools-toolbarbutton {
57 min-width: 32px;
58 }
60 #black-box {
61 list-style-image: url(debugger-blackbox.png);
62 }
64 #pretty-print {
65 font-weight: bold;
66 }
68 #toggle-breakpoints {
69 list-style-image: url(debugger-toggleBreakpoints.png);
70 }
72 #sources-toolbar .devtools-toolbarbutton:not([label]) {
73 -moz-image-region: rect(0px,16px,16px,0px);
74 }
76 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
77 -moz-image-region: rect(0px,32px,16px,16px);
78 }
80 #sources .black-boxed {
81 color: rgba(128,128,128,0.4);
82 }
84 #sources .selected > .black-boxed {
85 color: rgba(255,255,255,0.4);
86 }
88 #sources .black-boxed > .dbg-breakpoint {
89 display: none;
90 }
92 /* Black box message and source progress meter */
94 #black-boxed-message,
95 #source-progress-container {
96 background: url(background-noise-toolbar.png);
97 /* Prevent the container deck from aquiring the size from this message. */
98 min-width: 1px;
99 min-height: 1px;
100 }
102 #source-progress {
103 min-height: 2em;
104 min-width: 40em;
105 }
107 #black-boxed-message-label,
108 #black-boxed-message-button {
109 text-align: center;
110 font-size: 120%;
111 }
113 #black-boxed-message-button {
114 margin-top: 1em;
115 padding: .25em;
116 }
118 /* Breadcrumbs stack frames view */
120 .dbg-stackframe-details {
121 -moz-padding-start: 4px;
122 }
124 /* Classic stack frames view */
126 .dbg-classic-stackframe {
127 display: block;
128 }
130 .dbg-classic-stackframe-title {
131 font-weight: 600;
132 }
134 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
135 float: right;
136 }
138 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
139 float: left;
140 }
142 .dbg-classic-stackframe-details-url {
143 max-width: 90%;
144 text-align: end;
145 }
147 .theme-dark .dbg-classic-stackframe-details-url {
148 color: #a9bacb; /* Light content text */
149 }
151 .theme-light .dbg-classic-stackframe-details-url {
152 color: #667380; /* Dark grey content text */
153 }
155 .theme-dark .dbg-classic-stackframe-details-sep {
156 color: #b6babf; /* Grey foreground text */
157 }
159 .theme-light .dbg-classic-stackframe-details-sep {
160 color: #585959; /* Grey foreground text */
161 }
163 .theme-dark .dbg-classic-stackframe-details-line {
164 color: #5e88b0; /* Highlight blue grey */
165 }
167 .theme-light .dbg-classic-stackframe-details-line {
168 color: #5f88b0; /* Highlight blue grey */
169 }
171 #callstack-list .selected label {
172 /* Text inside a selected item should not be custom colored. */
173 color: inherit !important;
174 }
176 /* Tracer */
178 #trace {
179 list-style-image: url(tracer-icon.png);
180 -moz-image-region: rect(0px,16px,16px,0px);
181 }
183 #trace[checked] {
184 -moz-image-region: rect(0px,32px,16px,16px);
185 }
187 #clear-tracer {
188 /* Make this button as narrow as the text inside it. */
189 min-width: 1px;
190 }
192 .trace-name {
193 -moz-padding-start: 4px;
194 }
196 /* Tracer dark theme */
198 .theme-dark .trace-item {
199 color: #f5f7fa; /* Light foreground text */
200 }
202 .theme-dark .trace-item.selected-matching {
203 background-color: rgba(29,79,115,.4); /* Select highlight blue at 40% alpha */
204 }
206 .theme-dark .selected > .trace-item {
207 background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */
208 }
210 .theme-dark .trace-call {
211 color: #46afe3; /* Highlight blue */
212 }
214 .theme-dark .trace-return,
215 .theme-dark .trace-yield {
216 color: #70bf53; /* Highlight green */
217 }
219 .theme-dark .trace-throw {
220 color: #eb5368; /* Highlight red */
221 }
223 .theme-dark .trace-param {
224 color: #a9bacb; /* Content text light */
225 }
227 .theme-dark .trace-syntax {
228 color: #8fa1b2; /* Content text grey */
229 }
231 /* Tracer light theme */
233 .theme-light .trace-item {
234 color: #292e33; /* Dark foreground text */
235 }
237 .theme-light .trace-item.selected-matching {
238 background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */
239 }
241 .theme-light .selected > .trace-item {
242 background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
243 }
245 .theme-light .trace-call {
246 color: #0088cc; /* Highlight blue */
247 }
249 .theme-light .trace-return,
250 .theme-light .trace-yield {
251 color: #2cbb0f; /* Highlight green */
252 }
254 .theme-light .trace-throw {
255 color: #ed2655; /* Highlight red */
256 }
258 .theme-light .trace-param {
259 color: #667380; /* Content text dark grey */
260 }
262 .theme-light .trace-syntax {
263 color: #8fa1b2; /* Content text grey */
264 }
266 #tracer-traces .selected label {
267 /* Text inside a selected item should not be custom colored. */
268 color: inherit !important;
269 }
271 /* Watch expressions view */
273 #expressions {
274 min-height: 10px;
275 max-height: 125px;
276 }
278 .dbg-expression {
279 height: 20px;
280 }
282 .dbg-expression-arrow {
283 width: 16px;
284 height: auto;
285 margin: 2px;
286 background: -moz-image-rect(url(commandline-icon.png), 0, 32, 16, 16);
287 }
289 .dbg-expression-input {
290 color: inherit;
291 }
293 .dbg-expression-button {
294 -moz-appearance: none;
295 border: none;
296 background: none;
297 cursor: pointer;
298 text-decoration: underline;
299 }
301 .theme-dark .dbg-expression-button {
302 color: #46afe3; /* Blue highlight color */
303 }
305 .theme-light .dbg-expression-button {
306 color: #0088cc; /* Blue highlight color */
307 }
309 /* Event listeners view */
311 .dbg-event-listener-type {
312 font-weight: 600;
313 }
315 .theme-dark .dbg-event-listener-location {
316 color: #a9bacb; /* Light content text */
317 }
319 .theme-light .dbg-event-listener-location {
320 color: #667380; /* Dark grey content text */
321 }
323 .theme-dark .dbg-event-listener-separator {
324 color: #b6babf; /* Grey foreground text */
325 }
327 .theme-light .dbg-event-listener-separator {
328 color: #585959; /* Grey foreground text */
329 }
331 .theme-dark .dbg-event-listener-targets {
332 color: #5e88b0; /* Highlight blue grey */
333 }
335 .theme-light .dbg-event-listener-targets {
336 color: #5f88b0; /* Highlight blue grey */
337 }
339 .theme-dark #event-listeners .selected {
340 /* Selected items shouldn't be displayed differently. */
341 background: none;
342 color: #fff;
343 }
345 .theme-light #event-listeners .selected {
346 /* Selected items shouldn't be displayed differently. */
347 background: none;
348 color: #000;
349 }
351 /* Searchbox and the search operations help panel */
353 #searchbox {
354 min-width: 220px;
355 -moz-margin-start: 1px;
356 }
358 #filter-label {
359 -moz-margin-start: 2px;
360 }
362 #searchbox-panel-operators {
363 margin-top: 5px;
364 margin-bottom: 8px;
365 -moz-margin-start: 2px;
366 }
368 .searchbox-panel-operator-button {
369 min-width: 26px;
370 margin-top: 0;
371 margin-bottom: 0;
372 -moz-margin-start: 2px;
373 -moz-margin-end: 6px;
374 text-align: center;
375 }
377 .searchbox-panel-operator-label {
378 padding-bottom: 2px;
379 }
381 /* Searchbox results panel */
383 #results-panel {
384 border: none;
385 }
387 .results-panel-item {
388 padding: 6px 8px;
389 border-top: 1px solid rgba(128,128,128,0.2);
390 }
392 .results-panel-item:first-of-type {
393 border-top: none;
394 }
396 .results-panel-item-label {
397 font-weight: 600;
398 }
400 .results-panel-item-label-before {
401 -moz-padding-end: 6px;
402 }
404 .theme-dark .results-panel-item-label {
405 color: #f5f7fa; /* Light foreground text */
406 }
408 .theme-light .results-panel-item-label {
409 color: #18191a; /* Dark foreground text */
410 }
412 .theme-dark .results-panel-item-label-before {
413 color: #5e88b0; /* Highlight blue grey */
414 }
416 .theme-light .results-panel-item-label-before {
417 color: #5f88b0; /* Highlight blue grey */
418 }
420 .theme-dark .results-panel-item-label-below {
421 color: #5f7387; /* Dark grey content text */
422 }
424 .theme-light .results-panel-item-label-below {
425 color: #667380; /* Dark grey content text */
426 }
428 #results-panel .selected label {
429 /* Text inside a selected item should not be custom colored. */
430 color: inherit !important;
431 }
433 /* Sources search view */
435 #globalsearch {
436 min-height: 10px;
437 max-height: 50vh;
438 }
440 .dbg-results-header {
441 -moz-padding-start: 6px;
442 }
444 .dbg-results-header-location {
445 font-weight: 600;
446 }
448 .dbg-results-header-match-count {
449 -moz-padding-start: 6px;
450 }
452 .dbg-results-line-number {
453 min-width: 3em;
454 -moz-border-end: 1px solid rgba(128,128,128,0.2);
455 -moz-padding-end: 4px;
456 text-align: end;
457 }
459 .dbg-results-line-contents {
460 -moz-padding-start: 4px;
461 }
463 .dbg-results-line-contents-string[match=true] {
464 background-color: rgba(255,255,0,0.2);
465 border: 1px solid rgba(128,128,128,0.7);
466 border-radius: 4px;
467 margin-top: -1px !important;
468 margin-bottom: -1px !important;
469 cursor: pointer;
470 }
472 .dbg-results-line-contents-string[match=true][focusing] {
473 transition: transform 0.3s ease-in-out;
474 }
476 .dbg-results-line-contents-string[match=true][focused] {
477 transition-duration: 0.1s;
478 transform: scale(1.75, 1.75);
479 }
481 .theme-dark .dbg-source-results:not(.selected):hover {
482 background-color: #181d20; /* Sidebar background */
483 }
485 .theme-light .dbg-source-results:not(.selected):hover {
486 background-color: #f7f7f7; /* Sidebar background */
487 }
489 .theme-dark .dbg-results-header {
490 background-color: #252c33; /* Tab toolbar */
491 color: #a9bacb; /* Light content text */
492 }
494 .theme-light .dbg-results-header {
495 background-color: #ebeced; /* Tab toolbar */
496 color: #667380; /* Dark grey content text */
497 }
499 .theme-dark .dbg-search-result:hover {
500 background-color: rgba(29,79,115,.2); /* Select highlight blue at 40% alpha */
501 }
503 .theme-light .dbg-search-result:hover {
504 background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
505 }
507 .theme-dark .dbg-results-header-match-count {
508 color: #5f7387; /* Dark grey content text */
509 }
511 .theme-light .dbg-results-header-match-count {
512 color: #667380; /* Dark grey content text */
513 }
515 .theme-dark .dbg-results-line-number {
516 background-color: #252c33; /* Tab toolbars */
517 color: #b6babf; /* Grey foreground text */
518 }
520 .theme-light .dbg-results-line-number {
521 background-color: #ebeced; /* Tab toolbars */
522 color: #585959; /* Grey foreground text */
523 }
525 .theme-dark .dbg-results-line-contents-string {
526 color: #b6babf; /* Grey foreground text */
527 }
529 .theme-light .dbg-results-line-contents-string {
530 color: #585959; /* Grey foreground text */
531 }
533 .theme-dark .dbg-results-line-contents-string[match=true] {
534 color: #f5f7fa; /* Light foreground text */
535 }
537 .theme-light .dbg-results-line-contents-string[match=true] {
538 color: #18191a; /* Dark foreground text */
539 }
541 /* Toolbar controls */
543 .devtools-sidebar-tabs > tabs > tab {
544 min-height: 1em !important;
545 padding: 0 !important;
546 }
548 #resume {
549 list-style-image: url(debugger-pause.png);
550 -moz-image-region: rect(0px,16px,16px,0px);
551 transition: background 0.15s ease-in-out;
552 }
554 #resume[checked] {
555 background: none;
556 list-style-image: url(debugger-play.png);
557 -moz-image-region: rect(0px,32px,16px,16px);
558 }
560 #resume ~ toolbarbutton {
561 transition: opacity 0.15s ease-in-out;
562 }
564 #resume:not([checked]) ~ toolbarbutton {
565 opacity: 0.5;
566 }
568 #step-over {
569 list-style-image: url(debugger-step-over.png);
570 }
572 #step-in {
573 list-style-image: url(debugger-step-in.png);
574 }
576 #step-out {
577 list-style-image: url(debugger-step-out.png);
578 }
580 #instruments-pane-toggle {
581 background: none;
582 box-shadow: none;
583 border: none;
584 list-style-image: url(debugger-collapse.png);
585 -moz-image-region: rect(0px,16px,16px,0px);
586 }
588 #instruments-pane-toggle[pane-collapsed] {
589 list-style-image: url(debugger-expand.png);
590 }
592 #instruments-pane-toggle:active {
593 -moz-image-region: rect(0px,32px,16px,16px);
594 }
596 /* Horizontal vs. vertical layout */
598 #vertical-layout-panes-container {
599 min-height: 35vh;
600 max-height: 80vh;
601 }
603 #body[layout=vertical] #sources-pane > tabs {
604 -moz-border-end: none;
605 }
607 #body[layout=vertical] #instruments-pane {
608 margin: 0 !important;
609 /* To prevent all the margin hacks to hide the sidebar. */
610 }
612 #body[layout=vertical] .side-menu-widget-container,
613 #body[layout=vertical] .side-menu-widget-empty-text {
614 box-shadow: none !important;
615 }
617 #body[layout=vertical] .side-menu-widget-item-arrow {
618 background-image: none !important;
619 }
621 #body[layout=vertical] .side-menu-widget-group,
622 #body[layout=vertical] .side-menu-widget-item {
623 -moz-margin-end: 0;
624 }
