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