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