[tools][system-analyzer] Various fixes

- Fix processing lines that are longer than 1 chunk
- Add and use --code-font-size var
- Make minimum panel width 600px
- Track _lineNumber better Processor for easier debugging

Bug: v8:10644
Change-Id: I656e2ac5f0e9ba25ffa4b8c3ecc4b744144a691d
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3585568Reviewed-by: Igor Sheludko <ishell@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/main@{#79995}

tools/system-analyzer/index.css

 :root {
   --code-font: Consolas, Monaco, Menlo, monospace;
+  --code-font-size: 12px;
   --background-color: #000000;
   --surface-color-rgb: 18, 18, 18;
   --surface-color: rgb(var(--surface-color-rgb));
@@ -73,6 +74,10 @@ kbd {
 kbd, code, pre {
   font-family: var(--code-font);
 }
+code {
+  font-size: var(--code-font-size);
+  white-space: nowrap;
+}
 
 a {
   color: var(--primary-color);

tools/system-analyzer/index.html

@@ -34,7 +34,7 @@ found in the LICENSE file. -->
     .panels {
       display: grid;
       align-content: center;
-      grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
       grid-auto-flow: row dense;
       grid-gap: 10px;
       margin-top: 10px;

tools/system-analyzer/processor.mjs

@@ -58,7 +58,9 @@ export class Processor extends LogReader {
   _lastTimestamp = 0;
   _lastCodeLogEntry;
   _lastTickLogEntry;
+
   _chunkRemainder = '';
+  _lineNumber = 1;
 
   _totalInputBytes = 0;
   _processedInputChars = 0;
@@ -228,12 +230,11 @@ export class Processor extends LogReader {
     let current = 0;
     let next = 0;
     let line;
-    let lineNumber = 1;
     try {
       while (current < end) {
         next = chunk.indexOf('\n', current);
         if (next === -1) {
-          this._chunkRemainder = chunk.substring(current);
+          this._chunkRemainder += chunk.substring(current);
           break;
         }
         line = chunk.substring(current, next);
@@ -242,14 +243,14 @@ export class Processor extends LogReader {
           this._chunkRemainder = '';
         }
         current = next + 1;
-        lineNumber++;
+        this._lineNumber++;
         await this.processLogLine(line);
         this._processedInputChars = prevProcessedInputChars + current;
       }
       this._updateProgress();
     } catch (e) {
-      console.error(
-          `Could not parse log line ${lineNumber}, trying to continue: ${e}`);
+      console.error(`Could not parse log line ${
+          this._lineNumber}, trying to continue: ${e}`);
     }
   }
 

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

@@ -43,6 +43,6 @@ found in the LICENSE file. -->
     <h3>FeedbackVector</h3>
     <property-link-table id="feedbackVector"></property-link-table>
     <h3>Disassembly</h3>
-    <pre id="disassembly"></pre>
+    <code id="disassembly"></code>
   </div>
 </div>

tools/system-analyzer/view/property-link-table-template.html

@@ -43,6 +43,7 @@ h3 {
 
 .code {
   font-family: var(--code-font);
+  font-size: var(--code-font-size);
 }
 
 .footer {

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

@@ -8,6 +8,7 @@ found in the LICENSE file. -->
 <style>
   .scriptNode {
     font-family: var(--code-font);
+    font-size: var(--code-font-size);
   }
 
   .scriptNode span {