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