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