LCARStrek/devtools/debugger.css

   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
   5 window {
   6   padding: 0;
   7 }
   8
   9 /* === BEGIN debugger.inc.css === */
  10
  11 /* Sources and breakpoints pane */
  12
  13 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
  14   border-color: transparent;
  15 }
  16
  17 #sources-pane > tabs {
  18   -moz-border-end-color: var(--theme-splitter-color);
  19 }
  20
  21 .dbg-breakpoint-condition-thrown-message {
  22   display: none;
  23   color: var(--theme-highlight-red);
  24 }
  25
  26 .dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message {
  27   display: block;
  28   -moz-padding-start: 0;
  29 }
  30
  31 /* Sources toolbar */
  32
  33 #sources-toolbar > .devtools-toolbarbutton,
  34 #sources-controls > .devtools-toolbarbutton {
  35   min-width: 32px;
  36 }
  37
  38 #black-box {
  39   list-style-image: url("debugger-blackbox.png");
  40 }
  41
  42 @media (min-resolution: 1.1dppx) {
  43   #black-box {
  44     list-style-image: url(debugger-blackbox@2x.png);
  45   }
  46 }
  47
  48 #pretty-print {
  49   list-style-image: url(debugger-prettyprint.png);
  50 }
  51
  52 @media (min-resolution: 1.1dppx) {
  53   #pretty-print {
  54     list-style-image: url(debugger-prettyprint@2x.png);
  55   }
  56 }
  57
  58 #toggle-breakpoints {
  59   list-style-image: url("debugger-toggleBreakpoints.png");
  60 }
  61
  62 @media (min-resolution: 1.1dppx) {
  63   #toggle-breakpoints {
  64     list-style-image: url(debugger-toggleBreakpoints@2x.png);
  65   }
  66 }
  67
  68 #toggle-promise-debugger {
  69   /* TODO Bug 1186119: Add a toggle promise debugger image */
  70 }
  71
  72 #sources-toolbar .devtools-toolbarbutton:not([label]) {
  73   -moz-image-region: rect(0px, 16px, 16px, 0px);
  74 }
  75
  76 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
  77   -moz-image-region: rect(16px, 16px, 32px, 0px);
  78 }
  79
  80 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
  81   -moz-image-region: rect(0px, 32px, 16px, 16px);
  82 }
  83
  84 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
  85   -moz-image-region: rect(16px, 32px, 32px, 16px);
  86 }
  87
  88 @media (min-resolution: 1.1dppx) {
  89   #sources-toolbar .devtools-toolbarbutton:not([label]) {
  90     -moz-image-region: rect(0px,32px,32px,0px);
  91   }
  92
  93   #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
  94     -moz-image-region: rect(32px,32px,64px,0px);
  95   }
  96
  97   #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
  98     -moz-image-region: rect(0px,64px,32px,32px);
  99   }
 100
 101   #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
 102     -moz-image-region: rect(32px,64px,64px,32px);
 103   }
 104 }
 105
 106 #sources .black-boxed {
 107   color: #8050B0;
 108 }
 109
 110 #sources .selected .black-boxed {
 111   color: #000000;
 112 }
 113
 114 #sources .black-boxed ~ .dbg-breakpoint {
 115   display: none;
 116 }
 117
 118 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 119   background-image: none;
 120 /*  box-shadow: inset -1px 0 0 #222426; */
 121 }
 122
 123 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 124   background-image: none;
 125 /*  box-shadow: inset 1px 0 0 #222426; */
 126 }
 127
 128 /* Debugger unblackbox button */
 129
 130 #black-boxed-message-button > .button-box > .button-icon {
 131   width: 16px;
 132   height: 16px;
 133   background-image: url("debugger-blackbox.png");
 134   background-position: -16px -16px;
 135   background-size: 32px 32px;
 136   background-repeat: no-repeat;
 137   -moz-margin-end: 5px;
 138 }
 139
 140 @media (min-resolution: 1.1dppx) {
 141   #black-boxed-message-button > .button-box > .button-icon {
 142     background-image: url("debugger-blackbox@2x.png");
 143   }
 144 }
 145
 146 /* Black box message and source progress meter */
 147
 148 #black-boxed-message,
 149 #source-progress-container {
 150   background-color: #A09090;
 151   /* Prevent the container deck from aquiring the size from this message. */
 152   min-width: 1px;
 153   min-height: 1px;
 154   color: #000000;
 155 }
 156
 157 #source-progress {
 158   min-height: 2em;
 159   min-width: 40em;
 160 }
 161
 162 #black-boxed-message-label,
 163 #black-boxed-message-button {
 164   text-align: center;
 165   font-size: 120%;
 166 }
 167
 168 #black-boxed-message-button {
 169   margin-top: 1em;
 170   padding: .25em;
 171 }
 172
 173 /* Tracer */
 174
 175 #trace {
 176   list-style-image: url("tracer-icon.png");
 177   -moz-image-region: rect(0px,16px,16px,0px);
 178 }
 179
 180 #trace:hover,
 181 #trace[checked] {
 182   -moz-image-region: rect(0px,32px,16px,16px);
 183 }
 184
 185 @media (min-resolution: 1.1dppx) {
 186   #trace {
 187     list-style-image: url(tracer-icon@2x.png);
 188     -moz-image-region: rect(0px,32px,32px,0px);
 189   }
 190
 191   #trace:hover,
 192   #trace[checked] {
 193     -moz-image-region: rect(0px,64px,32px,32px);
 194   }
 195 }
 196
 197 #clear-tracer {
 198   /* Make this button as narrow as the text inside it. */
 199   min-width: 1px;
 200 }
 201
 202 .trace-name {
 203   -moz-padding-start: 4px !important;
 204 }
 205
 206 /* Tracer dark+light theme */
 207
 208 .trace-item {
 209   color: var(--theme-content-color1);
 210 }
 211
 212 .trace-item.black-boxed {
 213   color: #A09090;
 214 }
 215
 216 .trace-item.selected-matching {
 217   background-color: #004242; /* Select highlight blue at 40% alpha */
 218 }
 219
 220 .selected > .trace-item {
 221   background-color: #004242; /* Select highlight blue at 75% alpha */
 222 }
 223
 224 .trace-call {
 225   color: var(--theme-highlight-blue);
 226 }
 227
 228 .trace-return,
 229 .trace-yield {
 230   color: var(--theme-highlight-green);
 231 }
 232
 233 .trace-throw {
 234   color: var(--theme-highlight-red);
 235 }
 236
 237 .trace-param {
 238   color: var(--theme-highlight-pink);
 239 }
 240
 241 .trace-syntax {
 242   color: var(--theme-content-color2);
 243 }
 244
 245 /* Breadcrumbs stack frames view */
 246
 247 .breadcrumbs-widget-item {
 248   max-width: none;
 249 }
 250
 251 #stackframes {
 252   min-height: 25px;
 253 }
 254
 255 .dbg-stackframe-details {
 256   -moz-padding-start: 4px;
 257 }
 258
 259 /* Classic stack frames view */
 260
 261 .dbg-classic-stackframe {
 262   display: block;
 263   padding: 0 4px;
 264 }
 265
 266 .dbg-classic-stackframe-title {
 267   font-weight: 600;
 268   color: #9C9CFF;
 269 }
 270
 271 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
 272   float: right;
 273 }
 274
 275 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
 276   float: left;
 277 }
 278
 279 .dbg-classic-stackframe-details-url {
 280   max-width: 90%;
 281   text-align: end;
 282   color: var(--theme-text-blue);
 283 }
 284
 285 .dbg-classic-stackframe-details-sep {
 286   color: var(--theme-body-color-alt)
 287 }
 288
 289 .dbg-classic-stackframe-details-line {
 290   color: var(--theme-highlight-blue);
 291 }
 292
 293 #callstack-list .side-menu-widget-item.selected label {
 294   color: #FFCF00;
 295 }
 296
 297 /* Sources and breakpoints view */
 298
 299 .dbg-breakpoint {
 300   -moz-margin-start: 4px;
 301 }
 302
 303 .dbg-breakpoint-line {
 304   font-weight: 600;
 305 }
 306
 307 .dbg-breakpoint-text {
 308   -moz-margin-start: 10px !important;
 309   font-style: italic;
 310   font-size: 90%;
 311 }
 312
 313 .dbg-breakpoint-checkbox {
 314   width: 16px;
 315   height: 16px;
 316   margin: 2px;
 317 }
 318
 319 /* Variable bubble view */
 320
 321 .devtools-tooltip-simple-text.token-undefined,
 322 .devtools-tooltip-simple-text.token-null {
 323   text-align: center;
 324   color: #A09090 !important; /* Override the theme's color. */
 325 }
 326
 327 .devtools-tooltip-simple-text.token-boolean {
 328   text-align: center;
 329   color: #9C9CFF !important;
 330 }
 331
 332 .devtools-tooltip-simple-text.token-number {
 333   text-align: center;
 334   color: #E7ADE7 !important;
 335 }
 336
 337 .devtools-tooltip-simple-text.token-string {
 338   text-align: start;
 339   color: #008484 !important;
 340 }
 341
 342 .devtools-tooltip-simple-text.token-other {
 343   text-align: center;
 344   color: #FF9F00 !important;
 345 }
 346
 347 /* Instruments pane (watch expressions, variables, event listeners...) */
 348
 349 #instruments-pane .side-menu-widget-container,
 350 #instruments-pane .side-menu-widget-empty-text {
 351 /*  box-shadow: none !important; */
 352 }
 353
 354 /* Watch expressions view */
 355
 356 #expressions {
 357   min-height: 10px;
 358   max-height: 125px;
 359 }
 360
 361 .dbg-expression {
 362   height: 20px;
 363 }
 364
 365 .dbg-expression-arrow {
 366   background-image: url("commandline-icon.png");
 367   background-position: -16px 0;
 368   background-repeat: no-repeat;
 369   background-size: 32px 16px;
 370   width: 16px;
 371   height: 16px;
 372   margin: 2px;
 373 }
 374
 375 @media (min-resolution: 1.1dppx) {
 376   .dbg-expression-arrow {
 377     background-image: url(commandline-icon@2x.png);
 378   }
 379 }
 380
 381 .dbg-expression-input {
 382   color: inherit;
 383 }
 384
 385 .dbg-expression-button {
 386   border: none;
 387   background: none;
 388   text-decoration: underline;
 389   cursor: pointer;
 390   color: var(--theme-highlight-blue);
 391 }
 392
 393 /* Event listeners view */
 394
 395 .dbg-event-listener {
 396   padding: 0 8px;
 397 }
 398
 399 .dbg-event-listener-type {
 400   font-weight: 600;
 401 }
 402
 403 .dbg-event-listener-separator {
 404   color: var(--theme-body-color-alt);
 405 }
 406
 407 .dbg-event-listener-targets {
 408   color: var(--theme-highlight-blue);
 409 }
 410
 411 .dbg-event-listener-location {
 412   color: var(--theme-highlight-pink);
 413 }
 414
 415 #event-listeners .side-menu-widget-item.selected {
 416   background: none !important;
 417 }
 418
 419 /* Searchbox and the search operations help panel */
 420
 421 #searchbox {
 422   min-width: 220px;
 423   -moz-margin-start: 1px;
 424 }
 425
 426 #filter-label {
 427   -moz-margin-start: 2px;
 428 }
 429
 430 #searchbox-panel-operators {
 431   margin-top: 5px;
 432   margin-bottom: 8px;
 433   -moz-margin-start: 2px;
 434 }
 435
 436 .searchbox-panel-operator-button {
 437   min-width: 26px;
 438   margin-top: 0;
 439   margin-bottom: 0;
 440   -moz-margin-start: 2px;
 441   -moz-margin-end: 6px;
 442   text-align: center;
 443 }
 444
 445 .searchbox-panel-operator-label {
 446   padding-bottom: 2px;
 447 }
 448
 449 /* Searchbox results panel */
 450
 451 .results-panel {
 452   padding: 4px;
 453 }
 454
 455 .results-panel-item {
 456   border: 1px solid #A09090;
 457   border-top-color: #8050B0;
 458   padding: 5px;
 459   cursor: pointer;
 460 }
 461
 462 .results-panel-item:first-of-type {
 463   border-top-color: #9C9CFF;
 464   border-radius: 4px 4px 0 0;
 465 }
 466
 467 .results-panel-item:last-of-type {
 468   border-radius: 0 0 4px 4px;
 469 }
 470
 471 .results-panel-item:only-of-type {
 472   border-radius: 4px;
 473 }
 474
 475 .results-panel-item:not(.selected):not(:hover) {
 476 /*  text-shadow: 0 1px #fff;*/
 477 }
 478
 479 .results-panel-item-label-before {
 480   -moz-margin-end: 5px !important;
 481   color: var(--theme-content-color2);
 482   cursor: inherit;
 483 }
 484
 485 .results-panel-item-label {
 486   color: var(--theme-highlight-blue);
 487   font-weight: 600;
 488   cursor: inherit;
 489 }
 490
 491 .results-panel-item-label-below {
 492   color: var(--theme-content-color3);
 493   cursor: inherit;
 494 }
 495
 496 /* Sources search view */
 497
 498 #globalsearch {
 499   min-height: 10px;
 500   max-height: 125px;
 501 }
 502
 503 #globalsearch + .devtools-horizontal-splitter {
 504   -moz-border-top-colors: #9C9CFF;
 505 }
 506
 507 .dbg-source-results {
 508   padding: 0;
 509   background: none !important;
 510 }
 511
 512 .dbg-source-results:not(.selected):hover {
 513   background-color: #000000; /* Sidebar background */
 514 }
 515
 516 .dbg-results-header {
 517   -moz-padding-start: 6px;
 518 }
 519
 520 .dbg-results-header-location {
 521   font-weight: 600;
 522 }
 523
 524 .dbg-results-header-match-count {
 525   -moz-padding-start: 6px;
 526   color: var(--theme-content-disabled);
 527 }
 528
 529 .dbg-results-line-number {
 530   background-color: var(--theme-toolbar-background);
 531   min-width: 40px;
 532   -moz-border-end: 1px solid #9C9CFF;
 533   -moz-padding-end: 4px;
 534   padding-top: 2px;
 535   text-align: end;
 536   color: var(--theme-body-color);
 537 }
 538
 539 .dbg-results-line-contents {
 540   -moz-padding-start: 4px;
 541   padding-top: 1px;
 542   padding-bottom: 1px;
 543 }
 544
 545 .dbg-results-line-contents-string {
 546   padding: 1px;
 547 /*  color: var(--theme-body-color-alt);*/
 548 }
 549
 550 .dbg-results-line-contents-string[match=true] {
 551   background: #E7ADE7;
 552   color: var(--theme-selection-color);
 553   padding: 0;
 554   border: 1px solid #9C9CFF;
 555   border-radius: 4px;
 556   cursor: pointer;
 557 }
 558
 559 .dbg-results-line-contents-string[match=true][focusing] {
 560   transition: transform 0.3s ease-in-out;
 561 }
 562
 563 .dbg-results-line-contents-string[match=true][focused] {
 564   transition-duration: 0.1s;
 565   transform: scale(1.75, 1.75);
 566 }
 567
 568 /* Toolbar controls */
 569
 570 #toggle-panes {
 571   list-style-image: url("chrome://devtools/skin/debugger-expand.png");
 572   -moz-image-region: rect(0px, 16px, 16px, 0px);
 573 }
 574
 575 #toggle-panes:not([panesHidden]) {
 576   list-style-image: url("chrome://devtools/skin/debugger-collapse.png");
 577 }
 578
 579 #toggle-panes:hover,
 580 #toggle-panes:hover:active {
 581   -moz-image-region: rect(0px, 32px, 16px, 16px);
 582 }
 583
 584 #debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 585 #sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
 586   width: 16px;
 587   height: 16px;
 588 }
 589
 590 #resume {
 591   list-style-image: url("chrome://devtools/skin/debugger-pause.png");
 592   -moz-image-region: rect(0px, 16px, 16px, 0px);
 593 }
 594
 595 #resume:hover {
 596   -moz-image-region: rect(0px, 32px, 16px, 16px);
 597 }
 598
 599 #resume[checked=true] {
 600   list-style-image: url("chrome://devtools/skin/debugger-play.png");
 601 }
 602
 603 @media (min-resolution: 1.1dppx) {
 604   #resume {
 605     list-style-image: url(debugger-pause@2x.png);
 606     -moz-image-region: rect(0px, 32px, 32px, 0px);
 607   }
 608
 609   #resume:hover {
 610     -moz-image-region: rect(0px, 64px, 32px, 32px);
 611   }
 612
 613   #resume[checked=true] {
 614     list-style-image: url(debugger-play@2x.png);
 615   }
 616 }
 617
 618 #debugger-controls toolbarbutton {
 619 /*  transition: opacity 0.15s ease-in-out; */
 620 }
 621
 622 #debugger-controls toolbarbutton[disabled] {
 623 /*  opacity: 0.5;
 624   transition: none; */
 625 }
 626
 627 #resume[break-on-next] {
 628   background: var(--theme-highlight-lightorange);
 629 }
 630
 631 #step-over {
 632   list-style-image: url("chrome://devtools/skin/debugger-step-over.png");
 633   -moz-image-region: rect(0px, 16px, 16px, 0px);
 634 }
 635 #step-over:hover {
 636   -moz-image-region: rect(0px, 32px, 16px, 16px);
 637 }
 638
 639 #step-in {
 640   list-style-image: url("chrome://devtools/skin/debugger-step-in.png");
 641   -moz-image-region: rect(0px, 16px, 16px, 0px);
 642 }
 643 #step-in:hover {
 644   -moz-image-region: rect(0px, 32px, 16px, 16px);
 645 }
 646
 647 #step-out {
 648   list-style-image: url("chrome://devtools/skin/debugger-step-out.png");
 649   -moz-image-region: rect(0px, 16px, 16px, 0px);
 650 }
 651 #step-out:hover {
 652   -moz-image-region: rect(0px, 32px, 16px, 16px);
 653 }
 654
 655 @media (min-resolution: 1.1dppx) {
 656   #step-over {
 657     list-style-image: url(debugger-step-over@2x.png);
 658     -moz-image-region: rect(0px, 32px, 32px, 0);
 659   }
 660
 661   #step-over:hover {
 662     -moz-image-region: rect(0px, 64px, 32px, 32px);
 663   }
 664
 665   #step-in {
 666     list-style-image: url(debugger-step-in@2x.png);
 667     -moz-image-region: rect(0px, 32px, 32px, 0);
 668   }
 669
 670   #step-in:hover {
 671     -moz-image-region: rect(0px, 64px, 32px, 32px);
 672   }
 673
 674   #step-out {
 675     list-style-image: url(debugger-step-out@2x.png);
 676     -moz-image-region: rect(0px, 32px, 32px, 0);
 677   }
 678
 679   #step-out:hover {
 680     -moz-image-region: rect(0px, 64px, 32px, 32px);
 681   }
 682 }
 683
 684 #instruments-pane-toggle {
 685 /*  background: none;
 686   box-shadow: none;
 687   border: none; */
 688   list-style-image: url("chrome://devtools/skin/debugger-collapse.png");
 689   -moz-image-region: rect(0px,16px,16px,0px);
 690 }
 691
 692 #instruments-pane-toggle[pane-collapsed] {
 693   list-style-image: url("chrome://devtools/skin/debugger-expand.png");
 694 }
 695
 696 #instruments-pane-toggle:hover {
 697   -moz-image-region: rect(0px,32px,16px,16px);
 698 }
 699
 700 @media (min-resolution: 1.1dppx) {
 701   #instruments-pane-toggle {
 702     list-style-image: url(debugger-collapse@2x.png);
 703     -moz-image-region: rect(0px,32px,32px,0px);
 704   }
 705
 706   #instruments-pane-toggle[pane-collapsed] {
 707     list-style-image: url(debugger-expand@2x.png);
 708   }
 709
 710   #instruments-pane-toggle:hover {
 711     -moz-image-region: rect(0px,64px,32px,32px);
 712   }
 713 }
 714
 715 /* Horizontal vs. vertical layout */
 716
 717 #vertical-layout-panes-container {
 718   min-height: 35vh;
 719   max-height: 80vh;
 720 }
 721
 722 #body[layout=vertical] #instruments-pane {
 723   margin: 0 !important;
 724   /* To prevent all the margin hacks to hide the sidebar. */
 725 }
 726
 727 #body[layout=vertical] #sources-pane > tabs {
 728   -moz-border-end: none;
 729 }
 730
 731 #body[layout=vertical] .side-menu-widget-container,
 732 #body[layout=vertical] .side-menu-widget-empty-text {
 733   box-shadow: none !important;
 734 }
 735
 736 #body[layout=vertical] .side-menu-widget-item-arrow {
 737   background-image: none !important;
 738 }
 739
 740 /* === END debugger.inc.css === */