[tools][system-analyzer] Vertically scale flamecharts

- Dynamically adjust timeline-tracks height
- Use CSS-vars for timeline view and data heights
- Introduce syncronous File.read for FireFox again
- Prepare for fixed-scaled SVG text

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

tools/system-analyzer/view/log-file-reader.mjs

 // Copyright 2020 the V8 project authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import {delay} from '../helper.mjs';
 import {DOM, V8CustomElement} from './helper.mjs';
 
 DOM.defineCustomElement('view/log-file-reader',
@@ -58,33 +59,53 @@ DOM.defineCustomElement('view/log-file-reader',
     return this.$('#root');
   }
 
-  async readFile(file) {
+  readFile(file) {
     if (!file) {
       this.error = 'Failed to load file.';
       return;
     }
     this.fileReader.blur();
     this.root.className = 'loading';
+    this.asyncReadFile(file);
+  }
+
+  async asyncReadFile(file) {
+    // Delay the loading a bit to allow for CSS animations to happen.
+    await delay(5);
+    const decoder = globalThis.TextDecoderStream;
+    if (decoder) {
+      await this._streamFile(file, decoder);
+    } else {
+      await this._readFullFile(file);
+    }
+    this._updateLabel(`Finished loading '${file.name}'.`);
+    this.dispatchEvent(
+        new CustomEvent('fileuploadend', {bubbles: true, composed: true}));
+    this.root.className = 'done';
+  }
 
-    const stream = file.stream().pipeThrough(new TextDecoderStream());
+  async _readFullFile(file) {
+    const text = await file.text();
+    this._handleFileChunk(text)
+  }
+
+  async _streamFile(file, decoder) {
+    const stream = file.stream().pipeThrough(new decoder());
     const reader = stream.getReader();
     let chunk, readerDone;
     do {
       const readResult = await reader.read();
       chunk = readResult.value;
       readerDone = readResult.done;
-      if (!chunk) continue;
-
-      this.dispatchEvent(new CustomEvent('fileuploadchunk', {
-        bubbles: true,
-        composed: true,
-        detail: chunk,
-      }));
+      if (chunk) this._handleFileChunk(chunk);
     } while (!readerDone);
+  }
 
-    this._updateLabel(`Finished loading '${file.name}'.`);
-    this.dispatchEvent(
-        new CustomEvent('fileuploadend', {bubbles: true, composed: true}));
-    this.root.className = 'done';
+  _handleFileChunk(chunk) {
+    this.dispatchEvent(new CustomEvent('fileuploadchunk', {
+      bubbles: true,
+      composed: true,
+      detail: chunk,
+    }));
   }
 });

tools/system-analyzer/view/timeline/timeline-track-base.mjs

@@ -196,8 +196,10 @@ export class TimelineTrackBase extends V8CustomElement {
   }
 
   _adjustHeight(height) {
-    this.querySelectorAll('.dataSized')
-        .forEach(node => {node.style.height = height + 'px'});
+    const dataHeight = Math.max(height, 200);
+    const viewHeight = Math.min(dataHeight, 400);
+    this.style.setProperty('--data-height', dataHeight + 'px');
+    this.style.setProperty('--view-height', viewHeight + 'px');
     this.timelineNode.style.overflowY =
         (height > kTimelineHeight) ? 'scroll' : 'hidden';
   }

tools/system-analyzer/view/timeline/timeline-track-template.html

@@ -6,26 +6,22 @@ found in the LICENSE file. -->
   <link href="./index.css" rel="stylesheet">
 </head>
 <style>
+  :host {
+    --view-height: 200px;
+    --data-height: 200px;
+    --text-scale: scale(1, 1);
+  }
+
   #timeline {
     position: relative;
-    height: calc(200px + 12px);
+    height: calc(var(--view-height) + 12px);
     overflow-y: hidden;
     overflow-x: scroll;
     user-select: none;
   }
 
-  #timelineLabel {
-    transform: rotate(90deg);
-    transform-origin: left bottom 0;
-    position: absolute;
-    left: 0;
-    width: 200px;
-    text-align: center;
-    font-size: 10px;
-    opacity: 0.5;
-  }
   .dataSized {
-    min-height: 200px;
+    min-height: var(--data-height);
   }
 
   #timelineSamples, #timelineChunks,
@@ -70,7 +66,7 @@ found in the LICENSE file. -->
   .timelineLegend {
     position: relative;
     float: right;
-    height: calc(200px + 12px);
+    height: calc(var(--view-height) + 12px);
     overflow-y: scroll;
     margin-right: -10px;
     padding-right: 2px;
@@ -161,6 +157,7 @@ found in the LICENSE file. -->
   /* SVG styles */
   .txt {
     font: 8px monospace;
+    transform: var(--txt-scale);
   }
   .annotationLabel {
     fill: var(--on-surface-color);
@@ -211,7 +208,6 @@ found in the LICENSE file. -->
       <div id="selectionBackground"></div>
       <div id="rightHandle"></div>
     </div>
-    <div id="timelineLabel">Frequency</div>
     <svg id="timelineChunks" xmlns="http://www.w3.org/2000/svg" class="dataSized">
       <g id="scalableContent"></g>
     </svg>

tools/system-analyzer/view/timeline/timeline-track-tick.mjs

@@ -164,11 +164,11 @@ DOM.defineCustomElement('view/timeline/timeline-track', 'timeline-track-tick',
   }
 
   _scaleContent(currentWidth) {
-    if (this._originalContentWidth > 0) {
-      // Instead of repainting just scale the flames
-      const ratio = currentWidth / this._originalContentWidth;
-      this._scalableContentNode.style.transform = `scale(${ratio}, 1)`;
-    }
+    if (this._originalContentWidth == 0) return;
+    // Instead of repainting just scale the flames
+    const ratio = currentWidth / this._originalContentWidth;
+    this._scalableContentNode.style.transform = `scale(${ratio}, 1)`;
+    this.style.setProperty('--txt-scale', `scale(${1 / ratio}, 1)`);
   }
 
   async _drawContent() {
@@ -219,7 +219,7 @@ DOM.defineCustomElement('view/timeline/timeline-track', 'timeline-track-tick',
 
     let buffer = '';
     if (width < 15 || type == 'Other') return buffer;
-    const rawName = flame.entry.getRawName();
+    const rawName = flame.entry.getName();
     if (rawName.length == 0) return buffer;
     const kChartWidth = 5;
     const maxChars = Math.floor(width / kChartWidth)