[tools][system-analyzer] Fix timeline zooming

Bug: v8:10644
Change-Id: Iff48e762fd895df63d599cf4663f8b6f44373a00
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3605241Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Victor Gomes <victorgomes@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/main@{#80160}

tools/system-analyzer/index.css

@@ -76,7 +76,7 @@ kbd, code, pre {
 }
 code {
   font-size: var(--code-font-size);
-  white-space: nowrap;
+  white-space: pre;
 }
 
 a {

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

@@ -238,21 +238,24 @@ export class TimelineTrackBase extends V8CustomElement {
     this._lastContentWidth = parseInt(this.timelineMarkersNode.style.width);
     this._timeToPixel = width / this._timeline.duration();
     this._timeStartPixelOffset = start * this._timeToPixel;
-    this.timelineChunks.style.width = `${width}px`;
+    this.$('#cropper').style.width = `${width}px`;
     this.timelineMarkersNode.style.width = `${width}px`;
     this.timelineAnnotationsNode.style.width = `${width}px`;
     this.hitPanelNode.style.width = `${width}px`;
+
+    const ratio = this._scaleContent(width) || 1;
     this._drawMarkers();
     this._selectionHandler.update();
-    this._scaleContent(width);
+
     this._cachedTimelineScrollLeft = this.timelineNode.scrollLeft =
         this.timeToPosition(time) - centerOffset;
   }
 
   _scaleContent(currentWidth) {
-    if (!this._lastContentWidth) return;
+    if (!this._lastContentWidth) return 1;
     const ratio = currentWidth / this._lastContentWidth;
     this._scalableContentNode.style.transform = `scale(${ratio}, 1)`;
+    return ratio;
   }
 
   _adjustHeight(height) {

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

@@ -84,6 +84,7 @@ export class TimelineTrackStackedBase extends TimelineTrackBase {
     const ratio = currentWidth / this._originalContentWidth;
     this._scalableContentNode.style.transform = `scale(${ratio}, 1)`;
     this.style.setProperty('--txt-scale', `scale(${1 / ratio}, 1)`);
+    return ratio;
   }
 
   async _drawContent() {

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

@@ -20,6 +20,11 @@ found in the LICENSE file. -->
     user-select: none;
   }
 
+  #cropper {
+    overflow: hidden;
+    position: relative;
+  }
+
   .dataSized {
     min-height: var(--data-height);
   }
@@ -226,12 +231,14 @@ found in the LICENSE file. -->
       <div id="selectionBackground"></div>
       <div id="rightHandle"></div>
     </div>
-    <svg id="timelineChunks" xmlns="http://www.w3.org/2000/svg" class="dataSized">
-      <g id="scalableContent"></g>
-    </svg>
-    <svg id="timelineAnnotations" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
-    <svg id="timelineMarkers" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
-    <div id="toolTipTarget"></div>
+    <div id="cropper" class="dataSized">
+      <svg id="timelineChunks" xmlns="http://www.w3.org/2000/svg" class="dataSized">
+        <g id="scalableContent"></g>
+      </svg>
+      <svg id="timelineAnnotations" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
+      <svg id="timelineMarkers" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
+      <div id="toolTipTarget"></div>
+    </div>
     <!-- Use a div element covering all complex items to prevent slow hit test-->
     <div id="hitPanel" class="dataSized"></div>
   </div>