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-color: var(--theme-splitter-color);
21 .dbg-breakpoint-condition-thrown-message {
23 color: var(--theme-highlight-red);
26 .dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message {
28 -moz-padding-start: 0;
33 #sources-toolbar > .devtools-toolbarbutton,
34 #sources-controls > .devtools-toolbarbutton {
39 list-style-image: url("debugger-blackbox.png");
42 @media (min-resolution: 2dppx) {
44 list-style-image: url(debugger-blackbox@2x.png);
49 list-style-image: url(debugger-prettyprint.png);
52 @media (min-resolution: 2dppx) {
54 list-style-image: url(debugger-prettyprint@2x.png);
59 list-style-image: url("debugger-toggleBreakpoints.png");
62 @media (min-resolution: 2dppx) {
64 list-style-image: url(debugger-toggleBreakpoints@2x.png);
68 #sources-toolbar .devtools-toolbarbutton:not([label]) {
69 -moz-image-region: rect(0px, 16px, 16px, 0px);
72 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
73 -moz-image-region: rect(16px, 16px, 32px, 0px);
76 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
77 -moz-image-region: rect(0px, 32px, 16px, 16px);
80 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
81 -moz-image-region: rect(16px, 32px, 32px, 16px);
84 @media (min-resolution: 2dppx) {
85 #sources-toolbar .devtools-toolbarbutton:not([label]) {
86 -moz-image-region: rect(0px,32px,32px,0px);
89 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
90 -moz-image-region: rect(32px,32px,64px,0px);
93 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
94 -moz-image-region: rect(0px,64px,32px,32px);
97 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
98 -moz-image-region: rect(32px,64px,64px,32px);
102 #sources .black-boxed {
106 #sources .selected .black-boxed {
110 #sources .black-boxed ~ .dbg-breakpoint {
114 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
115 background-image: none;
116 /* box-shadow: inset -1px 0 0 #222426; */
119 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
120 background-image: none;
121 /* box-shadow: inset 1px 0 0 #222426; */
124 /* Debugger unblackbox button */
126 #black-boxed-message-button > .button-box > .button-icon {
129 background-image: url("debugger-blackbox.png");
130 background-position: -16px -16px;
131 background-size: 32px 32px;
132 background-repeat: no-repeat;
133 -moz-margin-end: 5px;
136 @media (min-resolution: 2dppx) {
137 #black-boxed-message-button > .button-box > .button-icon {
138 background-image: url("debugger-blackbox@2x.png");
142 /* Black box message and source progress meter */
144 #black-boxed-message,
145 #source-progress-container {
146 background-color: #A09090;
147 /* Prevent the container deck from aquiring the size from this message. */
158 #black-boxed-message-label,
159 #black-boxed-message-button {
164 #black-boxed-message-button {
172 list-style-image: url("tracer-icon.png");
173 -moz-image-region: rect(0px,16px,16px,0px);
178 -moz-image-region: rect(0px,32px,16px,16px);
181 @media (min-resolution: 2dppx) {
183 list-style-image: url(tracer-icon@2x.png);
184 -moz-image-region: rect(0px,32px,32px,0px);
189 -moz-image-region: rect(0px,64px,32px,32px);
194 /* Make this button as narrow as the text inside it. */
199 -moz-padding-start: 4px !important;
202 /* Tracer dark+light theme */
205 color: var(--theme-content-color1);
208 .trace-item.black-boxed {
212 .trace-item.selected-matching {
213 background-color: #004242; /* Select highlight blue at 40% alpha */
216 .selected > .trace-item {
217 background-color: #004242; /* Select highlight blue at 75% alpha */
221 color: var(--theme-highlight-blue);
226 color: var(--theme-highlight-green);
230 color: var(--theme-highlight-red);
234 color: var(--theme-highlight-pink);
238 color: var(--theme-content-color2);
241 /* Breadcrumbs stack frames view */
243 .breadcrumbs-widget-item {
251 .dbg-stackframe-details {
252 -moz-padding-start: 4px;
255 /* Classic stack frames view */
257 .dbg-classic-stackframe {
262 .dbg-classic-stackframe-title {
267 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
271 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
275 .dbg-classic-stackframe-details-url {
278 color: var(--theme-text-blue);
281 .dbg-classic-stackframe-details-sep {
282 color: var(--theme-body-color-alt)
285 .dbg-classic-stackframe-details-line {
286 color: var(--theme-highlight-blue);
289 #callstack-list .side-menu-widget-item.selected label {
293 /* Sources and breakpoints view */
296 -moz-margin-start: 4px;
299 .dbg-breakpoint-line {
303 .dbg-breakpoint-text {
304 -moz-margin-start: 10px !important;
309 .dbg-breakpoint-checkbox {
315 /* Variable bubble view */
317 .devtools-tooltip-simple-text.token-undefined,
318 .devtools-tooltip-simple-text.token-null {
320 color: #A09090 !important; /* Override the theme's color. */
323 .devtools-tooltip-simple-text.token-boolean {
325 color: #9C9CFF !important;
328 .devtools-tooltip-simple-text.token-number {
330 color: #E7ADE7 !important;
333 .devtools-tooltip-simple-text.token-string {
335 color: #008484 !important;
338 .devtools-tooltip-simple-text.token-other {
340 color: #FF9F00 !important;
343 /* Instruments pane (watch expressions, variables, event listeners...) */
345 #instruments-pane .side-menu-widget-container,
346 #instruments-pane .side-menu-widget-empty-text {
347 /* box-shadow: none !important; */
350 /* Watch expressions view */
361 .dbg-expression-arrow {
362 background-image: url("commandline-icon.png");
363 background-position: -16px 0;
364 background-repeat: no-repeat;
365 background-size: 32px 16px;
371 @media (min-resolution: 2dppx) {
372 .dbg-expression-arrow {
373 background-image: url(commandline-icon@2x.png);
377 .dbg-expression-input {
381 .dbg-expression-button {
384 text-decoration: underline;
386 color: var(--theme-highlight-blue);
389 /* Event listeners view */
391 .dbg-event-listener {
395 .dbg-event-listener-type {
399 .dbg-event-listener-separator {
400 color: var(--theme-body-color-alt);
403 .dbg-event-listener-targets {
404 color: var(--theme-highlight-blue);
407 .dbg-event-listener-location {
408 color: var(--theme-highlight-pink);
411 #event-listeners .side-menu-widget-item.selected {
412 background: none !important;
415 /* Searchbox and the search operations help panel */
419 -moz-margin-start: 1px;
423 -moz-margin-start: 2px;
426 #searchbox-panel-operators {
429 -moz-margin-start: 2px;
432 .searchbox-panel-operator-button {
436 -moz-margin-start: 2px;
437 -moz-margin-end: 6px;
441 .searchbox-panel-operator-label {
445 /* Searchbox results panel */
451 .results-panel-item {
452 border: 1px solid #A09090;
453 border-top-color: #8050B0;
458 .results-panel-item:first-of-type {
459 border-top-color: #9C9CFF;
460 border-radius: 4px 4px 0 0;
463 .results-panel-item:last-of-type {
464 border-radius: 0 0 4px 4px;
467 .results-panel-item:only-of-type {
471 .results-panel-item:not(.selected):not(:hover) {
472 /* text-shadow: 0 1px #fff;*/
475 .results-panel-item-label-before {
476 -moz-margin-end: 5px !important;
477 color: var(--theme-content-color2);
481 .results-panel-item-label {
482 color: var(--theme-highlight-blue);
487 .results-panel-item-label-below {
488 color: var(--theme-content-color3);
492 /* Sources search view */
499 #globalsearch + .devtools-horizontal-splitter {
500 -moz-border-top-colors: #9C9CFF;
503 .dbg-source-results {
505 background: none !important;
508 .dbg-source-results:not(.selected):hover {
509 background-color: #000000; /* Sidebar background */
512 .dbg-results-header {
513 -moz-padding-start: 6px;
516 .dbg-results-header-location {
520 .dbg-results-header-match-count {
521 -moz-padding-start: 6px;
522 color: var(--theme-content-disabled);
525 .dbg-results-line-number {
526 background-color: var(--theme-toolbar-background);
528 -moz-border-end: 1px solid #9C9CFF;
529 -moz-padding-end: 4px;
532 color: var(--theme-body-color);
535 .dbg-results-line-contents {
536 -moz-padding-start: 4px;
541 .dbg-results-line-contents-string {
543 /* color: var(--theme-body-color-alt);*/
546 .dbg-results-line-contents-string[match=true] {
548 color: var(--theme-selection-color);
550 border: 1px solid #9C9CFF;
555 .dbg-results-line-contents-string[match=true][focusing] {
556 transition: transform 0.3s ease-in-out;
559 .dbg-results-line-contents-string[match=true][focused] {
560 transition-duration: 0.1s;
561 transform: scale(1.75, 1.75);
564 /* Toolbar controls */
567 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
568 -moz-image-region: rect(0px, 16px, 16px, 0px);
571 #toggle-panes:not([panesHidden]) {
572 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
576 #toggle-panes:hover:active {
577 -moz-image-region: rect(0px, 32px, 16px, 16px);
580 #debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
581 #sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
587 list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
588 -moz-image-region: rect(0px, 16px, 16px, 0px);
592 -moz-image-region: rect(0px, 32px, 16px, 16px);
595 #resume[checked=true] {
596 list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
599 @media (min-resolution: 2dppx) {
601 list-style-image: url(debugger-pause@2x.png);
602 -moz-image-region: rect(0px, 32px, 32px, 0px);
606 -moz-image-region: rect(0px, 64px, 32px, 32px);
609 #resume[checked=true] {
610 list-style-image: url(debugger-play@2x.png);
614 #resume ~ toolbarbutton {
615 /* transition: opacity 0.15s ease-in-out; */
618 #resume:not([checked]) ~ toolbarbutton {
623 list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
624 -moz-image-region: rect(0px, 16px, 16px, 0px);
627 -moz-image-region: rect(0px, 32px, 16px, 16px);
631 list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
632 -moz-image-region: rect(0px, 16px, 16px, 0px);
635 -moz-image-region: rect(0px, 32px, 16px, 16px);
639 list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
640 -moz-image-region: rect(0px, 16px, 16px, 0px);
643 -moz-image-region: rect(0px, 32px, 16px, 16px);
646 @media (min-resolution: 2dppx) {
648 list-style-image: url(debugger-step-over@2x.png);
649 -moz-image-region: rect(0px, 32px, 32px, 0);
653 -moz-image-region: rect(0px, 64px, 32px, 32px);
657 list-style-image: url(debugger-step-in@2x.png);
658 -moz-image-region: rect(0px, 32px, 32px, 0);
662 -moz-image-region: rect(0px, 64px, 32px, 32px);
666 list-style-image: url(debugger-step-out@2x.png);
667 -moz-image-region: rect(0px, 32px, 32px, 0);
671 -moz-image-region: rect(0px, 64px, 32px, 32px);
675 #instruments-pane-toggle {
679 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
680 -moz-image-region: rect(0px,16px,16px,0px);
683 #instruments-pane-toggle[pane-collapsed] {
684 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
687 #instruments-pane-toggle:hover {
688 -moz-image-region: rect(0px,32px,16px,16px);
691 @media (min-resolution: 2dppx) {
692 #instruments-pane-toggle {
693 list-style-image: url(debugger-collapse@2x.png);
694 -moz-image-region: rect(0px,32px,32px,0px);
697 #instruments-pane-toggle[pane-collapsed] {
698 list-style-image: url(debugger-expand@2x.png);
701 #instruments-pane-toggle:hover {
702 -moz-image-region: rect(0px,64px,32px,32px);
706 /* Horizontal vs. vertical layout */
708 #vertical-layout-panes-container {
713 #body[layout=vertical] #instruments-pane {
714 margin: 0 !important;
715 /* To prevent all the margin hacks to hide the sidebar. */
718 #body[layout=vertical] #sources-pane > tabs {
719 -moz-border-end: none;
722 #body[layout=vertical] .side-menu-widget-container,
723 #body[layout=vertical] .side-menu-widget-empty-text {
724 box-shadow: none !important;
727 #body[layout=vertical] .side-menu-widget-item-arrow {
728 background-image: none !important;
731 /* === END debugger.inc.css === */