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  padding-left: 54px;
38  display: grid;
39  grid-template-columns: 1fr;
40  grid-template-rows: min-content 1fr min-content;
41  width: 81%;
42  border-radius: 0 16px 16px 0;
43  margin-bottom: 30px;
44  margin-right: 30px;
45}
46.allocation-inner-font-style {
47  font-family: Helvetica,serif;
48  text-align: left;
49  line-height: 40px;
50  font-weight: 700;
51  margin-right: 10px;
52  opacity: 0.9;
53  font-size: 18px;
54}
55input {
56  width: 72%;
57  height: 25px;
58  border:0;
59  outline:none;
60  border-radius: 16px;
61  text-indent:2%
62}
63input::-webkit-input-placeholder{
64  color:var(--bark-prompt,#999999);
65}
66.allocation-select {
67  height: 30px;
68  outline: none;
69  border: 1px solid var(--dark-border,#B3B3B3);
70  width: 60px;
71  background-color:var(--dark-background5, #FFFFFF)
72  font-family: Helvetica;
73  font-size: 14px;
74  color: var(--dark-color,#212121)
75  text-align: center;
76  line-height: 16px;
77  font-weight: 400;
78  border-radius: 16px;
79}
80.allocation-application{
81  display: flex;
82  flex-direction: column;
83  grid-gap: 15px;
84  margin-top: 40px;
85  grid-column: 1 / 3;
86}
87.allocation-switchstyle{
88  margin-top: 40px;
89  width: 92%;
90}
91.allocation-inputstyle{
92  background: var(--dark-background5,#FFFFFF);
93  border: 1px solid var(--dark-background5,#ccc);
94  font-family: Helvetica;
95  font-size: 14px;
96  color: var(--dark-color1,#212121);
97  text-align: left;
98  line-height: 16px;
99  font-weight: 400;
100}
101
102input::-webkit-input-placeholder{
103  background: var(--dark-background5,#FFFFFF);
104}
105
106:host([startSamp]) .allocation-inputstyle {
107  background: var(--dark-background5,#FFFFFF);
108}
109
110:host(:not([startSamp])) .allocation-inputstyle {
111  color: #b7b7b7;
112  background: var(--dark-background1,#f5f5f5);
113}
114
115#one_mb{
116  background-color:var(--dark-background5, #FFFFFF)
117}
118#one_kb{
119  background-color:var(--dark-background5, #FFFFFF)
120}
121#two_mb{
122  background-color:var(--dark-background5, #FFFFFF)
123}
124#two_kb{
125  background-color:var(--dark-background5, #FFFFFF)
126}
127.processSelect, .packageSelect {
128  border-radius: 15px;
129  width: 92%;
130  height: 27px;
131}
132.value-range {
133  opacity: 0.6;
134  font-family: Helvetica;
135  line-height: 35px;
136  text-align: center;
137  font-weight: 400;
138  font-size: 14px;
139}
140.record-title{
141  margin-bottom: 16px;
142  grid-column: 1 / 3;
143  width: auto;
144}
145#interval-slider {
146  margin: 0 8px;
147  grid-column: 1 / 2;
148}
149.resultSize{
150  display: grid;
151  grid-template-rows: 1fr;
152  grid-template-columns: min-content min-content;
153  background-color: var(--dark-background5,#F2F2F2);
154  -webkit-appearance:none;
155  color: var(--dark-color,#6a6f77);
156  width: 150px;
157  height: 40px;
158  border-radius:20px;
159  outline:0;
160  border:1px solid var(--dark-border,#c8cccf);
161}
162.record-mode{
163  font-family: Helvetica,serif;
164  font-size: 18px;
165  color: var(--dark-color1,#000000);
166  line-height: 40px;
167  font-weight: 700;
168  margin-bottom: 16px;
169  grid-column: span 1;
170  text-align: left;
171  margin-right: 10px;
172  opacity: 0.9;
173}
174.record-mode-available {
175  opacity: 0.6;
176  font-family: Helvetica;
177  line-height: 35px;
178  text-align: left;
179  font-weight: 400;
180  font-size: 14px;
181}
182.allocation-record-prompt{
183  opacity: 0.6;
184  font-family: Helvetica;
185  font-size: 14px;
186  line-height: 35px;
187  font-weight: 400;
188  grid-column: 1 / 3;
189  text-align: left;
190  width: 50%;
191}
192.interval-result {
193  -webkit-appearance:none;
194  border: none;
195  text-align: center;
196  width: 90px;
197  font-size:14px;
198  outline:0;
199  margin: 5px 0 5px 5px;
200  background-color: var(--dark-background5,#F2F2F2);
201  color:var(--dark-color,#6a6f77);
202}
203
204.allocation-title {
205  opacity: 0.9;
206  font-family: Helvetica-Bold;
207  margin-right: 10px;
208  font-size: 18px;
209  text-align: center;
210  line-height: 40px;
211  font-weight: 700;
212}
213
214lit-switch {
215  display: inline;
216  float: right;
217}
218
219#addOptions {
220  border-radius: 15px;
221  border-color:rgb(0,0,0,0.1);
222  width: 150px;
223  height: 40px;
224  font-family: Helvetica;
225  font-size: 1em;
226  color: #FFFFFF;
227  text-align: center;
228  line-height: 20px;
229  font-weight: 400;
230  margin-right: 5%;
231  float: right;
232  grid-column: 2;
233  justify-self: end;
234}
235
236:host(:not([startSamp])) #addOptions {
237  background: #999999;
238  cursor: no-drop;
239}
240:host([startSamp]) #addOptions {
241  background: #3391FF;
242  cursor: default;
243}
244
245.divider {
246  position: absolute;
247  border-top: 1px dashed rgba(0, 0, 0, 0.5);
248  width: 80%;
249  opacity: 0.3;
250  align-self: center;
251}
252.advance-option-div {
253  display: none;
254  flex-direction: row;
255  grid-column: 1 / 3;
256  align-items: center;
257  width: 92%;
258}
259
260input:disabled {
261  cursor: no-drop;
262}
263
264</style>
265<div class="root">
266  <div class = "title" style="width: 92%;">
267    <span class="allocation-title">Start Native Memory Record</span>
268    <lit-switch id="switch-disabled"></lit-switch>
269  </div>
270  <!-- ProcessId or ProcessName(default) -->
271  <div class="allocation-application" style="grid-column: 1 / 3;">
272    <div>
273      <span class="allocation-inner-font-style">Process</span>
274      <span class="value-range">Record process id or process name</span>
275    </div>
276    <lit-select-v class="processSelect" rounded mode="multiple" default-value="" id="pid"
277    placement="bottom" title="process" placeholder="please select process">
278    </lit-select-v>
279    <lit-select default-value="" rounded="" class="packageSelect" canInsert="" id="packageName"
280    title="package" rounded placement = "bottom" placeholder="please select package" showSearchInput>
281    </lit-select>
282  </div>
283  <!-- Use Fp Unwind(default) -->
284  <div class="allocation-switchstyle" id="max_stack_depth_div" style="align-items: center;grid-column: 1 / 3;">
285    <span class="allocation-inner-font-style" id="fp-unwind">Use Fp Unwind</span>
286    <lit-switch class="lts" id="use_fp_unwind" title="fp unwind model" checked="true"></lit-switch>
287  </div>
288  <!-- Use Record Js Stack(default) -->
289  <div class="allocation-switchstyle" style="align-items: center;grid-column: 1 / 3;">
290    <span class="allocation-inner-font-style" id="record-js-stack">Use Record Js Stack</span>
291    <lit-switch class="lts" id="use_js-stack" title="js stack model"></lit-switch>
292  </div>
293  <!-- Use statistics slide(default) -->
294  <div class="allocation-switchstyle record-statistics-result version-controller"
295  style="grid-row: 5; grid-column: 1 / 3;height: min-content;display: grid;grid-template-rows: 2fr;
296  grid-template-columns: 1fr min-content;">
297    <div class="record-title">
298      <span class="record-mode">Use Record Statistics</span>
299      <span class="record-mode-available">(Available on recent OpenHarmony 4.0)</span>
300      <lit-switch class="lts" id="use_statistics" title="statistics model" checked="true"></lit-switch>
301    </div>
302    <span class="allocation-record-prompt"> Time between following interval (0 = disabled) </span>
303    <lit-slider id="interval-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
304    </lit-slider>
305    <div class='resultSize'>
306      <input class="interval-result inputBoxes" type="text" value='0'
307      onkeyup="this.value=this.value.replace(/\\D/g,'')"
308      oninput="if(this.value > 3600){this.value = '3600'} if(this.value > 0 &&
309      this.value.toString().startsWith('0')){ this.value = Number(this.value) }" >
310      <span style="text-align: center; margin: 8px"> S </span>
311    </div>
312  </div>
313  <!-- Advance Options(default) -->
314  <div style="position: relative; display: grid; grid-column: 1 / 3;margin-top: 30px">
315    <button id ="addOptions">Advance Options</button>
316    <div class="divider"></div>
317  </div>
318  <!-- Use Startup Mode(advance) -->
319   <div class="allocation-switchstyle version-controller advance-option-div" id="use-startup-el">
320    <span class="allocation-inner-font-style" id="startup_mode">Use Startup Mode</span>
321    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
322    <lit-switch class="lts" id="use_startup_mode" title="startup_mode"></lit-switch>
323  </div>
324  <!-- Use Response Lib Mode(advance) -->
325  <div class="allocation-switchstyle version-controller advance-option-div" id="use-response-lib-el">
326    <span class="allocation-inner-font-style" id="response_lib_mode_span">Use Response Lib Mode</span>
327    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
328    <lit-switch class="lts" id="response_lib_mode" title="response_lib_mode"></lit-switch>
329  </div>
330  <!-- record_accurately(advance) -->
331  <div class="allocation-switchstyle version-controller advance-option-div" id="record_accurately_div">
332    <span class="allocation-inner-font-style" id="record_accurately ">Use Record Accurately</span>
333    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
334    <lit-switch class="lts" id="use_record_accurately" title="record_accurately" checked="true"></lit-switch>
335  </div>
336  <!-- offline_symbolization(advance) -->
337  <div class="allocation-switchstyle version-controller advance-option-div" id="offline_symbolization_div">
338    <span class="allocation-inner-font-style" id="offline_symbolization">Use Offline Symbolization</span>
339    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
340    <lit-switch class="lts" id="use_offline_symbolization" title="offline_symbolization" checked="true"></lit-switch>
341  </div>
342  <!-- Max Sample Interval Rang(advance) -->
343  <div class="allocation-switchstyle version-controller advance-option-div" id="sample-interval-el" style="flex-wrap: wrap;">
344    <span class="allocation-inner-font-style" id="statistics-interval-name">Sample Interval</span>
345    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
346    <span class="value-range" style="margin-right: auto;" id="statistics-interval-range">Rang is 0 - 65535, default 0 byte</span>
347    <input id= "statistics-interval-input" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
348    placeholder="Enter the interval" value="0">
349  </div>
350  <!-- Shared Memory Size(advance) -->
351  <div class="allocation-application advance-option-div" id="shared-memory-size-el">
352    <span class="allocation-inner-font-style">Shared Memory Size</span>
353    <span class="value-range" style="margin-right: auto;">Range is 0 - 131072, default 16384 page (One page equals 4 KB)</span>
354    <input id = "shareMemory" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
355      placeholder="Enter the Shared Memory Size" 
356      oninput="if(this.value > 131072){this.value = '131072'} if(this.value > 0 &&
357      this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
358      onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384">
359  </div>
360  <!-- Max unwind level(advance) -->
361  <div class="allocation-application advance-option-div" id="max-unwind-level-el">
362    <span class="allocation-inner-font-style" >Max unwind level</span>
363    <span class="value-range" style="margin-right: auto;">Rang is 0 - 512, default 20</span>
364    <input id= "unwind" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
365    placeholder="Enter the Max Unwind Level" 
366    oninput="if(this.value > 512){this.value = '512'} if(this.value > 0 && 
367    this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
368    onkeyup="this.value=this.value.replace(/\\D/g,'')" value="20">
369  </div>
370  <!-- Max Js Stack Depth(advance) -->
371  <div id="js-stack-depth-div" class="allocation-application advance-option-div">
372    <span class="allocation-inner-font-style" >Max Js Stack Depth </span>
373    <span class="value-range" style="margin-right: auto;">Range 0 - 128, default 20 </span>
374    <input id = "jsStackDepth" class="allocation-inputstyle inputBoxes" style="width: auto;" type="text"
375       placeholder="0"
376       oninput="if(this.value > 128){this.value = '128'} if(this.value > 0 &&
377       this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
378       onkeyup="this.value=this.value.replace(/\\D/g,'')" value="20">
379  </div>
380  <!-- Filter Memory Size(advance) -->
381  <div class="allocation-application advance-option-div" id="filter-memory-size-el">
382    <span class="allocation-inner-font-style" >Filter Memory Size </span>
383    <span class="value-range" style="margin-right: auto;">Range is 0 - 65535, default 0 byte</span>
384    <input id = "filterSized" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
385       placeholder="Enter the Filter Memory Size"
386       oninput="if(this.value > 65535){this.value = '65535'} if(this.value > 0 &&
387       this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
388       onkeyup="this.value=this.value.replace(/\\D/g,'')" value="0">
389  </div>
390  <!-- Filter Napi Name(advance) -->
391  <div id="napi-div" class="allocation-application advance-option-div" style="margin-bottom: 40px;">
392    <span class="allocation-inner-font-style" >Filter Napi Name </span>
393    <span class="value-range" style="margin-right: auto;">napi name to filter</span>
394    <input id = "napiName" class="allocation-inputstyle inputBoxes" style="width: 50%;" type="text"
395       placeholder="enter the napi name" value="">
396  </div>
397</div>
398`;
399