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