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