LCARStrek/browser/devtools/performance.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* CSS Variables specific to this panel that aren't defined by the themes */
   7 .theme-dark,
   8 .theme-light {
   9   --cell-border-color: #A09090;
  10   --focus-cell-border-color: #9C9CFF;
  11   --row-alt-background-color: #403400;
  12   --row-hover-background-color: #544400;
  13 }
  14
  15 /* Toolbar */
  16
  17 #performance-toolbar > tabs,
  18 #performance-toolbar {
  19   -moz-border-end-color: var(--theme-splitter-color);
  20 }
  21
  22 #performance-toolbar-control-other {
  23   -moz-padding-end: 5px;
  24 }
  25
  26 #performance-toolbar-controls-detail-views > toolbarbutton {
  27   min-width: 0;
  28 }
  29
  30 #performance-toolbar-controls-detail-views .toolbarbutton-text {
  31   -moz-padding-start: 4px;
  32   -moz-padding-end: 8px;
  33 }
  34
  35 #filter-button {
  36   list-style-image: url(timeline-filter.svg#filter);
  37   min-width: 24px;
  38 }
  39
  40 #filter-button[disabled] {
  41   list-style-image: url(timeline-filter.svg#filter-disabled);
  42 }
  43
  44 #filter-button:not([disabled]):hover,
  45 #filter-button:not([disabled]):hover:active,
  46 #filter-button[open] {
  47   list-style-image: url(timeline-filter.svg#filter-open);
  48 }
  49
  50 #performance-filter-menupopup > menuitem:before {
  51   content: "";
  52   display: block;
  53   width: 8px;
  54   height: 8px;
  55   margin: 0 8px;
  56   border-radius: 1px;
  57 }
  58
  59 #filter-button {
  60   list-style-image: url(timeline-filter.svg#filter);
  61   min-width: 24px;
  62 }
  63
  64 #filter-button[disabled] {
  65   list-style-image: url(timeline-filter.svg#filter-disabled);
  66 }
  67
  68 #filter-button[open] {
  69   list-style-image: url(timeline-filter.svg#filter-open);
  70 }
  71
  72 #performance-filter-menupopup > menuitem:before {
  73   content: "";
  74   display: block;
  75   width: 8px;
  76   height: 8px;
  77   margin: 0 8px;
  78   border-radius: 1px;
  79 }
  80
  81 /* Recording Notice */
  82
  83 #performance-view .notice-container {
  84   font-size: 120%;
  85   background-color: var(--theme-toolbar-background);
  86   color: var(--theme-body-color);
  87   padding-bottom: 20vh;
  88 }
  89
  90 #performance-view .notice-container button {
  91   min-width: 30px;
  92   min-height: 28px;
  93   margin: 0;
  94 }
  95
  96 #performance-view .notice-container vbox {
  97   text-align: center;
  98 }
  99
 100 .console-profile-command {
 101   font-family: monospace;
 102   margin: 3px 2px;
 103 }
 104
 105 #performance-view .realtime-message {
 106   opacity: 0.5;
 107   display: block;
 108 }
 109
 110 #performance-view toolbarbutton.record-button {
 111   padding: 5px;
 112 }
 113
 114 #performance-view toolbarbutton.record-button[checked],
 115 #performance-view toolbarbutton.record-button[checked] {
 116   color: var(--theme-selection-color);
 117   background: var(--theme-selection-background);
 118 }
 119
 120 #performance-view .realtime-disabled-message,
 121 #performance-view .realtime-disabled-on-e10s-message {
 122   display: none;
 123   /* This label does not want to wrap naturally (based on some combination of
 124      it's parents and flex).  Quick and dirty way to force it to wrap -> don't
 125      let it get bigger than half the screen size */
 126   max-width: 60vw;
 127 }
 128
 129 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message {
 130   display: block;
 131   opacity: 0.5;
 132
 133 }
 134 #performance-view[e10s="unsupported"] .realtime-disabled-message {
 135   display: block;
 136   opacity: 0.5;
 137 }
 138
 139 #details-pane-container .buffer-status-message,
 140 #details-pane-container .buffer-status-message-full {
 141   display: none;
 142 }
 143
 144 #details-pane-container[buffer-status="in-progress"] .buffer-status-message {
 145   display: block;
 146   opacity: 0.5;
 147 }
 148
 149 #details-pane-container[buffer-status="full"] .buffer-status-message {
 150   display: block;
 151   color: var(--theme-highlight-red);
 152   font-weight: bold;
 153   opacity: 1;
 154 }
 155
 156 #details-pane-container[buffer-status="full"] .buffer-status-message-full {
 157   display: block;
 158 }
 159
 160 /* Overview Panel */
 161
 162 #main-record-button {
 163   list-style-image: url(profiler-stopwatch-tbutton.svg);
 164 }
 165
 166 #empty-notice > .record-button,
 167 #main-record-button:hover,
 168 #main-record-button:hover:active {
 169   list-style-image: url(profiler-stopwatch.svg);
 170 }
 171
 172 #main-record-button[checked] {
 173   list-style-image: url(profiler-stopwatch-checked.svg);
 174 }
 175
 176 #main-record-button[locked] {
 177   pointer-events: none;
 178 }
 179
 180 #main-record-button .button-icon {
 181   margin: 0;
 182 }
 183
 184 #main-record-button .button-text {
 185   display: none;
 186 }
 187
 188 /* Details Panel */
 189
 190 #select-waterfall-view {
 191   list-style-image: url(performance-icons.svg#details-waterfall);
 192 }
 193
 194 #select-waterfall-view:hover,
 195 #select-waterfall-view:hover:active,
 196 #select-waterfall-view[checked] {
 197   list-style-image: url(performance-icons.svg#details-waterfall-active);
 198 }
 199
 200 #select-js-calltree-view,
 201 #select-memory-calltree-view {
 202   list-style-image: url(performance-icons.svg#details-call-tree);
 203 }
 204
 205 #select-js-calltree-view:hover,
 206 #select-js-calltree-view:hover:active,
 207 #select-js-calltree-view[checked],
 208 #select-memory-calltree-view:hover,
 209 #select-memory-calltree-view:hover:active,
 210 #select-memory-calltree-view[checked] {
 211   list-style-image: url(performance-icons.svg#details-call-tree-active);
 212 }
 213
 214 #select-js-flamegraph-view,
 215 #select-memory-flamegraph-view {
 216   list-style-image: url(performance-icons.svg#details-flamegraph);
 217 }
 218
 219 #select-js-flamegraph-view:hover,
 220 #select-js-flamegraph-view:hover:active,
 221 #select-js-flamegraph-view[checked],
 222 #select-memory-flamegraph-view:hover,
 223 #select-memory-flamegraph-view:hover:active,
 224 #select-memory-flamegraph-view[checked] {
 225   list-style-image: url(performance-icons.svg#details-flamegraph-active);
 226 }
 227
 228 /* Profile call tree */
 229
 230 .call-tree-cells-container {
 231   /* Hack: force hardware acceleration */
 232   transform: translateZ(1px);
 233   overflow: auto;
 234 }
 235
 236 .call-tree-cells-container[categories-hidden] .call-tree-category {
 237   display: none;
 238 }
 239
 240 .call-tree-header {
 241   font-size: 90%;
 242   padding-top: 2px !important;
 243   padding-bottom: 2px !important;
 244 }
 245
 246 .call-tree-header[type="duration"],
 247 .call-tree-cell[type="duration"],
 248 .call-tree-header[type="self-duration"],
 249 .call-tree-cell[type="self-duration"] {
 250   width: 6vw;
 251 }
 252
 253 .call-tree-header[type="percentage"],
 254 .call-tree-cell[type="percentage"],
 255 .call-tree-header[type="self-percentage"],
 256 .call-tree-cell[type="self-percentage"] {
 257   width: 5vw;
 258 }
 259
 260 .call-tree-header[type="samples"],
 261 .call-tree-cell[type="samples"] {
 262   width: 4.5vw;
 263 }
 264
 265 .call-tree-header[type="allocations"],
 266 .call-tree-cell[type="allocations"],
 267 .call-tree-header[type="self-allocations"],
 268 .call-tree-cell[type="self-allocations"] {
 269   width: 9vw;
 270 }
 271
 272 .call-tree-header[type="function"],
 273 .call-tree-cell[type="function"] {
 274   -moz-box-flex: 1;
 275 }
 276
 277 .call-tree-header,
 278 .call-tree-cell {
 279   -moz-box-align: center;
 280   overflow: hidden;
 281   padding: 1px 4px;
 282   color: var(--theme-body-color);
 283   -moz-border-end-color: var(--cell-border-color);
 284 }
 285
 286 .call-tree-header:not(:last-child),
 287 .call-tree-cell:not(:last-child) {
 288   -moz-border-end-width: 1px;
 289   -moz-border-end-style: solid;
 290 }
 291
 292 .call-tree-header:not(:last-child) {
 293   text-align: center;
 294 }
 295
 296 .call-tree-cell:not(:last-child) {
 297   text-align: end;
 298 }
 299
 300 .call-tree-header {
 301   background-color: var(--theme-tab-toolbar-background);
 302 }
 303
 304 .call-tree-item:last-child:not(:focus) {
 305   border-bottom: 1px solid var(--cell-border-color);
 306 }
 307
 308 .call-tree-item:nth-child(2n) {
 309   background-color: var(--row-alt-background-color);
 310 }
 311
 312 .call-tree-item:hover {
 313   background-color: var(--row-hover-background-color);
 314 }
 315
 316 .call-tree-item:focus {
 317   background-color: var(--theme-selection-background);
 318 }
 319
 320 .call-tree-item:focus label {
 321   color: var(--theme-selection-color) !important;
 322 }
 323
 324 .call-tree-item:focus .call-tree-cell {
 325   -moz-border-end-color: var(--focus-cell-border-color);
 326 }
 327
 328 .call-tree-item:not([origin="content"]) .call-tree-name,
 329 .call-tree-item:not([origin="content"]) .call-tree-url,
 330 .call-tree-item:not([origin="content"]) .call-tree-line,
 331 .call-tree-item:not([origin="content"]) .call-tree-column {
 332   /* Style chrome and non-JS nodes differently. */
 333   opacity: 0.6;
 334 }
 335
 336 .call-tree-name {
 337   -moz-margin-end: 4px !important;
 338 }
 339
 340 .call-tree-url {
 341   cursor: pointer;
 342 }
 343
 344 .call-tree-url:hover {
 345   text-decoration: underline;
 346 }
 347
 348 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
 349   color: var(--theme-highlight-blue);
 350 }
 351
 352 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
 353   color: var(--theme-highlight-orange);
 354 }
 355
 356 .call-tree-column {
 357   color: var(--theme-highlight-orange);
 358   opacity: 0.6;
 359 }
 360
 361 .call-tree-host {
 362   -moz-margin-start: 8px !important;
 363   font-size: 90%;
 364   color: var(--theme-content-color2);
 365 }
 366
 367 .call-tree-zoom {
 368   -moz-appearance: none;
 369   background-color: transparent;
 370   background-position: center;
 371   background-repeat: no-repeat;
 372   background-size: 11px;
 373   min-width: 11px;
 374   -moz-margin-start: 8px !important;
 375   cursor: zoom-in;
 376   opacity: 0;
 377 }
 378
 379 .theme-dark .call-tree-zoom {
 380   background-image: url(magnifying-glass.png);
 381 }
 382
 383 .theme-light .call-tree-zoom {
 384   background-image: url(magnifying-glass-light.png);
 385 }
 386
 387 @media (min-resolution: 1.25dppx) {
 388   .theme-dark .call-tree-zoom {
 389     background-image: url(magnifying-glass@2x.png);
 390   }
 391
 392   .theme-light .call-tree-zoom {
 393     background-image: url(magnifying-glass-light@2x.png);
 394   }
 395 }
 396
 397 .call-tree-item:hover .call-tree-zoom {
 398   transition: opacity 0.3s ease-in;
 399   opacity: 1;
 400 }
 401
 402 .call-tree-item:hover .call-tree-zoom:hover {
 403   opacity: 0;
 404 }
 405
 406 .call-tree-category {
 407   transform: scale(0.75);
 408   transform-origin: center right;
 409 }
 410
 411 /**
 412  * Details Waterfall Styles
 413  */
 414
 415 .waterfall-list-contents {
 416   /* Hack: force hardware acceleration */
 417   transform: translateZ(1px);
 418   overflow-x: hidden;
 419   overflow-y: auto;
 420 }
 421
 422 .waterfall-header-contents {
 423   overflow-x: hidden;
 424 }
 425
 426 .waterfall-background-ticks {
 427   /* Background created on a <canvas> in js. */
 428   /* @see browser/devtools/timeline/widgets/waterfall.js */
 429   background-image: -moz-element(#waterfall-background);
 430   background-repeat: repeat-y;
 431   background-position: -1px center;
 432 }
 433
 434 .waterfall-marker-container[is-spacer] {
 435   pointer-events: none;
 436 }
 437
 438 .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
 439   background-color: #403400;
 440 }
 441
 442 .waterfall-marker-container:hover {
 443   background-color: #FFCF00 !important;
 444 }
 445
 446 .waterfall-marker-item {
 447   overflow: hidden;
 448 }
 449
 450 .waterfall-sidebar {
 451   -moz-border-end: 1px solid var(--theme-splitter-color);
 452 }
 453
 454 .waterfall-marker-container:hover > .waterfall-sidebar {
 455   background-color: transparent;
 456 }
 457
 458 .waterfall-header-name {
 459   padding: 2px 4px;
 460   font-size: 90%;
 461 }
 462
 463 .waterfall-header-tick {
 464   width: 100px;
 465   font-size: 9px;
 466   transform-origin: left center;
 467   color: var(--theme-body-color);
 468 }
 469
 470 .waterfall-header-tick:not(:first-child) {
 471   -moz-margin-start: -100px !important; /* Don't affect layout. */
 472 }
 473
 474 .waterfall-marker-bullet {
 475   width: 8px;
 476   height: 8px;
 477   -moz-margin-start: 8px;
 478   -moz-margin-end: 6px;
 479   border-radius: 1px;
 480 }
 481
 482 .waterfall-marker-name {
 483   font-size: 95%;
 484   padding-bottom: 1px !important;
 485 }
 486
 487 .waterfall-marker-bar {
 488   height: 9px;
 489   transform-origin: left center;
 490   border-radius: 1px;
 491 }
 492
 493 .waterfall-marker-container.selected > .waterfall-sidebar,
 494 .waterfall-marker-container.selected > .waterfall-marker-item {
 495   background-color: var(--theme-selection-background);
 496   color: var(--theme-selection-color);
 497 }
 498
 499 #waterfall-details {
 500   -moz-padding-start: 8px;
 501   -moz-padding-end: 8px;
 502   padding-top: 2vh;
 503   overflow: auto;
 504   min-width: 50px;
 505 }
 506
 507 .marker-details-bullet {
 508   width: 8px;
 509   height: 8px;
 510   border-radius: 1px;
 511 }
 512
 513 menuitem.marker-color-graphs-purple:before,
 514 .marker-color-graphs-purple {
 515   background-color: var(--theme-graphs-purple);
 516 }
 517
 518 menuitem.marker-color-graphs-grey:before,
 519 .marker-color-graphs-grey{
 520   background-color: var(--theme-graphs-grey);
 521 }
 522
 523 menuitem.marker-color-graphs-green:before,
 524 .marker-color-graphs-green {
 525   background-color: var(--theme-graphs-green);
 526 }
 527
 528 menuitem.marker-color-graphs-yellow:before,
 529 .marker-color-graphs-yellow {
 530   background-color: var(--theme-graphs-yellow);
 531 }
 532
 533 menuitem.marker-color-graphs-red:before,
 534 .marker-color-graphs-red {
 535   background-color: var(--theme-graphs-red);
 536 }
 537
 538 menuitem.marker-color-graphs-blue:before,
 539 .marker-color-graphs-blue {
 540   background-color: var(--theme-graphs-blue);
 541 }
 542
 543 #performance-filter-menupopup > menuitem.highlight-purple:before,
 544 .marker-details-bullet.highlight-purple,
 545 .waterfall-marker-bar.highlight-purple,
 546 .waterfall-marker-bullet.highlight-purple {
 547   background-color: var(--theme-highlight-purple);
 548 }
 549
 550 #waterfall-details > * {
 551   padding-top: 3px;
 552 }
 553
 554 .marker-details-labelname {
 555   -moz-padding-end: 4px;
 556 }
 557
 558 .marker-details-type {
 559   font-size: 1.2em;
 560   font-weight: bold;
 561 }
 562
 563 .marker-details-duration {
 564   font-weight: bold;
 565 }
 566
 567 /* Recording items */
 568
 569 .recording-item {
 570   padding: 4px;
 571 }
 572
 573 .recording-item-title {
 574   font-size: 110%;
 575 }
 576
 577 .recording-item-footer {
 578   padding-top: 4px;
 579   font-size: 90%;
 580 }
 581
 582 .recording-item-save {
 583   text-decoration: underline;
 584   cursor: pointer;
 585 }
 586
 587 .recording-item-duration,
 588 .recording-item-save {
 589   color: var(--theme-body-color-alt);
 590 }
 591
 592 #recordings-list .selected label {
 593   /* Text inside a selected item should not be custom colored. */
 594   color: inherit !important;
 595 }
 596
 597 /* Profile call tree */
 598
 599 .call-tree-cells-container {
 600   /* Hack: force hardware acceleration */
 601   transform: translateZ(1px);
 602   overflow: auto;
 603 }
 604
 605 .call-tree-cells-container[categories-hidden] .call-tree-category {
 606   display: none;
 607 }
 608
 609 .call-tree-header[type="duration"],
 610 .call-tree-cell[type="duration"],
 611 .call-tree-header[type="self-duration"],
 612 .call-tree-cell[type="self-duration"] {
 613   width: 9em;
 614 }
 615
 616 .call-tree-header[type="percentage"],
 617 .call-tree-cell[type="percentage"],
 618 .call-tree-header[type="self-percentage"],
 619 .call-tree-cell[type="self-percentage"] {
 620   width: 6em;
 621 }
 622
 623 .call-tree-header[type="samples"],
 624 .call-tree-cell[type="samples"] {
 625   width: 5em;
 626 }
 627
 628 .call-tree-header[type="function"],
 629 .call-tree-cell[type="function"] {
 630   -moz-box-flex: 1;
 631 }
 632
 633 .call-tree-header,
 634 .call-tree-cell {
 635   -moz-box-align: center;
 636   overflow: hidden;
 637   padding: 1px 4px;
 638 }
 639
 640 .call-tree-header:not(:last-child),
 641 .call-tree-cell:not(:last-child) {
 642   -moz-border-end: 1px solid;
 643 }
 644
 645 .call-tree-header,
 646 .call-tree-cell {
 647   -moz-border-end-color: var(--theme-splitter-color);
 648   color: var(--theme-body-color);
 649 }
 650
 651 .call-tree-header:not(:last-child) {
 652   text-align: center;
 653 }
 654
 655 .call-tree-cell:not(:last-child) {
 656   text-align: end;
 657 }
 658
 659 .call-tree-header {
 660   background-color: var(--theme-toolbar-background);
 661 }
 662
 663 .call-tree-item:last-child:not(:focus) {
 664   border-bottom: 1px solid var(--theme-splitter-color);
 665 }
 666
 667 .call-tree-item:nth-child(2n) {
 668   background-color: var(--theme-contrast-background);
 669 }
 670
 671 .call-tree-item:hover {
 672   background-color: var(--theme-hover-background);
 673   color: var(--theme-hover-color);
 674 }
 675
 676 .call-tree-item:focus {
 677   background-color: var(--theme-selection-background);
 678 }
 679
 680 .call-tree-item:focus label {
 681   color: var(--theme-selection-color);
 682 }
 683
 684 .call-tree-item:focus .call-tree-cell {
 685   -moz-border-end-color: var(--theme-splitter-color);
 686 }
 687
 688 .call-tree-item:not([origin="content"]) .call-tree-name,
 689 .call-tree-item:not([origin="content"]) .call-tree-url,
 690 call-tree-item:not([origin="content"]) .call-tree-line {
 691   /* Style chrome and non-JS nodes differently. */
 692   opacity: 0.6;
 693 }
 694
 695 .call-tree-url {
 696   -moz-margin-start: 4px !important;
 697   cursor: pointer;
 698 }
 699
 700 .call-tree-url:hover {
 701   text-decoration: underline;
 702 }
 703
 704 .call-tree-url {
 705   color: var(--theme-text-blue);
 706 }
 707
 708 .call-tree-line {
 709   color: var(--theme-contrast-border);
 710 }
 711
 712 .call-tree-host {
 713   -moz-margin-start: 8px !important;
 714   font-size: 90%;
 715 }
 716
 717 .call-tree-host {
 718   color: ver(--theme-body-color);
 719 }
 720
 721 .call-tree-url[value=""],
 722 .call-tree-line[value=""],
 723 .call-tree-host[value=""] {
 724   display: none;
 725 }
 726
 727 .call-tree-zoom {
 728   -moz-appearance: none;
 729   background-color: transparent;
 730   background-position: center;
 731   background-repeat: no-repeat;
 732   background-size: 11px;
 733   min-width: 11px;
 734   -moz-margin-start: 8px !important;
 735   cursor: zoom-in;
 736   opacity: 0;
 737 }
 738
 739 .call-tree-zoom {
 740   background-image: url(magnifying-glass.png);
 741 }
 742
 743 @media (min-resolution: 1.25dppx) {
 744   .call-tree-zoom {
 745     background-image: url(magnifying-glass@2x.png);
 746   }
 747 }
 748
 749 .call-tree-item:hover .call-tree-zoom {
 750   transition: opacity 0.3s ease-in;
 751   opacity: 1;
 752 }
 753
 754 .call-tree-item:hover .call-tree-zoom:hover {
 755   opacity: 0;
 756 }
 757
 758 .call-tree-category {
 759   transform: scale(0.75);
 760   transform-origin: center right;
 761 }
 762
 763 /**
 764  * JIT View
 765  */
 766
 767 #jit-optimizations-view {
 768   width: 350px;
 769   overflow-x: hidden;
 770   overflow-y: auto;
 771   min-width: 200px;
 772 }
 773
 774 /* override default styles for tree widget */
 775 #jit-optimizations-view .tree-widget-empty-text {
 776   font-size: inherit;
 777   padding: 0px;
 778   margin: 8px;
 779 }
 780
 781 #jit-optimizations-view:not(.empty) .tree-widget-empty-text {
 782   display: none;
 783 }
 784
 785 #jit-optimizations-toolbar {
 786   height: 18px;
 787   min-height: 0px; /* override .devtools-toolbar min-height */
 788 }
 789
 790 .jit-optimizations-title {
 791   margin: 0px 4px;
 792   font-weight: 600;
 793 }
 794
 795 #jit-optimizations-raw-view {
 796   font-size: 90%;
 797 }
 798
 799 /* override default .tree-widget-item line-height */
 800 #jit-optimizations-raw-view .tree-widget-item {
 801   line-height: 20px !important;
 802   display: block;
 803   overflow: hidden;
 804 }
 805
 806 #jit-optimizations-raw-view .tree-widget-item[level="1"] {
 807   font-weight: 600;
 808 }
 809
 810 #jit-optimizations-view .opt-outcome::before {
 811   content: "→";
 812   margin: 4px 0px;
 813   color: var(--theme-body-color);
 814 }
 815 #jit-optimizations-view .theme-selected .opt-outcome::before {
 816   color: var(--theme-selection-color);
 817 }
 818
 819 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] {
 820   color: var(--theme-highlight-green);
 821 }
 822 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] {
 823   color: var(--theme-highlight-red);
 824 }
 825 #jit-optimizations-view .tree-widget-container {
 826   -moz-margin-end: 0px;
 827 }
 828 #jit-optimizations-view .tree-widget-container > li,
 829 #jit-optimizations-view .tree-widget-children > li {
 830   overflow: hidden;
 831 }
 832
 833 .opt-line::before {
 834   content: ":";
 835   color: var(--theme-highlight-orange);
 836 }
 837 .theme-selected .opt-line::before {
 838   color: var(--theme-selection-color);
 839 }
 840 .opt-line.header-line::before {
 841   color: var(--theme-body-color);
 842 }
 843 #jit-optimizations-view.empty .opt-line.header-line::before {
 844   display: none;
 845 }
 846
 847 .opt-url {
 848   -moz-margin-start: 4px !important;
 849 }
 850 .opt-url:hover {
 851   text-decoration: underline;
 852 }
 853 .opt-url.debugger-link {
 854   cursor: pointer;
 855 }
 856
 857 #jit-optimizations-view .opt-icon::before {
 858   content: "";
 859   background-image: url(chrome://browser/skin/devtools/webconsole.png);
 860   background-repeat: no-repeat;
 861   background-size: 48px 40px;
 862   margin: 5px 6px 0 0;
 863   width: 8px;
 864   height: 8px;
 865   max-height: 8px;
 866   display: inline-block;
 867 }
 868
 869 #jit-optimizations-view .opt-icon[severity=warning]::before {
 870   background-position: -16px -16px;
 871 }
 872
 873 @media (min-resolution: 1.25dppx) {
 874   #jit-optimizations-view .opt-icon::before {
 875     background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
 876   }
 877 }
 878
 879 /**
 880  * Configurable Options
 881  *
 882  * Elements can be tagged with a class and visibility is controlled via a preference being
 883  * applied or removed.
 884  */
 885
 886 /**
 887  * devtools.performance.ui.experimental
 888  */
 889 menuitem.experimental-option::before {
 890   content: "";
 891   background-image: url(chrome://browser/skin/devtools/webconsole.png);
 892   background-repeat: no-repeat;
 893   background-size: 48px 40px;
 894   margin: 2px 5px 0 0;
 895   width: 8px;
 896   height: 8px;
 897   max-height: 8px;
 898   display: inline-block;
 899   background-position: -16px -16px;
 900 }
 901 @media (min-resolution: 1.25dppx) {
 902   menuitem.experimental-option::before {
 903     background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
 904   }
 905 }
 906 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
 907 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
 908   display: none;
 909 }