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: 1px solid;
  79   border-radius: 1px;
  80   background-color: var(--bullet-bg);
  81   border-color: var(--bullet-border);
  82 }
  83
  84 /* Recording Notice */
  85
  86 #performance-view .notice-container {
  87   font-size: 120%;
  88   background-color: var(--theme-toolbar-background);
  89   color: var(--theme-body-color);
  90   padding-bottom: 20vh;
  91 }
  92
  93 #performance-view .notice-container button {
  94   min-width: 30px;
  95   min-height: 28px;
  96   margin: 0;
  97 }
  98
  99 /* Overview Panel */
 100
 101 .record-button {
 102   list-style-image: url(profiler-stopwatch-tbutton.svg);
 103 }
 104
 105 #empty-notice > .record-button,
 106 .record-button:hover,
 107 .record-button:hover:active {
 108   list-style-image: url(profiler-stopwatch.svg);
 109 }
 110
 111 .record-button[checked] {
 112   list-style-image: url(profiler-stopwatch-checked.svg);
 113 }
 114
 115 .record-button[locked] {
 116   pointer-events: none;
 117 }
 118
 119 .record-button .button-icon {
 120   margin: 0;
 121 }
 122
 123 .record-button .button-text {
 124   display: none;
 125 }
 126
 127 /* Details Panel */
 128
 129 #select-waterfall-view {
 130   list-style-image: url(performance-icons.svg#details-waterfall);
 131 }
 132
 133 #select-waterfall-view:hover,
 134 #select-waterfall-view:hover:active,
 135 #select-waterfall-view[checked] {
 136   list-style-image: url(performance-icons.svg#details-waterfall-active);
 137 }
 138
 139 #select-js-calltree-view,
 140 #select-memory-calltree-view {
 141   list-style-image: url(performance-icons.svg#details-call-tree);
 142 }
 143
 144 #select-js-calltree-view:hover,
 145 #select-js-calltree-view:hover:active,
 146 #select-js-calltree-view[checked],
 147 #select-memory-calltree-view:hover,
 148 #select-memory-calltree-view:hover:active,
 149 #select-memory-calltree-view[checked] {
 150   list-style-image: url(performance-icons.svg#details-call-tree-active);
 151 }
 152
 153 #select-js-flamegraph-view,
 154 #select-memory-flamegraph-view {
 155   list-style-image: url(performance-icons.svg#details-flamegraph);
 156 }
 157
 158 #select-js-flamegraph-view:hover,
 159 #select-js-flamegraph-view:hover:active,
 160 #select-js-flamegraph-view[checked],
 161 #select-memory-flamegraph-view:hover,
 162 #select-memory-flamegraph-view:hover:active,
 163 #select-memory-flamegraph-view[checked] {
 164   list-style-image: url(performance-icons.svg#details-flamegraph-active);
 165 }
 166
 167 /* Profile call tree */
 168
 169 .call-tree-cells-container {
 170   /* Hack: force hardware acceleration */
 171   transform: translateZ(1px);
 172   overflow: auto;
 173 }
 174
 175 .call-tree-cells-container[categories-hidden] .call-tree-category {
 176   display: none;
 177 }
 178
 179 .call-tree-header {
 180   font-size: 90%;
 181   padding-top: 2px !important;
 182   padding-bottom: 2px !important;
 183 }
 184
 185 .call-tree-header[type="duration"],
 186 .call-tree-cell[type="duration"],
 187 .call-tree-header[type="self-duration"],
 188 .call-tree-cell[type="self-duration"] {
 189   width: 6vw;
 190 }
 191
 192 .call-tree-header[type="percentage"],
 193 .call-tree-cell[type="percentage"],
 194 .call-tree-header[type="self-percentage"],
 195 .call-tree-cell[type="self-percentage"] {
 196   width: 5vw;
 197 }
 198
 199 .call-tree-header[type="samples"],
 200 .call-tree-cell[type="samples"] {
 201   width: 4.5vw;
 202 }
 203
 204 .call-tree-header[type="allocations"],
 205 .call-tree-cell[type="allocations"],
 206 .call-tree-header[type="self-allocations"],
 207 .call-tree-cell[type="self-allocations"] {
 208   width: 9vw;
 209 }
 210
 211 .call-tree-header[type="function"],
 212 .call-tree-cell[type="function"] {
 213   -moz-box-flex: 1;
 214 }
 215
 216 .call-tree-header,
 217 .call-tree-cell {
 218   -moz-box-align: center;
 219   overflow: hidden;
 220   padding: 1px 4px;
 221   color: var(--theme-body-color);
 222   -moz-border-end-color: var(--cell-border-color);
 223 }
 224
 225 .call-tree-header:not(:last-child),
 226 .call-tree-cell:not(:last-child) {
 227   -moz-border-end-width: 1px;
 228   -moz-border-end-style: solid;
 229 }
 230
 231 .call-tree-header:not(:last-child) {
 232   text-align: center;
 233 }
 234
 235 .call-tree-cell:not(:last-child) {
 236   text-align: end;
 237 }
 238
 239 .call-tree-header {
 240   background-color: var(--theme-tab-toolbar-background);
 241 }
 242
 243 .call-tree-item:last-child:not(:focus) {
 244   border-bottom: 1px solid var(--cell-border-color);
 245 }
 246
 247 .call-tree-item:nth-child(2n) {
 248   background-color: var(--row-alt-background-color);
 249 }
 250
 251 .call-tree-item:hover {
 252   background-color: var(--row-hover-background-color);
 253 }
 254
 255 .call-tree-item:focus {
 256   background-color: var(--theme-selection-background);
 257 }
 258
 259 .call-tree-item:focus label {
 260   color: var(--theme-selection-color) !important;
 261 }
 262
 263 .call-tree-item:focus .call-tree-cell {
 264   -moz-border-end-color: var(--focus-cell-border-color);
 265 }
 266
 267 .call-tree-item:not([origin="content"]) .call-tree-name,
 268 .call-tree-item:not([origin="content"]) .call-tree-url,
 269 .call-tree-item:not([origin="content"]) .call-tree-line,
 270 .call-tree-item:not([origin="content"]) .call-tree-column {
 271   /* Style chrome and non-JS nodes differently. */
 272   opacity: 0.6;
 273 }
 274
 275 .call-tree-url {
 276   -moz-margin-start: 4px !important;
 277   cursor: pointer;
 278 }
 279
 280 .call-tree-url:hover {
 281   text-decoration: underline;
 282 }
 283
 284 .call-tree-url {
 285   color: var(--theme-highlight-blue);
 286 }
 287
 288 .call-tree-line {
 289   color: var(--theme-highlight-orange);
 290 }
 291
 292 .call-tree-column {
 293   color: var(--theme-highlight-orange);
 294   opacity: 0.6;
 295 }
 296
 297 .call-tree-host {
 298   -moz-margin-start: 8px !important;
 299   font-size: 90%;
 300   color: var(--theme-content-color2);
 301 }
 302
 303 .call-tree-name[value=""],
 304 .call-tree-url[value=""],
 305 .call-tree-line[value=""],
 306 .call-tree-column[value=""],
 307 .call-tree-host[value=""] {
 308   display: none;
 309 }
 310
 311 .call-tree-zoom {
 312   -moz-appearance: none;
 313   background-color: transparent;
 314   background-position: center;
 315   background-repeat: no-repeat;
 316   background-size: 11px;
 317   min-width: 11px;
 318   -moz-margin-start: 8px !important;
 319   cursor: zoom-in;
 320   opacity: 0;
 321 }
 322
 323 .theme-dark .call-tree-zoom {
 324   background-image: url(magnifying-glass.png);
 325 }
 326
 327 .theme-light .call-tree-zoom {
 328   background-image: url(magnifying-glass-light.png);
 329 }
 330
 331 @media (min-resolution: 2dppx) {
 332   .theme-dark .call-tree-zoom {
 333     background-image: url(magnifying-glass@2x.png);
 334   }
 335
 336   .theme-light .call-tree-zoom {
 337     background-image: url(magnifying-glass-light@2x.png);
 338   }
 339 }
 340
 341 .call-tree-item:hover .call-tree-zoom {
 342   transition: opacity 0.3s ease-in;
 343   opacity: 1;
 344 }
 345
 346 .call-tree-item:hover .call-tree-zoom:hover {
 347   opacity: 0;
 348 }
 349
 350 .call-tree-category {
 351   transform: scale(0.75);
 352   transform-origin: center right;
 353 }
 354
 355 /**
 356  * Details Waterfall Styles
 357  */
 358
 359 .waterfall-list-contents {
 360   /* Hack: force hardware acceleration */
 361   transform: translateZ(1px);
 362   overflow-x: hidden;
 363   overflow-y: auto;
 364 }
 365
 366 .waterfall-header-contents {
 367   overflow-x: hidden;
 368 }
 369
 370 .waterfall-background-ticks {
 371   /* Background created on a <canvas> in js. */
 372   /* @see browser/devtools/timeline/widgets/waterfall.js */
 373   background-image: -moz-element(#waterfall-background);
 374   background-repeat: repeat-y;
 375   background-position: -1px center;
 376 }
 377
 378 .waterfall-marker-container[is-spacer] {
 379   pointer-events: none;
 380 }
 381
 382 .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
 383   background-color: #403400;
 384 }
 385
 386 .waterfall-marker-container:hover {
 387   background-color: #FFCF00 !important;
 388 }
 389
 390 .waterfall-marker-item {
 391   overflow: hidden;
 392 }
 393
 394 .waterfall-sidebar {
 395   -moz-border-end: 1px solid var(--theme-splitter-color);
 396 }
 397
 398 .waterfall-marker-container:hover > .waterfall-sidebar {
 399   background-color: transparent;
 400 }
 401
 402 .waterfall-header-name {
 403   padding: 2px 4px;
 404   font-size: 90%;
 405 }
 406
 407 .waterfall-header-tick {
 408   width: 100px;
 409   font-size: 9px;
 410   transform-origin: left center;
 411   color: var(--theme-body-color);
 412 }
 413
 414 .waterfall-header-tick:not(:first-child) {
 415   -moz-margin-start: -100px !important; /* Don't affect layout. */
 416 }
 417
 418 .waterfall-marker-bullet {
 419   width: 8px;
 420   height: 8px;
 421   -moz-margin-start: 8px;
 422   -moz-margin-end: 6px;
 423   border: 1px solid;
 424   border-radius: 1px;
 425 }
 426
 427 .waterfall-marker-name {
 428   font-size: 95%;
 429   padding-bottom: 1px !important;
 430 }
 431
 432 .waterfall-marker-bar {
 433   height: 9px;
 434   border: 1px solid;
 435   border-radius: 1px;
 436   transform-origin: left center;
 437 }
 438
 439 .waterfall-marker-container.selected > .waterfall-sidebar,
 440 .waterfall-marker-container.selected > .waterfall-marker-item {
 441   background-color: var(--theme-selection-background);
 442   color: var(--theme-selection-color);
 443 }
 444
 445 .waterfall-marker-container.selected .waterfall-marker-bullet,
 446 .waterfall-marker-container.selected .waterfall-marker-bar {
 447   border-color: initial !important;
 448 }
 449
 450 .waterfall-marker-location {
 451    color: #3333FF;
 452 }
 453
 454 .waterfall-marker-location:hover,
 455 .waterfall-marker-location:focus {
 456    text-decoration: underline;
 457 }
 458
 459 #waterfall-details {
 460   -moz-padding-start: 8px;
 461   -moz-padding-end: 8px;
 462   padding-top: 2vh;
 463   overflow: auto;
 464 }
 465
 466 .marker-details-bullet {
 467   width: 8px;
 468   height: 8px;
 469   border: 1px solid;
 470   border-radius: 1px;
 471 }
 472
 473 #waterfall-details > * {
 474   padding-top: 3px;
 475 }
 476
 477 .marker-details-labelname {
 478   -moz-padding-end: 4px;
 479 }
 480
 481 .marker-details-type {
 482   font-size: 1.2em;
 483   font-weight: bold;
 484 }
 485
 486 .marker-details-duration {
 487   font-weight: bold;
 488 }
 489
 490 /* Recording items */
 491
 492 .recording-item {
 493   padding: 4px;
 494 }
 495
 496 .recording-item-title {
 497   font-size: 110%;
 498 }
 499
 500 .recording-item-footer {
 501   padding-top: 4px;
 502   font-size: 90%;
 503 }
 504
 505 .recording-item-save {
 506   text-decoration: underline;
 507   cursor: pointer;
 508 }
 509
 510 .recording-item-duration,
 511 .recording-item-save {
 512   color: var(--theme-body-color-alt);
 513 }
 514
 515 #recordings-list .selected label {
 516   /* Text inside a selected item should not be custom colored. */
 517   color: inherit !important;
 518 }
 519
 520 /* Profile call tree */
 521
 522 .call-tree-cells-container {
 523   /* Hack: force hardware acceleration */
 524   transform: translateZ(1px);
 525   overflow: auto;
 526 }
 527
 528 .call-tree-cells-container[categories-hidden] .call-tree-category {
 529   display: none;
 530 }
 531
 532 .call-tree-header[type="duration"],
 533 .call-tree-cell[type="duration"],
 534 .call-tree-header[type="self-duration"],
 535 .call-tree-cell[type="self-duration"] {
 536   width: 9em;
 537 }
 538
 539 .call-tree-header[type="percentage"],
 540 .call-tree-cell[type="percentage"],
 541 .call-tree-header[type="self-percentage"],
 542 .call-tree-cell[type="self-percentage"] {
 543   width: 6em;
 544 }
 545
 546 .call-tree-header[type="samples"],
 547 .call-tree-cell[type="samples"] {
 548   width: 5em;
 549 }
 550
 551 .call-tree-header[type="function"],
 552 .call-tree-cell[type="function"] {
 553   -moz-box-flex: 1;
 554 }
 555
 556 .call-tree-header,
 557 .call-tree-cell {
 558   -moz-box-align: center;
 559   overflow: hidden;
 560   padding: 1px 4px;
 561 }
 562
 563 .call-tree-header:not(:last-child),
 564 .call-tree-cell:not(:last-child) {
 565   -moz-border-end: 1px solid;
 566 }
 567
 568 .call-tree-header,
 569 .call-tree-cell {
 570   -moz-border-end-color: var(--theme-splitter-color);
 571   color: var(--theme-body-color);
 572 }
 573
 574 .call-tree-header:not(:last-child) {
 575   text-align: center;
 576 }
 577
 578 .call-tree-cell:not(:last-child) {
 579   text-align: end;
 580 }
 581
 582 .call-tree-header {
 583   background-color: var(--theme-toolbar-background);
 584 }
 585
 586 .call-tree-item:last-child:not(:focus) {
 587   border-bottom: 1px solid var(--theme-splitter-color);
 588 }
 589
 590 .call-tree-item:nth-child(2n) {
 591   background-color: var(--theme-contrast-background);
 592 }
 593
 594 .call-tree-item:hover {
 595   background-color: var(--theme-hover-background);
 596   color: var(--theme-hover-color);
 597 }
 598
 599 .call-tree-item:focus {
 600   background-color: var(--theme-selection-background);
 601 }
 602
 603 .call-tree-item:focus label {
 604   color: var(--theme-selection-color);
 605 }
 606
 607 .call-tree-item:focus .call-tree-cell {
 608   -moz-border-end-color: var(--theme-splitter-color);
 609 }
 610
 611 .call-tree-item:not([origin="content"]) .call-tree-name,
 612 .call-tree-item:not([origin="content"]) .call-tree-url,
 613 call-tree-item:not([origin="content"]) .call-tree-line {
 614   /* Style chrome and non-JS nodes differently. */
 615   opacity: 0.6;
 616 }
 617
 618 .call-tree-url {
 619   -moz-margin-start: 4px !important;
 620   cursor: pointer;
 621 }
 622
 623 .call-tree-url:hover {
 624   text-decoration: underline;
 625 }
 626
 627 .call-tree-url {
 628   color: var(--theme-text-blue);
 629 }
 630
 631 .call-tree-line {
 632   color: var(--theme-contrast-border);
 633 }
 634
 635 .call-tree-host {
 636   -moz-margin-start: 8px !important;
 637   font-size: 90%;
 638 }
 639
 640 .call-tree-host {
 641   color: ver(--theme-body-color);
 642 }
 643
 644 .call-tree-url[value=""],
 645 .call-tree-line[value=""],
 646 .call-tree-host[value=""] {
 647   display: none;
 648 }
 649
 650 .call-tree-zoom {
 651   -moz-appearance: none;
 652   background-color: transparent;
 653   background-position: center;
 654   background-repeat: no-repeat;
 655   background-size: 11px;
 656   min-width: 11px;
 657   -moz-margin-start: 8px !important;
 658   cursor: zoom-in;
 659   opacity: 0;
 660 }
 661
 662 .call-tree-zoom {
 663   background-image: url(magnifying-glass.png);
 664 }
 665
 666 @media (min-resolution: 2dppx) {
 667   .call-tree-zoom {
 668     background-image: url(magnifying-glass@2x.png);
 669   }
 670 }
 671
 672 .call-tree-item:hover .call-tree-zoom {
 673   transition: opacity 0.3s ease-in;
 674   opacity: 1;
 675 }
 676
 677 .call-tree-item:hover .call-tree-zoom:hover {
 678   opacity: 0;
 679 }
 680
 681 .call-tree-category {
 682   transform: scale(0.75);
 683   transform-origin: center right;
 684 }