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 /* Debugger unblackbox button */
108 #black-boxed-message-button > .button-box > .button-icon {
111 background-image: url("debugger-blackbox.png");
112 background-position: 0 0;
113 background-size: 32px 16px;
114 background-repeat: no-repeat;
115 -moz-margin-end: 5px;
118 @media (min-resolution: 2dppx) {
119 #black-boxed-message-button > .button-box > .button-icon {
120 background-image: url("debugger-blackbox@2x.png");
124 /* Black box message and source progress meter */
126 #black-boxed-message,
127 #source-progress-container {
128 background-color: #A09090;
129 /* Prevent the container deck from aquiring the size from this message. */
140 #black-boxed-message-label,
141 #black-boxed-message-button {
146 #black-boxed-message-button {
154 list-style-image: url("tracer-icon.png");
155 -moz-image-region: rect(0px,16px,16px,0px);
160 -moz-image-region: rect(0px,32px,16px,16px);
163 @media (min-resolution: 2dppx) {
165 list-style-image: url(tracer-icon@2x.png);
166 -moz-image-region: rect(0px,32px,32px,0px);
171 -moz-image-region: rect(0px,64px,32px,32px);
176 /* Make this button as narrow as the text inside it. */
181 -moz-padding-start: 4px !important;
184 /* Tracer dark+light theme */
187 color: #FF9F00; /* Light foreground text */
190 .trace-item.selected-matching {
191 background-color: #004242; /* Select highlight blue at 40% alpha */
194 .selected > .trace-item {
195 background-color: #004242; /* Select highlight blue at 75% alpha */
199 color: #9C9CFF; /* highlight blue */
204 color: #008484; /* highlight green */
208 color: #FF0000; /* highlight red */
212 color: #E7ADE7; /* Content text light */
216 color: #A09090; /* highlight grey */
219 /* Breadcrumbs stack frames view */
221 .breadcrumbs-widget-item {
229 .dbg-stackframe-details {
230 -moz-padding-start: 4px;
233 /* Classic stack frames view */
235 .dbg-classic-stackframe {
240 .dbg-classic-stackframe-title {
245 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
249 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
253 .dbg-classic-stackframe-details-url {
259 .dbg-classic-stackframe-details-sep {
263 .dbg-classic-stackframe-details-line {
267 #callstack-list .side-menu-widget-item.selected label {
271 /* Sources and breakpoints view */
274 -moz-margin-start: 4px;
277 .dbg-breakpoint-line {
281 .dbg-breakpoint-text {
282 -moz-margin-start: 10px !important;
287 .dbg-breakpoint-checkbox {
293 /* Variable bubble view */
295 .devtools-tooltip-simple-text.token-undefined,
296 .devtools-tooltip-simple-text.token-null {
298 color: #A09090 !important; /* Override the theme's color. */
301 .devtools-tooltip-simple-text.token-boolean {
303 color: #9C9CFF !important;
306 .devtools-tooltip-simple-text.token-number {
308 color: #E7ADE7 !important;
311 .devtools-tooltip-simple-text.token-string {
313 color: #008484 !important;
316 .devtools-tooltip-simple-text.token-other {
318 color: #FF9F00 !important;
321 /* Instruments pane (watch expressions, variables, event listeners...) */
323 #instruments-pane .side-menu-widget-container,
324 #instruments-pane .side-menu-widget-empty-text {
325 /* box-shadow: none !important; */
328 /* Watch expressions view */
339 .dbg-expression-arrow {
340 background-image: url("commandline-icon.png");
341 background-position: -16px 0;
342 background-repeat: no-repeat;
343 background-size: 32px 16px;
349 @media (min-resolution: 2dppx) {
350 .dbg-expression-arrow {
351 background-image: url(commandline-icon@2x.png);
355 .dbg-expression-input {
359 .dbg-expression-button {
362 text-decoration: underline;
365 color: #9C9CFF; /* Blue highlight color */
368 /* Event listeners view */
370 .dbg-event-listener {
374 .dbg-event-listener-type {
378 .dbg-event-listener-separator {
382 .dbg-event-listener-targets {
386 .dbg-event-listener-location {
390 #event-listeners .side-menu-widget-item.selected {
391 background: none !important;
394 /* Searchbox and the search operations help panel */
398 -moz-margin-start: 1px;
402 -moz-margin-start: 2px;
405 #searchbox-panel-operators {
408 -moz-margin-start: 2px;
411 .searchbox-panel-operator-button {
415 -moz-margin-start: 2px;
416 -moz-margin-end: 6px;
420 .searchbox-panel-operator-label {
424 /* Searchbox results panel */
430 .results-panel-item {
431 border: 1px solid #A09090;
432 border-top-color: #8050B0;
437 .results-panel-item:first-of-type {
438 border-top-color: #9C9CFF;
439 border-radius: 4px 4px 0 0;
442 .results-panel-item:last-of-type {
443 border-radius: 0 0 4px 4px;
446 .results-panel-item:only-of-type {
450 .results-panel-item:not(.selected):not(:hover) {
451 /* text-shadow: 0 1px #fff;*/
454 .results-panel-item-label-before {
455 -moz-margin-end: 5px !important;
460 .results-panel-item-label {
466 .results-panel-item-label-below {
471 /* Sources search view */
478 #globalsearch + .devtools-horizontal-splitter {
479 -moz-border-top-colors: #9C9CFF;
482 .dbg-source-results {
484 background: none !important;
487 .dbg-source-results:not(.selected):hover {
488 background-color: #000000; /* Sidebar background */
491 .dbg-results-header {
492 -moz-padding-start: 6px;
495 .dbg-results-header-location {
499 .dbg-results-header-match-count {
500 -moz-padding-start: 6px;
504 .dbg-results-line-number {
507 -moz-border-end: 1px solid #9C9CFF;
508 -moz-padding-end: 4px;
514 .dbg-results-line-contents {
515 -moz-padding-start: 4px;
520 .dbg-results-line-contents-string {
524 .dbg-results-line-contents-string[match=true] {
528 border: 1px solid #9C9CFF;
533 .dbg-results-line-contents-string[match=true][focusing] {
534 transition: transform 0.3s ease-in-out;
537 .dbg-results-line-contents-string[match=true][focused] {
538 transition-duration: 0.1s;
539 transform: scale(1.75, 1.75);
542 /* Toolbar controls */
544 .devtools-sidebar-tabs > tabs > tab {
545 /* min-height: 24px !important;
546 padding: 0 !important; */
550 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
551 -moz-image-region: rect(0px, 16px, 16px, 0px);
554 #toggle-panes:not([panesHidden]) {
555 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
559 #toggle-panes:hover:active {
560 -moz-image-region: rect(0px, 32px, 16px, 16px);
563 #debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
564 #sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
570 list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
571 -moz-image-region: rect(0px, 16px, 16px, 0px);
572 /* transition: background 0.15s ease-in-out; */
576 -moz-image-region: rect(0px, 32px, 16px, 16px);
579 #resume[checked=true] {
580 /* background: none; */
581 list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
582 -moz-image-region: rect(0px, 16px, 16px, 0px);
585 #resume[checked=true]:hover {
586 -moz-image-region: rect(0px, 32px, 16px, 16px);
589 @media (min-resolution: 2dppx) {
591 list-style-image: url(debugger-pause@2x.png);
592 -moz-image-region: rect(0px, 32px, 32px, 0px);
596 -moz-image-region: rect(0px, 64px, 32px, 32px);
599 #resume[checked=true] {
600 list-style-image: url(debugger-play@2x.png);
601 -moz-image-region: rect(0px, 32px, 32px, 0);
604 #resume[checked=true]:hover {
605 -moz-image-region: rect(0px, 64px, 32px, 32px);
609 #resume ~ toolbarbutton {
610 /* transition: opacity 0.15s ease-in-out; */
613 #resume:not([checked]) ~ toolbarbutton {
618 list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
619 -moz-image-region: rect(0px, 16px, 16px, 0px);
622 -moz-image-region: rect(0px, 32px, 16px, 16px);
626 list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
627 -moz-image-region: rect(0px, 16px, 16px, 0px);
630 -moz-image-region: rect(0px, 32px, 16px, 16px);
634 list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
635 -moz-image-region: rect(0px, 16px, 16px, 0px);
638 -moz-image-region: rect(0px, 32px, 16px, 16px);
641 @media (min-resolution: 2dppx) {
643 list-style-image: url(debugger-step-over@2x.png);
644 -moz-image-region: rect(0px, 32px, 32px, 0);
648 -moz-image-region: rect(0px, 64px, 32px, 32px);
652 list-style-image: url(debugger-step-in@2x.png);
653 -moz-image-region: rect(0px, 32px, 32px, 0);
657 -moz-image-region: rect(0px, 64px, 32px, 32px);
661 list-style-image: url(debugger-step-out@2x.png);
662 -moz-image-region: rect(0px, 32px, 32px, 0);
666 -moz-image-region: rect(0px, 64px, 32px, 32px);
670 #instruments-pane-toggle {
674 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
675 -moz-image-region: rect(0px,16px,16px,0px);
678 #instruments-pane-toggle[pane-collapsed] {
679 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
682 #instruments-pane-toggle:hover {
683 -moz-image-region: rect(0px,32px,16px,16px);
686 @media (min-resolution: 2dppx) {
687 #instruments-pane-toggle {
688 list-style-image: url(debugger-collapse@2x.png);
689 -moz-image-region: rect(0px,32px,32px,0px);
692 #instruments-pane-toggle[pane-collapsed] {
693 list-style-image: url(debugger-expand@2x.png);
696 #instruments-pane-toggle:hover {
697 -moz-image-region: rect(0px,64px,32px,32px);
701 /* Horizontal vs. vertical layout */
703 #vertical-layout-panes-container {
708 #body[layout=vertical] #instruments-pane {
709 margin: 0 !important;
710 /* To prevent all the margin hacks to hide the sidebar. */
713 #body[layout=vertical] #sources-pane > tabs {
714 -moz-border-end: none;
717 #body[layout=vertical] .side-menu-widget-container,
718 #body[layout=vertical] .side-menu-widget-empty-text {
719 box-shadow: none !important;
722 #body[layout=vertical] .side-menu-widget-item-arrow {
723 background-image: none !important;
726 /* === END debugger.inc.css === */