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/. */
10 /* Sources and breakpoints pane */
12 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
13 border-color: transparent;
16 #sources-pane > tabs {
17 /* border-inline-end: 1px solid;*/
20 #sources-pane .devtools-toolbar {
21 border: none; /* Remove the devtools-toolbar bottom border. */
22 /* border-inline-end: 1px solid;*/
26 #sources-pane .devtools-toolbar {
27 border-inline-end-color: var(--theme-splitter-color);
30 /* Sources and breakpoints list */
36 .dbg-wasm-item .icon {
38 background-image: url(chrome://devtools/skin/images/webconsole.svg);
39 background-repeat: no-repeat;
40 background-size: 72px 60px;
41 /* show warning icon */
42 background-position: -24px -24px;
46 margin-inline-start: -15px;
50 .dbg-breakpoint-line {
54 .dbg-breakpoint-text {
55 padding-inline-start: 6px;
60 .dbg-breakpoint-checkbox {
66 .dbg-breakpoint-condition-thrown-message {
68 color: var(--theme-highlight-red);
71 .dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message {
73 padding-inline-start: 0;
78 #sources-toolbar > .devtools-toolbarbutton,
79 #sources-controls > .devtools-toolbarbutton {
83 #sources-toolbar .devtools-toolbarbutton:not([label]) {
84 -moz-image-region: rect(0,16px,16px,0);
87 @media (min-resolution: 1.1dppx) {
88 #sources-toolbar .devtools-toolbarbutton:not([label]) {
89 -moz-image-region: rect(0,32px,32px,0);
94 list-style-image: url("images/debugger-blackbox.png");
97 @media (min-resolution: 1.1dppx) {
99 list-style-image: url(images/debugger-blackbox@2x.png);
104 list-style-image: url(images/debugger-prettyprint.png);
107 @media (min-resolution: 1.1dppx) {
109 list-style-image: url(images/debugger-prettyprint@2x.png);
113 #toggle-breakpoints {
114 list-style-image: url(images/debugger-toggleBreakpoints.svg);
115 -moz-image-region: rect(0,32px,16px,16px) !important;
118 #toggle-breakpoints[checked] {
119 -moz-image-region: rect(0,16px,16px,0) !important;
122 #toggle-breakpoints[checked] > image {
123 /* This button has a special checked image, don't make it blue */
127 #toggle-promise-debugger {
128 /* TODO Bug 1186119: Add a toggle promise debugger image */
131 #sources .black-boxed {
135 #sources .selected .black-boxed {
139 #sources .black-boxed ~ .dbg-breakpoint {
143 /* Debugger unblackbox button */
145 #black-boxed-message-button > .button-box > .button-icon {
148 background-image: url("images/debugger-blackbox.png");
149 background-position: 0 0;
150 background-size: 32px 16px;
151 background-repeat: no-repeat;
152 margin-inline-end: 5px;
155 @media (min-resolution: 1.1dppx) {
156 #black-boxed-message-button > .button-box > .button-icon {
157 background-image: url("images/debugger-blackbox@2x.png");
161 /* Black box message and source progress meter */
163 #black-boxed-message,
164 #source-progress-container {
165 background-color: #A09090;
166 /* Prevent the container deck from aquiring the size from this message. */
177 #black-boxed-message-label,
178 #black-boxed-message-button {
183 #black-boxed-message-button {
188 /* Breadcrumbs stack frames view */
190 .dbg-stackframe-details {
191 padding-inline-start: 4px;
194 /* Classic stack frames view */
196 .dbg-classic-stackframe {
200 .dbg-classic-stackframe-title {
204 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
208 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
212 .dbg-classic-stackframe-details-url {
217 .dbg-classic-stackframe-details-url {
218 color: var(--theme-content-color1);
221 .dbg-classic-stackframe-details-sep {
222 color: var(--theme-body-color-alt)
225 .dbg-classic-stackframe-details-line {
226 color: var(--theme-highlight-bluegrey);
229 #callstack-list .selected label {
230 /* Text inside a selected item should not be custom colored. */
231 color: inherit !important;
237 list-style-image: url("images/tracer-icon.png");
240 @media (min-resolution: 1.1dppx) {
242 list-style-image: url("images/tracer-icon@2x.png");
247 /* Make this button as narrow as the text inside it. */
252 padding-inline-start: 4px;
255 /* Tracer dark+light theme */
258 color: var(--theme-content-color1);
261 .trace-item.black-boxed {
265 .trace-item.selected-matching {
266 background-color: #004242; /* Select highlight blue at 40% alpha */
269 .selected > .trace-item {
270 background-color: #004242; /* Select highlight blue at 75% alpha */
274 color: var(--theme-highlight-blue);
279 color: var(--theme-highlight-green);
283 color: var(--theme-highlight-red);
287 color: var(--theme-highlight-pink);
291 color: var(--theme-content-color2);
294 /* Watch expressions view */
305 .dbg-expression-arrow {
306 background-image: url("images/commandline-icon.png");
307 background-position: -16px 0;
308 background-repeat: no-repeat;
309 background-size: 32px 16px;
315 @media (min-resolution: 1.1dppx) {
316 .dbg-expression-arrow {
317 background-image: url("images/commandline-icon@2x.png");
321 .dbg-expression-input {
325 .dbg-expression-button {
328 text-decoration: underline;
330 color: var(--theme-highlight-blue);
333 /* Event listeners view */
335 .dbg-event-listener-type {
339 .dbg-event-listener-location {
340 color: var(--theme-highlight-pink);
343 .dbg-event-listener-separator {
344 color: var(--theme-body-color-alt);
347 .dbg-event-listener-targets {
348 color: var(--theme-highlight-blue);
351 #event-listeners .selected {
352 /* Selected items shouldn't be displayed differently. */
354 color: var(--theme-content-color1);
357 /* Searchbox and the search operations help panel */
361 margin-inline-start: 1px;
365 margin-inline-start: 2px;
368 #searchbox-panel-operators {
371 margin-inline-start: 2px;
374 .searchbox-panel-operator-button {
378 margin-inline-start: 2px;
379 margin-inline-end: 6px;
383 .searchbox-panel-operator-label {
387 /* Searchbox results panel */
393 .results-panel-item {
395 border-top: 1px solid #A09090;
398 .results-panel-item:first-of-type {
400 border-radius: 4px 4px 0 0;
403 .results-panel-item:last-of-type {
404 border-radius: 0 0 4px 4px;
407 .results-panel-item:only-of-type {
411 .results-panel-item-label {
415 .results-panel-item-label-before {
416 padding-inline-end: 6px;
419 .results-panel-item-label {
420 color: var(--theme-highlight-blue);
423 .results-panel-item-label-before {
424 color: var(--theme-content-color2);
427 .results-panel-item-label-below {
428 color: var(--theme-content-color3);
431 #results-panel .selected label {
432 /* Text inside a selected item should not be custom colored. */
433 color: inherit !important;
436 /* Sources search view */
443 #globalsearch + .devtools-horizontal-splitter {
444 -moz-border-top-colors: var(--theme-splitter-color);
447 .dbg-source-results {
449 background: none !important;
452 .dbg-source-results:not(.selected):hover {
453 background-color: var(--theme-sidebar-background);
456 .dbg-results-header {
457 padding-inline-start: 6px;
460 .dbg-results-header-location {
464 .dbg-results-header-match-count {
465 padding-inline-start: 6px;
466 color: var(--theme-body-color-inactive);
469 .dbg-results-line-number {
471 border-inline-end: 1px solid #9C9CFF;
472 padding-inline-end: 4px;
476 .dbg-results-line-contents {
477 padding-inline-start: 4px;
480 .dbg-results-line-contents-string[match=true] {
482 color: var(--theme-selection-color);
483 border: 1px solid #9C9CFF;
485 margin-top: -1px !important;
486 margin-bottom: -1px !important;
490 .dbg-results-line-contents-string[match=true][focusing] {
491 transition: transform 0.3s ease-in-out;
494 .dbg-results-line-contents-string[match=true][focused] {
495 transition-duration: 0.1s;
496 transform: scale(1.75, 1.75);
499 .dbg-source-results:not(.selected):hover {
500 background-color: var(--theme-sidebar-background);
503 .dbg-results-header {
504 background-color: var(--theme-tab-toolbar-background);
507 .dbg-results-header {
508 color: var(--theme-content-color1);
511 .dbg-search-result:hover {
512 background-color: #004242; /* Select highlight blue at 40% alpha */
515 .dbg-results-header-match-count {
516 color: var(--theme-content-color3);
519 .dbg-results-line-number {
520 background-color: var(--theme-tab-toolbar-background);
521 color: var(--theme-body-color-alt);
524 .dbg-results-line-contents-string {
525 color: var(--theme-body-color-alt);
528 .theme-dark .dbg-results-line-contents-string[match=true] {
529 color: var(--theme-selection-color);
532 .theme-light .dbg-results-line-contents-string[match=true] {
533 color: var(--theme-body-color);
536 /* Toolbar controls */
539 list-style-image: url(images/debugger-pause.png);
543 list-style-image: url(images/debugger-play.png);
546 @media (min-resolution: 1.1dppx) {
548 list-style-image: url(images/debugger-pause@2x.png);
552 list-style-image: url(images/debugger-play@2x.png);
556 #resume[break-on-next] {
557 background: var(--theme-highlight-lightorange);
561 list-style-image: url(images/debugger-step-over.png);
565 list-style-image: url(images/debugger-step-in.png);
569 list-style-image: url(images/debugger-step-out.png);
572 @media (min-resolution: 1.1dppx) {
574 list-style-image: url(images/debugger-step-over@2x.png);
578 list-style-image: url(images/debugger-step-in@2x.png);
582 list-style-image: url(images/debugger-step-out@2x.png);
586 #instruments-pane-toggle {
587 list-style-image: var(--theme-pane-collapse-image);
590 #instruments-pane-toggle[pane-collapsed] {
591 list-style-image: var(--theme-pane-expand-image);
594 /* Horizontal vs. vertical layout */
596 #vertical-layout-panes-container {
601 #body[layout=vertical] #sources-pane > tabs {
602 border-inline-end: none;
605 #body[layout=vertical] #instruments-pane {
606 margin: 0 !important;
607 /* To prevent all the margin hacks to hide the sidebar. */
610 #body[layout=vertical] .side-menu-widget-container,
611 #body[layout=vertical] .side-menu-widget-empty-text {
612 box-shadow: none !important;
615 #body[layout=vertical] .side-menu-widget-item-arrow {
616 background-image: none !important;
619 #body[layout=vertical] .side-menu-widget-group,
620 #body[layout=vertical] .side-menu-widget-item {
621 margin-inline-end: 0;