Home | History | Annotate | Download | only in heap-stats 
      1 <!-- Copyright 2018 the V8 project authors. All rights reserved.
      2 Use of this source code is governed by a BSD-style license that can be
      3 found in the LICENSE file. -->
      4 <template id="details-selection-template">
      5 <style>
      6 #dataSelectionSection {
      7   display: none;
      8 }
      9 
     10 .box {
     11   border-left: dashed 1px #666666;
     12   border-right: dashed 1px #666666;
     13   border-bottom: dashed 1px #666666;
     14   padding: 10px;
     15   overflow: hidden;
     16   position: relative;
     17 }
     18 
     19 .box:nth-of-type(1) {
     20   border-top: dashed 1px #666666;
     21   border-radius: 5px 5px 0px 0px;
     22 }
     23 
     24 .box:last-of-type {
     25     border-radius: 0px 0px 5px 5px;
     26 }
     27 
     28 .box > ul {
     29   margin: 0px;
     30   padding: 0px;
     31 }
     32 
     33 .box > ul > li {
     34   display: inline-block;
     35 }
     36 
     37 .box > ul > li:not(:first-child) {
     38   margin-left: 10px;
     39 }
     40 
     41 .box > ul > li:first-child {
     42   font-weight: bold;
     43 }
     44 
     45 .instanceTypeSelectBox {
     46   position: relative;
     47   overflow: hidden;
     48   float: left;
     49   padding: 0px 5px 2px 0px;
     50   margin: 3px;
     51   border-radius: 3px;
     52 }
     53 
     54 .instanceTypeSelectBox > label {
     55   font-size: xx-small;
     56 }
     57 
     58 .instanceTypeSelectBox > input {
     59   vertical-align: middle;
     60 }
     61 
     62 .percentBackground {
     63   position: absolute;
     64   width: 200%;
     65   height: 100%;
     66   left: 0%;
     67   top: 0px;
     68   margin-left: -100%;
     69   transition: all 1s ease-in-out;
     70 }
     71 
     72 .instanceTypeSelectBox > .percentBackground  {
     73   background: linear-gradient(90deg, #68b0f7 50%, #b3d9ff 50%);
     74   z-index: -1;
     75 }
     76 .box > .percentBackground  {
     77   background: linear-gradient(90deg, #e0edfe 50%, #fff 50%);
     78   z-index: -2;
     79 }
     80 
     81 #categories {
     82   margin-top: 10px;
     83 }
     84 
     85 #category-filter {
     86   text-align: right;
     87   width: 50px;
     88 }
     89 
     90 </style>
     91 <section id="dataSelectionSection">
     92   <h2>Data selection</h2>
     93   <ul>
     94     <li>
     95       <label for="isolate-select">
     96         Isolate
     97       </label>
     98       <select id="isolate-select">
     99         <option>No data</option>
    100       </select>
    101     </li>
    102     <li>
    103       <label for="data-view-select">
    104         Data view
    105       </label>
    106       <select id="data-view-select">
    107         <option>No data</option>
    108       </select>
    109     </li>
    110     <li>
    111       <label for="dataset-select">
    112         Data set
    113       </label>
    114       <select id="dataset-select">
    115         <option>No data</option>
    116       </select>
    117     </li>
    118     <li>
    119       <label for="gc-select">
    120         Garbage collection (at a specific time in ms)
    121       </label>
    122       <select id="gc-select">
    123         <option>No data</option>
    124       </select>
    125     </li>
    126     <li>
    127       <input id="category-filter" type="text" value="0" disabled="disabled" />KB
    128       <button id="category-filter-btn" disabled="disabled">
    129         Filter categories with less memory
    130       </button>
    131       <button id="category-auto-filter-btn" disabled="disabled">
    132         Show top 20 categories only
    133       </button>
    134     </li>
    135     <li>
    136       <button id="csv-export-btn" disabled="disabled">Export selection as CSV</button>
    137     </li>
    138   </ul>
    139 
    140   <div id="categories"></div>
    141 </section>
    142 </template>
    143 
    144 <script type="text/javascript" src="categories.js"></script>
    145 <script type="text/javascript" src="details-selection.js"></script>
    146