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