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