details-selection-template.html 2.86 KB
Newer Older
1 2 3 4
<!-- Copyright 2018 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<style>
5 6 7 8
#dataSelectionSection {
  display: none;
}

9 10 11 12 13 14
.box {
  border-left: dashed 1px #666666;
  border-right: dashed 1px #666666;
  border-bottom: dashed 1px #666666;
  padding: 10px;
  overflow: hidden;
15
  position: relative;
16 17 18 19 20 21 22 23 24 25 26
}

.box:nth-of-type(1) {
  border-top: dashed 1px #666666;
  border-radius: 5px 5px 0px 0px;
}

.box:last-of-type {
    border-radius: 0px 0px 5px 5px;
}

27 28 29 30 31 32 33 34 35 36 37 38 39 40
.box > ul {
  margin: 0px;
  padding: 0px;
}

.box > ul > li {
  display: inline-block;
}

.box > ul > li:not(:first-child) {
  margin-left: 10px;
}

.box > ul > li:first-child {
41 42 43
  font-weight: bold;
}

44 45 46
.instanceTypeSelectBox {
  position: relative;
  overflow: hidden;
47
  float: left;
48
  padding: 0px 5px 2px 0px;
49
  margin: 3px;
50
  border-radius: 3px;
51 52
}

53 54
.instanceTypeSelectBox > label {
  font-size: xx-small;
55
}
56 57 58

.instanceTypeSelectBox > input {
  vertical-align: middle;
59
}
60 61 62 63 64 65 66 67 68

.percentBackground {
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0%;
  top: 0px;
  margin-left: -100%;
  transition: all 1s ease-in-out;
69 70
}

71 72 73 74 75 76 77
.instanceTypeSelectBox > .percentBackground  {
  background: linear-gradient(90deg, #68b0f7 50%, #b3d9ff 50%);
  z-index: -1;
}
.box > .percentBackground  {
  background: linear-gradient(90deg, #e0edfe 50%, #fff 50%);
  z-index: -2;
78 79 80 81 82
}

#categories {
  margin-top: 10px;
}
83 84 85 86 87 88

#category-filter {
  text-align: right;
  width: 50px;
}

89 90 91 92 93 94 95 96 97 98 99
.categorySelectionButtons {
  float: right;
}
.categoryLabels {
  float: left;
  min-wdith: 200px;
}
.categoryContent {
  clear: both;
}

100
</style>
101 102 103 104 105 106 107 108 109 110 111 112
<section id="dataSelectionSection">
  <h2>Data selection</h2>
  <ul>
    <li>
      <label for="isolate-select">
        Isolate
      </label>
      <select id="isolate-select">
        <option>No data</option>
      </select>
    </li>
    <li>
113 114
      <label for="data-view-select">
        Data view
115
      </label>
116
      <select id="data-view-select">
117 118 119 120
        <option>No data</option>
      </select>
    </li>
    <li>
121 122
      <label for="dataset-select">
        Data set
123
      </label>
124 125 126
      <select id="dataset-select">
        <option>No data</option>
      </select>
127 128 129 130 131 132 133 134 135 136 137
    </li>
    <li>
      <label for="gc-select">
        Garbage collection (at a specific time in ms)
      </label>
      <select id="gc-select">
        <option>No data</option>
      </select>
    </li>
    <li>
      <input id="category-filter" type="text" value="0" disabled="disabled" />KB
138 139 140 141 142 143
      <button id="category-filter-btn" disabled="disabled">
        Filter categories with less memory
      </button>
      <button id="category-auto-filter-btn" disabled="disabled">
        Show top 20 categories only
      </button>
144 145 146 147 148
    </li>
    <li>
      <button id="csv-export-btn" disabled="disabled">Export selection as CSV</button>
    </li>
  </ul>
149

150 151
  <div id="categories"></div>
</section>