• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 */
15export const TraceRowHtml = `
16        <style>
17        *{
18            box-sizing: border-box;
19        }
20        :host(:not([row-hidden])){
21            box-sizing: border-box;
22            display: flex;
23            flex-direction: column;
24            width: 100%;
25            height: min-content;
26        }
27        :host([row-hidden]){
28            width: 100%;
29            display: none;
30        }
31        .root{
32            height: 100%;
33            width: 100%;
34            display: grid;
35            grid-template-rows: 100%;
36            grid-template-columns: 248px 1fr;
37            border-bottom: 1px solid var(--dark-border1,#dadada);
38            border-right: 1px solid var(--dark-border1,#ffffff);
39            box-sizing: border-box;
40        }
41        .root .drag{
42            background-color: var(--dark-background1,#eee);
43            box-shadow: 0 4px 12px -4px #999 inset;
44        }
45        .root .line-top{
46            box-shadow: 0 4px 2px -1px #4d7ab3 inset;
47            transition: all 0.2s;
48        }
49        .root .line-bottom{
50            box-shadow: 0 -4px 2px -1px #4d7ab3 inset;
51            transition: all 0.2s;
52        }
53        .describe{
54            box-sizing: border-box;
55            border-right: 1px solid var(--dark-border1,#c9d0da);
56            background-color: var(--dark-background5,#ffffff);
57            align-items: center;
58            position: relative;
59        }
60        .panel{
61            width: 100%;
62            height: 100%;
63            overflow: visible;
64            background-color: transparent;
65            display: block;
66        }
67        .panel-vessel{
68            width: 100%;
69            position: relative;
70            pointer-events: none;
71        }
72        .name{
73            color: var(--dark-color1,#4b5766);
74            margin-left: 10px;
75            font-size: .9rem;
76            font-weight: normal;
77            flex: 1;
78            max-height: 100%;
79            text-align: left;
80            overflow: hidden;
81            user-select: none;
82            text-overflow: ellipsis;
83            white-space:nowrap;
84            max-width: 190px;
85        }
86        :host([highlight]) .name{
87            color: #4b5766;
88        }
89        .icon{
90            color: var(--dark-color1,#151515);
91            margin-left: 10px;
92        }
93        .describe:hover {
94            cursor: pointer;
95        }
96        :host([folder]) .describe:hover > .icon{
97            color:#ecb93f;
98            margin-left: 10px;
99        }
100        :host([folder]){
101            /*background-color: var(--dark-background1,#f5fafb);*/
102        }
103        :host(:not([folder])){
104            /*background-color: var(--dark-background,#FFFFFF);*/
105        }
106        :host(:not([folder]):not([children])) {
107        }
108        :host(:not([folder]):not([children])) .icon{
109            display: none;
110        }
111        :host(:not([folder])[children]) .icon{
112            display: none;
113            color:#fff
114        }
115
116        :host(:not([folder])[children]) .name{
117        }
118        :host([sticky]) {
119            position: sticky;
120            top: 0;
121            z-index: 1;
122        }
123        :host([expansion]) {
124            background-color: var(--bark-expansion,#0C65D1);
125            opacity:0.8;
126        }
127        :host([expansion]) .name,:host([expansion]) .icon{
128            color: #fff;
129        }
130        :host([expansion]) .describe{
131            border-right: 0px;
132            background-color: var(--bark-expansion,#0C65D1);
133        }
134        :host([expansion]:not(sleeping)) .panel-vessel{
135            display: none;
136        }
137        :host([expansion]) .children{
138            flex-direction: column;
139            width: 100%;
140        }
141        :host([expansion]) .icon{
142            transform: rotateZ(0deg);
143        }
144        :host(:not([expansion])) .children{
145            display: none;
146            flex-direction: column;
147            width: 100%;
148        }
149        :host(:not([expansion])) .icon{
150            transform: rotateZ(-90deg);
151        }
152        :host([sleeping]) .describe{
153            display: none;
154        }
155        :host([sleeping]) .panel-vessel{
156            display: none;
157        }
158        :host([sleeping]) .children{
159            display: none;
160        }
161        :host(:not([sleeping])) .describe{
162            display: flex;;
163        }
164        :host(:not([sleeping])) .panel-vessel{
165            display: block;
166        }
167        :host(:not([sleeping])) .children{
168            display: flex;
169        }
170        :host([folder]) .lit-check-box{
171            display: none;
172        }
173        :host(:not([check-type])) .lit-check-box{
174            display: none;
175        }
176        :host([collect-type][row-setting='enable']:not([row-type='hiperf-callchart'])) .setting{
177            position:fixed;
178            z-index:0;
179            left: 473px;
180        }
181        :host([collect-type][row-setting='enable'][row-type='hiperf-callchart'][func-expand='false']) .setting{
182            position:fixed;
183            z-index:0;
184            left: 473px;
185        }
186        :host(:not([collect-type])) {
187            /*position:static;*/
188        }
189        :host([collect-type][collect-group='1']) .collect{
190            display: block;
191            color: #5291FF;
192        }
193        :host([collect-type][collect-group='2']) .collect{
194            display: block;
195            color: #f56940;
196        }
197        :host(:not([collect-type])) .collect{
198            display: none;
199            color: var(--dark-icon,#666666);
200        }
201        .collect{
202            margin-right: 5px;
203        }
204        :host(:not([folder])) .describe:hover .collect{
205            display: block;
206        }
207        .popover{
208            color: var(--dark-color1,#4b5766);
209            display: none;
210            justify-content: center;
211            align-items: center;
212            margin-right: 5px;
213        }
214        .setting{
215            position:absolute;
216            left: 225px;
217        }
218        .radio{
219            margin-right: 10px;
220        }
221        #setting{
222            color: var(--dark-color1,#606060);
223        }
224        :host([expansion]) #setting{
225            color: #FFFFFF;
226        }
227        :host([highlight]) .flash{
228            background-color: #ffe263;
229        }
230         #listprocess::-webkit-scrollbar{
231         width: 6px;
232        }
233        /*定义滑块 内阴影+圆角*/
234        #listprocess::-webkit-scrollbar-thumb
235        {
236          border-radius: 6px;
237          background-color: var(--dark-background7,#e7c9c9);
238        }
239        /*func expand css*/
240        :host([row-type="func"]) .name{
241            cursor: pointer;
242        }
243        :host([func-expand='false']) .name{
244            color: #00a3f5;
245        }
246        .lit-check-box{
247            margin-right: 25px;
248        }
249        :host([row-setting='enable'][check-type]) .lit-check-box{
250            margin-right: 25px;
251        }
252        :host([row-setting='enable'][check-type='-1']) .collect{
253            margin-right: 20px;
254        }
255        :host([row-setting='enable']) #rowSetting{
256            display: flex;
257        }
258        :host([row-setting='enable']:not([check-type='-1'])) .collect{
259            margin-right: 5px;
260        }
261        :host([row-setting='checkFile']) #rowCheckFile{
262          display:flex;
263        }
264        :host([row-setting='checkFile']) #myfolder{
265          color:#4b5766;
266        }
267        .upload {
268            position: absolute;
269            color: var(--dark-icon,#333333);
270            right: 5px;
271            margin-top: 4px;
272        }
273        </style>
274        <div class="root">
275            <div class="describe flash" style="position: relative">
276                <label class="name"></label>
277                <lit-icon class="collect" name="star-fill" size="19"></lit-icon>
278                <lit-check-box class="lit-check-box"></lit-check-box>
279            </div>
280        </div>
281        `;
282