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"; 20 21@element('sp-help') 22export class SpHelp extends BaseElement { 23 private appContent: HTMLElement | undefined | null 24 25 get dark() { 26 return this.hasAttribute("dark"); 27 } 28 29 set dark(dark: boolean) { 30 if (dark) { 31 this.setAttribute("dark", '' + dark); 32 } 33 this.appContent!.innerHTML = "<object type=\"text/html\" data=" 34 + "/application/doc/quickstart_hiprofiler_cmd.html?" 35 + dark 36 + " width=\"100%\" height=\"100%\"></object>" 37 } 38 39 initElements(): void { 40 let that = this 41 let parentElement = this.parentNode as HTMLElement; 42 parentElement.style.overflow = 'hidden' 43 this.appContent = this.shadowRoot?.querySelector('#app-content') as HTMLElement 44 let mainMenu = this.shadowRoot?.querySelector('#main-menu') as LitMainMenu 45 let header = mainMenu.shadowRoot?.querySelector('.header') as HTMLDivElement 46 let version = mainMenu.shadowRoot?.querySelector('.version') as HTMLDivElement 47 header.style.display = 'none' 48 version.style.display = 'none' 49 mainMenu.menus = [ 50 { 51 collapsed: false, 52 title: 'QuickStart', 53 describe: '', 54 children: [ 55 { 56 title: "快速抓取trace说明", icon: "", clickHandler: function (item: MenuItem) { 57 that.appContent!.innerHTML = 58 "<object type=\"text/html\" data=" + "/application/doc/quickstart_hiprofiler_cmd.html?" 59 + that.dark 60 + " width=\"100%\" height=\"100%\"></object>" 61 } 62 }, 63 { 64 title: "网页加载trace说明", icon: "", clickHandler: function (item: MenuItem) { 65 that.appContent!.innerHTML = 66 "<object type=\"text/html\" data=" 67 + "/application/doc/quickstart_smartperf.html?" 68 + that.dark 69 + " width=\"100%\" height=\"100%\"></object>" 70 } 71 }, 72 { 73 title: "Native Memory抓取和展示说明", icon: "", clickHandler: function (item: MenuItem) { 74 that.appContent!.innerHTML = 75 "<object type=\"text/html\" data=" 76 + "/application/doc/native_memory.html?" 77 + that.dark 78 + " width=\"100%\" height=\"100%\"></object>" 79 } 80 }, 81 { 82 title: "Ability Monitor抓取和展示说明", icon: "", clickHandler: function (item: MenuItem) { 83 that.appContent!.innerHTML = 84 "<object type=\"text/html\" data=" 85 + "/application/doc/ability_monitor.html?" 86 + that.dark 87 + " width=\"100%\" height=\"100%\"></object>" 88 } 89 }, 90 { 91 title: "Perf的抓取和展示说明", icon: "", clickHandler: function (item: MenuItem) { 92 that.appContent!.innerHTML = 93 "<object type=\"text/html\" data=" 94 + "/application/doc/perf.html?" 95 + that.dark 96 + " width=\"100%\" height=\"100%\"></object>" 97 } 98 }, 99 { 100 title: "Sql分析和Metrics说明", icon: "", clickHandler: function (item: MenuItem) { 101 that.appContent!.innerHTML = 102 "<object type=\"text/html\" data=" 103 + "/application/doc/des_metris_support.html?" 104 + that.dark 105 + " width=\"100%\" height=\"100%\"></object>" 106 } 107 }, 108 { 109 title: "在线抓取trace说明", icon: "", clickHandler: function (item: MenuItem) { 110 that.appContent!.innerHTML = 111 "<object type=\"text/html\" data=" 112 + "/application/doc/capture_online.html?" 113 + that.dark 114 + " width=\"100%\" height=\"100%\"></object>" 115 } 116 }, 117 { 118 title: "FileSystem抓取和展示说明", icon: "", clickHandler: function (item: MenuItem) { 119 that.appContent!.innerHTML = 120 "<object type=\"text/html\" data=" 121 + "/application/doc/file_system.html?" 122 + that.dark 123 + " width=\"100%\" height=\"100%\"></object>" 124 } 125 }, 126 { 127 title: "页内存抓取和展示说明", icon: "", clickHandler: function (item: MenuItem) { 128 that.appContent!.innerHTML = 129 "<object type=\"text/html\" data=" 130 + "/application/doc/memory_fetching.html?" 131 + that.dark 132 + " width=\"100%\" height=\"100%\"></object>" 133 } 134 } 135 ] 136 }, 137 { 138 collapsed: false, 139 title: 'TraceStreamer', 140 describe: '', 141 children: [ 142 { 143 title: "TraceStreamer数据库说明", 144 icon: "", 145 clickHandler: function (item: MenuItem) { 146 that.appContent!.innerHTML = "<object type=\"text/html\" data=" 147 + "/application/doc/des_tables.html?" 148 + that.dark 149 + " width=\"100%\" height=\"100%\"></object>" 150 } 151 }, 152 { 153 title: "编译Trace_streamer", 154 icon: "", 155 clickHandler: function (item: MenuItem) { 156 that.appContent!.innerHTML = "<object type=\"text/html\" data=" 157 + "/application/doc/compile_trace_streamer.html?" 158 + that.dark 159 + " width=\"100%\" height=\"100%\"></object>" 160 } 161 }, 162 { 163 title: "TraceStreamer 解析数据状态表", 164 icon: "", 165 clickHandler: function (item: MenuItem) { 166 that.appContent!.innerHTML = "<object type=\"text/html\" data=" 167 + "/application/doc/des_stat.html?" 168 + that.dark 169 + " width=\"100%\" height=\"100%\"></object>" 170 } 171 }, 172 { 173 title: "TraceStreamer支持解析事件列表", 174 icon: "", 175 clickHandler: function (item: MenuItem) { 176 that.appContent!.innerHTML = "<object type=\"text/html\" data=" 177 + "/application/doc/des_support_event.html?" 178 + that.dark 179 + " width=\"100%\" height=\"100%\"></object>" 180 } 181 }, 182 { 183 title: "trace_streamer工具说明", 184 icon: "", 185 clickHandler: function (item: MenuItem) { 186 that.appContent!.innerHTML = "<object type=\"text/html\" data=" 187 + "/application/doc/quickstart_trace_streamer.html?" 188 + that.dark 189 + " width=\"100%\" height=\"100%\"></object>" 190 } 191 }, 192 { 193 title: "binder事件上下文如何关联", icon: "", clickHandler: function (item: MenuItem) { 194 that.appContent!.innerHTML = 195 "<object type=\"text/html\" data=" 196 + "/application/doc/des_binder.html?" 197 + that.dark 198 + " width=\"100%\" height=\"100%\"></object>" 199 } 200 }, 201 { 202 title: "wakeup唤醒说明", 203 icon: "", 204 clickHandler: function (item: MenuItem) { 205 that.appContent!.innerHTML = "<object type=\"text/html\" data=" 206 + "/application/doc/des_wakup.html?" 207 + that.dark 208 + " width=\"100%\" height=\"100%\"></object>" 209 } 210 } 211 ] 212 }, 213 { 214 collapsed: false, 215 title: 'SmartPerf', 216 describe: '', 217 children: [ 218 { 219 title: "SmartPerf 编译指导", 220 icon: "", 221 clickHandler: function (item: MenuItem) { 222 that.appContent!.innerHTML = "<object type=\"text/html\" data=" 223 + "/application/doc/compile_smartperf.html?" 224 + that.dark 225 + " width=\"100%\" height=\"100%\"></object>" 226 } 227 }, 228 ] 229 }, 230 ] 231 mainMenu.style.width = '290px' 232 let body = mainMenu.shadowRoot?.querySelector('.menu-body') as HTMLDivElement 233 let groups = body.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group') 234 groups.forEach(value => { 235 let items = value.querySelectorAll<LitMainMenuItem>('lit-main-menu-item') 236 items.forEach(item => { 237 item.style.width = '290px' 238 }) 239 if(value.title == 'TraceStreamer'){ 240 let items = value.querySelectorAll<LitMainMenuItem>('lit-main-menu-item'); 241 items.forEach(i =>{ 242 if(i.title != 'TraceStreamer数据库说明'){ 243 i.style.display = 'none'; 244 } 245 }) 246 } 247 if(value.title == 'SmartPerf'){ 248 value.style.display = 'none'; 249 } 250 }) 251 } 252 253 initHtml(): string { 254 return ` 255 <style> 256 :host{ 257 display: block; 258 width: 100%; 259 height: 100%; 260 background-color: var(--dark-background5,#F6F6F6); 261 } 262 263 .container { 264 display: grid; 265 grid-template-columns: 1fr; 266 grid-template-rows:1fr; 267 background-color: var(--dark-background5,#F6F6F6); 268 min-height: 100%; 269 } 270 271 .body{ 272 width: 90%; 273 margin-left: 3%; 274 margin-top: 2%; 275 margin-bottom: 2%; 276 display: grid; 277 grid-template-columns: min-content 1fr; 278 background-color: var(--dark-background3,#FFFFFF); 279 border-radius: 16px 16px 16px 16px; 280 } 281 282 .content{ 283 background: var(--dark-background3,#FFFFFF); 284 border-style: none none none solid; 285 border-width: 1px; 286 border-color: rgba(166,164,164,0.2); 287 border-radius: 0px 16px 16px 0px; 288 padding: 40px 20px 40px 20px; 289 display: flex; 290 } 291 292 </style> 293 <div class="container"> 294 <div class="body"> 295 <lit-main-menu id="main-menu" class="menugroup" data=''></lit-main-menu> 296 <div id="app-content" class="content"> 297 </div> 298 </div> 299 </div> 300 `; 301 } 302}