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: 1000; 122 } 123 :host([expansion]) { 124 background-color: var(--bark-expansion,#0C65D1); 125 } 126 :host([expansion]) .name,:host([expansion]) .icon{ 127 color: #fff; 128 } 129 :host([expansion]) .describe{ 130 border-right: 0px; 131 background-color: var(--bark-expansion,#0C65D1); 132 } 133 :host([expansion]:not(sleeping)) .panel-vessel{ 134 display: none; 135 } 136 :host([expansion]) .children{ 137 flex-direction: column; 138 width: 100%; 139 } 140 :host([expansion]) .icon{ 141 transform: rotateZ(0deg); 142 } 143 :host(:not([expansion])) .children{ 144 display: none; 145 flex-direction: column; 146 width: 100%; 147 } 148 :host(:not([expansion])) .icon{ 149 transform: rotateZ(-90deg); 150 } 151 :host([sleeping]) .describe{ 152 display: none; 153 } 154 :host([sleeping]) .panel-vessel{ 155 display: none; 156 } 157 :host([sleeping]) .children{ 158 display: none; 159 } 160 :host(:not([sleeping])) .describe{ 161 display: flex;; 162 } 163 :host(:not([sleeping])) .panel-vessel{ 164 display: block; 165 } 166 :host(:not([sleeping])) .children{ 167 display: flex; 168 } 169 :host([folder]) .lit-check-box{ 170 display: none; 171 } 172 :host(:not([check-type])) .lit-check-box{ 173 display: none; 174 } 175 :host([collect-type][row-setting='enable']:not([row-type='hiperf-callchart'])) .setting{ 176 position:fixed; 177 z-index:1003; 178 left: 473px; 179 } 180 :host([collect-type][row-setting='enable'][row-type='hiperf-callchart'][func-expand='false']) .setting{ 181 position:fixed; 182 z-index:1003; 183 left: 473px; 184 } 185 :host(:not([collect-type])) { 186 /*position:static;*/ 187 } 188 :host([collect-type][collect-group='1']) .collect{ 189 display: block; 190 color: #5291FF; 191 } 192 :host([collect-type][collect-group='2']) .collect{ 193 display: block; 194 color: #f56940; 195 } 196 :host(:not([collect-type])) .collect{ 197 display: none; 198 color: var(--dark-icon,#666666); 199 } 200 .collect{ 201 margin-right: 5px; 202 } 203 :host(:not([folder])) .describe:hover .collect{ 204 display: block; 205 } 206 .popover{ 207 color: var(--dark-color1,#4b5766); 208 display: none; 209 justify-content: center; 210 align-items: center; 211 margin-right: 5px; 212 } 213 .setting{ 214 position:absolute; 215 left: 225px; 216 } 217 .radio{ 218 margin-right: 10px; 219 } 220 #setting{ 221 color: var(--dark-color1,#606060); 222 } 223 :host([expansion]) #setting{ 224 color: #FFFFFF; 225 } 226 :host([highlight]) .flash{ 227 background-color: #ffe263; 228 } 229 #listprocess::-webkit-scrollbar{ 230 width: 6px; 231 } 232 /*定义滑块 内阴影+圆角*/ 233 #listprocess::-webkit-scrollbar-thumb 234 { 235 border-radius: 6px; 236 background-color: var(--dark-background7,#e7c9c9); 237 } 238 /*func expand css*/ 239 :host([row-type="func"]) .name{ 240 cursor: pointer; 241 } 242 :host([func-expand='false']) .name{ 243 color: #00a3f5; 244 } 245 .lit-check-box{ 246 margin-right: 15px; 247 } 248 :host([row-setting='enable'][check-type]) .lit-check-box{ 249 margin-right: 25px; 250 } 251 :host([row-setting='enable'][check-type='-1']) .collect{ 252 margin-right: 20px; 253 } 254 :host([row-setting='enable']) #rowSetting{ 255 display: flex; 256 } 257 :host([row-setting='enable']:not([check-type='-1'])) .collect{ 258 margin-right: 5px; 259 } 260 :host([row-setting='checkFile']) #rowCheckFile{ 261 display:flex; 262 } 263 :host([row-setting='checkFile']) #myfolder{ 264 color:#4b5766; 265 } 266 </style> 267 <div class="root"> 268 <div class="describe flash" style="position: inherit"> 269 <label class="name"></label> 270 <lit-icon class="collect" name="star-fill" size="19"></lit-icon> 271 <lit-check-box class="lit-check-box"></lit-check-box> 272 </div> 273 </div> 274 `;