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 SpArkTsHtml = `<style> 17:host{ 18 display: inline-block; 19 width: 100%; 20 height: 100%; 21 background: var(--dark-background3,#FFFFFF); 22 border-radius: 0px 16px 16px 0px; 23} 24.root { 25 padding-top: 30px; 26 padding-left: 54px; 27 margin-right: 30px; 28 font-size:16px; 29 margin-bottom: 30px; 30} 31.config-div { 32 width: 80%; 33 display: flex; 34 flex-direction: column; 35 margin-top: 5vh; 36 margin-bottom: 5vh; 37 gap: 25px; 38} 39.title { 40 opacity: 0.9; 41 font-family: Helvetica-Bold; 42 font-size: 18px; 43 text-align: center; 44 line-height: 40px; 45 font-weight: 700; 46 margin-right: 10px; 47} 48.config-title{ 49 margin-left: 20px; 50 font-weight: 700; 51 line-height: 48px; 52} 53.memory { 54 margin-left: 40px; 55} 56.des { 57 color: #242424; 58 font-family: Helvetica; 59 font-size: 14px; 60 text-align: left; 61 line-height: 16px; 62 font-weight: 400; 63} 64.select { 65 border-radius: 15px; 66} 67input { 68 width: 35%; 69 height: 25px; 70 border:0; 71 outline:none; 72 border-radius: 16px; 73 text-indent:2% 74} 75input::-webkit-input-placeholder{ 76 color:var(--bark-prompt,#999999); 77} 78.inputstyle{ 79 background: var(--dark-background5,#FFFFFF); 80 border: 1px solid var(--dark-background5,#999999); 81 font-family: Helvetica; 82 font-size: 14px; 83 color: var(--dark-color1,#212121); 84 text-align: left; 85 line-height: 16px; 86 font-weight: 400; 87} 88.inputstyle::-webkit-input-placeholder { 89 background: var(--dark-background5,#FFFFFF); 90} 91.radio { 92 font-family: Helvetica-Bold; 93 font-size: 16px; 94 color: #000000; 95 line-height: 28px; 96 font-weight: 700; 97} 98.unit { 99 font-family: Helvetica; 100 font-size: 14px; 101 color: #000000; 102 line-height: 28px; 103 font-weight: 400; 104} 105lit-switch { 106 display:inline; 107 float: right; 108 height: 38px; 109 margin-top: 10px; 110} 111:host([startSamp]) .inputBoxes { 112 background: var(--dark-background5,#FFFFFF); 113} 114:host(:not([startSamp])) .inputBoxes { 115 color: #b7b7b7; 116 background: var(--dark-background1,#f5f5f5); 117} 118</style> 119<div class="root"> 120 <div class="title" id="traceMode" style="text-align:left;"> 121 <span style='color: red'>Long trace mode! If current data Trace is too large, it may not open!</span> 122 </div> 123 <div class="config-div"> 124 <div> 125 <span class="title">Start Ark Ts Record</span> 126 <lit-switch></lit-switch> 127 </div> 128 </div> 129 <div class="config-div"> 130 <div> 131 <span class="title">Process</span> 132 <span class="des">Record process</span> 133 </div> 134 <lit-allocation-select style="width: 100%;" rounded="" default-value="" class="select inputBoxes" 135 placement="bottom" ></lit-allocation-select> 136 </div> 137 <div class="config-div"> 138 <div> 139 <span class="title">Select profiling type</span> 140 </div> 141 <div> 142 <span class="config-title">Start cpu profiler</span> 143 <lit-switch class="switch" id='cpu-switch'></lit-switch> 144 </div> 145 <div style="margin-left: 40px;"> 146 <span class="des">Interval(Available on recent OpenHarmony 4.0)</span> 147 <div style="margin-top: 12px;"> 148 <input class="inputstyle inputBoxes" id='cpuInterval' type="text" id="interval" 149 placeholder="" onkeyup="this.value=this.value.replace(/\\D/g,'').replace(/^0{1,}/g,'')" value="1000"> 150 <span class="unit">μs</span> 151 </div> 152 </div> 153 <div> 154 <span class="config-title">Start memory profiler</span> 155 <lit-switch class="switch" id='memory-switch'></lit-switch> 156 </div> 157 <div class='memory'> 158 <lit-radio dis="round" class="radio" name="litRadio" checked type="0">Heap snapshot</lit-radio> 159 <div style="margin-left: 10px;"> 160 <span class="des">Heap snapshot profiles show memory distribution among your page’s 161 JavaScript objects and related DOM nodes.</span> 162 <div style="display: flex;margin-bottom: 12px;margin-top: 12px;"> 163 <check-des-box checked="true" value ="lnclude numerical values in capture" id="snapshot"> 164 </check-des-box> 165 </div> 166 <span class="des">Interval(Available on recent OpenHarmony 4.0)</span> 167 <div style="margin-top: 12px;"> 168 <input class="inputstyle inputBoxes" type="text" id="interval" placeholder="" 169 onkeyup="this.value=this.value.replace(/\\D/g,'').replace(/^0{1,}/g,'')" value="10"> 170 <span class="unit">S</span> 171 </div> 172 </div> 173 <lit-radio dis="round" name="litRadio" class="radio" type="1"> 174 Allocation insteumentation on timeline</lit-radio> 175 <div style="margin-left: 10px;"> 176 <span class="des">Allocation timelines show insturmented Javascript memory allocations 177 over time. Once profile is recorded you can select a time interval to see objects that 178 werre allocated within it and still alive by the end of recording. Use this profile 179 type to isolate memory leaks.</span> 180 <div style="display: flex;margin-top: 12px;"> 181 <check-des-box value ="record stack traces of allocations(extra performance overhead)" id="timeline"> 182 </check-des-box> 183 </div> 184 </div> 185 </div> 186 </、div> 187</div> 188`; 189