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: 1px solid #9C9CFF; /* Match the 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   font-weight: bold;
  38 }
  39
  40 #toggle-breakpoints {
  41   list-style-image: url("debugger-toggleBreakpoints.png");
  42 }
  43
  44 @media (min-resolution: 2dppx) {
  45   #toggle-breakpoints {
  46     list-style-image: url(debugger-toggleBreakpoints@2x.png);
  47   }
  48 }
  49
  50 #sources-toolbar .devtools-toolbarbutton:not([label]) {
  51   -moz-image-region: rect(0px, 16px, 16px, 0px);
  52 }
  53
  54 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
  55   -moz-image-region: rect(16px, 16px, 32px, 0px);
  56 }
  57
  58 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
  59   -moz-image-region: rect(0px, 32px, 16px, 16px);
  60 }
  61
  62 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
  63   -moz-image-region: rect(16px, 32px, 32px, 16px);
  64 }
  65
  66 @media (min-resolution: 2dppx) {
  67   #sources-toolbar .devtools-toolbarbutton:not([label]) {
  68     -moz-image-region: rect(0px,32px,32px,0px);
  69   }
  70
  71   #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
  72     -moz-image-region: rect(32px,32px,64px,0px);
  73   }
  74
  75   #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
  76     -moz-image-region: rect(0px,64px,32px,32px);
  77   }
  78
  79   #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
  80     -moz-image-region: rect(32px,64px,64px,32px);
  81   }
  82 }
  83
  84 #sources .black-boxed {
  85   color: #8050B0;
  86 }
  87
  88 #sources .selected > .black-boxed {
  89   color: #000000;
  90 }
  91
  92 #sources .black-boxed > .dbg-breakpoint {
  93   display: none;
  94 }
  95
  96 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
  97   background-image: none;
  98 /*  box-shadow: inset -1px 0 0 #222426; */
  99 }
 100
 101 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 102   background-image: none;
 103 /*  box-shadow: inset 1px 0 0 #222426; */
 104 }
 105
 106 /* Debugger unblackbox button */
 107
 108 #black-boxed-message-button > .button-box > .button-icon {
 109   width: 16px;
 110   height: 16px;
 111   background-image: url("debugger-blackbox.png");
 112   background-position: 0 0;
 113   background-size: 32px 16px;
 114   background-repeat: no-repeat;
 115   -moz-margin-end: 5px;
 116 }
 117
 118 @media (min-resolution: 2dppx) {
 119   #black-boxed-message-button > .button-box > .button-icon {
 120     background-image: url("debugger-blackbox@2x.png");
 121   }
 122 }
 123
 124 /* Black box message and source progress meter */
 125
 126 #black-boxed-message,
 127 #source-progress-container {
 128   background-color: #A09090;
 129   /* Prevent the container deck from aquiring the size from this message. */
 130   min-width: 1px;
 131   min-height: 1px;
 132   color: #000000;
 133 }
 134
 135 #source-progress {
 136   min-height: 2em;
 137   min-width: 40em;
 138 }
 139
 140 #black-boxed-message-label,
 141 #black-boxed-message-button {
 142   text-align: center;
 143   font-size: 120%;
 144 }
 145
 146 #black-boxed-message-button {
 147   margin-top: 1em;
 148   padding: .25em;
 149 }
 150
 151 /* Tracer */
 152
 153 #trace {
 154   list-style-image: url("tracer-icon.png");
 155   -moz-image-region: rect(0px,16px,16px,0px);
 156 }
 157
 158 #trace:hover,
 159 #trace[checked] {
 160   -moz-image-region: rect(0px,32px,16px,16px);
 161 }
 162
 163 @media (min-resolution: 2dppx) {
 164   #trace {
 165     list-style-image: url(tracer-icon@2x.png);
 166     -moz-image-region: rect(0px,32px,32px,0px);
 167   }
 168
 169   #trace:hover,
 170   #trace[checked] {
 171     -moz-image-region: rect(0px,64px,32px,32px);
 172   }
 173 }
 174
 175 #clear-tracer {
 176   /* Make this button as narrow as the text inside it. */
 177   min-width: 1px;
 178 }
 179
 180 .trace-name {
 181   -moz-padding-start: 4px !important;
 182 }
 183
 184 /* Tracer dark+light theme */
 185
 186 .trace-item {
 187   color: #FF9F00; /* Light foreground text */
 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: #9C9CFF; /* highlight blue */
 200 }
 201
 202 .trace-return,
 203 .trace-yield {
 204   color: #008484; /* highlight green */
 205 }
 206
 207 .trace-throw {
 208   color: #FF0000; /* highlight red */
 209 }
 210
 211 .trace-param {
 212   color: #E7ADE7; /* Content text light  */
 213 }
 214
 215 .trace-syntax {
 216   color: #A09090; /* highlight grey */
 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: #3333FF;
 257 }
 258
 259 .dbg-classic-stackframe-details-sep {
 260   color: #A09090;
 261 }
 262
 263 .dbg-classic-stackframe-details-line {
 264   color: #9C9CFF;
 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("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: 2dppx) {
 350   .dbg-expression-arrow {
 351     background-image: url(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
 365   color: #9C9CFF; /* Blue highlight color */
 366 }
 367
 368 /* Event listeners view */
 369
 370 .dbg-event-listener {
 371   padding: 0 8px;
 372 }
 373
 374 .dbg-event-listener-type {
 375   font-weight: 600;
 376 }
 377
 378 .dbg-event-listener-separator {
 379   color: #A09090;
 380 }
 381
 382 .dbg-event-listener-targets {
 383   color: #9C9CFF;
 384 }
 385
 386 .dbg-event-listener-location {
 387   color: #E7ADE7;
 388 }
 389
 390 #event-listeners .side-menu-widget-item.selected {
 391   background: none !important;
 392 }
 393
 394 /* Searchbox and the search operations help panel */
 395
 396 #searchbox {
 397   min-width: 220px;
 398   -moz-margin-start: 1px;
 399 }
 400
 401 #filter-label {
 402   -moz-margin-start: 2px;
 403 }
 404
 405 #searchbox-panel-operators {
 406   margin-top: 5px;
 407   margin-bottom: 8px;
 408   -moz-margin-start: 2px;
 409 }
 410
 411 .searchbox-panel-operator-button {
 412   min-width: 26px;
 413   margin-top: 0;
 414   margin-bottom: 0;
 415   -moz-margin-start: 2px;
 416   -moz-margin-end: 6px;
 417   text-align: center;
 418 }
 419
 420 .searchbox-panel-operator-label {
 421   padding-bottom: 2px;
 422 }
 423
 424 /* Searchbox results panel */
 425
 426 .results-panel {
 427   padding: 4px;
 428 }
 429
 430 .results-panel-item {
 431   border: 1px solid #A09090;
 432   border-top-color: #8050B0;
 433   padding: 5px;
 434   cursor: pointer;
 435 }
 436
 437 .results-panel-item:first-of-type {
 438   border-top-color: #9C9CFF;
 439   border-radius: 4px 4px 0 0;
 440 }
 441
 442 .results-panel-item:last-of-type {
 443   border-radius: 0 0 4px 4px;
 444 }
 445
 446 .results-panel-item:only-of-type {
 447   border-radius: 4px;
 448 }
 449
 450 .results-panel-item:not(.selected):not(:hover) {
 451 /*  text-shadow: 0 1px #fff;*/
 452 }
 453
 454 .results-panel-item-label-before {
 455   -moz-margin-end: 5px !important;
 456   color: #A09090;
 457   cursor: inherit;
 458 }
 459
 460 .results-panel-item-label {
 461   color: #9C9CFF;
 462   font-weight: 600;
 463   cursor: inherit;
 464 }
 465
 466 .results-panel-item-label-below {
 467   color: #FF9F00;
 468   cursor: inherit;
 469 }
 470
 471 /* Sources search view */
 472
 473 #globalsearch {
 474   min-height: 10px;
 475   max-height: 125px;
 476 }
 477
 478 #globalsearch + .devtools-horizontal-splitter {
 479   -moz-border-top-colors: #9C9CFF;
 480 }
 481
 482 .dbg-source-results {
 483   padding: 0;
 484   background: none !important;
 485 }
 486
 487 .dbg-source-results:not(.selected):hover {
 488   background-color: #000000; /* Sidebar background */
 489 }
 490
 491 .dbg-results-header {
 492   -moz-padding-start: 6px;
 493 }
 494
 495 .dbg-results-header-location {
 496   font-weight: 600;
 497 }
 498
 499 .dbg-results-header-match-count {
 500   -moz-padding-start: 6px;
 501   color: #8050B0;
 502 }
 503
 504 .dbg-results-line-number {
 505   background: #000000;
 506   min-width: 40px;
 507   -moz-border-end: 1px solid #9C9CFF;
 508   -moz-padding-end: 4px;
 509   padding-top: 2px;
 510   text-align: end;
 511   color: #FF9F00;
 512 }
 513
 514 .dbg-results-line-contents {
 515   -moz-padding-start: 4px;
 516   padding-top: 1px;
 517   padding-bottom: 1px;
 518 }
 519
 520 .dbg-results-line-contents-string {
 521   padding: 1px;
 522 }
 523
 524 .dbg-results-line-contents-string[match=true] {
 525   background: #E7ADE7;
 526   color: #000000;
 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://browser/skin/devtools/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://browser/skin/devtools/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 #debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 559 #sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
 560   width: 16px;
 561   height: 16px;
 562 }
 563
 564 #resume {
 565   list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
 566   -moz-image-region: rect(0px, 16px, 16px, 0px);
 567 /*  transition: background 0.15s ease-in-out; */
 568 }
 569
 570 #resume:hover {
 571   -moz-image-region: rect(0px, 32px, 16px, 16px);
 572 }
 573
 574 #resume[checked=true] {
 575 /*  background: none; */
 576   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 577   -moz-image-region: rect(0px, 16px, 16px, 0px);
 578 }
 579
 580 #resume[checked=true]:hover {
 581   -moz-image-region: rect(0px, 32px, 16px, 16px);
 582 }
 583
 584 @media (min-resolution: 2dppx) {
 585   #resume {
 586     list-style-image: url(debugger-pause@2x.png);
 587     -moz-image-region: rect(0px, 32px, 32px, 0px);
 588   }
 589
 590   #resume:hover {
 591     -moz-image-region: rect(0px, 64px, 32px, 32px);
 592   }
 593
 594   #resume[checked=true] {
 595     list-style-image: url(debugger-play@2x.png);
 596     -moz-image-region: rect(0px, 32px, 32px, 0);
 597   }
 598
 599   #resume[checked=true]:hover {
 600     -moz-image-region: rect(0px, 64px, 32px, 32px);
 601   }
 602 }
 603
 604 #resume ~ toolbarbutton {
 605 /*  transition: opacity 0.15s ease-in-out; */
 606 }
 607
 608 #resume:not([checked]) ~ toolbarbutton {
 609 /*  opacity: 0.5; */
 610 }
 611
 612 #step-over {
 613   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 614   -moz-image-region: rect(0px, 16px, 16px, 0px);
 615 }
 616 #step-over:hover {
 617   -moz-image-region: rect(0px, 32px, 16px, 16px);
 618 }
 619
 620 #step-in {
 621   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 622   -moz-image-region: rect(0px, 16px, 16px, 0px);
 623 }
 624 #step-in:hover {
 625   -moz-image-region: rect(0px, 32px, 16px, 16px);
 626 }
 627
 628 #step-out {
 629   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 630   -moz-image-region: rect(0px, 16px, 16px, 0px);
 631 }
 632 #step-out:hover {
 633   -moz-image-region: rect(0px, 32px, 16px, 16px);
 634 }
 635
 636 @media (min-resolution: 2dppx) {
 637   #step-over {
 638     list-style-image: url(debugger-step-over@2x.png);
 639     -moz-image-region: rect(0px, 32px, 32px, 0);
 640   }
 641
 642   #step-over:hover {
 643     -moz-image-region: rect(0px, 64px, 32px, 32px);
 644   }
 645
 646   #step-in {
 647     list-style-image: url(debugger-step-in@2x.png);
 648     -moz-image-region: rect(0px, 32px, 32px, 0);
 649   }
 650
 651   #step-in:hover {
 652     -moz-image-region: rect(0px, 64px, 32px, 32px);
 653   }
 654
 655   #step-out {
 656     list-style-image: url(debugger-step-out@2x.png);
 657     -moz-image-region: rect(0px, 32px, 32px, 0);
 658   }
 659
 660   #step-out:hover {
 661     -moz-image-region: rect(0px, 64px, 32px, 32px);
 662   }
 663 }
 664
 665 #instruments-pane-toggle {
 666 /*  background: none;
 667   box-shadow: none;
 668   border: none; */
 669   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 670   -moz-image-region: rect(0px,16px,16px,0px);
 671 }
 672
 673 #instruments-pane-toggle[pane-collapsed] {
 674   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 675 }
 676
 677 #instruments-pane-toggle:hover {
 678   -moz-image-region: rect(0px,32px,16px,16px);
 679 }
 680
 681 @media (min-resolution: 2dppx) {
 682   #instruments-pane-toggle {
 683     list-style-image: url(debugger-collapse@2x.png);
 684     -moz-image-region: rect(0px,32px,32px,0px);
 685   }
 686
 687   #instruments-pane-toggle[pane-collapsed] {
 688     list-style-image: url(debugger-expand@2x.png);
 689   }
 690
 691   #instruments-pane-toggle:hover {
 692     -moz-image-region: rect(0px,64px,32px,32px);
 693   }
 694 }
 695
 696 /* Horizontal vs. vertical layout */
 697
 698 #vertical-layout-panes-container {
 699   min-height: 35vh;
 700   max-height: 80vh;
 701 }
 702
 703 #body[layout=vertical] #instruments-pane {
 704   margin: 0 !important;
 705   /* To prevent all the margin hacks to hide the sidebar. */
 706 }
 707
 708 #body[layout=vertical] #sources-pane > tabs {
 709   -moz-border-end: none;
 710 }
 711
 712 #body[layout=vertical] .side-menu-widget-container,
 713 #body[layout=vertical] .side-menu-widget-empty-text {
 714   box-shadow: none !important;
 715 }
 716
 717 #body[layout=vertical] .side-menu-widget-item-arrow {
 718   background-image: none !important;
 719 }
 720
 721 /* === END debugger.inc.css === */