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 SpProbesConfigHtml = `
17<style>
18.recordText {
19   font-family: Helvetica-Bold;
20   font-size: 1em;
21   color: var(--dark-color1,#000000);
22   line-height: 28px;
23   font-weight: 700;
24   margin-bottom: 20px;
25}
26
27:host{
28    display: inline-block;
29    background: var(--dark-background3,#FFFFFF);
30    width: 100%;
31    height: 100%;
32    border-radius: 0px 16px 16px 0px;
33}
34
35.root {
36    margin-right: 30px;
37    padding-top: 30px;
38    padding-left: 54px;
39    margin-bottom: 30px;
40    font-size:16px;
41}
42
43.config-page {
44    height: 95%;
45    font-size: 0.875em;
46}
47
48.trace-config{
49   display: flex;
50   flex-direction: column;
51   width: 50%;
52   gap: 10px;
53   margin-bottom: 20px;
54}
55
56.memory-config{
57   display: grid;
58   grid-template-columns: repeat(2, 1fr);
59   border-style: solid none none none;
60   border-color: #D5D5D5;
61   padding-top: 15px;
62   margin-top: 15px;
63   gap: 10px;
64}
65
66.ability-config{
67   display: grid;
68   grid-template-columns: repeat(2, 1fr);
69   border-style: solid none none none;
70   border-color: #D5D5D5;
71   padding-top: 15px;
72   margin-top: 15px;
73   gap: 10px;
74}
75
76.span-col-2{
77   grid-column: span 2 / auto;
78}
79
80.log-config{
81   display: grid;
82   grid-template-columns: repeat(2, 1fr);
83   border-style: solid none none none;
84   border-color: #D5D5D5;
85   padding-top: 15px;
86   gap: 10px;
87}
88
89#hitrace-cat{
90   display: grid;
91   grid-template-columns: 1fr 1fr;
92}
93.user-events{
94   display: grid;
95   grid-template-columns: repeat(4, 1fr);
96   grid-template-rows: repeat(2, 1fr);
97   gap: 10px;
98   margin-left: 15px;;
99}
100#ftrace-buff-size-div {
101    width: 100%;
102    height: min-content;
103    display: grid;
104    grid-template-columns: 1fr min-content;
105}
106.buffer-size-des {
107    opacity: 0.6;
108    font-family: Helvetica;
109    font-size: 1em;
110    color: var(--dark-color,#000000);
111    text-align: left;
112    line-height: 20px;
113    font-weight: 400;
114}
115.ftrace-buff-size-result-div{
116    display: grid;
117    grid-template-rows: 1fr;
118    grid-template-columns:  min-content min-content;
119    background-color: var(--dark-background5,#F2F2F2);
120    -webkit-appearance:none;
121    color:var(--dark-color,#6a6f77);
122    width: 150px;
123    margin: 0 20px 0 0;
124    height: 40px;
125    border-radius:20px;
126    outline:0;
127    border:1px solid var(--dark-border,#c8cccf);
128}
129.ftrace-buff-size-result{
130    background-color: var(--dark-background5,#F2F2F2);
131    -webkit-appearance:none;
132    color:var(--dark-color,#6a6f77);
133    border: none;
134    text-align: center;
135    width: 90px;
136    font-size:14px;
137    outline:0;
138    margin: 5px 0 5px 5px;
139}
140.border-red {
141   border:1px solid red;
142}
143lit-switch {
144  height: 38px;
145  margin-top: 10px;
146  display:inline;
147  float: right;
148}
149</style>
150<div class="root">
151    <div class="recordText" >
152        <span class="record-title">Record mode</span>
153        <lit-switch checked="true"></lit-switch>
154        </div>
155    <div class="config-page">
156        <div>
157            <div class="trace-config"></div>
158            <div class="span-col-2" id="hitrace-cat">
159              <check-des-box id="hitrace" checked="true" value ="Hitrace categories" 
160              des="Enables C++ codebase annotations (HTRACE_BEGIN() / os.Trace())">
161              </check-des-box>
162              <div class="user-events">
163                  <slot></slot>
164              </div>
165            </div>
166            <div>
167               <div>
168                  <p>Buffer Size</p>
169                  <p class="buffer-size-des">The ftrace buffer size range is 2048 KB to 307200 KB</p>
170               </div>
171               <div id="ftrace-buff-size-div">
172                  <lit-slider id="ftrace-buff-size-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
173                  </lit-slider>
174                  <div class='ftrace-buff-size-result-div' >
175                      <input class="ftrace-buff-size-result" type="text" value='20480' 
176                      oninput="if(this.value > 307200){this.value = '307200'} if(this.value > 0 && 
177                      this.value.toString().startsWith('0')){ this.value = Number(this.value) }" 
178                      onkeyup="this.value=this.value.replace(/\\D/g,'')">
179                      <span style="text-align: center; margin: 8px"> KB </span>
180                   </div>
181               </div>
182            </div>
183        </div>
184        <div class="memory-config">
185            <div class="span-col-2">
186              <span>Memory Config</span>
187            </div>
188        </div>
189        <div class="ability-config">
190            <div class="span-col-2">
191              <span>Ability Config</span>
192            </div>
193        </div>
194    </div>
195</div>
196`;
197