1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16export const SpRecordSettingHtml = ` 17<style> 18.root { 19 padding-top: 45px; 20 padding-left: 41px; 21 background: var(--dark-background3,#FFFFFF); 22 font-size:16px; 23 border-radius: 0 16px 16px 0; 24 overflow-y: auto; 25 display: grid; 26 grid-template-columns: repeat(1, 1fr); 27 grid-template-rows: min-content min-content min-content; 28 grid-gap: 50px; 29} 30:host{ 31 display: block; 32 border-radius: 0 16px 16px 0; 33 background: background: var(--dark-background3,#FFFFFF); 34 position: relative; 35 width: 100%; 36 height: 100%; 37} 38#longTraceRadio{ 39 display: none; 40} 41:host([trace_config]) #longTraceRadio{ 42 display: block; 43} 44.record-mode{ 45 font-family: Helvetica-Bold; 46 font-size: 16px; 47 color: var(--dark-color1,#000000); 48 line-height: 28px; 49 font-weight: 700; 50 margin-bottom: 16px; 51 grid-column: span 1; 52} 53.record{ 54 display:flex; 55 flex-direction: column; 56} 57 58.output{ 59 display:grid; 60} 61 62.trace_file_span { 63 width: 20%; 64 height: 1em; 65 margin: 0; 66} 67 68#trace_path { 69 background-color: var(--dark-background5,#FFFFFF) 70 font-family: Helvetica-Bold; 71 color: var(--dark-color1,#8f8c8c); 72 margin: 0; 73 width: 25%; 74 height: 25px; 75 border-radius: 8px; 76 outline: none; 77 border: 1px solid #ccc; 78} 79.buffer-size{ 80 height: min-content; 81 display: grid; 82 grid-template-rows: 1fr; 83 grid-template-columns: 1fr min-content; 84} 85 86.max-duration, .max-single-file-size{ 87 height: min-content; 88 display: grid; 89 grid-template-rows: 1fr 1fr; 90 grid-template-columns: 1fr 1fr min-content; 91} 92 93#litradio{ 94 opacity: 0.9; 95 font-family: Helvetica; 96 font-size: 14px; 97 color: var(--dark-color1,#000000); 98 text-align: left; 99 line-height: 16px; 100 font-weight: 400; 101 margin-right: 20px; 102} 103 104button{ 105 height: 25px; 106 width: 100%; 107 border: 0; 108 text-align: left; 109 padding-left: 20px; 110 margin-top: 10px; 111 background-color: #E4E3E9; 112} 113 114.line{ 115 width: 100%; 116 height: 1px; 117 overflow: hidden; 118 border-top: 1px solid #C5C7CF; 119 background: #E4E3E9; 120 margin-top: 4px; 121 display: inline-block; 122 vertical-align: middle; 123} 124 125.max_duration_result, .memory_buffer_result, .max_size_result{ 126 background-color: var(--dark-background5,#F2F2F2); 127 color:var(--dark-color,#6a6f77); 128 border: none; 129 -webkit-appearance:none; 130 outline:0; 131 font-size:14px; 132 text-align: center; 133 width: 90px; 134 margin: 5px 0 5px 5px; 135} 136 137.resultValue, .resultSize{ 138 -webkit-appearance:none; 139 color:var(--dark-color,#6a6f77); 140 border-radius:20px; 141 margin: 0 30px 0 0; 142 background-color: var(--dark-background5,#F2F2F2); 143 display: grid; 144 grid-template-rows: 1fr; 145 grid-template-columns: min-content min-content; 146 width: 150px; 147 height: 40px; 148 outline:0; 149 border:1px solid var(--dark-border,#c8cccf); 150} 151 152#memory-buffer, #max-duration, #max-size { 153 margin: 0 8px; 154 grid-column: span 2; 155} 156 157.record-title{ 158 margin-bottom: 16px; 159 grid-column: span 3; 160} 161 162.record-prompt{ 163 opacity: 0.6; 164 font-family: Helvetica; 165 font-size: 14px; 166 text-align: center; 167 line-height: 35px; 168 font-weight: 400; 169} 170 171</style> 172<div class="root"> 173 <div class="record"> 174 <span class="record-mode">Record mode</span> 175 <div style="display: flex;"> 176 <lit-radio name="radio" dis="round" id="litradio" checked>Normal Mode</lit-radio> 177 <lit-radio name="radio" dis="round" id="longTraceRadio">Long Trace Mode</lit-radio> 178 </div> 179 </div> 180 <div class="output"> 181 <span class="record-mode">output file path</span> 182 <div> 183 <span class="trace_file_span">/data/local/tmp/</span> 184 <input id="trace_path" type="text" value='hiprofiler_data.htrace' 185 onkeydown="this.value.length >= 100 ? this.value = this.value.substring(0,99): 0" 186 oninput="this.value= this.value.replace('__','_')" 187 onkeyup="this.value=this.value.replace(/[^\\w\\.]/g,'')"> 188 </div> 189 </div> 190 <div class="buffer-size"> 191 <div class="record-title"> 192 <span class="record-mode">In-memory buffer size</span> 193 <span class="record-prompt"> (max memory buffer size is 512 MB) </span> 194 </div> 195 <lit-slider id="memory-buffer" defaultColor="var(--dark-color3,#46B1E3)" open dir="right"> 196 </lit-slider> 197 <div class='resultSize'> 198 <input class="memory_buffer_result" type="text" value='64' 199 onkeyup="this.value=this.value.replace(/\\D/g,'')" 200 oninput="if(this.value > 512){this.value = '512'} if(this.value > 0 && 201 this.value.toString().startsWith('0')){ this.value = Number(this.value) }" > 202 <span style="text-align: center; margin: 8px"> MB </span> 203 </div> 204 </div> 205 <div class="max-duration"> 206 <div class="record-title"> 207 <span class="record-mode" >Max duration</span> 208 <span class="record-prompt"> (max duration value is 01:00:00) </span> 209 </div> 210 <lit-slider id="max-duration" defaultColor="var(--dark-color4,#61CFBE)" open dir="right"> 211 </lit-slider> 212 <div class='resultValue'> 213 <input class="max_duration_result" type="text" value = '00:00:30' > 214 <span style="text-align: center; margin: 8px 8px 8px 0"> h:m:s </span> 215 </div> 216 217 </div> 218</div> 219`; 220