diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts index 05b7aa02fd44a1d5fe54309eb7b9790ddfbbea99..d693e413a99504c33af9f2be9fef576fdfd662d1 100644 --- a/ide/src/base-ui/select/LitSelect.ts +++ b/ide/src/base-ui/select/LitSelect.ts @@ -176,7 +176,7 @@ export class LitSelect extends BaseElement { selectDataSource.forEach(item => { if (valuesSet.has(item.value)) { flag = false; // 如果value有重复，就设置flag为false - return; + return; } valuesSet.add(item.value); }); @@ -195,7 +195,7 @@ export class LitSelect extends BaseElement { value: dateSourceBean.name ? dateSourceBean.name : dateSourceBean, // @ts-ignore name: dateSourceBean.name ? dateSourceBean.name : dateSourceBean, }; - } + } selectOption.textContent = optionData.name; selectOption.setAttribute('value', optionData.value); if (this.currentSelectedValue === optionData.value) { @@ -238,8 +238,7 @@ export class LitSelect extends BaseElement { ${selectHtmlStr(this.listHeight)}
- +
@@ -269,7 +268,7 @@ export class LitSelect extends BaseElement { icon.name = 'close'; let span = document.createElement('span'); // @ts-ignore tag.classList.add('tag'); // @ts-ignore - span.dataset['value'] = value; // @ts-ignore + span.dataset.value = value; // @ts-ignore span.textContent = text; // @ts-ignore tag.append(span); // @ts-ignore tag.append(icon); // @ts-ignore @@ -285,9 +284,9 @@ export class LitSelect extends BaseElement { ev.stopPropagation(); }; // @ts-ignore tag.value = value; // @ts-ignore - tag.dataset['value'] = value; // @ts-ignore + tag.dataset.value = value; // @ts-ignore tag.text = text; // @ts-ignore - tag.dataset['text'] = text; // @ts-ignore + tag.dataset.text = text; // @ts-ignore return tag; } @@ -621,9 +620,9 @@ export class LitSelect extends BaseElement { }); } - disconnectedCallback(): void {} + disconnectedCallback(): void { } - adoptedCallback(): void {} + adoptedCallback(): void { } attributeChangedCallback(name: unknown, oldValue: unknown, newValue: unknown): void { if (name === 'value' && this.selectInputEl) { diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts index f1bc7e89cec51aedb1b8994fe8238694d8ce39c4..285db091f3e2337023c846d1709607b4e0df3c4c 100644 --- a/ide/src/base-ui/table/lit-table.ts +++ b/ide/src/base-ui/table/lit-table.ts @@ -352,7 +352,7 @@ export class LitTable extends HTMLElement { this.theadElement!.append(rowElement); }); }); - this.shadowRoot!.addEventListener('load', function (event) {}); + this.shadowRoot!.addEventListener('load', function (event) { }); this.tableElement!.addEventListener('mouseout', (ev) => this.mouseOut()); this.treeElement && (this.treeElement!.style.transform = 'translateY(0px)'); this.tbodyElement && (this.tbodyElement!.style.transform = 'translateY(0px)'); @@ -631,7 +631,7 @@ export class LitTable extends HTMLElement { }); } - adoptedCallback(): void {} + adoptedCallback(): void { } getCheckRows(): unknown[] { // @ts-ignore @@ -639,7 +639,7 @@ export class LitTable extends HTMLElement { .map((a) => (a as unknown).data) .map((a) => { if ('children' in a) { - delete a['children']; + Reflect.deleteProperty(a, "chlidren") } return a; }); @@ -1525,14 +1525,15 @@ export class LitTable extends HTMLElement { } //自定义td点击事件 - dispatchTdClickEvent(td: unknown, column: any, rowData: unknown): void { + dispatchTdClickEvent(td: unknown, column: unknown, rowData: unknown): void { + // @ts-ignore if (column.hasAttribute('tdJump')) { //@ts-ignore td.style.color = '#208aed'; //@ts-ignore td.style.textDecoration = 'underline'; //@ts-ignore - td.onclick = (event: any) => { + td.onclick = (event: unknown): void => { this.dispatchEvent( new CustomEvent('td-click', { detail: {//@ts-ignore @@ -1541,6 +1542,7 @@ export class LitTable extends HTMLElement { composed: true, }) ); + // @ts-ignore event.stopPropagation(); }; } diff --git a/ide/src/base-ui/tree/LitTree.ts b/ide/src/base-ui/tree/LitTree.ts index a23c3c21f631871aaf0e28b7e996d0bbc39ed88a..756848b4330d3b29128ad3a6d11e108a3d17a7e0 100644 --- a/ide/src/base-ui/tree/LitTree.ts +++ b/ide/src/base-ui/tree/LitTree.ts @@ -334,7 +334,7 @@ export class LitTree extends BaseElement { this.contextMenu!.style.display = 'none'; } - onDrag(e: MouseEvent): void {} + onDrag(e: MouseEvent): void { } onDragStart(ev: MouseEvent): undefined { this.srcDragElement = ev.target; @@ -356,7 +356,7 @@ export class LitTree extends BaseElement { onDragOver(ev: MouseEvent): undefined { let node = ev.target as LitTreeNode; //@ts-ignore if (this.srcDragElement.data.key === node.data!.key) { - return; + return undefined; } //@ts-ignore let rect = (ev.currentTarget! as unknown).getBoundingClientRect(); if (ev.clientX >= rect.left + rect.width / 3 && ev.clientX < rect.left + rect.width) { @@ -389,7 +389,7 @@ export class LitTree extends BaseElement { let srcData = this.srcDragElement.data; //获取原节点的data数据 let dstData = (ev.target as LitTreeNode).data; //获取目标节点的data数据 if (srcData.key === dstData!.key) { - return; + return undefined; } //同一个节点不用处理 //@ts-ignore let srcElement = this.srcDragElement.parentElement; diff --git a/ide/src/doc/quickstart_trace_streamer.html b/ide/src/doc/quickstart_trace_streamer.html index 5676d805f5325b8dc5807621f1da3feaf6a39721..3ca9d30ef055bdf32134ff76693a654c5f2e9b72 100644 --- a/ide/src/doc/quickstart_trace_streamer.html +++ b/ide/src/doc/quickstart_trace_streamer.html @@ -892,7 +892,7 @@ TraceStreamer在解析数据过程中，使用ipid(internal pid)唯一标识进 lightBackGround[i].style.backgroundColor = '#32373F'; } } - }) + }); \ No newline at end of file diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts index ea2d4a6fd3a4106e6bf58d5403e2568fd2d5785b..6bf8f51fec2b298d82cd7dfccea42cea9f351d5a 100644 --- a/ide/src/trace/SpApplication.ts +++ b/ide/src/trace/SpApplication.ts @@ -365,7 +365,6 @@ export class SpApplication extends BaseElement { } private openLongTraceFile(ev: unknown, isRecordTrace: boolean = false): void { - const self = this; this.returnOriginalUrl(); this.wasm = true; this.openFileInit(true); @@ -387,9 +386,9 @@ export class SpApplication extends BaseElement { ): Promise => { const promises = Array.from(files).map((file) => { if (normalNames.indexOf(file.name.toLowerCase()) >= 0) { - return self.longTraceFileRead(file, true, traceTypePage, readSize, timStamp, allFileSize); + return this.longTraceFileRead(file, true, traceTypePage, readSize, timStamp, allFileSize); } else if (specialNames.indexOf(file.name.toLowerCase()) >= 0) { - return self.longTraceFileRead(file, false, traceTypePage, readSize, timStamp, allFileSize); + return this.longTraceFileRead(file, false, traceTypePage, readSize, timStamp, allFileSize); } else { return; } @@ -1173,7 +1172,8 @@ export class SpApplication extends BaseElement { Utils.distributedTrace.push(fileName2 || 'trace2'); this.litSearch!.setTraceSelectOptions(); } else { - (window as any).traceFileName = fileName; + //@ts-ignore + (window as unknown).traceFileName = fileName; } this.showCurrentTraceMenu(fileSize, showFileName, fileName, isDistributed); if (!isDistributed) { @@ -2020,11 +2020,11 @@ export class SpApplication extends BaseElement { this.spSystemTrace?.addEventListener('trace-previous-data', (ev) => { if (this.progressEL!.loading) { return; - } + } this.litSearch!.index = this.spSystemTrace!.showStruct(true, this.litSearch!.index, this.litSearch!.list); }); this.spSystemTrace?.addEventListener('trace-next-data', (ev) => { - if(this.progressEL!.loading) { + if (this.progressEL!.loading) { return; } this.litSearch!.index = this.spSystemTrace!.showStruct(false, this.litSearch!.index, this.litSearch!.list); @@ -2382,9 +2382,8 @@ export class SpApplication extends BaseElement { a.download = fileName; a.click(); this.itemIconLoading(mainMenu, 'Current Trace', 'Download Database', true); - const self = this; - let timer = setInterval(function () { - self.itemIconLoading(mainMenu, 'Current Trace', 'Download Database', false); + let timer = setInterval(()=> { + this.itemIconLoading(mainMenu, 'Current Trace', 'Download Database', false); clearInterval(timer); }, 4000); }, @@ -2410,10 +2409,9 @@ export class SpApplication extends BaseElement { a.download = fileName; a.click(); window.URL.revokeObjectURL(a.href); - const self = this; this.itemIconLoading(mainMenu, 'Current Trace', 'Download File', true); - let timer = setInterval(function () { - self.itemIconLoading(mainMenu, 'Current Trace', 'Download File', false); + let timer = setInterval(()=> { + this.itemIconLoading(mainMenu, 'Current Trace', 'Download File', false); clearInterval(timer); }, 4000); } diff --git a/ide/src/trace/bean/BoxSelection.ts b/ide/src/trace/bean/BoxSelection.ts index df88bba19ed13aa2cd3db7312e7aa6802ea19c79..8ba1149eb60e25a26f8f8ecf387176bd58891129 100644 --- a/ide/src/trace/bean/BoxSelection.ts +++ b/ide/src/trace/bean/BoxSelection.ts @@ -1129,7 +1129,8 @@ export class SelectionParam { } //匹配id - pushDmaFence(it: TraceRow, sp: SpSystemTrace): void { + // @ts-ignore + pushDmaFence(it: TraceRow, sp: SpSystemTrace): void { if (it.rowType === TraceRow.ROW_TYPE_DMA_FENCE) { this.dmaFenceNameData.push(it.rowId!); } @@ -1273,7 +1274,9 @@ export class SliceBoxJumpParam { processId: Array = []; threadId: Array = []; name: string[] | undefined | null; - isJumpPage: boolean | undefined + isJumpPage: boolean | undefined; + asyncNames: Array = []; + asyncCatNames: Array = []; } export class SelectionData { @@ -1307,7 +1310,9 @@ export class SelectionData { ts: number = 0; dur: number = 0; tabTitle: string = ''; - allName: string[] | undefined + allName: string[] | undefined; + asyncNames: Array = []; + asyncCatNames: Array = []; } export class Counter { diff --git a/ide/src/trace/component/SpFlags.ts b/ide/src/trace/component/SpFlags.ts index 2e031762dd8070185eb499a27ce184ce8ca43a08..1e527a0756e50e7daaed7b3d8f774f691a99c084 100644 --- a/ide/src/trace/component/SpFlags.ts +++ b/ide/src/trace/component/SpFlags.ts @@ -15,6 +15,21 @@ import { BaseElement, element } from '../../base-ui/BaseElement'; import { SpFlagHtml } from './SpFlag.html'; +const VSYNC_VAL = { + 'VsyncGeneratior': 'H:VsyncGenerator', + 'Vsync-rs': 'H:rs_SendVsync', + 'Vsync-app': 'H:app_SendVsync' +} + +const CAT_SORT = { + 'Business first': 'business', + 'Thread first': 'thread' +} + +const CONFIG_STATE = { + 'VSync': ['vsyncValue', 'VsyncGeneratior'], + 'Start&Finish Trace Category': ['catValue', 'Business first'] +} @element('sp-flags') export class SpFlags extends BaseElement { @@ -36,7 +51,7 @@ export class SpFlags extends BaseElement { configDiv.className = 'flag-widget'; return configDiv; } - + //控制按钮设置为'Disabled'时，我们需要给一个默认值 private createCustomDiv(config: FlagConfigItem, configDiv: HTMLDivElement): void { let configHadDiv = document.createElement('div'); configHadDiv.className = 'flag-head-div'; @@ -56,26 +71,7 @@ export class SpFlags extends BaseElement { configSelect.appendChild(configOption); }); configSelect.addEventListener('change', () => { - let title = configSelect.getAttribute('title'); - FlagsConfig.updateFlagsConfig(title!, configSelect.selectedOptions[0].value); - if (title === 'VSync' && configSelect.selectedOptions[0].value === 'Enabled') { - let vsyncSelect = this.shadowRoot?.querySelector('#vsyncSelect'); - vsyncSelect?.removeAttribute('disabled'); - } - if (title === 'VSync' && configSelect.selectedOptions[0].value === 'Disabled') { - let vsyncSelect = this.shadowRoot?.querySelector('#vsyncSelect'); - vsyncSelect?.childNodes.forEach((child: ChildNode) => { - let selectEl = child as HTMLOptionElement; - if (child.textContent === 'VsyncGenerator') { - selectEl.selected = true; - FlagsConfig.updateFlagsConfig('vsyncValue', selectEl.value); - } else { - selectEl.selected = false; - } - }); - - vsyncSelect?.setAttribute('disabled', 'disabled'); - } + this.flagSelectListener(configSelect); }); let description = document.createElement('div'); description.className = 'flag-des-div'; @@ -85,7 +81,30 @@ export class SpFlags extends BaseElement { configDiv.appendChild(configHadDiv); configDiv.appendChild(description); } + //监听flag-select的状态选择 + private flagSelectListener(configSelect: any): void { + let title = configSelect.getAttribute('title'); + let listSelect = this.shadowRoot?.querySelector(`#${CONFIG_STATE[title as keyof typeof CONFIG_STATE][0]}`); + FlagsConfig.updateFlagsConfig(title!, configSelect.selectedOptions[0].value); + if (CONFIG_STATE[title as keyof typeof CONFIG_STATE]) { + if (configSelect.selectedOptions[0].value === 'Enabled') { + listSelect?.removeAttribute('disabled'); + } else { + listSelect?.childNodes.forEach((child: ChildNode) => { + let selectEl = child as HTMLOptionElement; + if (child.textContent === CONFIG_STATE[title as keyof typeof CONFIG_STATE][1]) { + selectEl.selected = true; + FlagsConfig.updateFlagsConfig(CONFIG_STATE[title as keyof typeof CONFIG_STATE][0], selectEl.value); + } else { + selectEl.selected = false; + } + }); + listSelect?.setAttribute('disabled', 'disabled'); + } + } + } + //初始化Flag对应的内容 private initConfigList(): void { let allConfig = FlagsConfig.getAllFlagConfig(); allConfig.forEach((config) => { @@ -130,7 +149,14 @@ export class SpFlags extends BaseElement { } if (config.title === 'VSync') { - let configFooterDiv = this.createVsyncOption(); + let configKey = CONFIG_STATE['VSync' as keyof typeof CONFIG_STATE][0]; + let configFooterDiv = this.createPersonOption(VSYNC_VAL, configKey, config.addInfo!.vsyncValue, config.title); + configDiv.appendChild(configFooterDiv); + } + + if (config.title === 'Start&Finish Trace Category') { + let configKey = CONFIG_STATE['Start&Finish Trace Category' as keyof typeof CONFIG_STATE][0]; + let configFooterDiv = this.createPersonOption(CAT_SORT, configKey, config.addInfo!.catValue, config.title) configDiv.appendChild(configFooterDiv); } @@ -138,47 +164,38 @@ export class SpFlags extends BaseElement { }); } - private createVsyncOption(): HTMLDivElement { + private createPersonOption(list: any, key: string, defaultKey: string, parentOption: string): HTMLDivElement { let configFooterDiv = document.createElement('div'); configFooterDiv.className = 'config_footer'; let vsyncLableEl = document.createElement('lable'); - vsyncLableEl.className = 'vsync_lable'; + vsyncLableEl.className = 'list_lable'; let vsyncTypeEl = document.createElement('select'); - vsyncTypeEl.setAttribute('id', 'vsyncSelect'); + vsyncTypeEl.setAttribute('id', key); vsyncTypeEl.className = 'flag-select'; - let vsyncGenOption = document.createElement('option'); // VsyncGeneratior = H:VsyncGenerator - vsyncGenOption.value = 'H:VsyncGenerator'; - vsyncGenOption.textContent = 'VsyncGenerator'; - vsyncGenOption.selected = true; - vsyncTypeEl.appendChild(vsyncGenOption); - - let vsyncRsOption = document.createElement('option'); // Vsync-rs = H:rs_SendVsync - vsyncRsOption.value = 'H:rs_SendVsync'; - vsyncRsOption.textContent = 'Vsync-rs'; - vsyncTypeEl.appendChild(vsyncRsOption); - - let vsyncAppOption = document.createElement('option'); // Vsync-app = H:app_SendVsync - vsyncAppOption.value = 'H:app_SendVsync'; - vsyncAppOption.textContent = 'Vsync-app'; - vsyncTypeEl.appendChild(vsyncAppOption); - - FlagsConfig.updateFlagsConfig('vsyncValue', vsyncGenOption.value); + //根据给出的list遍历添加option下来选框 + for(let k of Object.keys(list)) { + let option = document.createElement('option'); // VsyncGeneratior = H:VsyncGenerator + option.value = list[k]; + option.textContent = k; + if (list[k] === defaultKey) { + option.selected = true; + FlagsConfig.updateFlagsConfig(key, option.value); + } + vsyncTypeEl.appendChild(option); + } vsyncTypeEl.addEventListener('change', function () { let selectValue = this.selectedOptions[0].value; - console.log(this); - console.log(this.selectedOptions[0]); - console.log(this.selectedOptions[0].value); - FlagsConfig.updateFlagsConfig('vsyncValue', selectValue); + FlagsConfig.updateFlagsConfig(key, selectValue); }); let flagsItem = window.localStorage.getItem(FlagsConfig.FLAGS_CONFIG_KEY); let flagsItemJson = JSON.parse(flagsItem!); - let vsync = flagsItemJson.VSync; + let vsync = flagsItemJson[parentOption]; if (vsync === 'Enabled') { vsyncTypeEl.removeAttribute('disabled'); } else { vsyncTypeEl.setAttribute('disabled', 'disabled'); - FlagsConfig.updateFlagsConfig('vsyncValue', vsyncGenOption.value); + FlagsConfig.updateFlagsConfig(key, defaultKey); } configFooterDiv.appendChild(vsyncLableEl); configFooterDiv.appendChild(vsyncTypeEl); @@ -233,6 +250,7 @@ export class FlagsConfig { title: 'VSync', switchOptions: [{ option: 'Enabled' }, { option: 'Disabled', selected: true }], describeContent: 'VSync Signal drawing', + addInfo: {vsyncValue: VSYNC_VAL['VsyncGeneratior'] }, }, { title: 'LTPO', @@ -243,6 +261,7 @@ export class FlagsConfig { title: 'Start&Finish Trace Category', switchOptions: [{ option: 'Enabled' }, { option: 'Disabled', selected: true }], describeContent: 'Asynchronous trace aggregation', + addInfo: {catValue: CAT_SORT['Business first'] }, }, { title: 'UserPluginsRow', @@ -353,6 +372,13 @@ export class FlagsConfig { } return enable; } + //获取Cat的二级下拉选框所选的内容 + static getSecondarySelectValue(value: string): string { + let list = window.localStorage.getItem(FlagsConfig.FLAGS_CONFIG_KEY); + let listJson = JSON.parse(list!); + let catSelectValue = listJson[value]; + return catSelectValue + } static updateFlagsConfig(key: string, value: unknown): void { let flagsConfigStr = window.localStorage.getItem(FlagsConfig.FLAGS_CONFIG_KEY); diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts index e3ea7723fb664ed5ce91a7851008d4516853a655..c9d040f17e12250e4ced6a8a1ffaf9a6d02492a8 100644 --- a/ide/src/trace/component/SpHelp.ts +++ b/ide/src/trace/component/SpHelp.ts @@ -278,7 +278,7 @@ export class SpHelp extends BaseElement { text: header.textContent!.trim() })); this.navbarContainer!.innerHTML = `