AuroraMiddleware/v8
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

[tools][system-analyzer] Fix timeline zooming

Browse Source 
Bug: v8:10644
Change-Id: Iff48e762fd895df63d599cf4663f8b6f44373a00
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3605241
Reviewed-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}
This commit is contained in:
Camillo Bruni 2022-04-25 09:59:52 +02:00 committed by V8 LUCI CQ
parent 1dc3b908f2
commit 69e7f23062
4 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/system-analyzer/index.css
View File

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

9
tools/system-analyzer/view/timeline/timeline-track-base.mjs
View File

@ -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) {

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

@ -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() {

19
tools/system-analyzer/view/timeline/timeline-track-template.html
View File

@ -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>