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: var(--theme-command-line-image-focus);
312 .dbg-expression-input {
316 .dbg-expression-button {
319 text-decoration: underline;
321 color: var(--theme-highlight-blue);
324 /* Event listeners view */
326 .dbg-event-listener-type {
330 .dbg-event-listener-location {
331 color: var(--theme-highlight-pink);
334 .dbg-event-listener-separator {
335 color: var(--theme-body-color-alt);
338 .dbg-event-listener-targets {
339 color: var(--theme-highlight-blue);
342 #event-listeners .selected {
343 /* Selected items shouldn't be displayed differently. */
345 color: var(--theme-content-color1);
348 /* Searchbox and the search operations help panel */
352 margin-inline-start: 1px;
356 margin-inline-start: 2px;
359 #searchbox-panel-operators {
362 margin-inline-start: 2px;
365 .searchbox-panel-operator-button {
369 margin-inline-start: 2px;
370 margin-inline-end: 6px;
374 .searchbox-panel-operator-label {
378 /* Searchbox results panel */
384 .results-panel-item {
386 border-top: 1px solid #A09090;
389 .results-panel-item:first-of-type {
391 border-radius: 4px 4px 0 0;
394 .results-panel-item:last-of-type {
395 border-radius: 0 0 4px 4px;
398 .results-panel-item:only-of-type {
402 .results-panel-item-label {
406 .results-panel-item-label-before {
407 padding-inline-end: 6px;
410 .results-panel-item-label {
411 color: var(--theme-highlight-blue);
414 .results-panel-item-label-before {
415 color: var(--theme-content-color2);
418 .results-panel-item-label-below {
419 color: var(--theme-content-color3);
422 #results-panel .selected label {
423 /* Text inside a selected item should not be custom colored. */
424 color: inherit !important;
427 /* Sources search view */
434 #globalsearch + .devtools-horizontal-splitter {
435 -moz-border-top-colors: var(--theme-splitter-color);
438 .dbg-source-results {
440 background: none !important;
443 .dbg-source-results:not(.selected):hover {
444 background-color: var(--theme-sidebar-background);
447 .dbg-results-header {
448 padding-inline-start: 6px;
451 .dbg-results-header-location {
455 .dbg-results-header-match-count {
456 padding-inline-start: 6px;
457 color: var(--theme-body-color-inactive);
460 .dbg-results-line-number {
462 border-inline-end: 1px solid #9C9CFF;
463 padding-inline-end: 4px;
467 .dbg-results-line-contents {
468 padding-inline-start: 4px;
471 .dbg-results-line-contents-string[match=true] {
473 color: var(--theme-selection-color);
474 border: 1px solid #9C9CFF;
476 margin-top: -1px !important;
477 margin-bottom: -1px !important;
481 .dbg-results-line-contents-string[match=true][focusing] {
482 transition: transform 0.3s ease-in-out;
485 .dbg-results-line-contents-string[match=true][focused] {
486 transition-duration: 0.1s;
487 transform: scale(1.75, 1.75);
490 .dbg-source-results:not(.selected):hover {
491 background-color: var(--theme-sidebar-background);
494 .dbg-results-header {
495 background-color: var(--theme-tab-toolbar-background);
498 .dbg-results-header {
499 color: var(--theme-content-color1);
502 .dbg-search-result:hover {
503 background-color: #004242; /* Select highlight blue at 40% alpha */
506 .dbg-results-header-match-count {
507 color: var(--theme-content-color3);
510 .dbg-results-line-number {
511 background-color: var(--theme-tab-toolbar-background);
512 color: var(--theme-body-color-alt);
515 .dbg-results-line-contents-string {
516 color: var(--theme-body-color-alt);
519 .theme-dark .dbg-results-line-contents-string[match=true] {
520 color: var(--theme-selection-color);
523 .theme-light .dbg-results-line-contents-string[match=true] {
524 color: var(--theme-body-color);
527 /* Toolbar controls */
530 list-style-image: url(images/debugger-pause.png);
534 list-style-image: url(images/debugger-play.png);
537 @media (min-resolution: 1.1dppx) {
539 list-style-image: url(images/debugger-pause@2x.png);
543 list-style-image: url(images/debugger-play@2x.png);
547 #resume[break-on-next] {
548 background: var(--theme-highlight-lightorange);
552 list-style-image: url(images/debugger-step-over.png);
556 list-style-image: url(images/debugger-step-in.png);
560 list-style-image: url(images/debugger-step-out.png);
563 @media (min-resolution: 1.1dppx) {
565 list-style-image: url(images/debugger-step-over@2x.png);
569 list-style-image: url(images/debugger-step-in@2x.png);
573 list-style-image: url(images/debugger-step-out@2x.png);
577 #instruments-pane-toggle {
578 list-style-image: var(--theme-pane-collapse-image);
581 #instruments-pane-toggle[pane-collapsed] {
582 list-style-image: var(--theme-pane-expand-image);
585 /* Horizontal vs. vertical layout */
587 #vertical-layout-panes-container {
592 #body[layout=vertical] #sources-pane > tabs {
593 border-inline-end: none;
596 #body[layout=vertical] #instruments-pane {
597 margin: 0 !important;
598 /* To prevent all the margin hacks to hide the sidebar. */
601 #body[layout=vertical] .side-menu-widget-container,
602 #body[layout=vertical] .side-menu-widget-empty-text {
603 box-shadow: none !important;
606 #body[layout=vertical] .side-menu-widget-item-arrow {
607 background-image: none !important;
610 #body[layout=vertical] .side-menu-widget-group,
611 #body[layout=vertical] .side-menu-widget-item {
612 margin-inline-end: 0;