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