From 0cee302e580aec51eebf9ab0d59faa7c223a930f Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Sat, 25 Nov 2023 20:19:50 -0500 Subject: [PATCH] Only set fillStyle once in drawSamples. Move the fillStyle setting outside of a loop in the SampleGraph implementation. This was likely moved by mistake in f8631ae9aef33000f88ce0a81bec48344a08a7ce . And don't set the fillStyle at all if there's nothing to draw with this color. --- src/components/shared/thread/HeightGraph.js | 3 + src/components/shared/thread/SampleGraph.js | 5 +- .../__snapshots__/CPUGraph.test.js.snap | 8 -- .../__snapshots__/SampleGraph.test.js.snap | 28 ------ .../ThreadActivityGraph.test.js.snap | 88 ------------------- .../__snapshots__/TrackThread.test.js.snap | 8 -- 6 files changed, 7 insertions(+), 133 deletions(-) diff --git a/src/components/shared/thread/HeightGraph.js b/src/components/shared/thread/HeightGraph.js index 99ffbd3173..538b395e9e 100644 --- a/src/components/shared/thread/HeightGraph.js +++ b/src/components/shared/thread/HeightGraph.js @@ -190,6 +190,9 @@ export class ThreadHeightGraph extends PureComponent { xPos: number[], }; function drawSamples(samplesBucket: SamplesBucket, color: string) { + if (samplesBucket.xPos.length === 0) { + return; + } ctx.fillStyle = color; for (let i = 0; i < samplesBucket.height.length; i++) { const height = samplesBucket.height[i]; diff --git a/src/components/shared/thread/SampleGraph.js b/src/components/shared/thread/SampleGraph.js index e4d658d965..5a73559b6b 100644 --- a/src/components/shared/thread/SampleGraph.js +++ b/src/components/shared/thread/SampleGraph.js @@ -174,8 +174,11 @@ export class ThreadSampleGraphImpl extends PureComponent { } function drawSamples(samplePositions: number[], color: string) { + if (samplePositions.length === 0) { + return; + } + ctx.fillStyle = color; for (let i = 0; i < samplePositions.length; i++) { - ctx.fillStyle = color; const startY = 0; const xPos = samplePositions[i]; ctx.fillRect(xPos, startY, drawnSampleWidth, canvas.height); diff --git a/src/test/components/__snapshots__/CPUGraph.test.js.snap b/src/test/components/__snapshots__/CPUGraph.test.js.snap index 56d0efb730..c3e03bc122 100644 --- a/src/test/components/__snapshots__/CPUGraph.test.js.snap +++ b/src/test/components/__snapshots__/CPUGraph.test.js.snap @@ -2,10 +2,6 @@ exports[`CPUGraph matches the 2d canvas draw snapshot 1`] = ` Array [ - Array [ - "set fillStyle", - "#45a1ff", - ], Array [ "set fillStyle", "#003eaa", @@ -66,10 +62,6 @@ Array [ 10, 0, ], - Array [ - "set fillStyle", - "#c5e1fe", - ], Array [ "clearRect", 0, diff --git a/src/test/components/__snapshots__/SampleGraph.test.js.snap b/src/test/components/__snapshots__/SampleGraph.test.js.snap index 062f0f241f..847abd8b71 100644 --- a/src/test/components/__snapshots__/SampleGraph.test.js.snap +++ b/src/test/components/__snapshots__/SampleGraph.test.js.snap @@ -24,10 +24,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 5, @@ -35,10 +31,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 15, @@ -46,10 +38,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 25, @@ -57,10 +45,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 35, @@ -68,10 +52,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 45, @@ -79,10 +59,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 55, @@ -90,10 +66,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 65, diff --git a/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap b/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap index 049eb95786..c58a66efdc 100644 --- a/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap +++ b/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap @@ -2541,10 +2541,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 5, @@ -2552,10 +2548,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 15, @@ -2563,10 +2555,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 25, @@ -2574,10 +2562,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 35, @@ -2585,10 +2569,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 45, @@ -2596,10 +2576,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 55, @@ -2607,10 +2583,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 65, @@ -5189,10 +5161,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 5, @@ -5200,10 +5168,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 15, @@ -5211,10 +5175,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 25, @@ -5222,10 +5182,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 35, @@ -5233,10 +5189,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 45, @@ -5244,10 +5196,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 55, @@ -5255,10 +5203,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 65, @@ -7837,10 +7781,6 @@ Array [ 6.666666666666667, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 3.3333333333333335, @@ -7848,10 +7788,6 @@ Array [ 6.666666666666667, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 10, @@ -7859,10 +7795,6 @@ Array [ 6.666666666666667, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 43.333333333333336, @@ -7870,10 +7802,6 @@ Array [ 6.666666666666667, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 50, @@ -7881,10 +7809,6 @@ Array [ 6.666666666666667, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 56.666666666666664, @@ -7892,10 +7816,6 @@ Array [ 6.666666666666667, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 63.333333333333336, @@ -7903,10 +7823,6 @@ Array [ 6.666666666666667, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 70.00000000000001, @@ -10042,10 +9958,6 @@ Array [ 10, 10, ], - Array [ - "set fillStyle", - "#003eaa", - ], Array [ "fillRect", 35, diff --git a/src/test/components/__snapshots__/TrackThread.test.js.snap b/src/test/components/__snapshots__/TrackThread.test.js.snap index 38eb8454ee..ef21171122 100644 --- a/src/test/components/__snapshots__/TrackThread.test.js.snap +++ b/src/test/components/__snapshots__/TrackThread.test.js.snap @@ -2,10 +2,6 @@ exports[`timeline/TrackThread matches the 2d canvas draw snapshot 1`] = ` Array [ - Array [ - "set fillStyle", - "#45a1ff", - ], Array [ "set fillStyle", "#003eaa", @@ -38,10 +34,6 @@ Array [ 100, 50, ], - Array [ - "set fillStyle", - "#c5e1fe", - ], Array [ "clearRect", 0,