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