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 16import { BaseElement, element } from '../../base-ui/BaseElement.js'; 17import { LitMainMenuGroup } from '../../base-ui/menu/LitMainMenuGroup.js'; 18import { LitMainMenu, MenuItem } from '../../base-ui/menu/LitMainMenu.js'; 19import { LitMainMenuItem } from '../../base-ui/menu/LitMainMenuItem'; 20import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil.js'; 21 22@element('sp-help') 23export class SpHelp extends BaseElement { 24 private appContent: HTMLElement | undefined | null; 25 26 get dark() { 27 return this.hasAttribute('dark'); 28 } 29 30 set dark(dark: boolean) { 31 if (dark) { 32 this.setAttribute('dark', '' + dark); 33 } else { 34 this.removeAttribute('dark'); 35 } 36 this.appContent!.innerHTML = 37 '<object type="text/html" data=' + 38 '/application/doc/quickstart_device_record.html?' + 39 dark + 40 ' width="100%" height="100%"></object>'; 41 } 42 43 initElements(): void { 44 let that = this; 45 let parentElement = this.parentNode as HTMLElement; 46 parentElement.style.overflow = 'hidden'; 47 this.appContent = this.shadowRoot?.querySelector('#app-content') as HTMLElement; 48 let mainMenu = this.shadowRoot?.querySelector('#main-menu') as LitMainMenu; 49 let header = mainMenu.shadowRoot?.querySelector('.header') as HTMLDivElement; 50 let color = mainMenu.shadowRoot?.querySelector('.color') as HTMLDivElement; 51 let version = mainMenu.shadowRoot?.querySelector('.version') as HTMLDivElement; 52 header.style.display = 'none'; 53 version.style.display = 'none'; 54 color.style.display = 'none'; 55 mainMenu.menus = [ 56 { 57 collapsed: false, 58 title: 'QuickStart', 59 describe: '', 60 children: [ 61 { 62 title: '设备端抓取trace说明', 63 icon: '', 64 clickHandler: function (item: MenuItem) { 65 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 66 event: 'record', 67 action: 'help_doc', 68 }); 69 that.appContent!.innerHTML = 70 '<object type="text/html" data=' + 71 '/application/doc/quickstart_device_record.html?' + 72 that.dark + 73 ' width="100%" height="100%"></object>'; 74 }, 75 }, 76 { 77 title: 'web端抓取trace说明', 78 icon: '', 79 clickHandler: function (item: MenuItem) { 80 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 81 event: 'online_record', 82 action: 'help_doc', 83 }); 84 that.appContent!.innerHTML = 85 '<object type="text/html" data=' + 86 '/application/doc/quickstart_web_record.html?' + 87 that.dark + 88 ' width="100%" height="100%"></object>'; 89 }, 90 }, 91 { 92 title: 'web端加载trace说明', 93 icon: '', 94 clickHandler: function (item: MenuItem) { 95 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 96 event: 'load', 97 action: 'help_doc', 98 }); 99 that.appContent!.innerHTML = 100 '<object type="text/html" data=' + 101 '/application/doc/quickstart_systemtrace.html?' + 102 that.dark + 103 ' width="100%" height="100%"></object>'; 104 }, 105 }, 106 { 107 title: 'Native Memory抓取和展示说明', 108 icon: '', 109 clickHandler: function (item: MenuItem) { 110 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 111 event: 'native', 112 action: 'help_doc', 113 }); 114 that.appContent!.innerHTML = 115 '<object type="text/html" data=' + 116 '/application/doc/quickstart_native_memory.html?' + 117 that.dark + 118 ' width="100%" height="100%"></object>'; 119 }, 120 }, 121 { 122 title: 'Ability Monitor抓取和展示说明', 123 icon: '', 124 clickHandler: function (item: MenuItem) { 125 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 126 event: 'ability', 127 action: 'help_doc', 128 }); 129 that.appContent!.innerHTML = 130 '<object type="text/html" data=' + 131 '/application/doc/quickstart_ability_monitor.html?' + 132 that.dark + 133 ' width="100%" height="100%"></object>'; 134 }, 135 }, 136 { 137 title: 'HiPerf的抓取和展示说明', 138 icon: '', 139 clickHandler: function (item: MenuItem) { 140 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 141 event: 'perf', 142 action: 'help_doc', 143 }); 144 that.appContent!.innerHTML = 145 '<object type="text/html" data=' + 146 '/application/doc/quickstart_hiperf.html?' + 147 that.dark + 148 ' width="100%" height="100%"></object>'; 149 }, 150 }, 151 { 152 title: 'Sql分析和Metrics说明', 153 icon: '', 154 clickHandler: function (item: MenuItem) { 155 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 156 event: 'sql', 157 action: 'help_doc', 158 }); 159 that.appContent!.innerHTML = 160 '<object type="text/html" data=' + 161 '/application/doc/quickstart_sql_metrics.html?' + 162 that.dark + 163 ' width="100%" height="100%"></object>'; 164 }, 165 }, 166 { 167 title: 'FileSystem抓取和展示说明', 168 icon: '', 169 clickHandler: function (item: MenuItem) { 170 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 171 event: 'file_system', 172 action: 'help_doc', 173 }); 174 that.appContent!.innerHTML = 175 '<object type="text/html" data=' + 176 '/application/doc/quickstart_filesystem.html?' + 177 that.dark + 178 ' width="100%" height="100%"></object>'; 179 }, 180 }, 181 { 182 title: '页内存抓取和展示说明', 183 icon: '', 184 clickHandler: function (item: MenuItem) { 185 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 186 event: 'virtual_memory', 187 action: 'help_doc', 188 }); 189 that.appContent!.innerHTML = 190 '<object type="text/html" data=' + 191 '/application/doc/quickstart_page_fault.html?' + 192 that.dark + 193 ' width="100%" height="100%"></object>'; 194 }, 195 }, 196 { 197 title: 'Bio抓取和展示说明', 198 icon: '', 199 clickHandler: function (item: MenuItem) { 200 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 201 event: 'bio', 202 action: 'help_doc', 203 }); 204 that.appContent!.innerHTML = 205 '<object type="text/html" data=' + 206 '/application/doc/quickstart_bio.html?' + 207 that.dark + 208 ' width="100%" height="100%"></object>'; 209 }, 210 }, 211 { 212 title: '进程smaps抓取和展示说明', 213 icon: '', 214 clickHandler: function (item: MenuItem) { 215 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 216 event: 'smaps', 217 action: 'help_doc', 218 }); 219 that.appContent!.innerHTML = 220 '<object type="text/html" data=' + 221 '/application/doc/quickstart_smaps.html?' + 222 that.dark + 223 ' width="100%" height="100%"></object>'; 224 }, 225 }, 226 { 227 title: 'HiSystemEvent抓取和展示说明', 228 icon: '', 229 clickHandler: function (item: MenuItem) { 230 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 231 event: 'hisys', 232 action: 'help_doc', 233 }); 234 that.appContent!.innerHTML = 235 '<object type="text/html" data=' + 236 '/application/doc/quickstart_hisystemevent.html?' + 237 that.dark + 238 ' width="100%" height="100%"></object>'; 239 }, 240 }, 241 { 242 title: 'sdk抓取和展示说明', 243 icon: '', 244 clickHandler: function (item: MenuItem) { 245 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 246 event: 'sdk_record', 247 action: 'help_doc', 248 }); 249 that.appContent!.innerHTML = 250 '<object type="text/html" data=' + 251 '/application/doc/quickstart_sdk.html?' + 252 that.dark + 253 ' width="100%" height="100%"></object>'; 254 }, 255 }, 256 { 257 title: 'Frame timeline抓取和展示说明', 258 icon: '', 259 clickHandler: function (item: MenuItem) { 260 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 261 event: 'frame_record', 262 action: 'help_doc', 263 }); 264 that.appContent!.innerHTML = 265 '<object type="text/html" data=' + 266 '/application/doc/quickstart_Frametimeline.html?' + 267 that.dark + 268 ' width="100%" height="100%"></object>'; 269 }, 270 }, 271 { 272 title: 'Scheduling analysis抓取和展示说明', 273 icon: '', 274 clickHandler: function (item: MenuItem) { 275 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 276 event: 'scheduling_record', 277 action: 'help_doc', 278 }); 279 that.appContent!.innerHTML = 280 '<object type="text/html" data=' + 281 '/application/doc/quickstart_schedulinganalysis.html?' + 282 that.dark + 283 ' width="100%" height="100%"></object>'; 284 }, 285 }, 286 { 287 title: 'Js Memory抓取和展示说明', 288 icon: '', 289 clickHandler: function (item: MenuItem) { 290 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 291 event: 'js_memory', 292 action: 'help_doc', 293 }); 294 that.appContent!.innerHTML = 295 '<object type="text/html" data=' + 296 '/application/doc/quickstart_Js_memory.html?' + 297 that.dark + 298 ' width="100%" height="100%"></object>'; 299 }, 300 }, 301 { 302 title: '调用栈可视化和不同库函数调用占比说明', 303 icon: '', 304 clickHandler: function (item: MenuItem) { 305 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 306 event: 'import_so', 307 action: 'help_doc', 308 }); 309 that.appContent!.innerHTML = 310 '<object type="text/html" data=' + 311 '/application/doc/quickstart_Import_so.html?' + 312 that.dark + 313 ' width="100%" height="100%"></object>'; 314 }, 315 }, 316 { 317 title: '应用操作技巧', 318 icon: '', 319 clickHandler: function (item: MenuItem) { 320 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 321 event: 'operation_skills', 322 action: 'help_doc', 323 }); 324 that.appContent!.innerHTML = 325 '<object type="text/html" data=' + 326 '/application/doc/quickstart_Application_operation_skills.html?' + 327 that.dark + 328 ' width="100%" height="100%"></object>'; 329 }, 330 }, 331 ], 332 }, 333 { 334 collapsed: false, 335 title: 'TraceStreamer', 336 describe: '', 337 children: [ 338 { 339 title: 'TraceStreamer数据库说明', 340 icon: '', 341 clickHandler: function (item: MenuItem) { 342 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 343 event: 'trace_streamer_explain', 344 action: 'help_doc', 345 }); 346 that.appContent!.innerHTML = 347 '<object type="text/html" data=' + 348 '/application/doc/des_tables.html?' + 349 that.dark + 350 ' width="100%" height="100%"></object>'; 351 }, 352 }, 353 { 354 title: '编译Trace_streamer', 355 icon: '', 356 clickHandler: function (item: MenuItem) { 357 that.appContent!.innerHTML = 358 '<object type="text/html" data=' + 359 '/application/doc/compile_trace_streamer.html?' + 360 that.dark + 361 ' width="100%" height="100%"></object>'; 362 }, 363 }, 364 { 365 title: 'TraceStreamer 解析数据状态表', 366 icon: '', 367 clickHandler: function (item: MenuItem) { 368 that.appContent!.innerHTML = 369 '<object type="text/html" data=' + 370 '/application/doc/des_stat.html?' + 371 that.dark + 372 ' width="100%" height="100%"></object>'; 373 }, 374 }, 375 { 376 title: 'TraceStreamer支持解析事件列表', 377 icon: '', 378 clickHandler: function (item: MenuItem) { 379 that.appContent!.innerHTML = 380 '<object type="text/html" data=' + 381 '/application/doc/des_support_event.html?' + 382 that.dark + 383 ' width="100%" height="100%"></object>'; 384 }, 385 }, 386 { 387 title: 'trace_streamer工具说明', 388 icon: '', 389 clickHandler: function (item: MenuItem) { 390 that.appContent!.innerHTML = 391 '<object type="text/html" data=' + 392 '/application/doc/quickstart_trace_streamer.html?' + 393 that.dark + 394 ' width="100%" height="100%"></object>'; 395 }, 396 }, 397 { 398 title: 'binder事件上下文如何关联', 399 icon: '', 400 clickHandler: function (item: MenuItem) { 401 that.appContent!.innerHTML = 402 '<object type="text/html" data=' + 403 '/application/doc/des_binder.html?' + 404 that.dark + 405 ' width="100%" height="100%"></object>'; 406 }, 407 }, 408 { 409 title: 'wakeup唤醒说明', 410 icon: '', 411 clickHandler: function (item: MenuItem) { 412 that.appContent!.innerHTML = 413 '<object type="text/html" data=' + 414 '/application/doc/des_wakup.html?' + 415 that.dark + 416 ' width="100%" height="100%"></object>'; 417 }, 418 }, 419 ], 420 }, 421 { 422 collapsed: false, 423 title: 'SmartPerf', 424 describe: '', 425 children: [ 426 { 427 title: 'SmartPerf 编译指导', 428 icon: '', 429 clickHandler: function (item: MenuItem) { 430 that.appContent!.innerHTML = 431 '<object type="text/html" data=' + 432 '/application/doc/quickstart_smartperflinux_compile_guide.html?' + 433 that.dark + 434 ' width="100%" height="100%"></object>'; 435 }, 436 }, 437 ], 438 }, 439 ]; 440 mainMenu.style.width = '330px'; 441 let body = mainMenu.shadowRoot?.querySelector('.menu-body') as HTMLDivElement; 442 let groups = body.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group'); 443 groups.forEach((value) => { 444 let items = value.querySelectorAll<LitMainMenuItem>('lit-main-menu-item'); 445 items.forEach((item) => { 446 item.style.width = '330px'; 447 }); 448 if (value.title == 'TraceStreamer') { 449 let items = value.querySelectorAll<LitMainMenuItem>('lit-main-menu-item'); 450 items.forEach((i) => { 451 if (i.title != 'TraceStreamer数据库说明') { 452 i.style.display = 'none'; 453 } 454 }); 455 } 456 if (value.title == 'SmartPerf') { 457 value.style.display = 'none'; 458 } 459 }); 460 } 461 462 initHtml(): string { 463 return ` 464 <style> 465 .container { 466 display: grid; 467 grid-template-columns: 1fr; 468 grid-template-rows:1fr; 469 background-color: var(--dark-background5,#F6F6F6); 470 min-height: 100%; 471 } 472 :host{ 473 display: block; 474 width: 100%; 475 height: 100%; 476 background-color: var(--dark-background5,#F6F6F6); 477 } 478 .body{ 479 width: 90%; 480 margin-left: 3%; 481 margin-top: 2%; 482 margin-bottom: 2%; 483 display: grid; 484 grid-template-columns: min-content 1fr; 485 background-color: var(--dark-background3,#FFFFFF); 486 border-radius: 16px 16px 16px 16px; 487 } 488 489 .content{ 490 background: var(--dark-background3,#FFFFFF); 491 border-style: none none none solid; 492 border-width: 1px; 493 border-color: rgba(166,164,164,0.2); 494 border-radius: 0px 16px 16px 0px; 495 padding: 40px 20px 40px 20px; 496 display: flex; 497 } 498 499 </style> 500 <div class="container"> 501 <div class="body"> 502 <lit-main-menu id="main-menu" class="menugroup" data=''></lit-main-menu> 503 <div id="app-content" class="content"> 504 </div> 505 </div> 506 </div> 507 `; 508 } 509} 510