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 .children-pointer:dir(rtl) {
 440   transform: scaleX(-1);
 441 }
 442
 443 /**
 444  * Heap tree view columns
 445  */
 446
 447 .heap-tree-item {
 448   /**
 449    * Flex: contains several span columns, all of which need to be laid out
 450    * horizontally. All columns except the last one have percentage widths, and
 451    * the last one needs to flex to fill out all remaining horizontal space.
 452    */
 453   display: flex;
 454 }
 455
 456 .tree-node-odd {
 457   background-color: var(--row-alt-background-color);
 458 }
 459
 460 .tree-node:hover {
 461   background-color: var(--row-hover-background-color);
 462 }
 463
 464 .heap-tree-item.focused {
 465   background-color: var(--theme-selection-background);
 466   color: var(--theme-selection-color);
 467 }
 468
 469 .heap-tree-item.focused ::-moz-selection {
 470   background-color: var(--theme-selection-color);
 471   color: var(--theme-selection-background);
 472 }
 473
 474 .heap-tree-item-individuals,
 475 .heap-tree-item-bytes,
 476 .heap-tree-item-count,
 477 .heap-tree-item-total-bytes,
 478 .heap-tree-item-total-count {
 479   /**
 480    * Flex: contains several subcolumns, which need to be laid out horizontally.
 481    * These subcolumns may have specific widths or need to flex.
 482    */
 483   display: flex;
 484   /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
 485   text-align: right;
 486   border-inline-end: var(--cell-border-color) 1px solid;
 487 }
 488
 489 .heap-tree-item-count,
 490 .heap-tree-item-total-count,
 491 .heap-tree-item-bytes,
 492 .heap-tree-item-total-bytes {
 493   width: 10%;
 494   /*
 495    * Provision for up to 19 characters:
 496    *
 497    *     GG_MMM_KKK_BBB_100%
 498    *     |            |||  |
 499    *     '------------'|'--'
 500    *     14 ch for 10s | 4 ch for the largest % we will
 501    *     of GB and     | normally see: "100%"
 502    *     spaces every  |
 503    *     3 digits      |
 504    *                   |
 505    *             A space between the number and percent
 506    */
 507   min-width: 19ch;
 508 }
 509
 510 .heap-tree-item-name {
 511   /**
 512    * Flex: contains an .arrow and some text, which need to be laid out
 513    * horizontally, vertically aligned in the middle of the container.
 514    */
 515   display: flex;
 516   align-items: center;
 517   /**
 518    * Flexing to fill out remaining vertical space.
 519    * @see .header and .heap-tree-item */
 520   flex: 1;
 521   padding-inline-start: 5px;
 522 }
 523
 524 /**
 525  * Heap tree view subcolumns
 526  */
 527
 528 .heap-tree-number,
 529 .heap-tree-percent,
 530 .heap-tree-item-name {
 531   white-space: nowrap;
 532 }
 533
 534 .heap-tree-number {
 535   padding: 0 3px;
 536   flex: 1;
 537   color: var(--theme-content-color3);
 538   /* Make sure number doesn't appear backwards on RTL locales */
 539   direction: ltr;
 540 }
 541
 542 .heap-tree-percent {
 543   padding-inline-start: 3px;
 544   padding-inline-end: 3px;
 545 }
 546
 547 .heap-tree-number,
 548 .heap-tree-percent {
 549   font-family: var(--monospace-font-family);
 550 }
 551
 552 .heap-tree-percent {
 553   width: 4ch;
 554 }
 555
 556 .heap-tree-item.focused .heap-tree-number,
 557 .heap-tree-item.focused .heap-tree-percent {
 558   color: inherit;
 559 }
 560
 561 .heap-tree-item-individuals {
 562   width: 38px;
 563   min-width: 20px;
 564   overflow: hidden;
 565   margin: 0;
 566 }
 567
 568 .heap-tree-item-individuals > button {
 569   height: 10px;
 570   width: 32px;
 571
 572   /* Override default styles for toolbar buttons to fix entire row height. */
 573   margin: 0 auto !important;
 574   padding: 0;
 575 }
 576
 577 /**
 578  * Tree map
 579  */
 580
 581 .tree-map-container {
 582   width: 100%;
 583   height: 100%;
 584   position: relative;
 585   overflow: hidden;
 586 }
 587
 588 /**
 589  * Heap tree errors.
 590  */
 591
 592 .error::before {
 593   content: "";
 594   display: inline-block;
 595   width: 12px;
 596   height: 12px;
 597   max-height: 12px;
 598   background-image: url(chrome://devtools/skin/images/webconsole.svg);
 599   background-size: 72px 60px;
 600   background-position: -24px -24px;
 601   background-repeat: no-repeat;
 602   margin: 0px;
 603   margin-top: 2px;
 604   margin-inline-end: 5px;
 605 }
 606
 607 .theme-light .error::before {
 608   background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
 609 }
 610
 611 /**
 612  * Frame View components
 613  */
 614
 615 .separator,
 616 .not-available,
 617 .heap-tree-item-address {
 618   opacity: .5;
 619   margin-left: .5em;
 620   margin-right: .5em;
 621 }
 622
 623 .heap-tree-item-address {
 624   font-family: monospace;
 625 }
 626
 627 .no-allocation-stacks {
 628   border-color: var(--theme-splitter-color);
 629   border-style: solid;
 630   border-width: 0px 0px 1px 0px;
 631   text-align: center;
 632   padding: 5px;
 633 }
 634
 635 /**
 636  * Dagre-D3 graphs
 637  */
 638
 639 .edgePath path {
 640   stroke-width: 1px;
 641   fill: none;
 642 }
 643
 644 .theme-dark .edgePath path {
 645   stroke: var(--theme-body-color-alt);
 646 }
 647 .theme-light .edgePath path {
 648   stroke: var(--theme-splitter-color);
 649 }
 650
 651 g.edgeLabel rect {
 652   fill: var(--theme-body-background);
 653 }
 654 g.edgeLabel tspan {
 655   fill: var(--theme-body-color-alt);
 656 }
 657
 658 .nodes rect {
 659   stroke-width: 1px;
 660 }
 661
 662 .nodes rect {
 663   stroke: var(--theme-tab-toolbar-background);
 664 }
 665 .theme-light rect {
 666   fill: var(--theme-tab-toolbar-background);
 667 }
 668 .theme-dark rect {
 669   fill: var(--theme-toolbar-background);
 670 }
 671
 672 text {
 673   font-weight: 300;
 674   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 675   font-size: 14px;
 676 }
 677
 678 text {
 679   fill: var(--theme-body-color-alt);
 680 }
 681
 682
 683
 684 /* Hide the actual checkbox */
 685 input[type="checkbox"] {
 686   opacity: 0;
 687   width: 0;
 688   pointer-events: none;
 689   position: absolute;
 690 }
 691
 692 /* Create a box to style as the checkbox */
 693 input[type="checkbox"] + span::before {
 694   display: inline-block;
 695   content: "";
 696   vertical-align: -3px;
 697 }
 698
 699 input[type="checkbox"] + span {
 700   line-height: 0px;
 701 }
 702
 703 input[type="checkbox"] + span::before {
 704   -moz-appearance: none;
 705   width: 1em;
 706   height: 1em;
 707   border-radius: 0;
 708   border: 1px solid var(--theme-body-color);
 709   margin-inline-end: 10px;
 710   background-color: var(--theme-toolbar-background);
 711   background-position: center center;
 712   background-repeat: no-repeat;
 713 }
 714
 715 input[type="checkbox"]:not(:disabled) + span:hover::before {
 716   border-color: var(--theme-hover-background);
 717 }
 718 input[type="checkbox"]:not(:disabled) + span:hover {
 719   color: var(--theme-hover-background);
 720 }
 721 input[type="checkbox"]:checked + span::before {
 722   background-image: url("chrome://global/skin/in-content/check.svg#check");
 723 }
 724
 725 input[type="checkbox"]:checked:disabled + span::before {
 726   background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
 727 }
 728 input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
 729   background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
 730 }
 731 input[type="checkbox"]:disabled + span::before {
 732   border-color: var(--theme-body-color-inactive);
 733 }
 734 input[type="checkbox"]:disabled + span {
 735   color: var(--theme-body-color-inactive);
 736 }
 737
 738 select {
 739   border: 1px solid var(--theme-body-color);
 740   background-color: var(--theme-toolbar-background);
 741   color: var(--theme-body-color);
 742   background-image: url("chrome://global/skin/arrow/arrow-down.gif");
 743   background-repeat: no-repeat;
 744   background-position: calc(100% - 2px) center;
 745   border-radius: 3px;
 746   padding: 1px;
 747   margin: 1px;
 748   font: inherit;
 749 }
 750 select:hover {
 751   background-color: var(--theme-hover-background);
 752   color: var(--theme-hover-color);
 753   background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 754 }
 755 select:hover:active {
 756   background-color: var(--theme-active-background);
 757   color: var(--theme-active-color);
 758 }