[tools] System-analyzer select code related events

Prepare the system analyzer to be able to select events related to a
a single code log entry.

- Rename source-panel to script-script panel
- Update main index.css to support selects in the panel selection
  header

Bug: v8:10644
Change-Id: Ie8dd1839294687cb9e25995bcb7ef246a7d7f48d
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2604707
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#71948}

tools/system-analyzer/index.css

@@ -164,6 +164,11 @@ dd {
   background-color: var(--border-color);
 }
 
+.panel > .selection  select {
+  flex: 1;
+  width: 50%;
+}
+
 button {
   cursor: pointer;
 }

tools/system-analyzer/index.html

@@ -21,7 +21,6 @@ found in the LICENSE file. -->
       globalThis.app = new module.App();
     })();
   </script>
-
   <link rel="stylesheet" type="text/css" href="./index.css">
   <style>
     .theme-switch {
@@ -128,7 +127,7 @@ found in the LICENSE file. -->
       <list-panel id="deopt-list" title="Deopt Events"></list-panel>
       <list-panel id="code-list" title="Code Events"></list-panel>
       <list-panel id="api-list" title="API Events"></list-panel>
-      <source-panel id="source-panel"></source-panel>
+      <script-panel id="script-panel"></script-panel>
       <code-panel id="code-panel"></code-panel>
     </div>
   </section>

tools/system-analyzer/index.mjs

@@ -39,7 +39,7 @@ class App {
 
       mapPanel: $('#map-panel'),
       codePanel: $('#code-panel'),
-      sourcePanel: $('#source-panel'),
+      scriptPanel: $('#script-panel'),
 
       toolTip: $('#tool-tip'),
     };
@@ -57,7 +57,7 @@ class App {
       import('./view/list-panel.mjs'),
       import('./view/timeline-panel.mjs'),
       import('./view/map-panel.mjs'),
-      import('./view/source-panel.mjs'),
+      import('./view/script-panel.mjs'),
       import('./view/code-panel.mjs'),
       import('./view/tool-tip.mjs'),
     ]);
@@ -176,7 +176,7 @@ class App {
   }
 
   showSourcePositions(entries) {
-    this._view.sourcePanel.selectedSourcePositions = entries
+    this._view.scriptPanel.selectedSourcePositions = entries
   }
 
   handleTimeRangeSelect(e) {
@@ -280,7 +280,7 @@ class App {
       this._view.deoptList.timeline = deoptTimeline;
       this._view.codeList.timeline = codeTimeline;
       this._view.apiList.timeline = apiTimeline;
-      this._view.sourcePanel.scripts = processor.scripts;
+      this._view.scriptPanel.scripts = processor.scripts;
       this._view.codePanel.timeline = codeTimeline;
       this.refreshTimelineTrackView();
     } catch (e) {

tools/system-analyzer/processor.mjs

@@ -202,9 +202,6 @@ export class Processor extends LogReader {
 
   processCodeCreation(type, kind, timestamp, start, size, name, maybe_func) {
     this._lastTimestamp = timestamp;
-    if (timestamp == 5724567) {
-      console.log(start);
-    }
     let entry;
     let stateName = '';
     if (maybe_func.length) {

tools/system-analyzer/view/code-panel-template.html

@@ -12,7 +12,10 @@ found in the LICENSE file. -->
 </style>
 <div class="panel">
   <h2>Code Panel</h2>
-  <select id="codeSelect"></select>
+  <div class="selection">
+    <select id="codeSelect"></select>
+    <button id="selectedRelatedButton">Select Related Events</button>
+  </div>
   <div class="panelBody">
     <h3>Disassembly</h3>
     <pre id="disassembly"></pre>

tools/system-analyzer/view/code-panel.mjs

@@ -17,6 +17,8 @@ DOM.defineCustomElement('view/code-panel',
   constructor() {
     super(templateText);
     this._codeSelectNode.onchange = this._handleSelectCode.bind(this);
+    this.$('#selectedRelatedButton').onclick =
+        this._handleSelectRelated.bind(this)
   }
 
   set timeline(timeline) {
@@ -68,7 +70,13 @@ DOM.defineCustomElement('view/code-panel',
       select.add(option);
     }
   }
+
   _handleSelectCode() {
     this.entry = this._codeSelectNode.selectedOptions[0].data;
   }
+
+  _handleSelectRelated(e) {
+    if (!this._entry) return;
+    this.dispatchEvent(new SelectRelatedEvent(this._entry));
+  }
 });

tools/system-analyzer/view/script-panel-template.html

@@ -59,10 +59,6 @@ found in the LICENSE file. -->
       box-shadow: 0px 0px 0px 0px var(--secondary-color);
     }
   }
-  .selection select {
-    flex: 1;
-    width:50%;
-  }
 </style>
 <div class="panel">
   <h2>Source Panel</h2>

tools/system-analyzer/view/script-panel.mjs

@@ -6,7 +6,7 @@ import {groupBy} from '../helper.mjs';
 import {SelectRelatedEvent, ToolTipEvent} from './events.mjs';
 import {delay, DOM, formatBytes, V8CustomElement} from './helper.mjs';
 
-DOM.defineCustomElement('view/source-panel',
+DOM.defineCustomElement('view/script-panel',
                         (templateText) =>
                             class SourcePanel extends V8CustomElement {
   _selectedSourcePositions = [];
@@ -18,11 +18,8 @@ DOM.defineCustomElement('view/source-panel',
     super(templateText);
     this.scriptDropdown.addEventListener(
         'change', e => this._handleSelectScript(e));
-    this.$('#selectedRelatedButton').onclick = (e) => {
-      if (this._script) {
-        this.dispatchEvent(new SelectRelatedEvent(this._script));
-      }
-    }
+    this.$('#selectedRelatedButton').onclick =
+        this._handleSelectRelated.bind(this);
   }
 
   get script() {
@@ -121,6 +118,11 @@ DOM.defineCustomElement('view/source-panel',
     this.script = option.script;
   }
 
+  _handleSelectRelated(e) {
+    if (!this._script) return;
+    this.dispatchEvent(new SelectRelatedEvent(this._script));
+  }
+
   handleSourcePositionClick(e) {
     const sourcePosition = e.target.sourcePosition;
     this.dispatchEvent(new SelectRelatedEvent(sourcePosition));