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