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