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