LCARStrek/devtools/memory.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* CSS Variables specific to this panel that aren't defined by the themes */
   6 .theme-dark,
   7 .theme-light {
   8   --cell-border-color: #9C9CFF;
   9   --cell-border-color-light: #A09090;
  10   --focus-cell-border-color: #9C9CFF;
  11   --row-alt-background-color: #402000;
  12   --row-hover-background-color: #603000;
  13 }
  14
  15 html, body, #app, #memory-tool {
  16   height: 100%;
  17 }
  18
  19 #memory-tool {
  20   /**
  21    * Flex: contains two children: .devtools-toolbar and #memory-tool-container,
  22    * which need to be laid out vertically. The toolbar has a fixed height and
  23    * the container needs to flex to fill out all remaining vertical space.
  24    */
  25   display: flex;
  26   flex-direction: column;
  27   --sidebar-width: 185px;
  28   /**
  29    * If --heap-tree-row-height changes, be sure to change HEAP_TREE_ROW_HEIGHT
  30    * in `devtools/client/memory/components/heap.js`.
  31    */
  32   --heap-tree-row-height: 14px;
  33   --heap-tree-header-height: 17px;
  34 }
  35
  36 /**
  37  * Toolbar
  38  */
  39
  40 .devtools-toolbar {
  41   /**
  42    * Flex: contains several children, which need to be laid out horizontally,
  43    * and aligned vertically in the middle of the container.
  44    */
  45   display: flex;
  46   align-items: center;
  47   background-size: calc(100% - 30px);
  48   background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
  49   background-repeat: no-repeat;
  50   background-position: center center;
  51 }
  52
  53 .devtools-toolbar::before,
  54 .devtools-toolbar::after {
  55   display: flex;
  56   content: "";
  57   width: 12px;
  58   min-height: 16px;
  59   height: 100%;
  60   background-color: #FF9F00;
  61 }
  62
  63 .devtools-toolbar::before {
  64   border-radius: 8px 0px 0px 8px;
  65   border: none;
  66   border-inline-end: 3px solid black;
  67   margin-inline-end: 2px;
  68 }
  69
  70 .devtools-toolbar::after {
  71   border-radius: 0px 8px 8px 0px;
  72   border: none;
  73   border-inline-start: 3px solid black;
  74   margin-inline-start: 2px;
  75 }
  76
  77 .devtools-toolbar > .toolbar-group:nth-of-type(1) {
  78   /**
  79    * We want this to be exactly at a `--sidebar-width` distance from the
  80    * toolbar's start boundary. We want the end border to be after the sidebar,
  81    * and the startcap has to be subtracted.
  82    */
  83   flex: 0 0 calc(var(--sidebar-width) - 2px - 15px);
  84   border-inline-end: 3px solid var(--theme-toolbar-background);
  85   margin-inline-end: 5px;
  86   padding-right: 1px;
  87 }
  88
  89 .devtools-toolbar > .toolbar-group {
  90   /**
  91    * Flex: contains several children, which need to be laid out horizontally,
  92    * and aligned vertically in the middle of the container.
  93    */
  94   display: flex;
  95   align-items: center;
  96   flex: 1;
  97   white-space: nowrap;
  98   overflow: hidden;
  99   text-overflow: ellipsis;
 100   height: 100%;
 101 }
 102
 103 .devtools-toolbar > .toolbar-group > label {
 104   /**
 105    * Flex: contains form controls and text, which need to be laid out
 106    * horizontally, vertically aligned in the middle of the container.
 107    */
 108   display: flex;
 109   align-items: center;
 110   margin-inline-end: 5px;
 111   color: var(--theme-button-color);
 112 }
 113
 114 .devtools-toolbar > .toolbar-group > label.display-by > span {
 115   margin-inline-end: 5px;
 116 }
 117
 118 .devtools-toolbar > .toolbar-group > label.label-by > span {
 119   margin-inline-end: 5px;
 120 }
 121
 122 .devtools-toolbar > label {
 123   margin-inline-end: 5px;
 124   flex: 1;
 125   color: var(--theme-button-color);
 126 }
 127
 128 #select-view {
 129   margin-inline-start: 5px;
 130 }
 131
 132 #take-snapshot::before {
 133   background-image: url(images/command-screenshot.svg);
 134 }
 135
 136 #clear-snapshots::before {
 137   background-image: url(chrome://devtools/skin/images/clear.svg);
 138 }
 139
 140 #diff-snapshots::before {
 141   background-image: url(chrome://devtools/skin/images/diff.svg);
 142 }
 143
 144 #import-snapshot::before {
 145   background-image: url(chrome://devtools/skin/images/import.svg);
 146 }
 147
 148 #record-allocation-stacks-label,
 149 #pop-view-button-label {
 150   border-inline-end: 1px solid var(--theme-splitter-color);
 151   padding-inline-end: 5px;
 152   flex: none;
 153 }
 154
 155 /**
 156  * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides
 157  * .devtools-toolbarbutton's min-width of 78px, reset the min-width.
 158  */
 159 #import-snapshot,
 160 #clear-snapshots {
 161   -moz-box-align: center;
 162 /*  flex-grow: 1;
 163   padding: 1px;
 164   margin: 2px 1px;
 165   min-width: unset;*/
 166 }
 167
 168 .spacer {
 169   flex: 1;
 170 }
 171
 172 #filter {
 173   align-self: stretch;
 174 /*  margin: 2px; */
 175   font: inherit;
 176 }
 177
 178 /**
 179  * Container (sidebar + main panel)
 180  */
 181
 182 #memory-tool-container {
 183   /**
 184    * Flex: contains two children: .list (sidebar) and #heap-view (main panel),
 185    * which need to be laid out horizontally. The sidebar has a fixed width and
 186    * the main panel needs to flex to fill out all remaining horizontal space.
 187    */
 188   display: flex;
 189   /**
 190    * Flexing to fill out remaining vertical space. The preceeding sibling is
 191    * the toolbar. @see #memory-tool.
 192    */
 193   flex: 1;
 194   overflow: hidden;
 195 }
 196
 197 /**
 198  * Sidebar
 199  */
 200
 201 .list {
 202   width: var(--sidebar-width);
 203   min-width: var(--sidebar-width);
 204   overflow-y: auto;
 205   margin: 0;
 206   padding: 0;
 207   background-color: var(--theme-sidebar-background);
 208   border-inline-end: 1px solid var(--theme-splitter-color);
 209 }
 210
 211 .snapshot-list-item {
 212   /**
 213    * Flex: contains several children, which need to be laid out vertically.
 214    */
 215   display: flex;
 216   flex-direction: column;
 217   color: var(--theme-body-color);
 218   border-bottom: 1px solid #A09090;
 219   padding: 8px;
 220   cursor: default;
 221 }
 222
 223 .snapshot-list-item.selected {
 224   background-color: var(--theme-selection-background);
 225   color: var(--theme-selection-color);
 226 }
 227
 228 .snapshot-list-item.selected ::-moz-selection {
 229   background-color: var(--theme-selection-color);
 230   color: var(--theme-selection-background);
 231 }
 232
 233 .snapshot-list-item .snapshot-info {
 234   display: flex;
 235   justify-content: space-between;
 236   font-size: 90%;
 237 }
 238
 239 .snapshot-list-item .snapshot-title {
 240   display: flex;
 241   justify-content: space-between;
 242 }
 243
 244 .snapshot-list-item .save {
 245   text-decoration: underline;
 246   cursor: pointer;
 247 }
 248
 249 .snapshot-list-item .delete {
 250   cursor: pointer;
 251   position: relative;
 252   min-height: 1em;
 253   min-width: 1.3em;
 254 }
 255
 256 .theme-light .snapshot-list-item.selected .delete {
 257 /*  filter: invert(100%);*/
 258 }
 259
 260 .snapshot-list-item .delete::before {
 261   background-image: url("chrome://devtools/skin/images/close.svg");
 262   background-position: 0.2em 0;
 263 }
 264
 265 .snapshot-list-item > .snapshot-title {
 266   margin-bottom: 14px;
 267 }
 268
 269 .snapshot-list-item > .snapshot-title > input[type=checkbox] {
 270   margin: 0;
 271   margin-inline-end: 5px;
 272 }
 273
 274 .snapshot-list-item > .snapshot-state,
 275 .snapshot-list-item > .snapshot-totals {
 276   font-size: 90%;
 277   color: var(--theme-body-color-alt);
 278 }
 279
 280 .snapshot-list-item.selected > .snapshot-state,
 281 .snapshot-list-item.selected > .snapshot-totals {
 282   /* Text inside a selected item should not be custom colored. */
 283   color: inherit !important;
 284 }
 285
 286 /**
 287  * Main panel
 288  */
 289
 290 .vbox {
 291   display: flex;
 292   flex-direction: column;
 293   width: 100%;
 294   height: 100%;
 295   overflow: auto;
 296   padding: 0;
 297   margin: 0;
 298 }
 299
 300 .vbox > * {
 301   flex: 1;
 302
 303   /**
 304    * By default, flex items have min-width: auto;
 305    * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
 306    */
 307   min-width: 0;
 308 }
 309
 310 #heap-view {
 311   /**
 312    * Flex: contains a .heap-view-panel which needs to fill out all the
 313    * available space, horizontally and vertically.
 314    */;
 315   display: flex;
 316   /**
 317    * Flexing to fill out remaining horizontal space. The preceeding sibling
 318    * is the sidebar. @see #memory-tool-container.
 319    */
 320   flex: 1;
 321   background-color: var(--theme-body-background);
 322
 323   /**
 324    * By default, flex items have min-width: auto;
 325    * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
 326    */
 327   min-width: 0;
 328   font-size: 90%;
 329 }
 330
 331 #heap-view > .heap-view-panel {
 332   /**
 333    * Flex: can contain several children, including a tree with a header and
 334    * multiple rows, all of which need to be laid out vertically. When the
 335    * tree is visible, the header has a fixed height and tree body needs to flex
 336    * to fill out all remaining vertical space.
 337    */
 338   display: flex;
 339   flex-direction: column;
 340   /**
 341    * Flexing to fill out remaining horizontal space. @see #heap-view.
 342    */
 343   flex: 1;
 344
 345   /**
 346    * By default, flex items have min-width: auto;
 347    * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
 348    */
 349   min-width: 0;
 350 }
 351
 352 #heap-view > .heap-view-panel > .snapshot-status,
 353 #heap-view > .heap-view-panel > .take-snapshot,
 354 #heap-view .empty,
 355 #shortest-paths-select-node-msg {
 356   margin: auto;
 357   margin-top: 65px;
 358   font-size: 120%;
 359 }
 360
 361 #heap-view > .heap-view-panel > .take-snapshot {
 362   padding: 5px;
 363 }
 364
 365 #heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre {
 366   background-color: var(--theme-body-background);
 367   margin: 20px;
 368   padding: 20px;
 369 }
 370
 371 /**
 372  * Heap tree view header
 373  */
 374
 375 .header {
 376   /**
 377    * Flex: contains several span columns, all of which need to be laid out
 378    * horizontally. All columns except the last one have percentage widths, and
 379    * the last one needs to flex to fill out all remaining horizontal space.
 380    */
 381   display: flex;
 382   color: var(--theme-body-color);
 383   background-color: var(--theme-tab-toolbar-background);
 384   border-bottom: 1px solid var(--cell-border-color);
 385   flex: 0;
 386 }
 387
 388 .header > span,
 389 #shortest-paths-header {
 390   text-overflow: ellipsis;
 391   line-height: var(--heap-tree-header-height);
 392   justify-content: center;
 393   justify-self: center;
 394   white-space: nowrap;
 395 }
 396
 397 .header > span {
 398   overflow: hidden;
 399 }
 400
 401 .header > .heap-tree-item-name {
 402   justify-content: flex-start;
 403 }
 404
 405 #shortest-paths {
 406   background-color: var(--theme-body-background);
 407   overflow: hidden;
 408   height: 100%;
 409   width: 100%;
 410 }
 411
 412 #shortest-paths-select-node-msg {
 413   justify-self: center;
 414 }
 415
 416 /**
 417  * Heap tree view body
 418  */
 419
 420 .tree {
 421   /**
 422    * Flexing to fill out remaining vertical space. @see .heap-view-panel
 423    */
 424   flex: 1;
 425   overflow-y: auto;
 426   background-color: var(--theme-body-background);
 427 }
 428
 429 .tree-node {
 430   height: var(--heap-tree-row-height);
 431   line-height: var(--heap-tree-row-height);
 432   cursor: default;
 433 }
 434
 435 .children-pointer {
 436   padding-inline-end: 5px;
 437 }
 438
 439 /**
 440  * Heap tree view columns
 441  */
 442
 443 .heap-tree-item {
 444   /**
 445    * Flex: contains several span columns, all of which need to be laid out
 446    * horizontally. All columns except the last one have percentage widths, and
 447    * the last one needs to flex to fill out all remaining horizontal space.
 448    */
 449   display: flex;
 450 }
 451
 452 .tree-node-odd {
 453   background-color: var(--row-alt-background-color);
 454 }
 455
 456 .tree-node:hover {
 457   background-color: var(--row-hover-background-color);
 458 }
 459
 460 .heap-tree-item.focused {
 461   background-color: var(--theme-selection-background);
 462   color: var(--theme-selection-color);
 463 }
 464
 465 .heap-tree-item.focused ::-moz-selection {
 466   background-color: var(--theme-selection-color);
 467   color: var(--theme-selection-background);
 468 }
 469
 470 .heap-tree-item-individuals,
 471 .heap-tree-item-bytes,
 472 .heap-tree-item-count,
 473 .heap-tree-item-total-bytes,
 474 .heap-tree-item-total-count {
 475   /**
 476    * Flex: contains several subcolumns, which need to be laid out horizontally.
 477    * These subcolumns may have specific widths or need to flex.
 478    */
 479   display: flex;
 480   text-align: end;
 481   border-inline-end: var(--cell-border-color) 1px solid;
 482 }
 483
 484 .heap-tree-item-count,
 485 .heap-tree-item-total-count,
 486 .heap-tree-item-bytes,
 487 .heap-tree-item-total-bytes {
 488   width: 10%;
 489   /*
 490    * Provision for up to 19 characters:
 491    *
 492    *     GG_MMM_KKK_BBB_100%
 493    *     |            |||  |
 494    *     '------------'|'--'
 495    *     14 ch for 10s | 4 ch for the largest % we will
 496    *     of GB and     | normally see: "100%"
 497    *     spaces every  |
 498    *     3 digits      |
 499    *                   |
 500    *             A space between the number and percent
 501    */
 502   min-width: 19ch;
 503 }
 504
 505 .heap-tree-item-name {
 506   /**
 507    * Flex: contains an .arrow and some text, which need to be laid out
 508    * horizontally, vertically aligned in the middle of the container.
 509    */
 510   display: flex;
 511   align-items: center;
 512   /**
 513    * Flexing to fill out remaining vertical space.
 514    * @see .header and .heap-tree-item */
 515   flex: 1;
 516   padding-inline-start: 5px;
 517 }
 518
 519 /**
 520  * Heap tree view subcolumns
 521  */
 522
 523 .heap-tree-number,
 524 .heap-tree-percent,
 525 .heap-tree-item-name {
 526   white-space: nowrap;
 527 }
 528
 529 .heap-tree-number {
 530   padding-inline-start: 3px;
 531 }
 532
 533 .heap-tree-percent {
 534   padding-inline-start: 3px;
 535   padding-inline-end: 3px;
 536 }
 537
 538 .heap-tree-number,
 539 .heap-tree-percent {
 540   font-family: var(--monospace-font-family);
 541 }
 542
 543 .heap-tree-number {
 544   flex: 1;
 545   color: var(--theme-content-color3);
 546 }
 547
 548 .heap-tree-percent {
 549   width: 4ch;
 550 }
 551
 552 .heap-tree-item.focused .heap-tree-number,
 553 .heap-tree-item.focused .heap-tree-percent {
 554   color: inherit;
 555 }
 556
 557 .heap-tree-item-individuals {
 558   width: 38px;
 559   min-width: 20px;
 560   overflow: hidden;
 561   margin: 0;
 562 }
 563
 564 .heap-tree-item-individuals > button {
 565   height: 10px;
 566   width: 32px;
 567
 568   /* Override default styles for toolbar buttons to fix entire row height. */
 569   margin: 0 auto !important;
 570   padding: 0;
 571 }
 572
 573 /**
 574  * Tree map
 575  */
 576
 577 .tree-map-container {
 578   width: 100%;
 579   height: 100%;
 580   position: relative;
 581   overflow: hidden;
 582 }
 583
 584 /**
 585  * Heap tree errors.
 586  */
 587
 588 .error::before {
 589   content: "";
 590   display: inline-block;
 591   width: 12px;
 592   height: 12px;
 593   max-height: 12px;
 594   background-image: url(chrome://devtools/skin/images/webconsole.svg);
 595   background-size: 72px 60px;
 596   background-position: -24px -24px;
 597   background-repeat: no-repeat;
 598   margin: 0px;
 599   margin-top: 2px;
 600   margin-inline-end: 5px;
 601 }
 602
 603 .theme-light .error::before {
 604   background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
 605 }
 606
 607 /**
 608  * Frame View components
 609  */
 610
 611 .separator,
 612 .not-available,
 613 .heap-tree-item-address {
 614   opacity: .5;
 615   margin-left: .5em;
 616   margin-right: .5em;
 617 }
 618
 619 .heap-tree-item-address {
 620   font-family: monospace;
 621 }
 622
 623 .no-allocation-stacks {
 624   border-color: var(--theme-splitter-color);
 625   border-style: solid;
 626   border-width: 0px 0px 1px 0px;
 627   text-align: center;
 628   padding: 5px;
 629 }
 630
 631 /**
 632  * Dagre-D3 graphs
 633  */
 634
 635 .edgePath path {
 636   stroke-width: 1px;
 637   fill: none;
 638 }
 639
 640 .theme-dark .edgePath path {
 641   stroke: var(--theme-body-color-alt);
 642 }
 643 .theme-light .edgePath path {
 644   stroke: var(--theme-splitter-color);
 645 }
 646
 647 g.edgeLabel rect {
 648   fill: var(--theme-body-background);
 649 }
 650 g.edgeLabel tspan {
 651   fill: var(--theme-body-color-alt);
 652 }
 653
 654 .nodes rect {
 655   stroke-width: 1px;
 656 }
 657
 658 .nodes rect {
 659   stroke: var(--theme-tab-toolbar-background);
 660 }
 661 .theme-light rect {
 662   fill: var(--theme-tab-toolbar-background);
 663 }
 664 .theme-dark rect {
 665   fill: var(--theme-toolbar-background);
 666 }
 667
 668 text {
 669   font-weight: 300;
 670   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 671   font-size: 14px;
 672 }
 673
 674 text {
 675   fill: var(--theme-body-color-alt);
 676 }
 677
 678
 679
 680 /* Hide the actual checkbox */
 681 input[type="checkbox"] {
 682   opacity: 0;
 683   width: 0;
 684   pointer-events: none;
 685   position: absolute;
 686 }
 687
 688 /* Create a box to style as the checkbox */
 689 input[type="checkbox"] + span::before {
 690   display: inline-block;
 691   content: "";
 692   vertical-align: -3px;
 693 }
 694
 695 input[type="checkbox"] + span {
 696   line-height: 0px;
 697 }
 698
 699 input[type="checkbox"] + span::before {
 700   -moz-appearance: none;
 701   width: 1em;
 702   height: 1em;
 703   border-radius: 0;
 704   border: 1px solid var(--theme-body-color);
 705   margin-inline-end: 10px;
 706   background-color: var(--theme-toolbar-background);
 707   background-position: center center;
 708   background-repeat: no-repeat;
 709 }
 710
 711 input[type="checkbox"]:not(:disabled) + span:hover::before {
 712   border-color: var(--theme-hover-background);
 713 }
 714 input[type="checkbox"]:not(:disabled) + span:hover {
 715   color: var(--theme-hover-background);
 716 }
 717 input[type="checkbox"]:checked + span::before {
 718   background-image: url("chrome://global/skin/in-content/check.svg#check");
 719 }
 720
 721 input[type="checkbox"]:checked:disabled + span::before {
 722   background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
 723 }
 724 input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
 725   background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
 726 }
 727 input[type="checkbox"]:disabled + span::before {
 728   border-color: var(--theme-body-color-inactive);
 729 }
 730 input[type="checkbox"]:disabled + span {
 731   color: var(--theme-body-color-inactive);
 732 }
 733
 734 select {
 735   border: 1px solid var(--theme-body-color);
 736   background-color: var(--theme-toolbar-background);
 737   color: var(--theme-body-color);
 738   background-image: url("chrome://global/skin/arrow/arrow-down.gif");
 739   background-repeat: no-repeat;
 740   background-position: calc(100% - 2px) center;
 741   border-radius: 3px;
 742   padding: 1px;
 743   margin: 1px;
 744   font: inherit;
 745 }
 746 select:hover {
 747   background-color: var(--theme-hover-background);
 748   color: var(--theme-hover-color);
 749   background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 750 }
 751 select:hover:active {
 752   background-color: var(--theme-active-background);
 753   color: var(--theme-active-color);
 754 }