zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-09-29 16:57:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix missing console.restore for interactions

Browse Source 
This CL fixes a case where the canvas would suddenly have its font drawn
in much larger sizes.

The code for interactions, if the text did not fit inside the container,
would early exit to avoid drawing the text. However, when it did this,
it stopped a `context.restore()` call from running, which left the
canvas state in a bad situation.

The fix here is to ensure we always restore the context. As a drive-by
improvement I also removed an extra set of restore() and save() calls,
so the entire `drawInteractionEventWithWhiskers` function is now only
creating and restoring one context.

Bug: none
Change-Id: I0e63b197c7023a59cac1ad7100bd02324381d0d3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4993226
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Nancy Li <nancyly@chromium.org>
Commit-Queue: Nancy Li <nancyly@chromium.org>
This commit is contained in:
Jack Franklin
2023-10-31 11:52:25 +00:00
committed by Devtools-frontend LUCI CQ
parent c29fa3e428
commit fa47345230
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/panels/timeline/TimelineFlameChartDataProvider.ts
+4 -6
View File
@@ -1226,7 +1226,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
context.fillRect(barX, barY - 0.5, desiredBoxStartX - barX, barHeight);
context.fillRect(desiredBoxEndX, barY - 0.5, entireBarEndXPixel - desiredBoxEndX, barHeight);
context.restore();
// Draws left and right whiskers
function drawTick(begin: number, end: number, y: number): void {
@@ -1241,7 +1240,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
const leftWhiskerX = timeToPixel(entry.ts);
// The right whisker ends at (entry.ts + entry.dur). We draw the line from the end of the box (processingEnd).
const rightWhiskerX = timeToPixel(TraceEngine.Types.Timing.MicroSeconds(entry.ts + entry.dur));
context.save();
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = '#ccc';
@@ -1259,6 +1257,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
// starts off-screen, we draw the text at the first visible on screen
// pixels, so the user can still see the event's title.
const textStartX = desiredBoxStartX > 0 ? desiredBoxStartX : barX;
context.font = this.#font;
const textWidth = UI.UIUtils.measureTextWidth(context, entryTitle);
// These numbers are duplicated from FlameChart.ts.
@@ -1266,11 +1265,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
const textBaseline = 5;
// Only draw the text if it can fit in the amount of box that is visible.
if (textWidth > desiredBoxEndX - textStartX + textPadding) {
return;
if (textWidth <= desiredBoxEndX - textStartX + textPadding) {
context.fillStyle = this.textColor(entryIndex);
context.fillText(entryTitle, textStartX + textPadding, barY + barHeight - textBaseline);
}
context.fillStyle = this.textColor(entryIndex);
context.fillText(entryTitle, textStartX + textPadding, barY + barHeight - textBaseline);
}
context.restore();
}