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 /* Sources and breakpoints pane */
11 #sources-pane > tabs {
12 -moz-border-end: 1px solid #9C9CFF; /* Match the sources list's dark margin. */
15 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
16 border-color: transparent;
19 #sources-toolbar > .devtools-toolbarbutton,
20 #sources-controls > .devtools-toolbarbutton {
25 list-style-image: url("debugger-blackbox.png");
33 list-style-image: url("debugger-toggleBreakpoints.png");
36 #sources-toolbar .devtools-toolbarbutton:not([label]) {
37 -moz-image-region: rect(0px, 16px, 16px, 0px);
40 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
41 -moz-image-region: rect(16px, 16px, 32px, 0px);
44 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
45 -moz-image-region: rect(0px, 32px, 16px, 16px);
48 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
49 -moz-image-region: rect(16px, 32px, 32px, 16px);
52 #sources .black-boxed {
56 #sources .black-boxed > .dbg-breakpoint {
60 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
61 background-image: none;
62 /* box-shadow: inset -1px 0 0 #222426; */
65 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
66 background-image: none;
67 /* box-shadow: inset 1px 0 0 #222426; */
70 /* Black box message and source progress meter */
73 #source-progress-container {
74 background-color: #A09090;
75 /* Prevent the container deck from aquiring the size from this message. */
86 #black-boxed-message-label,
87 #black-boxed-message-button {
92 #black-boxed-message-button {
100 list-style-image: url("tracer-icon.png");
101 -moz-image-region: rect(0px,16px,16px,0px);
106 -moz-image-region: rect(0px,32px,16px,16px);
115 /* Make this button as narrow as the text inside it. */
120 /* Prevent the container deck from aquiring the height from this message. */
125 -moz-padding-start: 4px !important;
128 #tracer-traces > scrollbox {
130 /* Hack to enable hardware acceleration */
131 transform: translateZ(0);
134 /* Tracer dark+light theme */
137 color: #FF9F00; /* Light foreground text */
141 color: #FF9F00; /* Light foreground text */
144 .trace-item.selected-matching {
145 background-color: #004242; /* Select highlight blue at 40% alpha */
148 .selected > .trace-item {
149 background-color: #004242; /* Select highlight blue at 75% alpha */
153 color: #9C9CFF; /* highlight blue */
158 color: #008484; /* highlight green */
162 color: #FF0000; /* highlight red */
166 color: #E7ADE7; /* Content text light */
170 color: #A09090; /* highlight grey */
173 /* ListWidget items */
179 /* .theme-light / .theme-dark */
180 .list-widget-item:not(.selected):not(.empty):hover {
181 /* background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;*/
184 /* .theme-light / .theme-dark */
185 .list-widget-item.selected.light {
186 /* background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
190 .list-widget-item.selected {
195 .list-widget-item.empty {
200 /* Breadcrumbs stack frames view */
202 .breadcrumbs-widget-item {
210 .dbg-stackframe-details {
211 -moz-padding-start: 4px;
214 /* Classic stack frames view */
216 .dbg-classic-stackframe {
221 .dbg-classic-stackframe-title {
226 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
230 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
234 .dbg-classic-stackframe-details-url {
240 .dbg-classic-stackframe-details-sep {
244 .dbg-classic-stackframe-details-line {
248 #callstack-list .side-menu-widget-item.selected label {
252 /* Sources and breakpoints view */
255 -moz-margin-start: 4px;
258 .dbg-breakpoint-line {
262 .dbg-breakpoint-text {
263 -moz-margin-start: 10px !important;
268 .dbg-breakpoint-checkbox {
274 /* Variable bubble view */
276 .devtools-tooltip-simple-text.token-undefined,
277 .devtools-tooltip-simple-text.token-null {
279 color: #A09090 !important; /* Override the theme's color. */
282 .devtools-tooltip-simple-text.token-boolean {
284 color: #9C9CFF !important;
287 .devtools-tooltip-simple-text.token-number {
289 color: #E7ADE7 !important;
292 .devtools-tooltip-simple-text.token-string {
294 color: #008484 !important;
297 .devtools-tooltip-simple-text.token-other {
299 color: #FF9F00 !important;
302 /* Instruments pane (watch expressions, variables, event listeners...) */
304 #instruments-pane .side-menu-widget-container,
305 #instruments-pane .side-menu-widget-empty-notice-container {
306 /* box-shadow: none !important; */
309 /* Watch expressions view */
320 .dbg-expression-arrow {
323 background: -moz-image-rect(url("commandline-icon.png"), 0, 32, 16, 16);
326 .dbg-expression-input {
327 -moz-padding-start: 2px !important;
331 /* Event listeners view */
333 .dbg-event-listener {
337 .dbg-event-listener-type {
341 .dbg-event-listener-separator {
345 .dbg-event-listener-targets {
349 .dbg-event-listener-location {
353 #event-listeners .side-menu-widget-item.selected {
354 background: none !important;
357 /* Searchbox and the search operations help panel */
361 -moz-margin-start: 1px;
365 -moz-margin-start: 2px;
368 #searchbox-panel-operators {
371 -moz-margin-start: 2px;
374 .searchbox-panel-operator-button {
378 -moz-margin-start: 2px;
379 -moz-margin-end: 6px;
383 .searchbox-panel-operator-label {
387 /* Searchbox results panel */
393 .results-panel-item {
394 border: 1px solid #A09090;
395 border-top-color: #8050B0;
400 .results-panel-item:first-of-type {
401 border-top-color: #9C9CFF;
402 border-radius: 4px 4px 0 0;
405 .results-panel-item:last-of-type {
406 border-radius: 0 0 4px 4px;
409 .results-panel-item:only-of-type {
413 .results-panel-item:not(.selected):not(:hover) {
414 /* text-shadow: 0 1px #fff;*/
417 .results-panel-item-pre {
418 -moz-margin-end: 5px !important;
423 .results-panel-item-name {
429 .results-panel-item-details {
434 /* Sources search view */
440 #globalsearch > vbox:not(:empty) {
445 #globalsearch + .devtools-horizontal-splitter {
446 -moz-border-top-colors: #9C9CFF;
449 .dbg-source-results {
451 background: none !important;
454 .dbg-results-header {
455 -moz-padding-start: 6px;
458 .dbg-results-header-location {
462 .dbg-results-header-match-count {
463 -moz-padding-start: 6px;
467 .dbg-results-line-number {
470 -moz-border-end: 1px solid #9C9CFF;
471 -moz-padding-end: 4px;
477 .dbg-results-line-contents {
478 -moz-padding-start: 4px;
483 .dbg-results-line-contents-string {
487 .dbg-results-line-contents-string[match=true] {
491 border: 1px solid #9C9CFF;
496 .dbg-results-line-contents-string[match=true][focusing] {
497 transition: transform 0.3s ease-in-out;
500 .dbg-results-line-contents-string[match=true][focused] {
501 transition-duration: 0.1s;
502 transform: scale(1.75, 1.75);
505 /* Toolbar controls */
507 .devtools-sidebar-tabs > tabs > tab {
508 /* min-height: 25px !important;
509 padding: 0 !important; */
513 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
514 -moz-image-region: rect(0px, 16px, 16px, 0px);
517 #toggle-panes:not([panesHidden]) {
518 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
522 #toggle-panes:hover:active {
523 -moz-image-region: rect(0px, 32px, 16px, 16px);
526 #resumption-panel-desc {
530 #resumption-order-panel {
531 -moz-margin-start: -8px;
535 list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
536 -moz-image-region: rect(0px, 16px, 16px, 0px);
537 /* transition: background 0.15s ease-in-out; */
541 -moz-image-region: rect(0px, 32px, 16px, 16px);
544 #resume[checked=true] {
545 /* background: none; */
546 list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
547 -moz-image-region: rect(0px, 16px, 16px, 0px);
550 #resume[checked=true]:hover {
551 -moz-image-region: rect(0px, 32px, 16px, 16px);
554 #resume ~ toolbarbutton {
555 /* transition: opacity 0.15s ease-in-out; */
558 #resume:not([checked]) ~ toolbarbutton {
563 list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
564 -moz-image-region: rect(0px, 16px, 16px, 0px);
567 -moz-image-region: rect(0px, 32px, 16px, 16px);
571 list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
572 -moz-image-region: rect(0px, 16px, 16px, 0px);
575 -moz-image-region: rect(0px, 32px, 16px, 16px);
579 list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
580 -moz-image-region: rect(0px, 16px, 16px, 0px);
583 -moz-image-region: rect(0px, 32px, 16px, 16px);
586 #debugger-controls > toolbarbutton,
587 #sources-controls > toolbarbutton {
590 #debugger-controls > toolbarbutton:last-of-type,
591 #sources-controls > toolbarbutton:last-of-type {
598 #instruments-pane-toggle {
602 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
603 -moz-image-region: rect(0px,16px,16px,0px);
606 #instruments-pane-toggle[pane-collapsed] {
607 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
610 #instruments-pane-toggle:hover,
611 #instruments-pane-toggle:hover:active {
612 -moz-image-region: rect(0px,32px,16px,16px);
615 /* Horizontal vs. vertical layout */
617 #vertical-layout-panes-container {
622 #body[layout=vertical] #instruments-pane {
623 margin: 0 !important;
624 /* To prevent all the margin hacks to hide the sidebar. */
627 #body[layout=vertical] #sources-pane > tabs {
628 -moz-border-end: none;
631 #body[layout=vertical] .side-menu-widget-container,
632 #body[layout=vertical] .side-menu-widget-empty-notice-container {
633 box-shadow: none !important;
636 #body[layout=vertical] .side-menu-widget-item-arrow {
637 background-image: none !important;