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/. */
4
5menu {
6  display: inline;
7  padding: 0;
8}
9
10menu > menuitem::after {
11  content: "\25BA";
12  float: right;
13  padding-left: 5px;
14}
15
16menu > menupopup {
17  display: none;
18}
19
20menu > menuitem:hover + menupopup,
21menu > menupopup:hover {
22  display: block;
23}
24
25menupopup {
26  position: fixed;
27  z-index: 10000;
28  background: white;
29  border: 1px solid #cccccc;
30  padding: 5px 0;
31  background: #f2f2f2;
32  border-radius: 5px;
33  color: #585858;
34  box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8);
35  min-width: 130px;
36}
37
38menuitem {
39  display: block;
40  padding: 0 20px;
41  line-height: 20px;
42  font-weight: 500;
43  font-size: 13px;
44  -moz-user-select: none;
45  user-select: none;
46}
47
48menuitem:hover {
49  background: #3780fb;
50  color: white;
51  cursor: pointer;
52}
53
54menuitem[disabled=true] {
55  color: #cccccc;
56}
57
58menuitem[disabled=true]:hover {
59  background-color: transparent;
60  cursor: default;
61}
62
63menuitem[type=checkbox]::before {
64  content: "";
65  width: 10px;
66  display: inline-block;
67}
68
69menuitem[type=checkbox][checked=true]::before {
70  content: "\2713";
71  left: -8px;
72  position: relative;
73}
74
75menuseparator {
76  border-bottom: 1px solid #cacdd3;
77  width: 100%;
78  height: 5px;
79  display: block;
80  margin-bottom: 5px;
81}
82
83#contextmenu-mask.show {
84  position: fixed;
85  top: 0;
86  left: 0;
87  width: 100%;
88  height: 100%;
89  z-index: 999;
90}
91/* This Source Code Form is subject to the terms of the Mozilla Public
92 * License, v. 2.0. If a copy of the MPL was not distributed with this
93 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
94
95:root.theme-light,
96:root .theme-light {
97  --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
98}
99
100* {
101  box-sizing: border-box;
102}
103
104html,
105body {
106  height: 100%;
107  margin: 0;
108  padding: 0;
109  width: 100%;
110}
111
112#mount {
113  display: flex;
114  height: 100%;
115}
116
117::-webkit-scrollbar {
118  width: 8px;
119  height: 8px;
120  background: transparent;
121}
122
123::-webkit-scrollbar-track {
124  border-radius: 8px;
125  background: transparent;
126}
127
128::-webkit-scrollbar-thumb {
129  border-radius: 8px;
130  background: rgba(113, 113, 113, 0.5);
131}
132
133:root.theme-dark .CodeMirror-scrollbar-filler {
134  background: transparent;
135}
136/* This Source Code Form is subject to the terms of the Mozilla Public
137 * License, v. 2.0. If a copy of the MPL was not distributed with this
138 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
139
140.landing-page {
141  flex: 1;
142  display: flex;
143  width: 100vw;
144  height: 100vh;
145  flex-direction: row;
146  align-items: stretch;
147  /* Customs properties */
148  --title-font-size: 24px;
149  --ui-element-font-size: 16px;
150  --primary-line-height: 22px;
151  --secondary-line-height: 25px;
152  --base-spacing: 20px;
153  --base-transition: all 0.25s ease;
154}
155
156.landing-popup {
157  min-width: 0;
158}
159
160.landing-page .panel {
161  display: flex;
162  flex: 1;
163  flex-direction: column;
164  justify-content: space-between;
165}
166
167.landing-page .panel header {
168  display: flex;
169  align-items: baseline;
170  margin: calc(2 * var(--base-spacing)) 0 0;
171  padding-bottom: var(--base-spacing);
172}
173
174.landing-page .panel header input[type="search"] {
175  flex: 1;
176  background-color: var(--theme-tab-toolbar-background);
177  color: var(--theme-comment);
178  font-size: var(--ui-element-font-size);
179  border: 1px solid var(--theme-splitter-color);
180  padding: calc(var(--base-spacing) / 2);
181  margin: 0 var(--base-spacing);
182  transition: var(--base-transition);
183}
184
185.landing-page .panel .hero {
186  height: 100%;
187  display: flex;
188  flex-direction: column;
189  align-items: center;
190  justify-content: center;
191}
192
193.landing-page button {
194  background-color: var(--theme-tab-toolbar-background);
195  color: var(--theme-comment);
196  font-size: var(--ui-element-font-size);
197  border: 1px solid var(--theme-splitter-color);
198  padding: calc(var(--base-spacing) / 2);
199  margin: 0 var(--base-spacing);
200  transition: var(--base-transition);
201  cursor: pointer;
202}
203
204.landing-page .panel header h1 {
205  color: var(--theme-body-color);
206  font-size: var(--title-font-size);
207  margin: 0;
208  line-height: var(--primary-line-height);
209  font-weight: normal;
210  padding-left: calc(2 * var(--base-spacing));
211}
212
213.landing-page .panel h3 {
214  padding-left: calc(2 * var(--base-spacing));
215}
216
217.landing-page .panel header input::placeholder {
218  color: var(--theme-body-color-inactive);
219}
220
221.landing-page .panel header input:focus {
222  border: 1px solid var(--theme-selection-background);
223}
224
225.landing-page .panel .center-message {
226  font-size: var(--ui-element-font-size);
227  line-height: var(--secondary-line-height);
228  padding: calc(var(--base-spacing) / 2);
229}
230
231.landing-page .center a {
232  color: var(--theme-highlight-bluegrey);
233  text-decoration: none;
234}
235
236.landing-page .panel .footer-note {
237  padding: var(--base-spacing) 0;
238  text-align: center;
239  font-size: 14px;
240  color: var(--theme-comment);
241}
242
243.landing-page .panel .launch-action-container {
244  text-align: center;
245}
246
247.landing-page .panel .under-construction {
248  display: flex;
249  width: 417px;
250  color: var(--theme-comment);
251  font-size: calc(var(--ui-element-font-size) / 1);
252  margin: var(--base-spacing) auto;
253  max-width: 350px;
254
255  line-height: 1.4em;
256}
257
258.landing-page .panel .under-construction .github-link {
259  display: block;
260}
261/* This Source Code Form is subject to the terms of the Mozilla Public
262 * License, v. 2.0. If a copy of the MPL was not distributed with this
263 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
264
265.landing-page .tab-group {
266  flex: 1;
267  overflow-y: auto;
268}
269
270.landing-page .tab-list {
271  list-style: none;
272  padding: 0;
273  margin: 0;
274}
275
276.landing-page .tab {
277  border-bottom: 1px solid var(--theme-splitter-color);
278  padding: calc(var(--base-spacing) / 2) var(--base-spacing);
279  font-family: sans-serif;
280  cursor: pointer;
281}
282
283.landing-page .tab-sides {
284  display: flex;
285  justify-content: space-between;
286  margin: 0 calc(var(--base-spacing) * 2);
287}
288
289.landing-page .tab-title {
290  line-height: var(--secondary-line-height);
291  font-size: var(--ui-element-font-size);
292  color: var(--theme-highlight-bluegrey);
293  word-break: break-all;
294}
295
296.landing-page .tab-url {
297  color: var(--theme-comment);
298  word-break: break-all;
299}
300
301.landing-page .tab-value {
302  color: var(--theme-comment);
303  line-height: var(--secondary-line-height);
304  font-size: var(--ui-element-font-size);
305}
306
307.landing-page .tab:focus,
308.landing-page .tab.active {
309  background: var(--theme-selection-background);
310  color: var(--theme-selection-color);
311  transition: var(--base-transition);
312}
313
314.landing-page .tab:focus .tab-title,
315.landing-page .tab.active .tab-title {
316  color: inherit;
317}
318
319.landing-page .tab:focus .tab-url,
320.landing-page .tab.active .tab-url {
321  color: var(--theme-highlight-gray);
322}
323/* This Source Code Form is subject to the terms of the Mozilla Public
324 * License, v. 2.0. If a copy of the MPL was not distributed with this
325 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
326
327.landing-page .sidebar {
328  --sidebar-width: 200px;
329  display: flex;
330  background-color: var(--theme-tab-toolbar-background);
331  width: var(--sidebar-width);
332  flex-direction: column;
333  border-right: 1px solid var(--theme-splitter-color);
334}
335
336.landing-page .sidebar h1 {
337  color: var(--theme-body-color);
338  font-size: var(--title-font-size);
339  margin: 0;
340  line-height: var(--primary-line-height);
341  font-weight: bold;
342  padding: var(--base-spacing) var(--base-spacing);
343}
344
345.landing-page .sidebar ul {
346  list-style: none;
347  padding: 0;
348  line-height: var(--primary-line-height);
349  font-size: var(--ui-element-font-size);
350}
351
352.landing-page .sidebar li {
353  padding: calc(var(--base-spacing) / 4) var(--base-spacing);
354}
355
356.landing-page .sidebar li a {
357  color: var(--theme-body-color);
358}
359
360.landing-page .sidebar li.selected {
361  background: var(--theme-highlight-bluegrey);
362  color: var(--theme-selection-color);
363  transition: var(--base-transition);
364}
365
366.landing-page .sidebar li.selected a {
367  color: inherit;
368}
369
370.landing-page .sidebar li:hover,
371.landing-page .sidebar li:focus {
372  background: var(--theme-selection-background);
373  color: var(--theme-selection-color);
374  cursor: pointer;
375}
376
377.landing-page .sidebar li:hover a,
378.landing-page .sidebar li:focus a {
379  color: inherit;
380}
381
382.landing-page .sidebar li:last-child {
383  border-top: 2px solid var(--theme-splitter-color);
384  margin: 2px;
385}
386
387.landing-page .sidebar .title-wrapper .launchpad-container {
388  padding-left: var(--base-spacing);
389}
390
391.landing-page
392  .sidebar
393  .title-wrapper
394  .launchpad-container
395  .launchpad-container-icon {
396  display: inline-block;
397}
398
399.landing-page .sidebar .title-wrapper .launchpad-container .rocket svg {
400  width: 18px;
401  height: 18px;
402}
403
404.landing-page
405  .sidebar
406  .title-wrapper
407  .launchpad-container
408  .launchpad-container-title {
409  display: inline;
410  padding-left: 3px;
411  font-weight: normal;
412}
413/* This Source Code Form is subject to the terms of the Mozilla Public
414 * License, v. 2.0. If a copy of the MPL was not distributed with this
415 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
416
417.modal-wrapper {
418  position: fixed;
419  display: flex;
420  flex-direction: column;
421  align-items: center;
422  width: 100%;
423  height: 100%;
424  top: 0;
425  left: 0;
426  transition: z-index 200ms;
427  z-index: 100;
428}
429
430.modal {
431  display: flex;
432  width: 80%;
433  max-height: 80vh;
434  overflow-y: auto;
435  background-color: var(--theme-toolbar-background);
436  transition: transform 150ms cubic-bezier(0.07, 0.95, 0, 1);
437  box-shadow: 1px 1px 3px 1px var(--popup-shadow-color);
438}
439
440.modal.entering,
441.modal.exited {
442  transform: translateY(-101%);
443}
444
445.modal.entered,
446.modal.exiting {
447  transform: translateY(5px);
448  flex-direction: column;
449}
450
451/* This rule is active when the screen is not narrow */
452@media (min-width: 580px) {
453  .modal {
454    width: 50%;
455  }
456}
457
458@media (min-height: 340px) {
459  .modal.entered,
460  .modal.exiting {
461    transform: translateY(30px);
462  }
463}
464/* This Source Code Form is subject to the terms of the Mozilla Public
465 * License, v. 2.0. If a copy of the MPL was not distributed with this
466 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
467
468.shortcuts-content {
469  padding: 15px;
470  -moz-column-width: 250px;
471  -webkit-column-width: 250px;
472  column-width: 250px;
473}
474
475.shortcuts-content h2 {
476  margin-top: 2px;
477  margin-bottom: 2px;
478  color: var(--theme-content-color1);
479}
480
481.shortcuts-section {
482  display: inline-block;
483  margin: 5px;
484  margin-bottom: 15px;
485  width: 250px;
486}
487
488.shortcuts-list {
489  list-style: none;
490  margin: 0px;
491  padding: 0px;
492  overflow: auto;
493  width: calc(100% - 1px); /* 1px fixes the hidden right border */
494}
495
496.shortcuts-list li {
497  font-size: 12px;
498  color: var(--theme-body-color);
499  padding-top: 5px;
500  display: flex;
501  justify-content: space-between;
502  border: 1px solid transparent;
503}
504
505@media (max-width: 640px) {
506  .shortcuts-section {
507    width: 100%;
508  }
509}
510/* This Source Code Form is subject to the terms of the Mozilla Public
511 * License, v. 2.0. If a copy of the MPL was not distributed with this
512 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
513
514:root {
515  --arrow-width: 10px;
516  --icon-size: 13px;
517}
518
519:root.theme-light,
520:root .theme-light {
521  --search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
522  --popup-shadow-color: #d0d0d0;
523}
524
525:root.theme-dark,
526:root .theme-dark {
527  --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
528  --popup-shadow-color: #5c667b;
529}
530/* This Source Code Form is subject to the terms of the Mozilla Public
531 * License, v. 2.0. If a copy of the MPL was not distributed with this
532 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
533
534* {
535  box-sizing: border-box;
536}
537
538button {
539  background: transparent;
540  outline: none;
541  border: none;
542}
543
544button:hover,
545button:focus {
546  background-color: var(--theme-toolbar-background-hover);
547}
548
549.debugger {
550  display: flex;
551  flex: 1;
552  height: 100%;
553}
554
555.editor-pane {
556  display: flex;
557  position: relative;
558  flex: 1;
559  background-color: var(--theme-tab-toolbar-background);
560  height: calc(100% - 1px);
561  overflow: hidden;
562}
563
564.theme-dark .editor-pane {
565  background-color: var(--theme-toolbar-background);
566}
567
568.editor-container {
569  width: 100%;
570}
571
572.search-container {
573  position: absolute;
574  top: 0;
575  left: 0;
576  width: 100%;
577  height: 100%;
578  display: flex;
579  z-index: 200;
580  background-color: var(--search-overlays-semitransparent);
581}
582
583.search-container .close-button {
584  width: 16px;
585  margin-top: 25px;
586  margin-right: 20px;
587}
588
589/* Utils */
590.absolute-center {
591  position: absolute;
592  top: 50%;
593  left: 50%;
594  transform: translate(-50%, -50%);
595}
596
597.d-flex {
598  display: flex;
599}
600
601.align-items-center {
602  align-items: center;
603}
604
605.rounded-circle {
606  border-radius: 50%;
607}
608
609.text-white {
610  color: white;
611}
612
613.text-center {
614  text-align: center;
615}
616
617.min-width-0 {
618  min-width: 0;
619}
620/* This Source Code Form is subject to the terms of the Mozilla Public
621 * License, v. 2.0. If a copy of the MPL was not distributed with this
622 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
623
624menupopup {
625  position: fixed;
626  z-index: 10000;
627  background: white;
628  border: 1px solid #cccccc;
629  padding: 5px 0;
630  background: #f2f2f2;
631  border-radius: 5px;
632  color: #585858;
633  box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8);
634  min-width: 130px;
635}
636
637menuitem {
638  display: block;
639  padding: 0 20px;
640  line-height: 20px;
641  font-weight: 500;
642  font-size: 13px;
643  -moz-user-select: none;
644  user-select: none;
645}
646
647menuitem:hover {
648  background: #3780fb;
649  color: white;
650}
651
652menuitem[disabled="true"] {
653  color: #cccccc;
654}
655
656menuitem[disabled="true"]:hover {
657  background-color: transparent;
658  cursor: default;
659}
660
661menuseparator {
662  border-bottom: 1px solid #cacdd3;
663  width: 100%;
664  height: 5px;
665  display: block;
666  margin-bottom: 5px;
667}
668
669#contextmenu-mask.show {
670  position: fixed;
671  top: 0;
672  left: 0;
673  width: 100%;
674  height: 100%;
675  z-index: 999;
676}
677/* vim:set ts=2 sw=2 sts=2 et: */
678/* This Source Code Form is subject to the terms of the Mozilla Public
679 * License, v. 2.0. If a copy of the MPL was not distributed with this
680 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
681
682.theme-dark,
683.theme-light {
684  --number-color: var(--theme-highlight-green);
685  --string-color: var(--theme-highlight-orange);
686  --null-color: var(--theme-comment);
687  --object-color: var(--theme-body-color);
688  --caption-color: var(--theme-highlight-blue);
689  --location-color: var(--theme-content-color1);
690  --source-link-color: var(--theme-highlight-blue);
691  --node-color: var(--theme-highlight-bluegrey);
692  --reference-color: var(--theme-highlight-purple);
693}
694
695.theme-firebug {
696  --number-color: #000088;
697  --string-color: #ff0000;
698  --null-color: #787878;
699  --object-color: DarkGreen;
700  --caption-color: #444444;
701  --location-color: #555555;
702  --source-link-color: blue;
703  --node-color: rgb(0, 0, 136);
704  --reference-color: rgb(102, 102, 255);
705}
706
707/******************************************************************************/
708
709.objectLink:hover {
710  text-decoration: underline;
711}
712
713.inline {
714  display: inline;
715  white-space: normal;
716}
717
718.objectBox-object {
719  font-weight: bold;
720  color: var(--object-color);
721  white-space: pre-wrap;
722}
723
724.objectBox-string,
725.objectBox-text,
726.objectLink-textNode,
727.objectBox-table {
728  white-space: pre-wrap;
729}
730
731.objectBox-number,
732.objectLink-styleRule,
733.objectLink-element,
734.objectLink-textNode,
735.objectBox-array > .length {
736  color: var(--number-color);
737}
738
739.objectBox-string {
740  color: var(--string-color);
741}
742
743.objectLink-function,
744.objectBox-stackTrace,
745.objectLink-profile {
746  color: var(--object-color);
747}
748
749.objectLink-Location {
750  font-style: italic;
751  color: var(--location-color);
752}
753
754.objectBox-null,
755.objectBox-undefined,
756.objectBox-hint,
757.logRowHint {
758  font-style: italic;
759  color: var(--null-color);
760}
761
762.objectLink-sourceLink {
763  position: absolute;
764  right: 4px;
765  top: 2px;
766  padding-left: 8px;
767  font-weight: bold;
768  color: var(--source-link-color);
769}
770
771/******************************************************************************/
772
773.objectLink-event,
774.objectLink-eventLog,
775.objectLink-regexp,
776.objectLink-object,
777.objectLink-Date {
778  font-weight: bold;
779  color: var(--object-color);
780  white-space: pre-wrap;
781}
782
783/******************************************************************************/
784
785.objectLink-object .nodeName,
786.objectLink-NamedNodeMap .nodeName,
787.objectLink-NamedNodeMap .objectEqual,
788.objectLink-NamedNodeMap .arrayLeftBracket,
789.objectLink-NamedNodeMap .arrayRightBracket,
790.objectLink-Attr .attrEqual,
791.objectLink-Attr .attrTitle {
792  color: var(--node-color);
793}
794
795.objectLink-object .nodeName {
796  font-weight: normal;
797}
798
799/******************************************************************************/
800
801.objectLeftBrace,
802.objectRightBrace,
803.arrayLeftBracket,
804.arrayRightBracket {
805  font-weight: bold;
806}
807
808.objectLeftBrace,
809.arrayLeftBracket {
810  margin-right: 4px;
811}
812
813.objectRightBrace,
814.arrayRightBracket {
815  margin-left: 4px;
816}
817
818/******************************************************************************/
819/* Cycle reference*/
820
821.objectLink-Reference {
822  font-weight: bold;
823  color: var(--reference-color);
824}
825
826.objectBox-array > .objectTitle {
827  font-weight: bold;
828  color: var(--object-color);
829}
830
831.caption {
832  font-weight: bold;
833  color: var(--caption-color);
834}
835
836/******************************************************************************/
837/* Themes */
838
839.theme-dark .objectBox-null,
840.theme-dark .objectBox-undefined,
841.theme-light .objectBox-null,
842.theme-light .objectBox-undefined {
843  font-style: normal;
844}
845
846.theme-dark .objectBox-object,
847.theme-light .objectBox-object {
848  font-weight: normal;
849  white-space: pre-wrap;
850}
851
852.theme-dark .caption,
853.theme-light .caption {
854  font-weight: normal;
855}
856/* vim:set ts=2 sw=2 sts=2 et: */
857/* This Source Code Form is subject to the terms of the Mozilla Public
858 * License, v. 2.0. If a copy of the MPL was not distributed with this
859 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
860
861.split-box {
862  display: flex;
863  flex: 1;
864  min-width: 0;
865  height: 100%;
866  width: 100%;
867}
868
869.split-box.vert {
870  flex-direction: row;
871}
872
873.split-box.horz {
874  flex-direction: column;
875}
876
877.split-box > .uncontrolled {
878  display: flex;
879  flex: 1;
880  min-width: 0;
881  overflow: auto;
882}
883
884.split-box > .controlled {
885  display: flex;
886  overflow: auto;
887}
888
889.split-box > .splitter {
890  background-image: none;
891  border: 0;
892  border-style: solid;
893  border-color: transparent;
894  background-color: var(--theme-splitter-color);
895  background-clip: content-box;
896  position: relative;
897
898  box-sizing: border-box;
899
900  /* Positive z-index positions the splitter on top of its siblings and makes
901     it clickable on both sides. */
902  z-index: 1;
903}
904
905.split-box.vert > .splitter {
906  min-width: calc(var(--devtools-splitter-inline-start-width) +
907    var(--devtools-splitter-inline-end-width) + 1px);
908
909  border-left-width: var(--devtools-splitter-inline-start-width);
910  border-right-width: var(--devtools-splitter-inline-end-width);
911
912  margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
913  margin-right: calc(-1 * var(--devtools-splitter-inline-end-width));
914
915  cursor: ew-resize;
916}
917
918.split-box.horz > .splitter {
919  min-height: calc(var(--devtools-splitter-top-width) +
920    var(--devtools-splitter-bottom-width) + 1px);
921
922  border-top-width: var(--devtools-splitter-top-width);
923  border-bottom-width: var(--devtools-splitter-bottom-width);
924
925  margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
926  margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
927
928  cursor: ns-resize;
929}
930
931.split-box.disabled {
932  pointer-events: none;
933}
934
935/**
936 * Make sure splitter panels are not processing any mouse
937 * events. This is good for performance during splitter
938 * bar dragging.
939 */
940.split-box.dragging > .controlled,
941.split-box.dragging > .uncontrolled {
942  pointer-events: none;
943}
944/* This Source Code Form is subject to the terms of the Mozilla Public
945 * License, v. 2.0. If a copy of the MPL was not distributed with this
946 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
947
948.arrow,
949.worker,
950.refresh,
951.shortcut,
952.add-button {
953  fill: var(--theme-splitter-color);
954}
955
956.file,
957.folder,
958.domain {
959  background-color: var(--theme-comment);
960}
961
962.worker,
963.file,
964.folder {
965  position: relative;
966  top: 2px;
967}
968
969.domain,
970.worker,
971.refresh,
972.add-button {
973  position: relative;
974  top: 1px;
975}
976
977.worker svg,
978.refresh svg,
979.shortcut svg,
980.add-button svg {
981  width: 15px;
982}
983
984img.domain,
985img.folder {
986  width: 15px;
987  height: 15px;
988}
989
990img.domain {
991  mask: url("chrome://devtools/skin/images/debugger/domain.svg") no-repeat;
992}
993
994img.folder {
995  mask: url("chrome://devtools/skin/images/debugger/folder.svg") no-repeat;
996}
997
998img.file {
999  mask: url("chrome://devtools/skin/images/debugger/file.svg") no-repeat;
1000  width: 13px;
1001  height: 13px;
1002}
1003
1004img.domain,
1005img.folder,
1006img.file {
1007  mask-size: 100%;
1008  margin-inline-end: 5px;
1009  display: inline-block;
1010}
1011
1012.refresh svg,
1013.shortcut svg,
1014.worker svg {
1015  margin-inline-end: 5px;
1016}
1017
1018img.arrow {
1019  mask: url("chrome://devtools/skin/images/debugger/arrow.svg");
1020  margin-inline-end: 5px;
1021  margin-top: 3px;
1022  width: 9px;
1023  height: 9px;
1024  padding-top: 9px;
1025  background: var(--disclosure-arrow);
1026  mask-size: 100%;
1027  display: inline-block;
1028  margin-bottom: 1px;
1029  transform: rotate(-90deg);
1030  transition: transform 0.18s ease;
1031}
1032
1033html[dir="ltr"] img.arrow {
1034  transform: rotate(-90deg);
1035}
1036
1037html[dir="rtl"] img.arrow {
1038  transform: rotate(90deg);
1039}
1040
1041/* TODO (Amit): html is just for specificity. keep it like this? */
1042html .arrow.expanded svg {
1043  transform: rotate(0deg);
1044}
1045
1046.arrow.hidden {
1047  visibility: hidden;
1048}
1049
1050.webpack svg {
1051  width: 15px;
1052  height: 15px;
1053  margin-right: 5px;
1054  vertical-align: sub;
1055}
1056
1057.function svg {
1058  height: 10px;
1059  width: 15px;
1060}
1061
1062.function path {
1063  fill: var(--theme-body-color);
1064}
1065
1066.angular svg,
1067.source-icon svg {
1068  width: 15px;
1069  height: 15px;
1070  margin-right: 5px;
1071  vertical-align: sub;
1072}
1073
1074.angular,
1075.webpack {
1076  opacity: 0.8;
1077}
1078
1079.theme-dark .angular,
1080.theme-dark .webpack {
1081  opacity: 0.5;
1082}
1083
1084.source-icon svg {
1085  fill: var(--theme-comment);
1086}
1087/* This Source Code Form is subject to the terms of the Mozilla Public
1088 * License, v. 2.0. If a copy of the MPL was not distributed with this
1089 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1090
1091.managed-tree .tree {
1092  -webkit-user-select: none;
1093  -moz-user-select: none;
1094  -ms-user-select: none;
1095  -o-user-select: none;
1096  user-select: none;
1097
1098  white-space: nowrap;
1099  overflow: auto;
1100  min-width: 100%;
1101
1102  display: grid;
1103  grid-template-columns: 1fr;
1104  align-content: start;
1105}
1106
1107.managed-tree .tree button {
1108  display: block;
1109}
1110
1111.managed-tree .tree .node {
1112  padding: 2px 3px 2px 3px;
1113  position: relative;
1114}
1115
1116.managed-tree .tree .node.focused {
1117  color: white;
1118  background-color: var(--theme-selection-background);
1119}
1120
1121html:not([dir="rtl"]) .managed-tree .tree .node > div {
1122  margin-left: 10px;
1123}
1124
1125html[dir="rtl"] .managed-tree .tree .node > div {
1126  margin-right: 10px;
1127}
1128
1129.managed-tree .tree .node.focused svg {
1130  fill: white;
1131}
1132
1133.managed-tree .tree-node button {
1134  position: fixed;
1135}
1136/* This Source Code Form is subject to the terms of the Mozilla Public
1137 * License, v. 2.0. If a copy of the MPL was not distributed with this
1138 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1139
1140.tree {
1141  overflow: auto;
1142}
1143
1144.tree.inline {
1145  display: inline-block;
1146}
1147
1148.tree.nowrap {
1149  white-space: nowrap;
1150}
1151
1152.tree.noselect {
1153  -webkit-user-select: none;
1154  -moz-user-select: none;
1155  -ms-user-select: none;
1156  -o-user-select: none;
1157  user-select: none;
1158}
1159
1160.tree button {
1161  display: block;
1162}
1163
1164.tree .tree-node {
1165  display: flex;
1166}
1167
1168.tree .tree-node:not(.focused):hover {
1169  background-color: var(--theme-selection-background-hover);
1170}
1171
1172.tree-indent {
1173  display: inline-block;
1174  width: 12px;
1175  margin-inline-start: 5px;
1176  border-inline-start: 1px solid #A2D1FF;
1177  flex-shrink: 0;
1178}
1179
1180/* Align with expandables siblings (where we have the arrow) */
1181.tree-node[data-expandable="false"] .tree-indent:last-of-type {
1182  margin-inline-end: 15px;
1183}
1184
1185/* For non expandable root nodes, we don't have .tree-indent elements, so we declare
1186   the margin on the start of the node */
1187.tree-node[data-expandable="false"][aria-level="0"] {
1188  padding-inline-start: 15px
1189}
1190
1191.tree .tree-node[data-expandable="true"] {
1192  cursor: default;
1193}
1194
1195.tree .tree-node.focused {
1196  color: white;
1197  background-color: var(--theme-selection-background, #0a84ff);
1198}
1199
1200.tree-node.focused .arrow svg {
1201  fill: currentColor;
1202}
1203
1204.tree-node:hover img {
1205  background-color: var(--theme-content-color3);
1206}
1207
1208.arrow svg {
1209  fill: var(--theme-splitter-color, #9B9B9B);
1210  transition: transform 0.125s ease;
1211  width: 10px;
1212  margin-inline-end: 5px;
1213  transform: rotate(-90deg);
1214}
1215
1216html[dir="rtl"] .arrow svg,
1217.arrow svg:dir(rtl),
1218.arrow svg:-moz-locale-dir(rtl) {
1219  transform: rotate(90deg);
1220}
1221
1222.arrow.expanded.expanded svg {
1223  transform: rotate(0deg);
1224}
1225/* This Source Code Form is subject to the terms of the Mozilla Public
1226 * License, v. 2.0. If a copy of the MPL was not distributed with this
1227 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1228
1229.close-btn {
1230  width: 14px;
1231  height: 14px;
1232  border: 1px solid transparent;
1233  border-radius: 2px;
1234  display: flex;
1235  flex-direction: row;
1236  justify-content: center;
1237  align-items: center;
1238}
1239
1240.close-btn .close {
1241  mask: url("chrome://devtools/skin/images/debugger/close.svg") no-repeat;
1242  mask-size: 100%;
1243  background-color: var(--theme-comment);
1244  width: 8px;
1245  height: 8px;
1246  transition: all 0.15s ease-in-out;
1247  padding: 0;
1248  margin-top: 0;
1249}
1250
1251.close-btn:hover img.close {
1252  background-color: white;
1253}
1254
1255.close-btn:hover {
1256  background-color: var(--theme-selection-background);
1257}
1258
1259.close-btn.big {
1260  width: 16px;
1261  height: 16px;
1262}
1263
1264.close-btn.big .close {
1265  width: 9px;
1266  height: 9px;
1267}
1268/* This Source Code Form is subject to the terms of the Mozilla Public
1269 * License, v. 2.0. If a copy of the MPL was not distributed with this
1270 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1271
1272.search-field {
1273  width: calc(100% - 1px);
1274  height: 27px;
1275  background-color: var(--theme-toolbar-background);
1276  border-bottom: 1px solid var(--theme-splitter-color);
1277  padding-right: 10px;
1278  display: flex;
1279  flex-shrink: 0;
1280}
1281
1282.search-field.big {
1283  height: 40px;
1284}
1285
1286.search-field i {
1287  display: block;
1288  padding: 0;
1289  width: 16px;
1290}
1291
1292.search-field i svg {
1293  width: 16px;
1294}
1295
1296.search-field.big input {
1297  line-height: 40px;
1298}
1299
1300.search-field input {
1301  border: none;
1302  line-height: 30px;
1303  background-color: var(--theme-toolbar-background);
1304  color: var(--theme-body-color-inactive);
1305  width: calc(100% - 38px);
1306  flex: 1;
1307}
1308
1309.theme-dark .search-field input {
1310  color: var(--theme-body-color-inactive);
1311}
1312
1313.search-field i.magnifying-glass,
1314.search-field i.sad-face {
1315  padding: 6px;
1316  width: 24px;
1317}
1318
1319.search-field.big i.magnifying-glass,
1320.search-field.big i.sad-face {
1321  padding: 14px;
1322  width: 40px;
1323}
1324
1325.search-field .magnifying-glass path,
1326.search-field .magnifying-glass ellipse {
1327  stroke: var(--theme-comment);
1328}
1329
1330.search-field input::placeholder {
1331  color: var(--theme-toolbar-color);
1332}
1333
1334.search-field input:focus {
1335  outline-width: 0;
1336}
1337
1338.search-field input.empty {
1339  color: var(--theme-highlight-orange);
1340}
1341
1342.search-field.big .summary {
1343  line-height: 40px;
1344}
1345
1346.search-field .summary {
1347  line-height: 27px;
1348  padding-right: 10px;
1349  color: var(--theme-body-color-inactive);
1350}
1351
1352.search-field .search-nav-buttons {
1353  display: flex;
1354  user-select: none;
1355}
1356
1357.search-field .search-nav-buttons .nav-btn {
1358  display: flex;
1359  height: 100%;
1360  background: transparent;
1361  transition: all 0.25s ease-in-out;
1362  border: 1px solid transparent;
1363  justify-content: center;
1364  padding-top: 4px;
1365}
1366
1367.search-field .search-nav-buttons .nav-btn:hover {
1368  background: var(--theme-toolbar-background-hover);
1369}
1370
1371.search-field .search-nav-buttons .nav-btn:active path {
1372  fill: var(--theme-comment-alt);
1373}
1374
1375.search-field .search-nav-buttons .nav-btn path {
1376  fill: var(--theme-comment);
1377}
1378/* This Source Code Form is subject to the terms of the Mozilla Public
1379 * License, v. 2.0. If a copy of the MPL was not distributed with this
1380 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1381
1382.search-container {
1383  position: absolute;
1384  top: 30px;
1385  left: 0;
1386  width: calc(100% - 1px);
1387  height: calc(100% - 31px);
1388  display: flex;
1389  flex-direction: column;
1390  z-index: 20;
1391  background-color: var(--theme-body-background);
1392  overflow-y: hidden;
1393}
1394
1395.project-text-search {
1396  flex-grow: 1;
1397  display: flex;
1398  flex-direction: column;
1399  overflow-y: hidden;
1400  height: 100%;
1401}
1402
1403.project-text-search .result {
1404  display: flex;
1405  cursor: default;
1406  padding: 4px 0 4px 30px;
1407  line-height: 16px;
1408  font-size: 10px;
1409  width: 100%;
1410}
1411
1412.project-text-search .matches-summary {
1413  margin-left: 5px;
1414}
1415
1416.project-text-search .result {
1417  font-family: Menlo, monospace;
1418}
1419
1420.project-text-search .result.focused {
1421  background-color: var(--search-overlays-semitransparent);
1422}
1423
1424.project-text-search .result .query-match {
1425  background-color: var(--theme-selection-background);
1426  color: white;
1427  padding: 1px 4px;
1428  margin: 0 2px 0 2px;
1429  border-radius: 2px;
1430}
1431
1432.project-text-search .result.focused .line-number {
1433  font-weight: bolder;
1434}
1435
1436.project-text-search .result .line-number {
1437  margin-right: 1em;
1438  width: 2em;
1439  margin-left: 0.8em;
1440}
1441
1442.project-text-search .no-result-msg {
1443  color: var(--theme-body-color-inactive);
1444  font-size: 24px;
1445  padding: 4px 15px;
1446  max-width: 100%;
1447  overflow-wrap: break-word;
1448  hyphens: auto;
1449}
1450
1451.project-text-search .file-result {
1452  font-weight: bold;
1453  line-height: 20px;
1454  cursor: default;
1455  padding: 2px 0 2px 5px;
1456  font-size: 12px;
1457}
1458
1459.project-text-search .file-result .arrow {
1460  margin: 2px 0 2px 0;
1461}
1462
1463.project-text-search .file-result.focused {
1464  background-color: var(--search-overlays-semitransparent);
1465}
1466
1467.project-text-search .line-match {
1468  display: "flex";
1469  grow: 1;
1470}
1471
1472.project-text-search .search-field {
1473  display: flex;
1474  align-self: stretch;
1475  flex-grow: 1;
1476}
1477
1478.project-text-search .search-field .close-btn.big {
1479  margin-top: 12px;
1480}
1481
1482.project-text-search .managed-tree {
1483  overflow-y: auto;
1484  height: 100%;
1485}
1486
1487.project-text-search .managed-tree .tree {
1488  height: 100%;
1489}
1490/* This Source Code Form is subject to the terms of the Mozilla Public
1491 * License, v. 2.0. If a copy of the MPL was not distributed with this
1492 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1493
1494.sources-panel {
1495  background-color: var(--theme-sidebar-background);
1496  display: flex;
1497  flex: 1;
1498  flex-direction: column;
1499  overflow: hidden;
1500  position: relative;
1501}
1502
1503.sources-panel * {
1504  -moz-user-select: none;
1505  user-select: none;
1506}
1507
1508.sources-list {
1509  flex: 1;
1510  display: flex;
1511  overflow-x: hidden;
1512  overflow-y: auto;
1513}
1514
1515.sources-list .tree:focus {
1516  outline: none;
1517}
1518
1519.sources-list .managed-tree {
1520  flex: 1;
1521  display: flex;
1522  overflow-x: hidden;
1523  overflow-y: auto;
1524}
1525
1526.sources-list .managed-tree .tree .node {
1527  padding: 0 10px 0 3px;
1528  width: 100%;
1529}
1530
1531.sources-list .tree img.arrow {
1532  margin-right: 5px;
1533}
1534
1535.sources-list .tree .focused img.arrow {
1536  background-color: white;
1537}
1538
1539.sources-list .tree img.arrow.expanded {
1540  transform: rotate(0deg);
1541}
1542
1543.theme-dark .source-list .tree .node.focused {
1544  background-color: var(--theme-tab-toolbar-background);
1545}
1546
1547.sources-list .tree .focused .label {
1548  background-color: var(--theme-selection-background);
1549}
1550
1551.sources-list .tree .label {
1552  padding: 3px 0px 3px 0px;
1553  display: inline-block;
1554}
1555
1556.sources-list .tree .node .no-arrow {
1557  width: 10px;
1558  display: inline-block;
1559}
1560
1561.no-sources-message {
1562  width: 100%;
1563  font-style: italic;
1564  text-align: center;
1565  padding: 0.5em;
1566  font-size: 12px;
1567  user-select: none;
1568  justify-content: center;
1569  align-items: center;
1570}
1571
1572.sources-panel .outline {
1573  display: flex;
1574  flex: 1;
1575}
1576
1577.tree-indent {
1578  border-inline-start: 0 none;
1579}
1580
1581.source-outline-tabs {
1582  width: 100%;
1583  background: var(--theme-body-background);
1584  border-top: 1px solid var(--theme-splitter-color);
1585  display: flex;
1586  -moz-user-select: none;
1587  user-select: none;
1588  box-sizing: border-box;
1589  height: 30px;
1590}
1591
1592.source-outline-tabs .tab {
1593  background-color: var(--theme-toolbar-background);
1594  border-bottom: 1px solid transparent;
1595  border-color: var(--theme-splitter-color);
1596  color: var(--theme-body-color);
1597  cursor: default;
1598  display: inline-flex;
1599  flex: 1;
1600  justify-content: center;
1601  margin-bottom: 0px;
1602  margin-top: -1px;
1603  overflow: hidden;
1604  padding: 8px 8px 7px 8px;
1605  position: relative;
1606  transition: all 0.25s ease;
1607}
1608
1609.source-outline-tabs .tab:first-child {
1610  border-inline-end: 1px solid var(--theme-splitter-color);
1611}
1612
1613.source-outline-tabs .tab:hover {
1614  background-color: var(--theme-toolbar-background-alt);
1615  border-color: var(--theme-splitter-color);
1616}
1617
1618.source-outline-tabs .tab.active {
1619  background-color: var(--theme-body-background);
1620  border-bottom-color: transparent;
1621}
1622
1623.source-outline-tabs .tab.active path,
1624.source-outline-tabs .tab:hover path {
1625  fill: var(--theme-body-color);
1626}
1627
1628.sources-list .managed-tree .tree .node img.blackBox {
1629  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
1630  mask-size: 100%;
1631  background-color: var(--theme-highlight-blue);
1632  width: 13px;
1633  height: 13px;
1634  display: inline-block;
1635  margin-inline-end: 5px;
1636  margin-bottom: -2px;
1637}
1638
1639.sources-list .managed-tree .tree .node.focused img {
1640  background-color: white;
1641}
1642
1643.theme-dark .sources-list .managed-tree .tree .node:not(.focused) img.blackBox {
1644  background-color: var(--theme-comment);
1645}
1646
1647.theme-dark .sources-list .managed-tree .tree .node img.blackBox {
1648  background-color: var(--theme-body-color);
1649}
1650
1651.theme-dark .sources-list .managed-tree .tree .node.focused img.blackBox {
1652  background-color: white;
1653}
1654
1655.tree:not(.object-inspector) .tree-node[data-expandable="false"] .tree-indent:last-of-type {
1656  margin-inline-end: 4px;
1657}
1658/* This Source Code Form is subject to the terms of the Mozilla Public
1659 * License, v. 2.0. If a copy of the MPL was not distributed with this
1660 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1661
1662.outline {
1663  overflow-y: auto;
1664}
1665
1666.outline .outline-pane-info {
1667  width: 100%;
1668  font-style: italic;
1669  text-align: center;
1670  padding: 0.5em;
1671  user-select: none;
1672  font-size: 12px;
1673}
1674
1675.outline-list {
1676  list-style-type: none;
1677  flex: 1 0 100%;
1678  padding: 10px 0px;
1679  margin: 0;
1680  font-family: var(--monospace-font-family);
1681}
1682
1683.outline-list__class-list {
1684  list-style: none;
1685  margin: 0;
1686  padding: 0;
1687}
1688
1689.outline-list__class-list .function-signature .function-name {
1690  color: var(--theme-highlight-green);
1691}
1692
1693.outline-list .function-signature .paren {
1694  color: inherit;
1695}
1696
1697.outline-list h2 {
1698  font-weight: normal;
1699  font-size: 1em;
1700  margin: 10px 0 10px 10px;
1701  color: var(--blue-55);
1702}
1703
1704.outline-list h2:hover {
1705  background: var(--theme-toolbar-background-hover);
1706}
1707
1708.theme-dark .outline-list h2 {
1709  color: var(--theme-highlight-blue);
1710}
1711
1712.outline-list h2 .keyword {
1713  color: var(--theme-highlight-red);
1714}
1715
1716.outline-list__element {
1717  padding: 3px 10px 3px 10px;
1718  cursor: default;
1719  white-space: nowrap;
1720}
1721
1722.outline-list__element-icon {
1723  padding-right: 0.4rem;
1724  padding-left: 1rem;
1725}
1726
1727.outline-list__element:hover {
1728  background: var(--theme-toolbar-background-hover);
1729}
1730/* This Source Code Form is subject to the terms of the Mozilla Public
1731 * License, v. 2.0. If a copy of the MPL was not distributed with this
1732 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1733
1734.function-signature {
1735  align-self: center;
1736}
1737
1738.function-signature .function-name {
1739  color: var(--theme-highlight-blue);
1740}
1741
1742.function-signature .param {
1743  color: var(--theme-highlight-red);
1744}
1745
1746.function-signature .paren {
1747  color: var(--object-color);
1748}
1749
1750.function-signature .comma {
1751  color: var(--object-color);
1752}
1753.command-bar-button {
1754  appearance: none;
1755  background: transparent;
1756  border: none;
1757  display: inline-block;
1758  text-align: center;
1759  position: relative;
1760  padding: 0px 5px;
1761  fill: currentColor;
1762}
1763
1764.command-bar-button:focus {
1765  outline: none;
1766}
1767
1768.command-bar-button:disabled {
1769  opacity: 0.8;
1770  cursor: default;
1771}
1772
1773.command-bar-button:not(.disabled):hover {
1774  background: var(--theme-toolbar-background-hover);
1775}
1776
1777:root.theme-dark .command-bar-button {
1778  color: var(--theme-body-color);
1779}
1780
1781.command-bar-button > * {
1782  width: 16px;
1783  height: 16px;
1784  display: inline-block;
1785  vertical-align: middle;
1786}
1787/* This Source Code Form is subject to the terms of the Mozilla Public
1788 * License, v. 2.0. If a copy of the MPL was not distributed with this
1789 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1790
1791.toggle-button {
1792  transform: translate(0, 0px);
1793  transition: transform 0.25s ease-in-out;
1794  padding: 5px;
1795}
1796
1797.toggle-button .togglePanes {
1798  vertical-align: -2px;
1799}
1800
1801.toggle-button svg {
1802  fill: var(--theme-comment);
1803  vertical-align: 0;
1804}
1805
1806:root.theme-dark .toggle-button svg {
1807  fill: var(--theme-comment-alt);
1808}
1809
1810.toggle-button.end {
1811  margin-inline-end: 0px;
1812  margin-inline-start: auto;
1813}
1814
1815.toggle-button.start {
1816  margin-inline-start: 0px;
1817}
1818
1819html:not([dir="rtl"]) .toggle-button.end svg,
1820html[dir="rtl"] .toggle-button.start svg {
1821  transform: rotate(180deg);
1822}
1823
1824html .toggle-button.end.vertical svg {
1825  transform: rotate(-90deg);
1826}
1827
1828.toggle-button.start.collapsed,
1829.toggle-button.end.collapsed {
1830  transform: rotate(180deg);
1831}
1832/* This Source Code Form is subject to the terms of the Mozilla Public
1833 * License, v. 2.0. If a copy of the MPL was not distributed with this
1834 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1835
1836.source-footer {
1837  background: var(--theme-body-background);
1838  border-top: 1px solid var(--theme-splitter-color);
1839  position: absolute;
1840  display: flex;
1841  bottom: 0;
1842  left: 0;
1843  right: 0;
1844  opacity: 1;
1845  z-index: 1;
1846  -moz-user-select: none;
1847  user-select: none;
1848  height: var(--editor-footer-height);
1849  box-sizing: border-box;
1850}
1851
1852.source-footer .commands {
1853  display: flex;
1854  align-items: center;
1855}
1856
1857.source-footer .commands * {
1858  -moz-user-select: none;
1859  user-select: none;
1860}
1861
1862.source-footer > .commands > .action {
1863  display: flex;
1864  justify-content: center;
1865  align-items: center;
1866  transition: opacity 200ms;
1867  border: none;
1868  background: transparent;
1869  padding: 6px;
1870}
1871
1872.source-footer > .commands > .action img {
1873  height: 100%;
1874  display: flex;
1875  flex-direction: column;
1876  justify-content: center;
1877}
1878
1879.source-footer > button.action:hover {
1880  background: var(--theme-toolbar-background-hover);
1881}
1882
1883.source-footer > .commands > button.action:focus {
1884  outline: none;
1885}
1886
1887:root.theme-dark .source-footer > .commands > .action {
1888  fill: var(--theme-body-color);
1889}
1890
1891:root.theme-dark .source-footer > .commands > .action:hover {
1892  fill: var(--theme-selection-color);
1893}
1894
1895.source-footer > .commands > .action > img.prettyPrint {
1896  mask: url("chrome://devtools/skin/images/debugger/prettyPrint.svg") no-repeat;
1897  height: 16px;
1898  width: 16px;
1899  background: var(--theme-body-color);
1900}
1901
1902.source-footer > .commands > .action > img.blackBox {
1903  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
1904  height: 16px;
1905  width: 16px;
1906  background: var(--theme-body-color);
1907}
1908
1909.source-footer .commands .coverage {
1910  color: var(--theme-body-color);
1911}
1912
1913.coverage-on .source-footer .commands .coverage {
1914  color: var(--theme-highlight-blue);
1915  border: 1px solid var(--theme-body-color-inactive);
1916  border-radius: 2px;
1917}
1918
1919.source-footer > .commands > .blackboxed > img.blackBox {
1920  background: var(--theme-highlight-blue);
1921}
1922
1923.source-footer .blackbox-summary {
1924  color: var(--theme-body-color);
1925}
1926
1927.source-footer .mapped-source {
1928  color: var(--theme-body-color);
1929  padding: 2.5px;
1930  white-space: nowrap;
1931  overflow: hidden;
1932  text-overflow: ellipsis;
1933}
1934/* This Source Code Form is subject to the terms of the Mozilla Public
1935 * License, v. 2.0. If a copy of the MPL was not distributed with this
1936 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
1937
1938.search-bar {
1939  display: flex;
1940  flex-direction: column;
1941}
1942
1943.search-bar .search-field {
1944  padding-left: 7px;
1945  height: var(--editor-searchbar-height);
1946}
1947
1948.search-field .close-btn {
1949  margin-top: 7px;
1950}
1951
1952.search-bottom-bar * {
1953  -moz-user-select: none;
1954  user-select: none;
1955}
1956
1957.search-bottom-bar {
1958  display: flex;
1959  flex-shrink: 0;
1960  justify-content: flex-end;
1961  width: calc(100% - 1px);
1962  height: var(--editor-second-searchbar-height);
1963  background-color: var(--theme-toolbar-background);
1964  border-bottom: 1px solid var(--theme-splitter-color);
1965  padding: 0 13px;
1966}
1967
1968.search-bottom-bar button:focus {
1969  outline: none;
1970}
1971
1972.search-bottom-bar .search-modifiers {
1973  display: flex;
1974  align-items: center;
1975}
1976
1977.search-bottom-bar .search-modifiers button {
1978  padding: 0 3px;
1979  margin: 0 3px;
1980  border: none;
1981  background: none;
1982  width: 20px;
1983  height: 20px;
1984  border-radius: 3px;
1985}
1986
1987.search-bottom-bar .search-modifiers button i {
1988  display: flex;
1989  justify-content: center;
1990  align-items: center;
1991  padding: 0;
1992  width: 16px;
1993}
1994
1995.search-bottom-bar .search-modifiers button svg {
1996  fill: var(--theme-comment);
1997  height: 16px;
1998  width: 16px;
1999}
2000
2001.search-bottom-bar .search-modifiers button:hover {
2002  background: var(--theme-toolbar-background-hover);
2003}
2004
2005.search-bottom-bar .search-modifiers button:active {
2006  outline: none;
2007}
2008
2009.search-bottom-bar .search-modifiers button.active svg {
2010  fill: var(--theme-selection-background);
2011}
2012
2013.theme-dark .search-bottom-bar .search-modifiers button.active svg {
2014  fill: white;
2015}
2016
2017.search-bottom-bar .search-type-toggles {
2018  display: flex;
2019  align-items: center;
2020  max-width: 68%;
2021}
2022
2023.search-bottom-bar .search-type-name {
2024  padding: 1px 0 0 0;
2025  margin: 0 0 0 6px;
2026  border: none;
2027  background: transparent;
2028  color: var(--theme-comment);
2029}
2030
2031.search-bottom-bar .search-type-toggles .search-type-btn:active {
2032  outline: none;
2033}
2034
2035.search-bottom-bar .search-type-toggles .search-type-btn.active {
2036  color: var(--theme-selection-background);
2037}
2038
2039.theme-dark .search-bottom-bar .search-type-toggles .search-type-btn.active {
2040  color: white;
2041}
2042
2043.search-bar .result-list {
2044  max-height: 230px;
2045}
2046/* vim:set ts=2 sw=2 sts=2 et: */
2047/* This Source Code Form is subject to the terms of the Mozilla Public
2048 * License, v. 2.0. If a copy of the MPL was not distributed with this
2049 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
2050
2051.theme-dark,
2052.theme-light {
2053  --number-color: var(--theme-highlight-green);
2054  --string-color: var(--theme-highlight-red);
2055  --null-color: var(--theme-comment);
2056  --object-color: var(--theme-highlight-blue);
2057  --caption-color: var(--theme-highlight-blue);
2058  --location-color: var(--theme-comment);
2059  --source-link-color: var(--theme-highlight-blue);
2060  --node-color: var(--theme-highlight-purple);
2061  --reference-color: var(--theme-highlight-blue);
2062  --comment-node-color: var(--theme-comment);
2063}
2064
2065.theme-firebug {
2066  --number-color: #000088;
2067  --string-color: #FF0000;
2068  --null-color: #787878;
2069  --object-color: DarkGreen;
2070  --caption-color: #444444;
2071  --location-color: #555555;
2072  --source-link-color: blue;
2073  --node-color: rgb(0, 0, 136);
2074  --reference-color: rgb(102, 102, 255);
2075}
2076
2077/******************************************************************************/
2078
2079.inline {
2080  display: inline;
2081  white-space: normal;
2082}
2083
2084.objectBox-object {
2085  font-weight: bold;
2086  color: var(--object-color);
2087  white-space: pre-wrap;
2088}
2089
2090.objectBox-string,
2091.objectBox-symbol,
2092.objectBox-text,
2093.objectBox-textNode,
2094.objectBox-table {
2095  white-space: pre-wrap;
2096}
2097
2098.objectBox-number,
2099.objectBox-styleRule,
2100.objectBox-element,
2101.objectBox-textNode,
2102.objectBox-array > .length {
2103  color: var(--number-color);
2104}
2105
2106.objectBox-textNode,
2107.objectBox-string,
2108.objectBox-symbol {
2109  color: var(--string-color);
2110}
2111
2112.objectBox-string a, .objectBox-string a:visited {
2113  color: currentColor;
2114  text-decoration: none;
2115  font-style: italic;
2116}
2117
2118.objectBox-string a:hover {
2119  text-decoration: underline;
2120}
2121
2122.objectBox-function,
2123.objectBox-stackTrace,
2124.objectBox-profile {
2125  color: var(--object-color);
2126}
2127
2128.objectBox-Location,
2129.location {
2130  color: var(--location-color);
2131}
2132
2133.objectBox-null,
2134.objectBox-undefined,
2135.objectBox-hint,
2136.objectBox-nan,
2137.logRowHint {
2138  color: var(--null-color);
2139}
2140
2141.objectBox-sourceLink {
2142  position: absolute;
2143  right: 4px;
2144  top: 2px;
2145  padding-left: 8px;
2146  font-weight: bold;
2147  color: var(--source-link-color);
2148}
2149
2150.objectBox-failure {
2151  color: var(--string-color);
2152  border-width: 1px;
2153  border-style: solid;
2154  border-radius: 2px;
2155  font-size: 0.8em;
2156  padding: 0 2px;
2157}
2158
2159/******************************************************************************/
2160
2161.objectBox-event,
2162.objectBox-eventLog,
2163.objectBox-regexp,
2164.objectBox-object {
2165  color: var(--object-color);
2166  white-space: pre-wrap;
2167}
2168
2169.objectBox .Date {
2170  color: var(--string-color);
2171  white-space: pre-wrap;
2172}
2173
2174/******************************************************************************/
2175
2176.objectBox.theme-comment {
2177  color: var(--comment-node-color);
2178}
2179
2180.tag-name {
2181  color: var(--object-color);
2182}
2183
2184.attrName {
2185  color: var(--string-color);
2186}
2187
2188.attrEqual,
2189.objectEqual {
2190  color: var(--comment-node-color);
2191}
2192
2193.attrValue,
2194.attrValue.objectBox-string {
2195  color: var(--node-color);
2196}
2197
2198.angleBracket {
2199  color: var(--theme-body-color);
2200}
2201
2202/******************************************************************************/
2203/* Length bubble for arraylikes and maplikes */
2204
2205.objectLengthBubble {
2206  color: var(--null-color);
2207}
2208
2209/******************************************************************************/
2210
2211.objectLeftBrace,
2212.objectRightBrace,
2213.arrayLeftBracket,
2214.arrayRightBracket {
2215  color: var(--object-color);
2216}
2217
2218/******************************************************************************/
2219/* Cycle reference */
2220
2221.objectBox-Reference {
2222  font-weight: bold;
2223  color: var(--reference-color);
2224}
2225
2226[class*="objectBox"] > .objectTitle {
2227  color: var(--object-color);
2228}
2229
2230.caption {
2231  color: var(--caption-color);
2232}
2233
2234/******************************************************************************/
2235/* Themes */
2236
2237.theme-dark .objectBox-null,
2238.theme-dark .objectBox-undefined,
2239.theme-light .objectBox-null,
2240.theme-light .objectBox-undefined {
2241  font-style: normal;
2242}
2243
2244.theme-dark .objectBox-object,
2245.theme-light .objectBox-object {
2246  font-weight: normal;
2247  white-space: pre-wrap;
2248}
2249
2250.theme-dark .caption,
2251.theme-light .caption {
2252  font-weight: normal;
2253}
2254
2255/******************************************************************************/
2256/* Open DOMNode in inspector button */
2257
2258.open-inspector svg {
2259  fill: var(--comment-node-color);
2260  height: 16px;
2261  width: 16px;
2262  margin-left: .25em;
2263  cursor: pointer;
2264  vertical-align: middle;
2265}
2266
2267.objectBox-node:hover .open-inspector svg,
2268.objectBox-textNode:hover .open-inspector svg,
2269.open-inspector svg:hover {
2270  fill: var(--theme-highlight-blue);
2271}
2272
2273/******************************************************************************/
2274/* Jump to definition button */
2275
2276.jump-definition svg {
2277  stroke: var(--comment-node-color);
2278  height: 16px;
2279  width: 16px;
2280  margin-left: .25em;
2281  cursor: pointer;
2282  vertical-align: middle;
2283}
2284
2285.jump-definition svg:hover {
2286  stroke: var(--theme-highlight-blue);
2287}
2288
2289/******************************************************************************/
2290/* "more…" ellipsis */
2291.more-ellipsis {
2292  color: var(--comment-node-color);
2293}
2294/* This Source Code Form is subject to the terms of the Mozilla Public
2295 * License, v. 2.0. If a copy of the MPL was not distributed with this
2296 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
2297
2298.tree.object-inspector .node.object-node {
2299  display: inline-block;
2300}
2301
2302.tree.object-inspector .object-label,
2303.tree.object-inspector .object-label * {
2304  color: var(--theme-highlight-blue);
2305}
2306
2307.tree.object-inspector .node .unavailable {
2308  color: var(--theme-comment);
2309}
2310
2311.tree.object-inspector .lessen,
2312.tree.object-inspector .lessen *,
2313.tree.object-inspector .lessen .object-label,
2314.tree.object-inspector .lessen .object-label * {
2315  color: var(--theme-comment);
2316}
2317
2318.object-inspector .object-delimiter {
2319  color: var(--theme-comment);
2320}
2321/* This Source Code Form is subject to the terms of the Mozilla Public
2322 * License, v. 2.0. If a copy of the MPL was not distributed with this
2323 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2324
2325.bracket-arrow {
2326  position: absolute;
2327}
2328
2329.bracket-arrow::before,
2330.bracket-arrow::after {
2331  content: "";
2332  height: 0;
2333  width: 0;
2334  position: absolute;
2335  border: 7px solid transparent;
2336}
2337
2338.bracket-arrow.up::before {
2339  border-bottom-color: var(--theme-splitter-color);
2340  top: -1px;
2341}
2342
2343.theme-dark .bracket-arrow.up::before {
2344  border-bottom-color: var(--theme-body-color);
2345}
2346
2347.bracket-arrow.up::after {
2348  border-bottom-color: var(--theme-body-background);
2349  top: 0px;
2350}
2351
2352.bracket-arrow.down::before {
2353  border-bottom-color: transparent;
2354  border-top-color: var(--theme-splitter-color);
2355  top: 0px;
2356}
2357
2358.theme-dark .bracket-arrow.down::before {
2359  border-top-color: var(--theme-body-color);
2360}
2361
2362.bracket-arrow.down::after {
2363  border-bottom-color: transparent;
2364  border-top-color: var(--theme-body-background);
2365  top: -1px;
2366}
2367/* This Source Code Form is subject to the terms of the Mozilla Public
2368 * License, v. 2.0. If a copy of the MPL was not distributed with this
2369 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2370
2371.popover {
2372  position: fixed;
2373  z-index: 100;
2374}
2375
2376.popover .gap {
2377  height: 5px;
2378  padding-top: 5px;
2379}
2380
2381.popover .preview-popup {
2382  margin-left: -55px;
2383}
2384
2385.popover .add-to-expression-bar {
2386  margin-left: -55px;
2387}
2388/* This Source Code Form is subject to the terms of the Mozilla Public
2389 * License, v. 2.0. If a copy of the MPL was not distributed with this
2390 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2391
2392.popover .preview-popup {
2393  background: var(--theme-body-background);
2394  width: 350px;
2395  min-height: 80px;
2396  border: 1px solid var(--theme-splitter-color);
2397  padding: 10px;
2398  height: auto;
2399  min-height: inherit;
2400  max-height: 200px;
2401  overflow: auto;
2402  box-shadow: 1px 2px 3px var(--popup-shadow-color);
2403}
2404
2405.theme-dark .popover .preview-popup {
2406  box-shadow: 1px 2px 3px var(--popup-shadow-color);
2407}
2408
2409.popover .preview-popup .header-container {
2410  width: 100%;
2411  line-height: 15px;
2412  display: flex;
2413  flex-direction: row;
2414  margin-bottom: 5px;
2415}
2416
2417.popover .preview-popup .immutable-logo {
2418  width: 20px;
2419  margin-right: 5px;
2420}
2421
2422.popover .preview-popup .header-container h3 {
2423  margin: 0;
2424  margin-bottom: 5px;
2425  font-weight: normal;
2426  font-size: 14px;
2427}
2428
2429.popover .preview-popup .header .link {
2430  align-self: flex-end;
2431  color: var(--theme-highlight-blue);
2432  text-decoration: underline;
2433}
2434
2435.preview-selection:hover {
2436  cursor: default;
2437}
2438
2439.preview-selection,
2440.debug-expression.preview-selection {
2441  background-color: var(--theme-highlight-yellow);
2442}
2443
2444.theme-dark .preview-selection,
2445.theme-dark .debug-expression.preview-selection {
2446  background-color: #743884;
2447}
2448
2449.theme-dark .cm-s-mozilla .preview-selection,
2450.theme-dark .cm-s-mozilla .debug-expression.preview-selection {
2451  color: #e7ebee;
2452}
2453
2454.popover .preview-popup .function-signature {
2455  padding-top: 10px;
2456}
2457
2458.theme-dark .popover .preview-popup {
2459  border-color: var(--theme-body-color);
2460}
2461
2462.theme-dark .popover .preview-popup .arrow svg {
2463  fill: var(--theme-comment);
2464}
2465
2466.tooltip {
2467  position: fixed;
2468  z-index: 100;
2469}
2470
2471.tooltip .preview-popup {
2472  background: var(--theme-toolbar-background);
2473  max-width: inherit;
2474  min-height: 80px;
2475  border: 1px solid var(--theme-splitter-color);
2476  box-shadow: 1px 2px 4px 1px var(--theme-toolbar-background-alt);
2477  padding: 5px;
2478  height: auto;
2479  min-height: inherit;
2480  max-height: 200px;
2481  overflow: auto;
2482}
2483
2484.theme-dark .tooltip .preview-popup {
2485  border-color: var(--theme-body-color);
2486}
2487
2488.tooltip .gap {
2489  height: 4px;
2490  padding-top: 4px;
2491}
2492
2493.add-to-expression-bar {
2494  border: 1px solid var(--theme-splitter-color);
2495  border-top: none;
2496  display: -webkit-box;
2497  display: -ms-flexbox;
2498  display: flex;
2499  -webkit-box-align: center;
2500  -ms-flex-align: center;
2501  align-items: center;
2502  font-size: 14px;
2503  line-height: 30px;
2504  background: var(--theme-toolbar-background);
2505  color: var(--theme-comment-alt);
2506  padding: 0 4px;
2507}
2508
2509.add-to-expression-bar .prompt {
2510  width: 1em;
2511}
2512
2513.add-to-expression-bar .expression-to-save-label {
2514  width: calc(100% - 4em);
2515}
2516
2517.add-to-expression-bar .expression-to-save-button {
2518  font-size: 14px;
2519  color: var(--theme-comment);
2520}
2521/* This Source Code Form is subject to the terms of the Mozilla Public
2522 * License, v. 2.0. If a copy of the MPL was not distributed with this
2523 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2524
2525.call-site {
2526  background: #f0f9ff;
2527  position: relative;
2528}
2529
2530.call-site::before {
2531  content: "";
2532  position: absolute;
2533  width: 100%;
2534  height: calc(100% - 2px);
2535  border-bottom: 2px solid #aed3ef;
2536}
2537
2538.call-site-bp {
2539  position: relative;
2540}
2541
2542.debug-expression.call-site-bp,
2543.call-site-bp {
2544  background-color: #fce7e7;
2545}
2546
2547.call-site-bp::before {
2548  content: "";
2549  position: absolute;
2550  width: 100%;
2551  height: calc(100% - 2px);
2552  border-bottom: 2px solid red;
2553}
2554
2555.theme-dark .call-site {
2556  background-color: #4b5462;
2557}
2558
2559.theme-dark .call-site::before {
2560  border-bottom-color: #5f78a4;
2561}
2562
2563.theme-dark .call-site-bp {
2564  background-color: #4b3f3f;
2565}
2566
2567.theme-dark .call-site-bp::before {
2568  border-bottom-color: #dd4d4d;
2569}
2570/* This Source Code Form is subject to the terms of the Mozilla Public
2571 * License, v. 2.0. If a copy of the MPL was not distributed with this
2572 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2573
2574.empty-line .CodeMirror-linenumber {
2575  opacity: 0.5;
2576}
2577/* This Source Code Form is subject to the terms of the Mozilla Public
2578 * License, v. 2.0. If a copy of the MPL was not distributed with this
2579 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2580
2581.conditional-breakpoint-panel {
2582  cursor: initial;
2583  margin: 1em 0;
2584  position: relative;
2585  display: flex;
2586  align-items: center;
2587  background: var(--theme-toolbar-background);
2588  border-top: 1px solid var(--theme-splitter-color);
2589  border-bottom: 1px solid var(--theme-splitter-color);
2590}
2591
2592.conditional-breakpoint-panel .prompt {
2593  font-size: 1.8em;
2594  color: var(--theme-conditional-breakpoint-color);
2595  padding-left: 3px;
2596  padding-right: 3px;
2597  padding-bottom: 3px;
2598  text-align: right;
2599  width: 30px;
2600}
2601
2602.conditional-breakpoint-panel input {
2603  margin: 5px 10px;
2604  width: calc(100% - 4em);
2605  border: none;
2606  background: var(--theme-toolbar-background);
2607  font-size: 14px;
2608  color: var(--theme-conditional-breakpoint-color);
2609  line-height: 30px;
2610}
2611
2612.conditional-breakpoint-panel input:focus {
2613  outline-width: 0;
2614}
2615/* This Source Code Form is subject to the terms of the Mozilla Public
2616 * License, v. 2.0. If a copy of the MPL was not distributed with this
2617 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2618
2619.editor-wrapper {
2620  --debug-line-border: rgb(145, 188, 219);
2621  --debug-expression-background: rgba(202, 227, 255, 0.5);
2622  --editor-searchbar-height: 27px;
2623  --editor-second-searchbar-height: 27px;
2624  --debug-line-error-border: rgb(255, 0, 0);
2625  --debug-expression-error-background: rgba(231, 116, 113, 0.3);
2626  --editor-header-height: 30px;
2627}
2628
2629.theme-dark .editor-wrapper {
2630  --debug-expression-background: #54617e;
2631  --debug-line-border: #7786a2;
2632}
2633
2634.editor-wrapper .CodeMirror-linewidget {
2635  margin-right: -7px;
2636  overflow: hidden;
2637}
2638
2639.editor-wrapper {
2640  min-width: 0 !important;
2641}
2642
2643.theme-dark {
2644  --theme-conditional-breakpoint-color: #9fa4a9;
2645}
2646
2647.theme-light {
2648  --theme-conditional-breakpoint-color: var(--theme-body-color);
2649}
2650
2651/**
2652 * There's a known codemirror flex issue with chrome that this addresses.
2653 * BUG https://github.com/devtools-html/debugger.html/issues/63
2654 */
2655.editor-wrapper {
2656  position: absolute;
2657  height: calc(100% - var(--editor-header-height));
2658  width: calc(100% - 1px);
2659  top: var(--editor-header-height);
2660  left: 0px;
2661  --editor-footer-height: 24px;
2662}
2663
2664html[dir="rtl"] .editor-mount {
2665  direction: ltr;
2666}
2667
2668.editor-wrapper .breakpoints {
2669  position: absolute;
2670  top: 0;
2671  left: 0;
2672}
2673
2674.function-search {
2675  max-height: 300px;
2676  overflow: hidden;
2677}
2678
2679.function-search .results {
2680  height: auto;
2681}
2682
2683.editor.hit-marker {
2684  height: 14px;
2685}
2686
2687.editor-wrapper .highlight-lines {
2688  background: var(--theme-selection-background-hover);
2689}
2690
2691.coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-line,
2692.coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-gutter-wrapper {
2693  opacity: 0.5;
2694}
2695
2696.editor.new-breakpoint svg {
2697  fill: var(--theme-selection-background);
2698  width: 60px;
2699  height: 14px;
2700  position: absolute;
2701  top: 0px;
2702  right: -4px;
2703}
2704
2705.inline-bp {
2706  background-color: #9ddfff;
2707  width: 20px;
2708  padding: 0px 5px;
2709  margin: 0px 4px;
2710  border-radius: 5px;
2711  border-color: blue;
2712  border: 1px solid #00b6ff;
2713}
2714
2715.editor.new-breakpoint.folding-enabled svg {
2716  right: -16px;
2717}
2718
2719.new-breakpoint.has-condition svg {
2720  fill: var(--theme-graphs-yellow);
2721}
2722
2723.editor.new-breakpoint.breakpoint-disabled svg {
2724  opacity: 0.3;
2725}
2726
2727.editor.column-breakpoint svg {
2728  fill: var(--theme-selection-background);
2729  vertical-align: middle;
2730  width: 17px;
2731  height: 14px;
2732}
2733
2734.editor.column-breakpoint.breakpoint-disabled svg {
2735  opacity: 0.3;
2736}
2737
2738.CodeMirror {
2739  width: 100%;
2740  height: 100%;
2741}
2742
2743.editor-wrapper .editor-mount {
2744  width: 100%;
2745  background-color: var(--theme-body-background);
2746}
2747
2748.CodeMirror-linenumber {
2749  font-size: 11px;
2750  line-height: 14px;
2751}
2752
2753.folding-enabled .CodeMirror-linenumber {
2754  text-align: left;
2755  padding: 0 0 0 2px;
2756}
2757
2758/* set the linenumber white when there is a breakpoint */
2759.new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
2760  color: white;
2761}
2762
2763/* move the breakpoint below the other gutter elements */
2764.new-breakpoint .CodeMirror-gutter-elt:nth-child(2) {
2765  z-index: 0;
2766}
2767
2768.editor-wrapper .CodeMirror-line {
2769  font-size: 11px;
2770}
2771
2772.theme-dark .editor-wrapper .CodeMirror-line .cm-comment {
2773  color: var(--theme-comment);
2774}
2775
2776.debug-expression {
2777  background-color: var(--debug-expression-background);
2778}
2779
2780debug-expression-error {
2781  background-color: var(--debug-expression-error-background);
2782}
2783
2784.new-debug-line .CodeMirror-line {
2785  background-color: transparent !important;
2786  outline: var(--debug-line-border) solid 1px;
2787}
2788
2789/* Don't display the highlight color since the debug line
2790   is already highlighted */
2791.new-debug-line .CodeMirror-activeline-background {
2792  display: none;
2793}
2794
2795.new-debug-line-error .CodeMirror-line {
2796  background-color: var(--debug-expression-error-background) !important;
2797  outline: var(--debug-line-error-border) solid 1px;
2798}
2799
2800/* Don't display the highlight color since the debug line
2801  is already highlighted */
2802.new-debug-line-error .CodeMirror-activeline-background {
2803  display: none;
2804}
2805
2806.highlight-line .CodeMirror-line {
2807  animation: fade-highlight-out 1.5s normal forwards;
2808}
2809
2810@keyframes fade-highlight-out {
2811  0% {
2812    background-color: var(--theme-highlight-gray);
2813  }
2814  100% {
2815    background-color: transparent;
2816  }
2817}
2818
2819.theme-dark .highlight-line .CodeMirror-line {
2820  animation: fade-highlight-out-dark 1.5s normal forwards;
2821}
2822
2823@keyframes fade-highlight-out-dark {
2824  0% {
2825    background-color: var(--theme-comment);
2826  }
2827  100% {
2828    background-color: transparent;
2829  }
2830}
2831
2832.CodeMirror-guttermarker-subtle {
2833  visibility: hidden;
2834}
2835
2836.visible {
2837  visibility: visible;
2838}
2839/* This Source Code Form is subject to the terms of the Mozilla Public
2840 * License, v. 2.0. If a copy of the MPL was not distributed with this
2841 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2842
2843.cm-highlight {
2844  position: relative;
2845}
2846
2847.cm-highlight::before {
2848  position: absolute;
2849  border-top-style: solid;
2850  border-bottom-style: solid;
2851  border-top-color: var(--theme-comment-alt);
2852  border-bottom-color: var(--theme-comment-alt);
2853  border-top-width: 1px;
2854  border-bottom-width: 1px;
2855  top: -1px;
2856  bottom: 0;
2857  left: 0;
2858  right: 0;
2859  content: "";
2860  margin-bottom: -1px;
2861}
2862
2863.cm-highlight-full::before {
2864  border: 1px solid var(--theme-comment-alt);
2865  border-radius: 2px;
2866  margin: 0 -1px -1px -1px;
2867}
2868/* This Source Code Form is subject to the terms of the Mozilla Public
2869 * License, v. 2.0. If a copy of the MPL was not distributed with this
2870 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2871
2872.breakpoints-toggle {
2873  margin: 2px 3px;
2874}
2875
2876.breakpoints-list * {
2877  user-select: none;
2878}
2879
2880.breakpoints-list .breakpoint {
2881  font-size: 12px;
2882  color: var(--theme-content-color1);
2883  padding: 0.5em 1em 0.5em 0.5em;
2884  line-height: 1em;
2885  position: relative;
2886  transition: all 0.25s ease;
2887}
2888
2889html[dir="rtl"] .breakpoints-list .breakpoint {
2890  border-right: 4px solid transparent;
2891}
2892
2893html:not([dir="rtl"]) .breakpoints-list .breakpoint {
2894  border-left: 4px solid transparent;
2895}
2896
2897.breakpoints-list .breakpoint:last-of-type {
2898  padding-bottom: 0.45em;
2899}
2900
2901html:not([dir="rtl"]) .breakpoints-list .breakpoint.is-conditional {
2902  border-left-color: var(--theme-graphs-yellow);
2903}
2904
2905html[dir="rtl"] .breakpoints-list .breakpoint.is-conditional {
2906  border-right-color: var(--theme-graphs-yellow);
2907}
2908
2909html .breakpoints-list .breakpoint.paused {
2910  background-color: var(--theme-toolbar-background-alt);
2911  border-color: var(--breakpoint-active-color);
2912}
2913
2914.breakpoints-list .breakpoint.disabled .breakpoint-label {
2915  color: var(--theme-comment);
2916  transition: color 0.5s linear;
2917}
2918
2919.breakpoints-list .breakpoint:hover {
2920  background-color: var(--search-overlays-semitransparent);
2921}
2922
2923.breakpoints-list .breakpoint.paused:hover {
2924  border-color: var(--breakpoint-active-color-hover);
2925}
2926
2927.breakpoints-list .breakpoint-label {
2928  max-width: calc(100% - var(--breakpoint-expression-right-clear-space));
2929  display: inline-block;
2930  padding-inline-start: 2px;
2931  cursor: default;
2932}
2933
2934.breakpoint-label .breakpoint-checkbox {
2935  margin-inline-start: 0;
2936  vertical-align: text-bottom;
2937}
2938
2939.breakpoint-label .location {
2940  width: 100%;
2941  display: inline-block;
2942  overflow-x: hidden;
2943  text-overflow: ellipsis;
2944  padding: 1px 0;
2945  vertical-align: bottom;
2946}
2947
2948.breakpoints-list .pause-indicator {
2949  flex: 0 1 content;
2950  order: 3;
2951}
2952
2953:root.theme-light .breakpoint-snippet,
2954:root.theme-firebug .breakpoint-snippet {
2955  color: var(--theme-comment);
2956}
2957
2958:root.theme-dark .breakpoint-snippet {
2959  color: var(--theme-body-color);
2960  opacity: 0.6;
2961}
2962
2963.breakpoint-snippet {
2964  overflow: hidden;
2965  text-overflow: ellipsis;
2966  padding-inline-start: 18px;
2967  padding-inline-end: 18px;
2968}
2969
2970.breakpoint .close-btn {
2971  position: absolute;
2972  offset-inline-end: 13px;
2973  offset-inline-start: auto;
2974  top: 9px;
2975}
2976
2977.breakpoint .close {
2978  visibility: hidden;
2979}
2980
2981.breakpoint:hover .close {
2982  visibility: visible;
2983}
2984/* This Source Code Form is subject to the terms of the Mozilla Public
2985 * License, v. 2.0. If a copy of the MPL was not distributed with this
2986 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
2987
2988.expression-input-form {
2989  width: 100%;
2990}
2991
2992.input-expression {
2993  width: 100%;
2994  margin: 0;
2995  border: 1px;
2996  background-color: var(--theme-sidebar-background);
2997  font-size: 12px;
2998  padding: 0.5em 2.16em;
2999  color: var(--theme-body-color);
3000}
3001
3002@keyframes shake {
3003  0%,
3004  100% {
3005    transform: translateX(0);
3006  }
3007  20%,
3008  60% {
3009    transform: translateX(-10px);
3010  }
3011  40%,
3012  80% {
3013    transform: translateX(10px);
3014  }
3015}
3016
3017.input-expression.error {
3018  border: 1px solid red;
3019  animation: 150ms cubic-bezier(0.07, 0.95, 0, 1) shake;
3020}
3021
3022.input-expression::placeholder {
3023  text-align: center;
3024  font-style: italic;
3025  color: var(--theme-comment);
3026}
3027
3028.input-expression:focus {
3029  outline: none;
3030  cursor: text;
3031}
3032
3033.expressions-list {
3034  /* TODO: add normalize */
3035  margin: 0;
3036  padding: 0;
3037}
3038.expression-input-container {
3039  display: flex;
3040}
3041
3042.expression-container {
3043  border: 1px;
3044  padding: 0.25em 1em 0.25em 0.5em;
3045  width: 100%;
3046  color: var(--theme-body-color);
3047  background-color: var(--theme-body-background);
3048  display: block;
3049  position: relative;
3050}
3051
3052.expression-container > .tree {
3053  width: 100%;
3054  overflow: hidden;
3055}
3056
3057:root.theme-light .expression-container:hover {
3058  background-color: var(--theme-tab-toolbar-background);
3059}
3060
3061:root.theme-dark .expression-container:hover {
3062  background-color: var(--search-overlays-semitransparent);
3063}
3064
3065.expression-container__close-btn {
3066  position: absolute;
3067  offset-inline-end: 0px;
3068  top: 0px;
3069}
3070
3071.expression-content {
3072  position: relative;
3073}
3074
3075.expression-content .tree {
3076  overflow-x: hidden;
3077  max-width: calc(100% - var(--breakpoint-expression-right-clear-space));
3078}
3079
3080.expression-content .tree-node {
3081  overflow-x: hidden;
3082}
3083
3084.expression-input {
3085  max-width: 50%;
3086}
3087
3088.expressions-list .tree:focus {
3089  outline: none;
3090}
3091/* This Source Code Form is subject to the terms of the Mozilla Public
3092 * License, v. 2.0. If a copy of the MPL was not distributed with this
3093 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3094
3095.frames ul .frames-group .group,
3096.frames ul .frames-group .group .location {
3097  font-weight: 500;
3098  cursor: default;
3099}
3100
3101.frames ul .frames-group.expanded .group,
3102.frames ul .frames-group.expanded .group .location {
3103  color: var(--theme-highlight-blue);
3104}
3105
3106.frames ul .frames-group.expanded .react path {
3107  fill: var(--theme-highlight-blue);
3108}
3109
3110.frames ul .frames-group .frames-list li {
3111  padding-left: 30px;
3112}
3113
3114.frames ul .frames-group .frames-list {
3115  border-top: 1px solid var(--theme-splitter-color);
3116  border-bottom: 1px solid var(--theme-splitter-color);
3117}
3118
3119.frames ul .frames-group.expanded .badge {
3120  color: var(--theme-highlight-blue);
3121}
3122.badge {
3123  --size: 17px;
3124  --radius: calc(var(--size) / 2);
3125  height: var(--size);
3126  min-width: var(--size);
3127  line-height: var(--size);
3128  background: var(--theme-toolbar-background-hover);
3129  color: var(--theme-body-color);
3130  border-radius: var(--radius);
3131  padding: 0 4px;
3132  font-size: 0.9em;
3133}
3134/* This Source Code Form is subject to the terms of the Mozilla Public
3135 * License, v. 2.0. If a copy of the MPL was not distributed with this
3136 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3137
3138.why-paused {
3139  background-color: var(--theme-body-background);
3140  color: var(--theme-body-color);
3141  padding: 10px 10px 10px 20px;
3142  white-space: normal;
3143  opacity: 0.6;
3144  font-size: 12px;
3145  flex: 0 1 auto;
3146  text-align: center;
3147  font-style: italic;
3148  font-weight: 300;
3149  cursor: default;
3150}
3151
3152.theme-dark .secondary-panes .why-paused {
3153  color: white;
3154}
3155
3156.why-paused .message {
3157  font-size: 10px;
3158}
3159
3160.why-paused .message.warning {
3161  font-size: 10px;
3162  color: var(--theme-graphs-red);
3163  font-weight: bold;
3164  font-style: normal;
3165}
3166/* This Source Code Form is subject to the terms of the Mozilla Public
3167 * License, v. 2.0. If a copy of the MPL was not distributed with this
3168 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3169
3170.frames ul {
3171  list-style: none;
3172  margin: 0;
3173  padding: 0;
3174}
3175
3176.frames ul li {
3177  padding: 0 10px 0 21px;
3178  overflow: hidden;
3179  display: flex;
3180  justify-content: space-between;
3181  flex-direction: row;
3182  align-items: center;
3183  margin: 0;
3184}
3185
3186.frames ul li * {
3187  -moz-user-select: none;
3188  user-select: none;
3189}
3190
3191.frames .badge {
3192  flex-shrink: 0;
3193  margin-right: 4px;
3194}
3195
3196.frames .location {
3197  font-weight: lighter;
3198  display: flex;
3199  justify-content: space-between;
3200  flex-direction: row;
3201  align-items: center;
3202  margin: 0;
3203  flex-shrink: 0;
3204}
3205
3206.theme-light .frames .location,
3207.theme-firebug .frames .location {
3208  color: var(--theme-comment);
3209}
3210
3211:root.theme-dark .frames .location {
3212  color: var(--theme-body-color);
3213  opacity: 0.6;
3214}
3215
3216.frames .title {
3217  text-overflow: ellipsis;
3218  overflow: hidden;
3219  margin: 7px 0.5em 7px 0;
3220}
3221
3222.frames ul li:hover,
3223.frames ul li:focus {
3224  background-color: var(--theme-toolbar-background-alt);
3225  outline: none;
3226}
3227
3228.theme-dark .frames ul li:focus {
3229  background-color: var(--theme-tab-toolbar-background);
3230}
3231
3232.frames ul li.selected {
3233  background-color: var(--theme-selection-background);
3234  color: white;
3235}
3236
3237.frames ul li.selected i.annotation-logo svg path {
3238  fill: white;
3239}
3240
3241:root.theme-light .frames ul li.selected .location,
3242:root.theme-firebug .frames ul li.selected .location,
3243:root.theme-dark .frames ul li.selected .location {
3244  color: white;
3245}
3246
3247.show-more-container {
3248  display: flex;
3249}
3250
3251.show-more {
3252  text-align: center;
3253  padding: 8px 0px;
3254  margin: 7px 10px 7px 7px;
3255  border: 1px solid var(--theme-splitter-color);
3256  background-color: var(--theme-tab-toolbar-background);
3257  width: 100%;
3258  font-size: inherit;
3259}
3260
3261.show-more:hover {
3262  background-color: var(--theme-toolbar-background-hover);
3263}
3264
3265.annotation-logo {
3266  width: 12px;
3267  margin-left: 3px;
3268  line-height: 8px;
3269}
3270
3271:root.theme-dark .annotation-logo svg path {
3272  fill: var(--theme-highlight-blue);
3273}
3274/* This Source Code Form is subject to the terms of the Mozilla Public
3275 * License, v. 2.0. If a copy of the MPL was not distributed with this
3276 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3277
3278.event-listeners {
3279  list-style: none;
3280  margin: 0;
3281  padding: 0;
3282}
3283
3284.event-listeners .listener {
3285  padding: 7px 10px 7px 21px;
3286  clear: both;
3287  overflow: hidden;
3288}
3289
3290.event-listeners .listener * {
3291  -moz-user-select: none;
3292  user-select: none;
3293}
3294
3295.event-listeners .listener:nth-of-type(2n) {
3296  background-color: var(--theme-tab-toolbar-background);
3297}
3298
3299.event-listeners .listener .type {
3300  color: var(--theme-highlight-bluegrey);
3301  padding-right: 5px;
3302}
3303
3304.event-listeners .listener .selector {
3305  color: var(--theme-content-color2);
3306}
3307
3308.event-listeners .listener-checkbox {
3309  margin-left: 0;
3310}
3311
3312.event-listeners .listener .close-btn {
3313  float: right;
3314}
3315
3316.event-listeners .listener .close {
3317  display: none;
3318}
3319
3320.event-listeners .listener:hover .close {
3321  display: block;
3322}
3323/* This Source Code Form is subject to the terms of the Mozilla Public
3324 * License, v. 2.0. If a copy of the MPL was not distributed with this
3325 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3326
3327.workers-list * {
3328  user-select: none;
3329}
3330
3331.workers-list .worker {
3332  font-size: 1rem;
3333  color: var(--theme-content-color1);
3334  padding: 0 1em;
3335  line-height: 31px;
3336  position: relative;
3337  transition: all 0.25s ease;
3338  cursor: pointer;
3339}
3340
3341.worker-list .worker:hover {
3342  background-color: var(--search-overlays-semitransparent);
3343}
3344/* This Source Code Form is subject to the terms of the Mozilla Public
3345 * License, v. 2.0. If a copy of the MPL was not distributed with this
3346 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3347
3348:root {
3349  --accordion-header-background: var(--theme-toolbar-background);
3350  --disclosure-arrow: #b2b2b2;
3351}
3352
3353:root.theme-dark {
3354  --accordion-header-background: #222225;
3355  --disclosure-arrow: #7f7f81;
3356}
3357
3358.accordion {
3359  background-color: var(--theme-sidebar-background);
3360  width: 100%;
3361}
3362
3363.accordion ._header {
3364  background-color: var(--accordion-header-background);
3365  border-bottom: 1px solid var(--theme-splitter-color);
3366  display: flex;
3367  font-size: 12px;
3368  padding: 4px;
3369  transition: all 0.25s ease;
3370  width: 100%;
3371  height: 24px;
3372  align-items: center;
3373
3374  -webkit-user-select: none;
3375  -moz-user-select: none;
3376  -ms-user-select: none;
3377  -o-user-select: none;
3378  user-select: none;
3379  cursor: default;
3380}
3381
3382.accordion ._header:hover {
3383  background-color: var(--theme-toolbar-background-hover);
3384}
3385
3386.accordion ._header button svg,
3387.accordion ._header:hover button svg {
3388  fill: currentColor;
3389  height: 16px;
3390}
3391
3392.accordion ._content {
3393  border-bottom: 1px solid var(--theme-splitter-color);
3394  font-size: 12px;
3395}
3396
3397.accordion div:last-child ._content {
3398  border-bottom: none;
3399}
3400
3401.accordion ._header .header-buttons {
3402  display: flex;
3403  margin-left: auto;
3404  padding-right: 5px;
3405}
3406
3407.accordion .header-buttons .add-button {
3408  font-size: 180%;
3409  text-align: center;
3410  line-height: 16px;
3411}
3412
3413.accordion .header-buttons button {
3414  color: var(--theme-body-color);
3415  border: none;
3416  background: none;
3417  outline: 0;
3418  padding: 0;
3419  width: 16px;
3420  height: 16px;
3421}
3422
3423.accordion .header-buttons button::-moz-focus-inner {
3424  border: none;
3425}
3426
3427.accordion .arrow svg {
3428  fill: var(--disclosure-arrow);
3429}
3430/* This Source Code Form is subject to the terms of the Mozilla Public
3431 * License, v. 2.0. If a copy of the MPL was not distributed with this
3432 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3433
3434.command-bar {
3435  flex: 0 0 30px;
3436  border-bottom: 1px solid var(--theme-splitter-color);
3437  display: flex;
3438  overflow: hidden;
3439  z-index: 1;
3440  background-color: var(--theme-toolbar-background);
3441}
3442
3443html[dir="rtl"] .command-bar {
3444  border-right: 1px solid var(--theme-splitter-color);
3445}
3446
3447.theme-dark .command-bar {
3448  background-color: var(--theme-toolbar-background);
3449}
3450
3451img.pause,
3452img.stepOver,
3453img.stepIn,
3454img.stepOut,
3455img.resume,
3456img.rewind,
3457img.reverseStepOver,
3458img.reverseStepIn,
3459img.reverseStepOut,
3460img.replay-previous,
3461img.replay-next,
3462img.resume {
3463  background-color: var(--theme-body-color);
3464}
3465
3466.command-bar img.pause {
3467  mask: url("chrome://devtools/skin/images/debugger/pause.svg") no-repeat;
3468}
3469
3470.command-bar img.stepOver {
3471  mask: url("chrome://devtools/skin/images/debugger/stepOver.svg") no-repeat;
3472}
3473
3474.command-bar img.stepIn {
3475  mask: url("chrome://devtools/skin/images/debugger/stepIn.svg") no-repeat;
3476}
3477
3478.command-bar img.stepOut {
3479  mask: url("chrome://devtools/skin/images/debugger/stepOut.svg") no-repeat;
3480}
3481
3482.command-bar img.resume {
3483  mask: url("chrome://devtools/skin/images/debugger/resume.svg") no-repeat;
3484}
3485
3486.command-bar img.rewind {
3487  mask: url("chrome://devtools/skin/images/debugger/resume.svg") no-repeat;
3488  transform: scaleX(-1);
3489}
3490
3491.command-bar img.reverseStepOver {
3492  mask: url("chrome://devtools/skin/images/debugger/stepOver.svg") no-repeat;
3493  transform: scaleX(-1);
3494}
3495
3496.command-bar img.reverseStepIn {
3497  mask: url("chrome://devtools/skin/images/debugger/stepIn.svg") no-repeat;
3498  transform: scaleX(-1);
3499}
3500
3501.command-bar img.reverseStepOut {
3502  mask: url("chrome://devtools/skin/images/debugger/stepOut.svg") no-repeat;
3503  transform: scaleX(-1);
3504}
3505
3506.command-bar > .pause-exceptions.uncaught.enabled > img.pause-exceptions {
3507  background-color: var(--theme-highlight-purple);
3508}
3509
3510.command-bar > .pause-exceptions.all.enabled > img.pause-exceptions {
3511  background-color: var(--theme-highlight-blue);
3512}
3513
3514.command-bar > .pause-exceptions.enabled > img.pause-exceptions {
3515  background-color: var(--theme-body-color);
3516}
3517
3518.command-bar img.pause-exceptions {
3519  mask: url("chrome://devtools/skin/images/debugger/pause-exceptions.svg") no-repeat;
3520  margin-inline-start: 0.2em;
3521}
3522
3523.command-bar .filler {
3524  flex-grow: 1;
3525}
3526
3527.command-bar img.replay-previous {
3528  mask: url("chrome://devtools/skin/images/debugger/back.svg") no-repeat;
3529  mask-size: 75%;
3530  margin-top: 5px;
3531}
3532
3533.command-bar img.replay-next {
3534  mask: url("chrome://devtools/skin/images/debugger/forward.svg") no-repeat;
3535  mask-size: 75%;
3536  margin-top: 5px;
3537}
3538
3539.command-bar .replay-inactive {
3540  opacity: 0.5;
3541}
3542
3543.command-bar .step-position {
3544  color: var(--theme-comment-alt);
3545  padding-top: 8px;
3546  margin-inline-end: 4px;
3547}
3548
3549.command-bar .replay-active {
3550  color: var(--theme-highlight-blue);
3551}
3552
3553.command-bar .subSettings {
3554  float: right;
3555}
3556
3557.bottom {
3558  border-bottom: none;
3559  background-color: var(--theme-body-background);
3560  border-top: 1px solid var(--theme-splitter-color);
3561  flex: 0 0 25px;
3562}
3563
3564.command-bar.bottom {
3565  justify-content: flex-end;
3566}
3567
3568.command-bar.bottom > button {
3569  color: var(--theme-comment);
3570  width: 26px;
3571}
3572.command-bar.bottom > button:hover {
3573  color: var(--theme-body-color);
3574}
3575/* This Source Code Form is subject to the terms of the Mozilla Public
3576 * License, v. 2.0. If a copy of the MPL was not distributed with this
3577 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3578
3579.dropdown {
3580  --width: 150px;
3581  background: var(--theme-body-background);
3582  border: 1px solid var(--theme-splitter-color);
3583  box-shadow: 0 4px 4px 0 var(--search-overlays-semitransparent);
3584  max-height: 300px;
3585  position: absolute;
3586  right: 0;
3587  top: 23px;
3588  width: var(--width);
3589  z-index: 1000;
3590  overflow: auto;
3591}
3592
3593html[dir="rtl"] .dropdown {
3594  right: calc((var(--width) - 11px) * (-1));
3595}
3596
3597.dropdown-block {
3598  padding: 0px 2px;
3599  position: relative;
3600  align-self: center;
3601  height: 100%;
3602}
3603
3604.dropdown-button {
3605  color: var(--theme-comment);
3606  background: none;
3607  border: none;
3608  padding: 0;
3609  font-weight: 100;
3610  font-size: 14px;
3611  height: 100%;
3612  width: 24px;
3613}
3614
3615.dropdown li {
3616  transition: all 0.25s ease;
3617  padding: 2px 10px 10px 5px;
3618  overflow: hidden;
3619  height: 30px;
3620  text-overflow: ellipsis;
3621  white-space: nowrap;
3622}
3623
3624.dropdown li:hover {
3625  background-color: var(--search-overlays-semitransparent);
3626}
3627
3628.dropdown-icon {
3629  width: var(--icon-size);
3630  height: var(--icon-size);
3631  margin-right: 5px;
3632  vertical-align: middle;
3633  display: inline-block;
3634}
3635
3636.dropdown-icon.prettyPrint {
3637  mask: url("chrome://devtools/skin/images/debugger/prettyPrint.svg") no-repeat;
3638  mask-size: 100%;
3639  background: var(--theme-highlight-blue);
3640}
3641
3642.dropdown-icon.blackBox {
3643  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
3644  mask-size: 100%;
3645  background: var(--theme-highlight-blue);
3646}
3647
3648.dropdown-icon.file {
3649  mask: url("chrome://devtools/skin/images/debugger/file.svg") no-repeat;
3650  mask-size: 100%;
3651}
3652
3653.dropdown ul {
3654  list-style: none;
3655  line-height: 2em;
3656  font-size: 1em;
3657  margin: 0;
3658  padding: 0;
3659}
3660
3661.dropdown-mask {
3662  position: fixed;
3663  width: 100%;
3664  height: 100%;
3665  background: transparent;
3666  z-index: 999;
3667  left: 0;
3668  top: 0;
3669}
3670.dropdown span.icon-spacer {
3671  margin-left: 8px;
3672}
3673
3674.dropdown li.first {
3675  border-bottom: 1px solid var(--theme-toolbar-background-hover);
3676}
3677
3678img.pause-next,
3679img.pause-on-exceptions,
3680img.pause-uncaught-exceptions,
3681img.ignore-exceptions {
3682  vertical-align: middle;
3683  width: 16px;
3684  height: 20px;
3685  display: inline-block;
3686}
3687
3688.dropdown div > img.pause-next {
3689  mask: url("chrome://devtools/skin/images/debugger/pause.svg") no-repeat;
3690  background-color: var(--theme-body-color);
3691}
3692
3693.dropdown div > img.ignore-exceptions {
3694  mask: url("chrome://devtools/skin/images/debugger/pause-exceptions.svg") no-repeat;
3695  background-color: var(--theme-body-color);
3696}
3697
3698.dropdown div > img.pause-uncaught-exceptions {
3699  mask: url("chrome://devtools/skin/images/debugger/pause-exceptions.svg") no-repeat;
3700  background-color: var(--theme-highlight-purple);
3701}
3702
3703.dropdown div > img.pause-on-exceptions {
3704  mask: url("chrome://devtools/skin/images/debugger/pause-exceptions.svg") no-repeat;
3705  background-color: var(--theme-highlight-blue);
3706}
3707
3708.dropdown div.pause-next.active,
3709.dropdown div.pause-on-exceptions.active,
3710.dropdown div.pause-uncaught-exceptions.active,
3711.dropdown div.ignore-exceptions.active > span.icon-spacer {
3712  color: var(--theme-highlight-blue);
3713}
3714/* This Source Code Form is subject to the terms of the Mozilla Public
3715 * License, v. 2.0. If a copy of the MPL was not distributed with this
3716 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3717
3718.object-node.default-property {
3719  opacity: 0.6;
3720}
3721
3722.object-label {
3723  color: var(--theme-highlight-blue);
3724}
3725
3726.objectBox-object,
3727.objectBox-string,
3728.objectBox-text,
3729.objectBox-table,
3730.objectLink-textNode,
3731.objectLink-event,
3732.objectLink-eventLog,
3733.objectLink-regexp,
3734.objectLink-object,
3735.objectLink-Date,
3736.theme-dark .objectBox-object,
3737.theme-light .objectBox-object {
3738  white-space: nowrap;
3739}
3740
3741.scopes-pane {
3742  overflow: auto;
3743}
3744
3745.scopes-list {
3746  padding-inline-start: 4px;
3747}
3748
3749.scopes-list .tree:focus {
3750  outline: none;
3751}
3752
3753.scopes-list .function-signature {
3754  display: inline-block;
3755}
3756/* This Source Code Form is subject to the terms of the Mozilla Public
3757 * License, v. 2.0. If a copy of the MPL was not distributed with this
3758 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3759
3760.secondary-panes {
3761  overflow: auto;
3762  display: flex;
3763  flex-direction: column;
3764  flex: 1;
3765  white-space: nowrap;
3766  --breakpoint-expression-right-clear-space: 36px;
3767}
3768
3769/*
3770  We apply overflow to the container with the commandbar.
3771  This allows the commandbar to remain fixed when scrolling
3772  until the content completely ends. Not just the height of
3773  the wrapper.
3774  Ref: https://github.com/devtools-html/debugger.html/issues/3426
3775*/
3776
3777.secondary-panes-wrapper {
3778  height: 100%;
3779  width: 100%;
3780  display: flex;
3781  flex-direction: column;
3782}
3783
3784.secondary-panes .accordion {
3785  flex: 1 0 auto;
3786}
3787
3788.pane {
3789  color: var(--theme-body-color);
3790}
3791
3792.pane .pane-info {
3793  font-style: italic;
3794  text-align: center;
3795  padding: 0.5em;
3796  -moz-user-select: none;
3797  user-select: none;
3798  cursor: default;
3799}
3800
3801.secondary-panes .breakpoints-buttons {
3802  display: flex;
3803}
3804
3805.secondary-panes .accordion .plus svg {
3806  width: 12px;
3807  margin-top: 3px;
3808  fill: var(--theme-comment-alt);
3809}
3810
3811.secondary-panes .accordion .plus.active svg {
3812  fill: var(--theme-highlight-blue);
3813}
3814
3815.dropdown {
3816  width: 20em;
3817  overflow: auto;
3818}
3819/* This Source Code Form is subject to the terms of the Mozilla Public
3820 * License, v. 2.0. If a copy of the MPL was not distributed with this
3821 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3822
3823.welcomebox {
3824  width: calc(100% - 1px);
3825
3826  /* Offsetting it by 30px for the sources-header area */
3827  height: calc(100% - 30px);
3828  position: absolute;
3829  top: 30px;
3830  left: 0;
3831  padding: 50px 0 0 0;
3832  text-align: center;
3833  font-size: 1.25em;
3834  background-color: var(--theme-toolbar-background);
3835  font-weight: lighter;
3836  z-index: 10;
3837  user-select: none;
3838}
3839
3840.theme-dark .welcomebox {
3841  background-color: var(--theme-body-background);
3842}
3843
3844.welcomebox .command-bar-button {
3845  position: absolute;
3846  top: auto;
3847  offset-inline-end: 0;
3848  offset-inline-start: auto;
3849  bottom: 0;
3850}
3851
3852.alignlabel {
3853  display: flex;
3854  white-space: nowrap;
3855}
3856
3857.shortcutKeys {
3858  font-family: Courier;
3859}
3860
3861.shortcutKey,
3862.shortcutLabel {
3863  flex: 1;
3864  overflow: hidden;
3865  text-overflow: ellipsis;
3866}
3867
3868.shortcutKey {
3869  text-align: right;
3870  padding-right: 10px;
3871  font-family: Courier;
3872}
3873
3874.shortcutLabel {
3875  text-align: left;
3876  padding-left: 10px;
3877}
3878
3879.shortcutFunction {
3880  flex: 1;
3881  color: var(--theme-comment);
3882}
3883
3884.shortcutFunction p {
3885  display: flex;
3886}
3887
3888html .welcomebox .toggle-button-end.collapsed {
3889  bottom: 1px;
3890}
3891/* This Source Code Form is subject to the terms of the Mozilla Public
3892 * License, v. 2.0. If a copy of the MPL was not distributed with this
3893 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
3894
3895.source-header {
3896  border-bottom: 1px solid var(--theme-splitter-color);
3897  width: 100%;
3898  height: 30px;
3899  display: flex;
3900}
3901
3902.source-header * {
3903  -moz-user-select: none;
3904  user-select: none;
3905}
3906
3907.source-header .new-tab-btn {
3908  padding: 4px;
3909  margin-top: 4px;
3910  margin-left: 2px;
3911  fill: var(--theme-comment);
3912  transition: 0.1s ease;
3913  align-self: center;
3914}
3915
3916.source-header .new-tab-btn:hover {
3917  background-color: var(--theme-toolbar-background-hover);
3918}
3919
3920.source-header .new-tab-btn svg {
3921  width: 12px;
3922  display: block;
3923}
3924
3925.source-tabs {
3926  max-width: calc(100% - 80px);
3927  align-self: flex-start;
3928}
3929
3930.source-tab {
3931  border: 1px solid transparent;
3932  border-top-left-radius: 2px;
3933  border-top-right-radius: 2px;
3934  display: inline-flex;
3935  align-items: center;
3936  position: relative;
3937  transition: all 0.15s ease;
3938  min-width: 40px;
3939  overflow: hidden;
3940  padding: 5px;
3941  margin-inline-start: 3px;
3942  margin-top: 3px;
3943  cursor: default;
3944}
3945
3946.source-tab:first-child {
3947  margin-inline-start: 0;
3948}
3949
3950.source-tab:hover {
3951  background-color: var(--theme-toolbar-background-alt);
3952  border-color: var(--theme-splitter-color);
3953}
3954
3955.source-tab.active {
3956  color: var(--theme-body-color);
3957  background-color: var(--theme-body-background);
3958  border-color: var(--theme-splitter-color);
3959  border-bottom-color: transparent;
3960}
3961
3962.source-tab.active path,
3963.source-tab:hover path {
3964  fill: var(--theme-body-color);
3965}
3966
3967.source-tab img.prettyPrint {
3968  mask: url("chrome://devtools/skin/images/debugger/prettyPrint.svg") no-repeat;
3969  mask-size: 100%;
3970  padding-top: 12px;
3971  height: 12px;
3972  width: 12px;
3973  background: var(--theme-highlight-blue);
3974}
3975
3976.source-tab .prettyPrint path {
3977  fill: var(--theme-textbox-box-shadow);
3978}
3979
3980.source-tab .blackBox,
3981.source-tab .prettyPrint {
3982  align-self: center;
3983}
3984
3985.source-tab img.blackBox {
3986  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
3987  mask-size: 100%;
3988  padding-top: 12px;
3989  height: 12px;
3990  width: 12px;
3991  background: var(--theme-highlight-blue);
3992}
3993
3994.source-tab img.react {
3995  mask: url("chrome://devtools/skin/images/debugger/react.svg") no-repeat;
3996  mask-size: 100%;
3997  padding-top: 12px;
3998  height: 14px;
3999  width: 14px;
4000  background: var(--theme-highlight-bluegrey);
4001}
4002
4003.source-tab .blackBox path {
4004  fill: var(--theme-textbox-box-shadow);
4005}
4006
4007.theme-dark .source-tab .blackBox circle {
4008  fill: var(--theme-body-color);
4009}
4010
4011.source-tab .filename {
4012  white-space: nowrap;
4013  text-overflow: ellipsis;
4014  overflow: hidden;
4015  padding: 0 4px;
4016  align-self: flex-start;
4017}
4018
4019.source-tab .close-btn {
4020  visibility: hidden;
4021  line-height: 0;
4022}
4023
4024.source-tab.active .close-btn {
4025  visibility: visible;
4026}
4027
4028.source-tab:hover .close-btn {
4029  visibility: visible;
4030}
4031/* This Source Code Form is subject to the terms of the Mozilla Public
4032 * License, v. 2.0. If a copy of the MPL was not distributed with this
4033 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
4034
4035.result-list {
4036  list-style: none;
4037  margin: 0px;
4038  padding: 0px;
4039  overflow: auto;
4040  width: calc(100% - 1px); /* 1px fixes the hidden right border */
4041  background: var(--theme-body-background);
4042}
4043
4044.result-list * {
4045  -moz-user-select: none;
4046  user-select: none;
4047}
4048
4049.result-list li {
4050  color: var(--theme-body-color);
4051  padding: 4px 13px;
4052  display: flex;
4053  justify-content: space-between;
4054}
4055
4056.result-list.big li {
4057  padding: 10px;
4058  flex-direction: column;
4059  border-bottom: 1px solid var(--theme-splitter-color);
4060}
4061
4062.result-list li:hover {
4063  background: var(--theme-tab-toolbar-background);
4064}
4065
4066.result-list li.selected {
4067  background: var(--accordion-header-background);
4068}
4069
4070.result-list.small li.selected {
4071  background-color: var(--theme-selection-background);
4072  color: white;
4073}
4074
4075.theme-dark .result-list.small li.selected {
4076  background-color: var(--theme-body-background);
4077}
4078
4079.theme-dark .result-list li:hover {
4080  background: var(--grey-70);
4081}
4082
4083.theme-dark .result-list li.selected {
4084  background: var(--grey-70);
4085}
4086
4087.result-list li .title {
4088  line-height: 1.5em;
4089  word-break: break-all;
4090}
4091
4092.result-list li.selected .title {
4093  color: white;
4094}
4095
4096.result-list.big li.selected .title {
4097  color: var(--theme-body-color);
4098}
4099
4100.result-list.big li .subtitle {
4101  word-break: break-all;
4102  color: var(--theme-body-color-inactive);
4103}
4104
4105.result-list.big li .subtitle {
4106  line-height: 1.5em;
4107}
4108
4109.theme-dark .result-list.big li .subtitle {
4110  color: var(--theme-comment-alt);
4111}
4112
4113.search-bar .result-list li.selected .subtitle {
4114  color: white;
4115}
4116
4117.search-bar .result-list {
4118  border-bottom: 1px solid var(--theme-splitter-color);
4119}
4120
4121.theme-dark .result-list {
4122  background-color: var(--theme-body-background);
4123}
4124.result-item .title .highlight {
4125  font-weight: bold;
4126}
4127
4128.result-item .subtitle .highlight {
4129  color: var(--grey-90);
4130  font-weight: 500;
4131}
4132
4133.theme-dark .result-item .title .highlight,
4134.theme-dark .result-item .subtitle .highlight {
4135  color: white;
4136}
4137