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 SpAllocationHtml = ` 17<style> 18:host{ 19 display: block; 20 width: 100%; 21 border-radius: 0 16px 16px 0; 22 height: 100%; 23} 24.title { 25 grid-column: span 2 / auto; 26 margin-top: 5vh; 27} 28.allocation-font-style{ 29 font-family: Helvetica-Bold; 30 font-size: 1em; 31 color: var(--dark-color1,#000000); 32 line-height: 28px; 33 font-weight: 700; 34} 35.root { 36 padding-top: 30px; 37 margin-left: 40px; 38 display: grid; 39 grid-template-columns: repeat(2, 1fr); 40 grid-template-rows: min-content 1fr min-content; 41 width: 90%; 42 border-radius: 0 16px 16px 0; 43 margin-bottom: 30px; 44} 45.allocation-inner-font-style { 46 font-family: Helvetica,serif; 47 font-size: 1em; 48 color: var(--dark-color1,#000000); 49 text-align: left; 50 line-height: 20px; 51 font-weight: 400; 52 display:flex; 53 width:75%; 54 margin-top: 3px; 55 56} 57input { 58 width: 72%; 59 height: 25px; 60 border:0; 61 outline:none; 62 border-radius: 16px; 63 text-indent:2% 64} 65input::-webkit-input-placeholder{ 66 color:var(--bark-prompt,#999999); 67} 68.allocation-select { 69 height: 30px; 70 border: 0; 71 border-radius: 3px; 72 outline: none; 73 border: 1px solid var(--dark-border,#B3B3B3); 74 width: 60px; 75 background-color:var(--dark-background5, #FFFFFF) 76 font-family: Helvetica; 77 font-size: 14px; 78 color: var(--dark-color,#212121) 79 text-align: center; 80 line-height: 16px; 81 font-weight: 400; 82 border-radius: 16px; 83} 84.allocation-application{ 85 display: flex; 86 flex-direction: column; 87 grid-gap: 15px; 88 margin-top: 40px; 89} 90.allocation-switchstyle{ 91 margin-top: 40px; 92 display: flex; 93} 94.allocation-inputstyle{ 95 background: var(--dark-background5,#FFFFFF); 96 border: 1px solid var(--dark-background5,#ccc); 97 font-family: Helvetica; 98 font-size: 14px; 99 color: var(--dark-color1,#212121); 100 text-align: left; 101 line-height: 16px; 102 font-weight: 400; 103} 104 105input::-webkit-input-placeholder{ 106 background: var(--dark-background5,#FFFFFF); 107} 108 109:host([startSamp]) .allocation-inputstyle { 110 background: var(--dark-background5,#FFFFFF); 111} 112 113:host(:not([startSamp])) .allocation-inputstyle { 114 color: #b7b7b7; 115 background: var(--dark-background1,#f5f5f5); 116} 117 118#one_mb{ 119 background-color:var(--dark-background5, #FFFFFF) 120} 121#one_kb{ 122 background-color:var(--dark-background5, #FFFFFF) 123} 124#two_mb{ 125 background-color:var(--dark-background5, #FFFFFF) 126} 127#two_kb{ 128 background-color:var(--dark-background5, #FFFFFF) 129} 130.processSelect { 131 border-radius: 15px; 132 width: 84%; 133} 134.value-range { 135 opacity: 0.6; 136 font-family: Helvetica; 137 font-size: 1em; 138 color: var(--dark-color,#000000); 139 text-align: left; 140 line-height: 20px; 141 font-weight: 400; 142} 143.record-title{ 144 margin-bottom: 16px; 145 grid-column: span 3; 146} 147#interval-slider { 148 margin: 0 8px; 149 grid-column: span 2; 150} 151.resultSize{ 152 display: grid; 153 grid-template-rows: 1fr; 154 grid-template-columns: min-content min-content; 155 background-color: var(--dark-background5,#F2F2F2); 156 -webkit-appearance:none; 157 color: var(--dark-color,#6a6f77); 158 width: 150px; 159 margin: 0 30px 0 0; 160 height: 40px; 161 border-radius:20px; 162 outline:0; 163 border:1px solid var(--dark-border,#c8cccf); 164} 165.record-mode{ 166 font-family: Helvetica-Bold; 167 font-size: 1em; 168 color: var(--dark-color1,#000000); 169 line-height: 28px; 170 font-weight: 400; 171 margin-bottom: 16px; 172 grid-column: span 1; 173} 174.allocation-record-prompt{ 175 opacity: 0.6; 176 font-family: Helvetica; 177 font-size: 14px; 178 text-align: center; 179 line-height: 35px; 180 font-weight: 400; 181} 182.interval-result{ 183 -webkit-appearance:none; 184 border: none; 185 text-align: center; 186 width: 90px; 187 font-size:14px; 188 outline:0; 189 margin: 5px 0 5px 5px; 190 background-color: var(--dark-background5,#F2F2F2); 191 color:var(--dark-color,#6a6f77); 192} 193 194.allocation-title { 195 opacity: 0.9; 196 font-family: Helvetica-Bold; 197 margin-right: 10px; 198 font-size: 18px; 199 text-align: center; 200 line-height: 40px; 201 font-weight: 700; 202} 203 204lit-switch { 205 height: 38px; 206 margin-top: 10px; 207 display: inline; 208 float: right; 209} 210 211</style> 212<div class="root"> 213 <div class = "title" style="width: 92%;"> 214 <span class="allocation-title">Start Native Memory Record</span> 215 <lit-switch id="switch-disabled"></lit-switch> 216 </div> 217 <div class="allocation-application"> 218 <span class="allocation-inner-font-style">ProcessId or ProcessName</span> 219 <span class="value-range">Record process</span> 220 <lit-select-v class="processSelect" rounded mode="multiple" default-value="" id="pid" 221 placement="bottom" title="process" placeholder="please select process"> 222 </lit-select-v> 223 </div> 224 <div class="allocation-application"> 225 <span class="allocation-inner-font-style" >Max unwind level</span> 226 <span class="value-range">Max Unwind Level Rang is 0 - 512, default 10</span> 227 <input id= "unwind" class="allocation-inputstyle inputBoxes" type="text" 228 placeholder="Enter the Max Unwind Level" 229 oninput="if(this.value > 512){this.value = '512'} if(this.value > 0 && 230 this.value.toString().startsWith('0')){ this.value = Number(this.value) }" 231 onkeyup="this.value=this.value.replace(/\\D/g,'')" value="10"> 232 </div> 233 <div class="allocation-application"> 234 <span class="allocation-inner-font-style">Shared Memory Size (One page equals 4 KB)</span> 235 <span class="value-range">Shared Memory Size Range is 0 - 131072 page, default 16384 page</span> 236 <div> 237 <input id = "shareMemory" class="allocation-inputstyle inputBoxes" type="text" 238 placeholder="Enter the Shared Memory Size" 239 oninput="if(this.value > 131072){this.value = '131072'} if(this.value > 0 && 240 this.value.toString().startsWith('0')){ this.value = Number(this.value) }" 241 onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384"> 242 <span>Page</span> 243 </div> 244 </div> 245 <div class="allocation-application"> 246 <span class="allocation-inner-font-style" >Filter Memory Size </span> 247 <span class="value-range">Filter size Range is 0 - 65535 byte, default 0 byte</span> 248 <div> 249 <input id = "filterSized" class="allocation-inputstyle inputBoxes" type="text" 250 placeholder="Enter the Filter Memory Size" 251 oninput="if(this.value > 65535){this.value = '65535'} if(this.value > 0 && 252 this.value.toString().startsWith('0')){ this.value = Number(this.value) }" 253 onkeyup="this.value=this.value.replace(/\\D/g,'')" value="0"> 254 <span>Byte</span> 255 </div> 256 </div> 257 <div class="allocation-switchstyle"> 258 <span class="allocation-inner-font-style" id="fp-unwind">Use Fp Unwind</span> 259 <lit-switch class="lts" id="use_fp_unwind" title="fp unwind" checked="true"></lit-switch> 260 </div> 261 <div class="allocation-switchstyle version-controller" style="flex-wrap: wrap;grid-gap: 15px;"> 262 <span class="allocation-inner-font-style" >Sample Interval (Available on recent OpenHarmony 4.0)</span> 263 <span class="value-range">Max Sample Interval Rang is 0 - 65535, default 0</span> 264 <input id= "sample-interval-input" class="allocation-inputstyle inputBoxes" type="text" 265 placeholder="Enter the sample interval" 266 oninput="if(this.value > 65535){this.value = '65535'} if(this.value < 0 && 267 this.value.toString().startsWith('0')){ this.value = '1'}" 268 onkeyup="this.value=this.value.replace(/\\D/g,'')" value="0"> 269 </div> 270 <div class="allocation-switchstyle version-controller"> 271 <span class="allocation-inner-font-style" id="record_accurately "> 272 Use Record Accurately (Available on recent OpenHarmony 4.0)</span> 273 <lit-switch class="lts" id="use_record_accurately" title="record_accurately" checked="true"></lit-switch> 274 </div> 275 <div class="allocation-switchstyle version-controller"> 276 <span class="allocation-inner-font-style" id="offline_symbolization"> 277 Use Offline Symbolization (Available on recent OpenHarmony 4.0)</span> 278 <lit-switch class="lts" id="use_offline_symbolization" title="offline_symbolization" checked="true"></lit-switch> 279 </div> 280 <div class="allocation-switchstyle version-controller"> 281 <span class="allocation-inner-font-style" id="startup_mode"> 282 Use Startup Mode (Available on recent OpenHarmony 4.0)</span> 283 <lit-switch class="lts" id="use_startup_mode" title="startup_mode"></lit-switch> 284 </div> 285 <div class="allocation-switchstyle version-controller"> 286 <span class="allocation-inner-font-style" id="response_lib_mode_span"> 287 Use Response Lib Mode (Available on recent OpenHarmony 4.0)</span> 288 <lit-switch class="lts" id="response_lib_mode" title="response_lib_mode"></lit-switch> 289 </div> 290 <div class="allocation-switchstyle record-statistics-result version-controller" 291 style="grid-row: 8; grid-column: 1 / 3;height: min-content;display: grid;grid-template-rows: 1fr; 292 grid-template-columns: 1fr min-content;"> 293 <div class="record-title"> 294 <span class="record-mode">Use Record Statistics (Available on recent OpenHarmony 4.0)</span> 295 <span class="allocation-record-prompt"> Time between following interval (0 = disabled) </span> 296 </div> 297 <lit-slider id="interval-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right"> 298 </lit-slider> 299 <div class='resultSize'> 300 <input class="interval-result inputBoxes" type="text" value='0' 301 onkeyup="this.value=this.value.replace(/\\D/g,'')" 302 oninput="if(this.value > 3600){this.value = '3600'} if(this.value > 0 && 303 this.value.toString().startsWith('0')){ this.value = Number(this.value) }" > 304 <span style="text-align: center; margin: 8px"> S </span> 305 </div> 306 </div> 307</div> 308`; 309