From c68220b4e191d6ff59d8c75cea07d329ef3e3739 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Thu, 26 Nov 2020 18:02:36 +0100
Subject: [PATCH] [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                             |  4 ++++
 tools/system-analyzer/view/helper.mjs         | 12 +++++++++-
 .../view/source-panel-template.html           | 22 ++++++++++---------
 tools/system-analyzer/view/source-panel.mjs   |  7 +++---
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/tools/profile.mjs b/tools/profile.mjs
index b2e953f247..33ff22a5b0 100644
--- a/tools/profile.mjs
+++ b/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) {
diff --git a/tools/system-analyzer/view/helper.mjs b/tools/system-analyzer/view/helper.mjs
index 652c78b896..726366a5b4 100644
--- a/tools/system-analyzer/view/helper.mjs
+++ b/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;
diff --git a/tools/system-analyzer/view/source-panel-template.html b/tools/system-analyzer/view/source-panel-template.html
index 01b777042f..e87f53599f 100644
--- a/tools/system-analyzer/view/source-panel-template.html
+++ b/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>
diff --git a/tools/system-analyzer/view/source-panel.mjs b/tools/system-analyzer/view/source-panel.mjs
index aa56fdc0ab..1feff22692 100644
--- a/tools/system-analyzer/view/source-panel.mjs
+++ b/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;