[system-analyzer] More fixes

  - Fix inline script line nos
  * Change the map source pos panel to a table
  3. Fix script sorting to not crash on missing name

Change-Id: I250c830f4be5f734a9489622ce162615bf80aab7
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2964606
Auto-Submit: Leszek Swirski <leszeks@chromium.org>
Commit-Queue: Leszek Swirski <leszeks@chromium.org>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#75279}

tools/system-analyzer/view/map-panel/map-details-template.html

@@ -15,5 +15,5 @@ found in the LICENSE file. -->
     white-space: pre;
   }
 </style>
-<section id="filePositionNode"></section>
+<section id="mapProperties"></section>
 <section id="mapDetails"></section>

tools/system-analyzer/view/map-panel/map-details.mjs

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import {FocusEvent} from '../events.mjs';
+import {ExpandableText} from '../helper.mjs';
 import {DOM, V8CustomElement} from '../helper.mjs';
 
 DOM.defineCustomElement(
@@ -11,15 +12,14 @@ DOM.defineCustomElement(
 
       constructor() {
         super(templateText);
-        this._filePositionNode.onclick = e => this._handleFilePositionClick(e);
       }
 
       get _mapDetails() {
         return this.$('#mapDetails');
       }
 
-      get _filePositionNode() {
-        return this.$('#filePositionNode');
+      get _mapProperties() {
+        return this.$('#mapProperties');
       }
 
       set map(map) {
@@ -29,19 +29,32 @@ DOM.defineCustomElement(
       }
 
       _update() {
-        let details = '';
-        let clickableDetails = '';
+        this._mapProperties.innerText = '';
         if (this._map) {
-          clickableDetails = `ID: ${this._map.id}`;
-          clickableDetails += `\nSource location: ${this._map.filePosition}`;
-          details = this._map.description;
+          let clickableDetailsTable = DOM.table('properties');
+
+          {
+            const row = clickableDetailsTable.insertRow();
+            row.insertCell().innerText = 'ID';
+            row.insertCell().innerText = `${this._map.id}`;
+          }
+          {
+            const row = clickableDetailsTable.insertRow();
+            row.insertCell().innerText = 'Source location';
+            const sourceLocation = row.insertCell();
+            new ExpandableText(sourceLocation, `${this._map.sourcePosition}`);
+            sourceLocation.className = 'clickable';
+            sourceLocation.onclick = e => this._handleSourcePositionClick(e);
+          }
+
+          this._mapProperties.appendChild(clickableDetailsTable);
+          this._mapDetails.innerText = this._map.description;
+        } else {
+          this._mapDetails.innerText = '';
         }
-        this._filePositionNode.innerText = clickableDetails;
-        this._filePositionNode.classList.add('clickable');
-        this._mapDetails.innerText = details;
       }
 
-      _handleFilePositionClick(event) {
+      _handleSourcePositionClick(event) {
         this.dispatchEvent(new FocusEvent(this._map.sourcePosition));
       }
     });

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

@@ -10,10 +10,6 @@ found in the LICENSE file. -->
     font-family: Consolas, monospace;
   }
 
-  .scriptNode:before {
-    counter-reset: sourceLineCounter;
-  }
-
   .scriptNode span {
     counter-increment: sourceLineCounter 1;
     text-indent: -3.5em;

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

@@ -63,7 +63,7 @@ DOM.defineCustomElement('view/script-panel',
   }
 
   _initializeScriptDropdown() {
-    this._scripts.sort((a, b) => a.name.localeCompare(b.name));
+    this._scripts.sort((a, b) => a.name?.localeCompare(b.name) ?? 0);
     let select = this.scriptDropdown;
     select.options.length = 0;
     for (const script of this._scripts) {
@@ -245,6 +245,7 @@ class LineBuilder {
         break;
       }
     }
+    scriptNode.style.counterReset = `sourceLineCounter ${startLine - 1}`;
     for (let [lineIndex, line] of lineIterator(
              this._script.source, startLine)) {
       scriptNode.appendChild(this._createLineNode(lineIndex, line));