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 {
84 list-style-image: url("images/debugger-blackbox.svg");
88 list-style-image: url("images/debugger-prettyprint.svg");
92 list-style-image: url(images/debugger-toggleBreakpoints.svg);
93 -moz-image-region: rect(0,32px,16px,16px);
96 #toggle-breakpoints[checked] {
97 -moz-image-region: rect(0,16px,16px,0);
100 #toggle-breakpoints[checked] > image {
101 /* This button has a special checked image, don't make it blue */
105 #toggle-promise-debugger {
106 /* TODO Bug 1186119: Add a toggle promise debugger image */
109 #sources .black-boxed {
113 #sources .selected .black-boxed {
117 #sources .black-boxed ~ .dbg-breakpoint {
121 /* Debugger unblackbox button */
123 #black-boxed-message-button > .button-box > .button-icon {
126 background-image: url("images/debugger-blackbox.svg");
127 background-position: 0 0;
128 background-size: cover;
131 /* Black box message and source progress meter */
133 #black-boxed-message,
134 #source-progress-container {
135 background-color: #A09090;
136 /* Prevent the container deck from aquiring the size from this message. */
147 #black-boxed-message-label,
148 #black-boxed-message-button {
153 #black-boxed-message-button {
158 /* Breadcrumbs stack frames view */
160 .dbg-stackframe-details {
161 padding-inline-start: 4px;
164 /* Classic stack frames view */
166 .dbg-classic-stackframe {
170 .dbg-classic-stackframe-title {
174 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
178 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
182 .dbg-classic-stackframe-details-url {
187 .dbg-classic-stackframe-details-url {
188 color: var(--theme-content-color1);
191 .dbg-classic-stackframe-details-sep {
192 color: var(--theme-body-color-alt)
195 .dbg-classic-stackframe-details-line {
196 color: var(--theme-highlight-bluegrey);
199 #callstack-list .selected label {
200 /* Text inside a selected item should not be custom colored. */
201 color: inherit !important;
207 list-style-image: url("images/tracer-icon.png");
210 @media (min-resolution: 1.1dppx) {
212 list-style-image: url("images/tracer-icon@2x.png");
217 /* Make this button as narrow as the text inside it. */
222 padding-inline-start: 4px;
225 /* Tracer dark+light theme */
228 color: var(--theme-content-color1);
231 .trace-item.black-boxed {
235 .trace-item.selected-matching {
236 background-color: #004242; /* Select highlight blue at 40% alpha */
239 .selected > .trace-item {
240 background-color: #004242; /* Select highlight blue at 75% alpha */
244 color: var(--theme-highlight-blue);
249 color: var(--theme-highlight-green);
253 color: var(--theme-highlight-red);
257 color: var(--theme-highlight-pink);
261 color: var(--theme-content-color2);
264 /* Watch expressions view */
275 .dbg-expression-arrow {
276 background-image: var(--theme-command-line-image-focus);
282 .dbg-expression-input {
286 .dbg-expression-button {
289 text-decoration: underline;
291 color: var(--theme-highlight-blue);
294 /* Event listeners view */
296 .dbg-event-listener-type {
300 .dbg-event-listener-location {
301 color: var(--theme-highlight-pink);
304 .dbg-event-listener-separator {
305 color: var(--theme-body-color-alt);
308 .dbg-event-listener-targets {
309 color: var(--theme-highlight-blue);
312 #event-listeners .selected {
313 /* Selected items shouldn't be displayed differently. */
315 color: var(--theme-content-color1);
318 /* Searchbox and the search operations help panel */
322 margin-inline-start: 1px;
326 margin-inline-start: 2px;
329 #searchbox-panel-operators {
332 margin-inline-start: 2px;
335 .searchbox-panel-operator-button {
339 margin-inline-start: 2px;
340 margin-inline-end: 6px;
344 .searchbox-panel-operator-label {
348 /* Searchbox results panel */
354 .results-panel-item {
356 border-top: 1px solid #A09090;
359 .results-panel-item:first-of-type {
361 border-radius: 4px 4px 0 0;
364 .results-panel-item:last-of-type {
365 border-radius: 0 0 4px 4px;
368 .results-panel-item:only-of-type {
372 .results-panel-item-label {
376 .results-panel-item-label-before {
377 padding-inline-end: 6px;
380 .results-panel-item-label {
381 color: var(--theme-highlight-blue);
384 .results-panel-item-label-before {
385 color: var(--theme-content-color2);
388 .results-panel-item-label-below {
389 color: var(--theme-content-color3);
392 #results-panel .selected label {
393 /* Text inside a selected item should not be custom colored. */
394 color: inherit !important;
397 /* Sources search view */
404 #globalsearch + .devtools-horizontal-splitter {
405 -moz-border-top-colors: var(--theme-splitter-color);
408 .dbg-source-results {
410 background: none !important;
413 .dbg-source-results:not(.selected):hover {
414 background-color: var(--theme-sidebar-background);
417 .dbg-results-header {
418 padding-inline-start: 6px;
421 .dbg-results-header-location {
425 .dbg-results-header-match-count {
426 padding-inline-start: 6px;
427 color: var(--theme-body-color-inactive);
430 .dbg-results-line-number {
432 border-inline-end: 1px solid #9C9CFF;
433 padding-inline-end: 4px;
437 .dbg-results-line-contents {
438 padding-inline-start: 4px;
441 .dbg-results-line-contents-string[match=true] {
443 color: var(--theme-selection-color);
444 border: 1px solid #9C9CFF;
446 margin-top: -1px !important;
447 margin-bottom: -1px !important;
451 .dbg-results-line-contents-string[match=true][focusing] {
452 transition: transform 0.3s ease-in-out;
455 .dbg-results-line-contents-string[match=true][focused] {
456 transition-duration: 0.1s;
457 transform: scale(1.75, 1.75);
460 .dbg-source-results:not(.selected):hover {
461 background-color: var(--theme-sidebar-background);
464 .dbg-results-header {
465 background-color: var(--theme-tab-toolbar-background);
468 .dbg-results-header {
469 color: var(--theme-content-color1);
472 .dbg-search-result:hover {
473 background-color: #004242; /* Select highlight blue at 40% alpha */
476 .dbg-results-header-match-count {
477 color: var(--theme-content-color3);
480 .dbg-results-line-number {
481 background-color: var(--theme-tab-toolbar-background);
482 color: var(--theme-body-color-alt);
485 .dbg-results-line-contents-string {
486 color: var(--theme-body-color-alt);
489 .theme-dark .dbg-results-line-contents-string[match=true] {
490 color: var(--theme-selection-color);
493 .theme-light .dbg-results-line-contents-string[match=true] {
494 color: var(--theme-body-color);
497 /* Toolbar controls */
500 list-style-image: url(images/pause.svg);
504 list-style-image: url(images/play.svg);
507 #resume[break-on-next] {
508 background: var(--theme-highlight-lightorange);
512 list-style-image: url(images/debugger-step-over.svg);
516 list-style-image: url(images/debugger-step-in.svg);
520 list-style-image: url(images/debugger-step-out.svg);
523 #instruments-pane-toggle {
524 list-style-image: var(--theme-pane-collapse-image);
527 #instruments-pane-toggle[pane-collapsed] {
528 list-style-image: var(--theme-pane-expand-image);
531 /* Horizontal vs. vertical layout */
533 #vertical-layout-panes-container {
538 #body[layout=vertical] #sources-pane > tabs {
539 border-inline-end: none;
542 #body[layout=vertical] #instruments-pane {
543 margin: 0 !important;
544 /* To prevent all the margin hacks to hide the sidebar. */
547 #body[layout=vertical] .side-menu-widget-container,
548 #body[layout=vertical] .side-menu-widget-empty-text {
549 box-shadow: none !important;
552 #body[layout=vertical] .side-menu-widget-item-arrow {
553 background-image: none !important;
556 #body[layout=vertical] .side-menu-widget-group,
557 #body[layout=vertical] .side-menu-widget-item {
558 margin-inline-end: 0;