[tools][system-analyzer] Change naming of panels

This CL establishes a naming convention
to increase readability of the code.

Bug: v8:10667, v8:10644

Change-Id: Id9fc9c558ba3957132b5a09aa975f9e8873c9dfd
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2297475
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#68869}

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");

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();

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');

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;
     }
   }
 

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);
   }
 });

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;
   }
 
 });