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