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