[tools] Fix system-analyzer source line numbers

Properly indent wrapper source lines so the source line numbers
are easily visible.

Change-Id: I25095ca3e15a8e953c6e826eb8594289a10aa41b
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2551105
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Shu-yu Guo <syg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#71439}

tools/profile.mjs

@@ -51,6 +51,10 @@ export class Script {
     this.lineToColumn = new Map();
   }
 
+  get length() {
+    return this.source.length;
+  }
+
   addSourcePosition(line, column, entry) {
     let sourcePosition = this.lineToColumn.get(line)?.get(column);
     if (sourcePosition === undefined) {

tools/system-analyzer/view/helper.mjs

@@ -100,7 +100,17 @@ class DOM {
     }
     return node;
   }
-
+  static span(classes) {
+    const node = document.createElement('span');
+    if (classes !== undefined) {
+      if (typeof classes === 'string') {
+        node.className = classes;
+      } else {
+        classes.forEach(cls => node.classList.add(cls));
+      }
+    }
+    return node;
+  }
   static table(className) {
     const node = document.createElement('table');
     if (className) node.className = className;

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

@@ -6,24 +6,26 @@ found in the LICENSE file. -->
   <link href="./index.css" rel="stylesheet">
 </head>
 <style>
-  pre.scriptNode {
-    white-space: pre-wrap;
+  .scriptNode {
+    font-family: Consolas, monospace;
   }
 
-  pre.scriptNode:before {
+  .scriptNode:before {
     counter-reset: sourceLineCounter;
   }
 
-  pre.scriptNode span {
-    counter-increment: sourceLineCounter;
+  .scriptNode span {
+    counter-increment: sourceLineCounter 1111;
+    text-indent: -3.5em;
+    padding-left: 3.5em;
+    display: block;
   }
 
-  pre.scriptNode span::before {
+  .scriptNode span::before {
     content: counter(sourceLineCounter) ": ";
+    width: 3.5em;
     display: inline-block;
-    width: 4em;
-    padding-left: auto;
-    margin-left: auto;
+    white-space: pre;
     text-align: right;
   }
 
@@ -49,6 +51,6 @@ found in the LICENSE file. -->
   <h2>Source Panel</h2>
   <select id="script-dropdown"></select>
   <div id="script" class="panelBody">
-    <pre class="scripNode"></pre>
+    <div class="scriptNode"></div>
   </div>
 </div>

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

@@ -78,7 +78,7 @@ DOM.defineCustomElement('view/source-panel',
       scriptNode = builder.createScriptNode();
       this._sourcePositionsToMarkNodes = builder.sourcePositionToMarkers;
     } else {
-      scriptNode = document.createElement('pre');
+      scriptNode = DOM.div();
       this._selectedMarkNodes = undefined;
     }
     const oldScriptNode = this.script.childNodes[1];
@@ -212,8 +212,7 @@ class LineBuilder {
   }
 
   createScriptNode() {
-    const scriptNode = document.createElement('pre');
-    scriptNode.classList.add('scriptNode');
+    const scriptNode = DOM.div('scriptNode');
     for (let [lineIndex, line] of lineIterator(this._script.source)) {
       scriptNode.appendChild(this._createLineNode(lineIndex, line));
     }
@@ -221,7 +220,7 @@ class LineBuilder {
   }
 
   _createLineNode(lineIndex, line) {
-    const lineNode = document.createElement('span');
+    const lineNode = DOM.span();
     let columnIndex = 0;
     for (const sourcePosition of this._sourcePositions.forLine(lineIndex)) {
       const nextColumnIndex = sourcePosition.column - 1;