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