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