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