diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts index 26b51785447ae10c5e9909d40e4d61261dbd133c..4ca5ee5b660f52e8334fdd98f40044040eb7aee5 100644 --- a/ide/src/trace/SpApplication.ts +++ b/ide/src/trace/SpApplication.ts @@ -55,6 +55,8 @@ import './component/trace/base/CustomThemeColor.js'; import { CustomThemeColor, Theme } from './component/trace/base/CustomThemeColor.js'; import { convertPool } from './database/Convert.js'; import { LongTraceDBUtils } from './database/LongTraceDBUtils.js'; +import { SpKeyboard } from './component/SpKeyboard.js'; +import './component/SpKeyboard.js'; @element('sp-application') export class SpApplication extends BaseElement { @@ -500,8 +502,10 @@ export class SpApplication extends BaseElement { display: flex; } -
+
+
@@ -571,6 +575,7 @@ export class SpApplication extends BaseElement { let spSystemTrace = this.shadowRoot!.querySelector('#sp-system-trace'); this.spHelp = this.shadowRoot!.querySelector('#sp-help'); let spFlags = this.shadowRoot!.querySelector('#sp-flags') as SpFlags; + let SpKeyboard = this.shadowRoot!.querySelector('#sp-keyboard') as SpKeyboard; let spRecordTrace = this.shadowRoot!.querySelector('#sp-record-trace'); let spRecordTemplate = this.shadowRoot!.querySelector('#sp-record-template'); let spSchedulingAnalysis = this.shadowRoot!.querySelector( @@ -607,6 +612,7 @@ export class SpApplication extends BaseElement { this.spHelp, spRecordTemplate, spFlags, + SpKeyboard, ]; document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'visible') { @@ -1473,6 +1479,18 @@ export class SpApplication extends BaseElement { showContent(spFlags); }, }, + { + title: 'Keyboard shortcuts', + icon: 'menu', + clickHandler: function (item: MenuItem) { + SpStatisticsHttpUtil.addOrdinaryVisitAction({ + event: 'Keyboard shortcuts', + action: 'Keyboard shortcuts', + }); + that.search = false; + showContent(SpKeyboard); + }, + }, ], }); if (res.status) { @@ -1884,6 +1902,18 @@ export class SpApplication extends BaseElement { }); }, }, + { + title: 'Keyboard shortcuts', + icon: 'smart-help', + clickHandler: function (item: MenuItem) { + that.search = false; + showContent(SpKeyboard); + SpStatisticsHttpUtil.addOrdinaryVisitAction({ + event: 'Keyboard shortcuts', + action: 'Keyboard shortcuts', + }); + }, + }, ], }, ]; diff --git a/ide/src/trace/component/SpKeyboard.ts b/ide/src/trace/component/SpKeyboard.ts new file mode 100644 index 0000000000000000000000000000000000000000..cbd70e359027ad4db7e329d8b365b07963ebd0a2 --- /dev/null +++ b/ide/src/trace/component/SpKeyboard.ts @@ -0,0 +1,225 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { BaseElement, element } from '../../base-ui/BaseElement.js'; +@element('sp-keyboard') +export class SpKeyboard extends BaseElement{ + private bodyEl: HTMLElement | undefined | null; + initElements(): void { + let parentElement = this.parentNode as HTMLElement; + parentElement.style.overflow = 'hidden'; + this.bodyEl = this.shadowRoot?.querySelector('.body'); + let closeWindow = this.shadowRoot?.querySelector('.close-icon'); + let keyboard_div = document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!; + let welcon_div = document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-welcome')!; + let shadow_box = this.shadowRoot?.querySelector('.shadow-box')!; + closeWindow!.addEventListener('click',()=>{ + keyboard_div.style.visibility = 'hidden'; + welcon_div.style.visibility = 'visible'; + }) + shadow_box!.addEventListener('click',()=>{ + keyboard_div.style.visibility = 'hidden'; + welcon_div.style.visibility = 'visible'; + }) + } + initHtml(): string { + return ` + ${this.initHtmlStyle()} +
+
+
+
+

SmartPerf help

+ ✕ +
+
+
+

Navigation

+ + + + + + + + + +
+
w
/ +
s
+ 		放大/缩小
+
a
/ +
d
+ 		左移/右移
+

Mouse Controls

+ + + + + + + + + + + + + + + + + +
Click点选
Click + Drag框选
Ctrl + Scroll wheel放大/缩小
Ctrl + Click + Drag拖拽左移/右移
+

Making SQL queries from the query page

+ + + + + +
+
Ctrl
+ +
Enter
+ 		在数据库查询界面写好查询语句后进行查询
+

Other

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
f
(with event selected) + 		聚焦
+
m
(with event or area selected) + 		临时框选标记
+
Shift
+ +
m
(with event or area selected) + 		永久框选标记
+
Ctrl
+ +
,
/ +
.
+ 		定位到上一个/下一个旗子标记的时间点
+
Ctrl
+ +
[
/ +
]
+ 		定位到上一个/下一个用shift + m 框选的位置
+
?
+ 		展示快捷方式
+
+
+
+
+ `; + } + private initHtmlStyle(): string { + return ` + + `; + } + +} \ No newline at end of file diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index f177d95d1d9e0b6753f1381bf15bd65d9bf470b3..c61141ea75396eecd6722d5b7024b36b744ce8a2 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -113,6 +113,7 @@ import { TabPaneCounterSample } from './trace/sheet/cpu/TabPaneCounterSample.js' import { LitSearch } from './trace/search/Search.js'; import { TabPaneFlag } from './trace/timer-shaft/TabPaneFlag.js'; import { LitTabpane } from '../../base-ui/tabs/lit-tabpane.js'; +import {SpKeyboard} from '../component/SpKeyboard.js' function dpr() { return window.devicePixelRatio || 1; @@ -2200,6 +2201,14 @@ export class SpSystemTrace extends BaseElement { }; documentOnKeyUp = (ev: KeyboardEvent) => { + if(ev.key.toLocaleLowerCase() === '?'){ + document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'visible'; + } + if(ev.key.toLocaleLowerCase() === 'escape'){ + document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'hidden'; + document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-welcome')!.style.visibility = 'visible'; + + } if (!this.loadTraceCompleted) return; let keyPress = ev.key.toLocaleLowerCase(); if(keyPress === 'v'){