1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
9 /* === BEGIN debugger.inc.css === */
11 /* Sources and breakpoints pane */
13 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
14 border-color: transparent;
17 #sources-pane > tabs {
18 -moz-border-end: 1px solid #9C9CFF; /* Match the splitter color. */
21 #sources-toolbar > .devtools-toolbarbutton,
22 #sources-controls > .devtools-toolbarbutton {
27 list-style-image: url("debugger-blackbox.png");
30 @media (min-resolution: 2dppx) {
32 list-style-image: url(debugger-blackbox@2x.png);
41 list-style-image: url("debugger-toggleBreakpoints.png");
44 @media (min-resolution: 2dppx) {
46 list-style-image: url(debugger-toggleBreakpoints@2x.png);
50 #sources-toolbar .devtools-toolbarbutton:not([label]) {
51 -moz-image-region: rect(0px, 16px, 16px, 0px);
54 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
55 -moz-image-region: rect(16px, 16px, 32px, 0px);
58 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
59 -moz-image-region: rect(0px, 32px, 16px, 16px);
62 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
63 -moz-image-region: rect(16px, 32px, 32px, 16px);
66 @media (min-resolution: 2dppx) {
67 #sources-toolbar .devtools-toolbarbutton:not([label]) {
68 -moz-image-region: rect(0px,32px,32px,0px);
71 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
72 -moz-image-region: rect(32px,32px,64px,0px);
75 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
76 -moz-image-region: rect(0px,64px,32px,32px);
79 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
80 -moz-image-region: rect(32px,64px,64px,32px);
84 #sources .black-boxed {
88 #sources .selected > .black-boxed {
92 #sources .black-boxed > .dbg-breakpoint {
96 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
97 background-image: none;
98 /* box-shadow: inset -1px 0 0 #222426; */
101 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
102 background-image: none;
103 /* box-shadow: inset 1px 0 0 #222426; */
106 /* Black box message and source progress meter */
108 #black-boxed-message,
109 #source-progress-container {
110 background-color: #A09090;
111 /* Prevent the container deck from aquiring the size from this message. */
122 #black-boxed-message-label,
123 #black-boxed-message-button {
128 #black-boxed-message-button {
136 list-style-image: url("tracer-icon.png");
137 -moz-image-region: rect(0px,16px,16px,0px);
142 -moz-image-region: rect(0px,32px,16px,16px);
145 @media (min-resolution: 2dppx) {
147 list-style-image: url(tracer-icon@2x.png);
148 -moz-image-region: rect(0px,32px,32px,0px);
153 -moz-image-region: rect(0px,64px,32px,32px);
158 /* Make this button as narrow as the text inside it. */
163 -moz-padding-start: 4px !important;
166 /* Tracer dark+light theme */
169 color: #FF9F00; /* Light foreground text */
172 .trace-item.selected-matching {
173 background-color: #004242; /* Select highlight blue at 40% alpha */
176 .selected > .trace-item {
177 background-color: #004242; /* Select highlight blue at 75% alpha */
181 color: #9C9CFF; /* highlight blue */
186 color: #008484; /* highlight green */
190 color: #FF0000; /* highlight red */
194 color: #E7ADE7; /* Content text light */
198 color: #A09090; /* highlight grey */
201 /* Breadcrumbs stack frames view */
203 .breadcrumbs-widget-item {
211 .dbg-stackframe-details {
212 -moz-padding-start: 4px;
215 /* Classic stack frames view */
217 .dbg-classic-stackframe {
222 .dbg-classic-stackframe-title {
227 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
231 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
235 .dbg-classic-stackframe-details-url {
241 .dbg-classic-stackframe-details-sep {
245 .dbg-classic-stackframe-details-line {
249 #callstack-list .side-menu-widget-item.selected label {
253 /* Sources and breakpoints view */
256 -moz-margin-start: 4px;
259 .dbg-breakpoint-line {
263 .dbg-breakpoint-text {
264 -moz-margin-start: 10px !important;
269 .dbg-breakpoint-checkbox {
275 /* Variable bubble view */
277 .devtools-tooltip-simple-text.token-undefined,
278 .devtools-tooltip-simple-text.token-null {
280 color: #A09090 !important; /* Override the theme's color. */
283 .devtools-tooltip-simple-text.token-boolean {
285 color: #9C9CFF !important;
288 .devtools-tooltip-simple-text.token-number {
290 color: #E7ADE7 !important;
293 .devtools-tooltip-simple-text.token-string {
295 color: #008484 !important;
298 .devtools-tooltip-simple-text.token-other {
300 color: #FF9F00 !important;
303 /* Instruments pane (watch expressions, variables, event listeners...) */
305 #instruments-pane .side-menu-widget-container,
306 #instruments-pane .side-menu-widget-empty-text {
307 /* box-shadow: none !important; */
310 /* Watch expressions view */
321 .dbg-expression-arrow {
322 background-image: url("commandline-icon.png");
323 background-position: 16px;
324 background-repeat: no-repeat;
325 background-size: 32px 16px;
331 @media (min-resolution: 2dppx) {
332 .dbg-expression-arrow {
333 background-image: url(commandline-icon@2x.png);
337 .dbg-expression-input {
341 .dbg-expression-button {
344 text-decoration: underline;
347 color: #9C9CFF; /* Blue highlight color */
350 /* Event listeners view */
352 .dbg-event-listener {
356 .dbg-event-listener-type {
360 .dbg-event-listener-separator {
364 .dbg-event-listener-targets {
368 .dbg-event-listener-location {
372 #event-listeners .side-menu-widget-item.selected {
373 background: none !important;
376 /* Searchbox and the search operations help panel */
380 -moz-margin-start: 1px;
384 -moz-margin-start: 2px;
387 #searchbox-panel-operators {
390 -moz-margin-start: 2px;
393 .searchbox-panel-operator-button {
397 -moz-margin-start: 2px;
398 -moz-margin-end: 6px;
402 .searchbox-panel-operator-label {
406 /* Searchbox results panel */
412 .results-panel-item {
413 border: 1px solid #A09090;
414 border-top-color: #8050B0;
419 .results-panel-item:first-of-type {
420 border-top-color: #9C9CFF;
421 border-radius: 4px 4px 0 0;
424 .results-panel-item:last-of-type {
425 border-radius: 0 0 4px 4px;
428 .results-panel-item:only-of-type {
432 .results-panel-item:not(.selected):not(:hover) {
433 /* text-shadow: 0 1px #fff;*/
436 .results-panel-item-label-before {
437 -moz-margin-end: 5px !important;
442 .results-panel-item-label {
448 .results-panel-item-label-below {
453 /* Sources search view */
460 #globalsearch + .devtools-horizontal-splitter {
461 -moz-border-top-colors: #9C9CFF;
464 .dbg-source-results {
466 background: none !important;
469 .dbg-source-results:not(.selected):hover {
470 background-color: #000000; /* Sidebar background */
473 .dbg-results-header {
474 -moz-padding-start: 6px;
477 .dbg-results-header-location {
481 .dbg-results-header-match-count {
482 -moz-padding-start: 6px;
486 .dbg-results-line-number {
489 -moz-border-end: 1px solid #9C9CFF;
490 -moz-padding-end: 4px;
496 .dbg-results-line-contents {
497 -moz-padding-start: 4px;
502 .dbg-results-line-contents-string {
506 .dbg-results-line-contents-string[match=true] {
510 border: 1px solid #9C9CFF;
515 .dbg-results-line-contents-string[match=true][focusing] {
516 transition: transform 0.3s ease-in-out;
519 .dbg-results-line-contents-string[match=true][focused] {
520 transition-duration: 0.1s;
521 transform: scale(1.75, 1.75);
524 /* Toolbar controls */
526 .devtools-sidebar-tabs > tabs > tab {
527 /* min-height: 24px !important;
528 padding: 0 !important; */
532 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
533 -moz-image-region: rect(0px, 16px, 16px, 0px);
536 #toggle-panes:not([panesHidden]) {
537 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
541 #toggle-panes:hover:active {
542 -moz-image-region: rect(0px, 32px, 16px, 16px);
545 #debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
546 #sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
552 list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
553 -moz-image-region: rect(0px, 16px, 16px, 0px);
554 /* transition: background 0.15s ease-in-out; */
558 -moz-image-region: rect(0px, 32px, 16px, 16px);
561 #resume[checked=true] {
562 /* background: none; */
563 list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
564 -moz-image-region: rect(0px, 16px, 16px, 0px);
567 #resume[checked=true]:hover {
568 -moz-image-region: rect(0px, 32px, 16px, 16px);
571 @media (min-resolution: 2dppx) {
573 list-style-image: url(debugger-pause@2x.png);
574 -moz-image-region: rect(0px, 32px, 32px, 0px);
578 -moz-image-region: rect(0px, 64px, 32px, 32px);
581 #resume[checked=true] {
582 list-style-image: url(debugger-play@2x.png);
583 -moz-image-region: rect(0px, 32px, 32px, 0);
586 #resume[checked=true]:hover {
587 -moz-image-region: rect(0px, 64px, 32px, 32px);
591 #resume ~ toolbarbutton {
592 /* transition: opacity 0.15s ease-in-out; */
595 #resume:not([checked]) ~ toolbarbutton {
600 list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
601 -moz-image-region: rect(0px, 16px, 16px, 0px);
604 -moz-image-region: rect(0px, 32px, 16px, 16px);
608 list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
609 -moz-image-region: rect(0px, 16px, 16px, 0px);
612 -moz-image-region: rect(0px, 32px, 16px, 16px);
616 list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
617 -moz-image-region: rect(0px, 16px, 16px, 0px);
620 -moz-image-region: rect(0px, 32px, 16px, 16px);
623 @media (min-resolution: 2dppx) {
625 list-style-image: url(debugger-step-over@2x.png);
626 -moz-image-region: rect(0px, 32px, 32px, 0);
630 -moz-image-region: rect(0px, 64px, 32px, 32px);
634 list-style-image: url(debugger-step-in@2x.png);
635 -moz-image-region: rect(0px, 32px, 32px, 0);
639 -moz-image-region: rect(0px, 64px, 32px, 32px);
643 list-style-image: url(debugger-step-out@2x.png);
644 -moz-image-region: rect(0px, 32px, 32px, 0);
648 -moz-image-region: rect(0px, 64px, 32px, 32px);
652 #instruments-pane-toggle {
656 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
657 -moz-image-region: rect(0px,16px,16px,0px);
660 #instruments-pane-toggle[pane-collapsed] {
661 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
664 #instruments-pane-toggle:hover {
665 -moz-image-region: rect(0px,32px,16px,16px);
668 @media (min-resolution: 2dppx) {
669 #instruments-pane-toggle {
670 list-style-image: url(debugger-collapse@2x.png);
671 -moz-image-region: rect(0px,32px,32px,0px);
674 #instruments-pane-toggle[pane-collapsed] {
675 list-style-image: url(debugger-expand@2x.png);
678 #instruments-pane-toggle:hover {
679 -moz-image-region: rect(0px,64px,32px,32px);
683 /* Horizontal vs. vertical layout */
685 #vertical-layout-panes-container {
690 #body[layout=vertical] #instruments-pane {
691 margin: 0 !important;
692 /* To prevent all the margin hacks to hide the sidebar. */
695 #body[layout=vertical] #sources-pane > tabs {
696 -moz-border-end: none;
699 #body[layout=vertical] .side-menu-widget-container,
700 #body[layout=vertical] .side-menu-widget-empty-text {
701 box-shadow: none !important;
704 #body[layout=vertical] .side-menu-widget-item-arrow {
705 background-image: none !important;
708 /* === END debugger.inc.css === */