diff --git a/tools/system-analyzer/ic-panel.mjs b/tools/system-analyzer/ic-panel.mjs index d11bf14356..24c5c2ae9b 100644 --- a/tools/system-analyzer/ic-panel.mjs +++ b/tools/system-analyzer/ic-panel.mjs @@ -11,7 +11,7 @@ defineCustomElement('ic-panel', (templateText) => super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = templateText; - this.groupKeySelect.addEventListener( + this.groupKey.addEventListener( 'change', e => this.updateTable(e)); this.$('#filterICTimeBtn').addEventListener( 'click', e => this.handleICTimeFilter(e)); @@ -36,19 +36,19 @@ defineCustomElement('ic-panel', (templateText) => return this._entries; } - get groupKeySelect() { + get groupKey() { return this.$('#group-key'); } - get tableSelect() { + get table() { return this.$('#table'); } - get tableBodySelect() { + get tableBody() { return this.$('#table-body'); } - get countSelect() { + get count() { return this.$('#count'); } @@ -79,12 +79,12 @@ defineCustomElement('ic-panel', (templateText) => } updateTable(event) { - let select = this.groupKeySelect; + let select = this.groupKey; let key = select.options[select.selectedIndex].text; - let tableBody = this.tableBodySelect; + let tableBody = this.tableBody; this.removeAllChildren(tableBody); let groups = Group.groupBy(this.filteredEntries, key, true); - this.display(groups, tableBody); + this.render(groups, tableBody); //TODO(zcankara) do not send an event here, filtering will done outside this.dispatchEvent(new CustomEvent( 'change', {bubbles: true, composed: true, detail: this.filteredEntries})); @@ -134,7 +134,7 @@ defineCustomElement('ic-panel', (templateText) => return this._noOfItems; } - display(entries, parent) { + render(entries, parent) { let fragment = document.createDocumentFragment(); //let max = entries.length; let max = Math.min(1000, entries.length) @@ -160,7 +160,7 @@ defineCustomElement('ic-panel', (templateText) => } - displayDrilldown(entry, previousSibling) { + renderDrilldown(entry, previousSibling) { let tr = document.createElement('tr'); tr.className = "entry-details"; tr.style.display = "none"; @@ -169,21 +169,21 @@ defineCustomElement('ic-panel', (templateText) => let td = document.createElement("td"); td.colSpan = 3; for (let key in entry.groups) { - td.appendChild(this.displayDrilldownGroup(entry, key)); + td.appendChild(this.renderDrilldownGroup(entry, key)); } tr.appendChild(td); // Append the new TR after previousSibling. previousSibling.parentNode.insertBefore(tr, previousSibling.nextSibling) } - displayDrilldownGroup(entry, key) { + renderDrilldownGroup(entry, key) { let max = 20; let group = entry.groups[key]; let div = document.createElement("div") div.className = 'drilldown-group-title' div.textContent = key + ' [top ' + max + ' out of ' + group.length + ']'; let table = document.createElement("table"); - this.display(group.slice(0, max), table, false) + this.render(group.slice(0, max), table, false) div.appendChild(table); return div; } @@ -194,7 +194,7 @@ defineCustomElement('ic-panel', (templateText) => // Create subgroup in-place if the don't exist yet. if (entry.groups === undefined) { entry.createSubGroups(); - this.displayDrilldown(entry, tr); + this.renderDrilldown(entry, tr); } let details = tr.nextSibling; let display = details.style.display; @@ -207,7 +207,7 @@ defineCustomElement('ic-panel', (templateText) => } initGroupKeySelect() { - let select = this.groupKeySelect; + let select = this.groupKey; select.options.length = 0; for (let i in CustomIcProcessor.kProperties) { let option = document.createElement("option"); diff --git a/tools/system-analyzer/index.mjs b/tools/system-analyzer/index.mjs index 76e2832386..d182e24eab 100644 --- a/tools/system-analyzer/index.mjs +++ b/tools/system-analyzer/index.mjs @@ -72,8 +72,7 @@ function loadFileIC(file) { icProcessor.processString(this.result); let entries = icProcessor.entries; $("ic-panel").entries = entries; - $("ic-panel").countSelect.innerHTML = entries.length; - $("ic-panel").updateTable(entries); + $("ic-panel").count.innerHTML = entries.length; } reader.readAsText(file); $("ic-panel").initGroupKeySelect(); diff --git a/tools/system-analyzer/map-model.mjs b/tools/system-analyzer/map-model.mjs index 286fc02e89..3b13a2072f 100644 --- a/tools/system-analyzer/map-model.mjs +++ b/tools/system-analyzer/map-model.mjs @@ -206,7 +206,7 @@ class View { setInterval(this.updateOverviewWindow(timelinePanelId), 50); this.backgroundCanvas = document.createElement('canvas'); this.transitionView = - new TransitionView(state, this.mapPanel_.transitionViewSelect); + new TransitionView(state, this.mapPanel_.transitionView); this.isLocked = false; this._filteredEntries = []; } @@ -231,12 +231,12 @@ class View { details += '\nSource location: ' + this.map.filePosition; details += '\n' + this.map.description; } - this.mapPanel_.mapDetailsSelect.innerText = details; + this.mapPanel_.mapDetails.innerText = details; this.transitionView.showMap(this.map); } updateTimeline() { - let chunksNode = this.timelinePanel_.timelineChunksSelect; + let chunksNode = this.timelinePanel_.timelineChunks; removeAllChildren(chunksNode); let chunks = this.chunks; let max = chunks.max(each => each.size()); @@ -355,15 +355,14 @@ class View { node.style.backgroundImage = 'url(' + imageData + ')'; } - updateOverviewWindow(timelinePanelId) { - let indicator = this.timelinePanel_.timelineOverviewIndicatorSelect; + updateOverviewWindow() { + let indicator = this.timelinePanel_.timelineOverviewIndicator; let totalIndicatorWidth = - this.timelinePanel_.timelineOverviewSelect.offsetWidth; - let div = this.timelinePanel_.timelineSelect; + this.timelinePanel_.timelineOverview.offsetWidth; + let div = this.timelinePanel_.timeline; let timelineTotalWidth = - this.timelinePanel_.timelineCanvasSelect.offsetWidth; - let factor = this.timelinePanel_.timelineOverviewSelect.offsetWidth / - timelineTotalWidth; + this.timelinePanel_.timelineCanvas.offsetWidth; + let factor = totalIndicatorWidth / timelineTotalWidth; let width = div.offsetWidth * factor; let left = div.scrollLeft * factor; indicator.style.width = width + 'px'; @@ -393,12 +392,12 @@ class View { ctx.closePath(); ctx.fill(); let imageData = canvas.toDataURL('image/webp', 0.2); - this.timelinePanel_.timelineOverviewSelect.style.backgroundImage = + this.timelinePanel_.timelineOverview.style.backgroundImage = 'url(' + imageData + ')'; } redraw() { - let canvas = this.timelinePanel_.timelineCanvasSelect; + let canvas = this.timelinePanel_.timelineCanvas; canvas.width = (this.chunks.length + 1) * kChunkWidth; canvas.height = kChunkHeight; let ctx = canvas.getContext('2d'); diff --git a/tools/system-analyzer/map-panel.mjs b/tools/system-analyzer/map-panel.mjs index 0f1a2881bf..a30f09a051 100644 --- a/tools/system-analyzer/map-panel.mjs +++ b/tools/system-analyzer/map-panel.mjs @@ -10,7 +10,7 @@ defineCustomElement('map-panel', (templateText) => super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = templateText; - this.transitionViewSelect.addEventListener( + this.transitionView.addEventListener( 'mousemove', e => this.handleTransitionViewChange(e)); this.$('#searchBarBtn').addEventListener( 'click', e => this.handleSearchBar(e)); @@ -24,49 +24,47 @@ defineCustomElement('map-panel', (templateText) => return this.shadowRoot.querySelectorAll(query); } - get transitionViewSelect() { + get transitionView() { return this.$('#transitionView'); } - get searchBarSelect() { + get searchBar() { return this.$('#searchBar'); } - get mapDetailsSelect() { + get mapDetails() { return this.$('#mapDetails'); } - get tooltipSelect() { + get tooltip() { return this.$('#tooltip'); } - get tooltipContentsSelect() { - return this.$('#tooltipContents'); - } - get tooltipContentsSelect() { + + get tooltipContents() { return this.$('#tooltipContents'); } - get statsPanelSelect() { + get statsPanel() { return this.$('#stats-panel'); } // send a timeline to the stats-panel get timeline() { - return this.statsPanelSelect.timeline; + return this.statsPanel.timeline; } set timeline(value) { console.assert(value !== undefined, "timeline undefined!"); - this.statsPanelSelect.timeline = value; - this.statsPanelSelect.update(); + this.statsPanel.timeline = value; + this.statsPanel.update(); } handleTransitionViewChange(e){ - this.tooltipSelect.style.left = e.pageX + "px"; - this.tooltipSelect.style.top = e.pageY + "px"; + this.tooltip.style.left = e.pageX + "px"; + this.tooltip.style.top = e.pageY + "px"; let map = e.target.map; if (map) { - this.tooltipContentsSelect.innerText = map.description; + this.tooltipContents.innerText = map.description; } } diff --git a/tools/system-analyzer/stats-panel.mjs b/tools/system-analyzer/stats-panel.mjs index 8b3ca39447..91b43744e2 100644 --- a/tools/system-analyzer/stats-panel.mjs +++ b/tools/system-analyzer/stats-panel.mjs @@ -20,7 +20,7 @@ defineCustomElement('stats-panel', (templateText) => return this.shadowRoot.querySelectorAll(query); } - get statsSelect() { + get stats() { return this.$('#stats'); } @@ -49,7 +49,7 @@ defineCustomElement('stats-panel', (templateText) => } update() { - this.removeAllChildren(this.statsSelect); + this.removeAllChildren(this.stats); this.updateGeneralStats(); this.updateNamedTransitionsStats(); } @@ -105,7 +105,7 @@ defineCustomElement('stats-panel', (templateText) => row.appendChild(td(percent.toFixed(1) + '%')); tableNode.appendChild(row); }); - this.statsSelect.appendChild(tableNode); + this.stats.appendChild(tableNode); } updateNamedTransitionsStats() { @@ -126,6 +126,6 @@ defineCustomElement('stats-panel', (templateText) => row.appendChild(td(maps.length)); tableNode.appendChild(row); }); - this.statsSelect.appendChild(tableNode); + this.stats.appendChild(tableNode); } }); diff --git a/tools/system-analyzer/timeline-panel.mjs b/tools/system-analyzer/timeline-panel.mjs index ddc40875d5..206806a58e 100644 --- a/tools/system-analyzer/timeline-panel.mjs +++ b/tools/system-analyzer/timeline-panel.mjs @@ -8,7 +8,7 @@ defineCustomElement('timeline-panel', (templateText) => super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = templateText; - this.timelineOverviewSelect.addEventListener( + this.timelineOverview.addEventListener( 'mousemove', e => this.handleTimelineIndicatorMove(e)); } @@ -21,32 +21,32 @@ defineCustomElement('timeline-panel', (templateText) => return this.shadowRoot.querySelectorAll(query); } - get timelineOverviewSelect() { + get timelineOverview() { return this.$('#timelineOverview'); } - get timelineOverviewIndicatorSelect() { + get timelineOverviewIndicator() { return this.$('#timelineOverviewIndicator'); } - get timelineCanvasSelect() { + get timelineCanvas() { return this.$('#timelineCanvas'); } - get timelineChunksSelect() { + get timelineChunks() { return this.$('#timelineChunks'); } - get timelineSelect() { + get timeline() { return this.$('#timeline'); } handleTimelineIndicatorMove(event) { if (event.buttons == 0) return; - let timelineTotalWidth = this.timelineCanvasSelect.offsetWidth; - let factor = this.timelineOverviewSelect.offsetWidth / timelineTotalWidth; - this.timelineSelect.scrollLeft += event.movementX / factor; + let timelineTotalWidth = this.timelineCanvas.offsetWidth; + let factor = this.timelineOverview.offsetWidth / timelineTotalWidth; + this.timeline.scrollLeft += event.movementX / factor; } });