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