From 2789ddf7c23279faaced92148fdc6a8f0cbbca5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Fri, 8 Oct 2021 16:42:45 +0200 Subject: [PATCH 1/2] Remove the getBoundingClientRect call from SampleGraph --- src/components/shared/thread/SampleGraph.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/shared/thread/SampleGraph.js b/src/components/shared/thread/SampleGraph.js index f23db79579..5145eb3e04 100644 --- a/src/components/shared/thread/SampleGraph.js +++ b/src/components/shared/thread/SampleGraph.js @@ -13,6 +13,7 @@ import { getSampleIndexClosestToCenteredTime, } from 'firefox-profiler/profile-logic/profile-data'; import { bisectionRight } from 'firefox-profiler/utils/bisect'; +import { withSize } from 'firefox-profiler/components/shared/WithSize'; import { BLUE_70, BLUE_40 } from 'photon-colors'; import './SampleGraph.css'; @@ -25,6 +26,7 @@ import type { CallNodeInfo, IndexIntoCallNodeTable, } from 'firefox-profiler/types'; +import type { SizeProps } from 'firefox-profiler/components/shared/WithSize'; type Props = {| +className: string, @@ -41,9 +43,10 @@ type Props = {| sampleIndex: IndexIntoSamplesTable ) => void, +trackName: string, + ...SizeProps, |}; -export class ThreadSampleGraph extends PureComponent { +export class ThreadSampleGraphImpl extends PureComponent { _canvas: null | HTMLCanvasElement = null; _resizeListener: () => void; _takeCanvasRef = (canvas: HTMLCanvasElement | null) => @@ -78,14 +81,15 @@ export class ThreadSampleGraph extends PureComponent { callNodeInfo, selectedCallNodeIndex, categories, + width, + height, } = this.props; const devicePixelRatio = canvas.ownerDocument ? canvas.ownerDocument.defaultView.devicePixelRatio : 1; - const rect = canvas.getBoundingClientRect(); - canvas.width = Math.round(rect.width * devicePixelRatio); - canvas.height = Math.round(rect.height * devicePixelRatio); + canvas.width = Math.round(width * devicePixelRatio); + canvas.height = Math.round(height * devicePixelRatio); const ctx = canvas.getContext('2d'); let maxDepth = 0; const { callNodeTable, stackIndexToCallNodeIndex } = callNodeInfo; @@ -239,3 +243,5 @@ export class ThreadSampleGraph extends PureComponent { ); } } + +export const ThreadSampleGraph = withSize(ThreadSampleGraphImpl); From 91e523bea886378984ec19ded8a070949a332047 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Fri, 8 Oct 2021 17:26:54 +0200 Subject: [PATCH 2/2] Update the snapshots after making the SampleGraph withSized --- .../__snapshots__/SampleGraph.test.js.snap | 11 + .../ThreadActivityGraph.test.js.snap | 580 ++++++++++-------- .../__snapshots__/Timeline.test.js.snap | 309 +++++----- 3 files changed, 494 insertions(+), 406 deletions(-) diff --git a/src/test/components/__snapshots__/SampleGraph.test.js.snap b/src/test/components/__snapshots__/SampleGraph.test.js.snap index fa94b43f62..062f0f241f 100644 --- a/src/test/components/__snapshots__/SampleGraph.test.js.snap +++ b/src/test/components/__snapshots__/SampleGraph.test.js.snap @@ -2,6 +2,17 @@ exports[`SampleGraph matches the 2d canvas draw snapshot 1`] = ` Array [ + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + -0.4, + 0, + 0.8, + 0, + ], Array [ "set fillStyle", "#003eaa", diff --git a/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap b/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap index 968b95318f..397893eff8 100644 --- a/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap +++ b/src/test/components/__snapshots__/ThreadActivityGraph.test.js.snap @@ -1276,87 +1276,10 @@ Array [ ], Array [ "fillRect", - -5, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 5, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 15, + -0.4, 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 25, + 0.8, 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 35, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 45, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 55, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 65, - 0, - 10, - 10, ], Array [ "set globalCompositeOperation", @@ -2607,6 +2530,94 @@ Array [ "set fillStyle", Object {}, ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + -5, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 5, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 15, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 25, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 35, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 45, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 55, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 65, + 0, + 10, + 10, + ], Array [ "clearRect", 0, @@ -3903,87 +3914,10 @@ Array [ ], Array [ "fillRect", - -5, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 5, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 15, + -0.4, 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 25, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 35, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 45, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 55, - 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 65, + 0.8, 0, - 10, - 10, ], Array [ "set globalCompositeOperation", @@ -5198,51 +5132,139 @@ Array [ ], Array [ "set fillStyle", - "#ff940060", + "#ff940060", + ], + Array [ + "set fillStyle", + "#ff9400", + ], + Array [ + "set fillStyle", + "#ff940060", + ], + Array [ + "set fillStyle", + Object {}, + ], + Array [ + "set fillStyle", + "#45a1ff60", + ], + Array [ + "set fillStyle", + "#45a1ff", + ], + Array [ + "set fillStyle", + "#45a1ff60", + ], + Array [ + "set fillStyle", + Object {}, + ], + Array [ + "set fillStyle", + "transparent", + ], + Array [ + "set fillStyle", + "transparent", + ], + Array [ + "set fillStyle", + "transparent", + ], + Array [ + "set fillStyle", + Object {}, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + -5, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 5, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", ], Array [ - "set fillStyle", - "#ff9400", + "fillRect", + 15, + 0, + 10, + 10, ], Array [ "set fillStyle", - "#ff940060", + "#003eaa", ], Array [ - "set fillStyle", - Object {}, + "fillRect", + 25, + 0, + 10, + 10, ], Array [ "set fillStyle", - "#45a1ff60", + "#003eaa", ], Array [ - "set fillStyle", - "#45a1ff", + "fillRect", + 35, + 0, + 10, + 10, ], Array [ "set fillStyle", - "#45a1ff60", + "#003eaa", ], Array [ - "set fillStyle", - Object {}, + "fillRect", + 45, + 0, + 10, + 10, ], Array [ "set fillStyle", - "transparent", + "#003eaa", ], Array [ - "set fillStyle", - "transparent", + "fillRect", + 55, + 0, + 10, + 10, ], Array [ "set fillStyle", - "transparent", + "#003eaa", ], Array [ - "set fillStyle", - Object {}, + "fillRect", + 65, + 0, + 10, + 10, ], Array [ "clearRect", @@ -6540,87 +6562,10 @@ Array [ ], Array [ "fillRect", - -3.3333333333333335, - 0, - 6.666666666666667, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 3.3333333333333335, - 0, - 6.666666666666667, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 10, - 0, - 6.666666666666667, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 43.333333333333336, - 0, - 6.666666666666667, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 50, - 0, - 6.666666666666667, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 56.666666666666664, - 0, - 6.666666666666667, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 63.333333333333336, + -0.4, 0, - 6.666666666666667, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 70.00000000000001, + 0.8, 0, - 6.666666666666667, - 10, ], Array [ "set globalCompositeOperation", @@ -7881,6 +7826,94 @@ Array [ "set fillStyle", Object {}, ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + -3.3333333333333335, + 0, + 6.666666666666667, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 3.3333333333333335, + 0, + 6.666666666666667, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 10, + 0, + 6.666666666666667, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 43.333333333333336, + 0, + 6.666666666666667, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 50, + 0, + 6.666666666666667, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 56.666666666666664, + 0, + 6.666666666666667, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 63.333333333333336, + 0, + 6.666666666666667, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 70.00000000000001, + 0, + 6.666666666666667, + 10, + ], Array [ "clearRect", 0, @@ -9177,21 +9210,10 @@ Array [ ], Array [ "fillRect", - -5, + -0.4, 0, - 10, - 10, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 35, + 0.8, 0, - 10, - 10, ], Array [ "set globalCompositeOperation", @@ -10009,6 +10031,28 @@ Array [ "set fillStyle", Object {}, ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + -5, + 0, + 10, + 10, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 35, + 0, + 10, + 10, + ], Array [ "clearRect", 0, diff --git a/src/test/components/__snapshots__/Timeline.test.js.snap b/src/test/components/__snapshots__/Timeline.test.js.snap index 0aa355fea5..927e7aa76b 100644 --- a/src/test/components/__snapshots__/Timeline.test.js.snap +++ b/src/test/components/__snapshots__/Timeline.test.js.snap @@ -3865,120 +3865,10 @@ Array [ ], Array [ "fillRect", - -5, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 17.22222222222222, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 39.44444444444444, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 61.66666666666666, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 83.88888888888889, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 106.11111111111111, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 128.33333333333331, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 150.55555555555554, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 172.77777777777777, - 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 83.88888888888889, + -0.4, 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 106.11111111111111, + 0.8, 0, - 10, - 300, ], Array [ "set fillStyle", @@ -3986,21 +3876,10 @@ Array [ ], Array [ "fillRect", - 128.33333333333331, + -0.4, 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 83.88888888888889, + 0.8, 0, - 10, - 300, ], Array [ "set fillStyle", @@ -4008,21 +3887,10 @@ Array [ ], Array [ "fillRect", - 106.11111111111111, + -0.4, 0, - 10, - 300, - ], - Array [ - "set fillStyle", - "#003eaa", - ], - Array [ - "fillRect", - 128.33333333333331, + 0.8, 0, - 10, - 300, ], Array [ "set globalCompositeOperation", @@ -6130,6 +5998,105 @@ Array [ "set fillStyle", Object {}, ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + -5, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 17.22222222222222, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 39.44444444444444, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 61.66666666666666, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 83.88888888888889, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 106.11111111111111, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 128.33333333333331, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 150.55555555555554, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 172.77777777777777, + 0, + 10, + 300, + ], Array [ "set globalCompositeOperation", "lighter", @@ -7096,6 +7063,39 @@ Array [ "set fillStyle", Object {}, ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 83.88888888888889, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 106.11111111111111, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 128.33333333333331, + 0, + 10, + 300, + ], Array [ "set globalCompositeOperation", "lighter", @@ -8062,6 +8062,39 @@ Array [ "set fillStyle", Object {}, ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 83.88888888888889, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 106.11111111111111, + 0, + 10, + 300, + ], + Array [ + "set fillStyle", + "#003eaa", + ], + Array [ + "fillRect", + 128.33333333333331, + 0, + 10, + 300, + ], Array [ "clearRect", 0,