Skip to content

Conversation

@arai-a
Copy link
Contributor

@arai-a arai-a commented Dec 31, 2025

Fixed #5159

The issue happen in the following situation:

  1. ChartViewportImpl.UNSAFE_componentWillReceiveProps performs setState with the default state, which is containerWidth === 0 and containerHeight === 0
  2. ChartViewportImpl.UNSAFE_componentWillReceiveProps schedules ChartViewportImpl._setSize
  3. ChartCanvas.render is called for the containerWidth === 0/containerHeight === 0 state, but it doesn't use the containerWidth at that point.
  4. ChartCanvas.componentDidUpdate schedules ChartCanvas._doDrawCanvas for the state update with containerWidth === 0 and containerHeight === 0
  5. in the requestAnimationFrame callback, ChartViewportImpl_setSize calculates the container size, and peforms setState with the updated containerWidth/containerHeight
  6. in the requestAnimationFrame callback, ChartCanvas._doDrawCanvas resizes the canvas to 0x0
  7. ChartCanvas.render is called for the updated containerWidth/containerHeight state
  8. ChartCanvas.componentDidUpdate schedules ChartCanvas._doDrawCanvas for the state update with the updated containerWidth/containerHeight
  9. in the requestAnimationFrame callback, ChartCanvas._doDrawCanvas resizes the canvas to the correct size

Here, the steps 4 and 6 are the problem.

Given that we know the state update happens twice in a sequence, and the first one is only for the Viewport's internal use, ChartCanvas.componentDidUpdate should ignore it.

This is one of the possible solutions, with a minimal change to avoid the problematic resize.

Deploy preview: before / after

@codecov
Copy link

codecov bot commented Dec 31, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.69%. Comparing base (0dd124f) to head (bf7d35d).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5744      +/-   ##
==========================================
+ Coverage   85.67%   85.69%   +0.02%     
==========================================
  Files         315      315              
  Lines       31110    31122      +12     
  Branches     8472     8564      +92     
==========================================
+ Hits        26654    26671      +17     
+ Misses       4026     4021       -5     
  Partials      430      430              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@canova canova self-requested a review January 6, 2026 15:50
Copy link
Member

@canova canova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the delay on the reviews, it's been quite a busy few weeks. I'll get to the other PRs too.

Thanks for fixing it and for the tests! Although this works, I'm a bit afraid that it's like a band-aid solution instead of fixing the underlying issue. Let's land this, and we can think about a more fundamental solution.

@canova canova enabled auto-merge (squash) January 19, 2026 16:43
@canova canova merged commit 4bf51dc into firefox-devtools:main Jan 19, 2026
19 checks passed
@canova canova mentioned this pull request Jan 27, 2026
canova added a commit that referenced this pull request Jan 27, 2026
Lots of exciting changes 🎉:

[arai-a] Put radio buttons into labels (#5738)
[DaniPopes] Update comment for "unique-string" (#5741)
[Karan Pradhan] Hide tooltip filter button in non-sticky tooltips and
add hideFilterButton tests (#5718)
[arai-a] Add a menu to copy the Marker Table as text (#5732)
[arai-a] Make the entire list item clickable for the "Full Range"
(#5742)
[Markus Stange] Move symbol table demangling out of SymbolStore into
SymbolProvider (#5746)
[Markus Stange] Remove SVG asset imports from profile-data.ts (#5747)
[arai-a] Do not apply sticky tooltip on double click (#5754)
[arai-a] Skip the ChartCanvas redraw on the Viewport's internal default
state usage (#5744)
[Markus Stange] Stop blindly extracting uint8array.buffer after calling
compress() (#5753)
[Markus Stange] In the assembly view state, refer to the current symbol
by index (#5755)
[Markus Stange] Fix "scroll to hotspot" functionality in the source view
+ assembly view (#5759)
[Markus Stange] Keep the colorField markerSchema field when processing
profiles in the gecko format (#5760)
[Markus Stange] Implement dark mode (#5740)
[Markus Stange] Fix light-mode colors (#5765)
[Markus Stange] Tweak dark mode colours. (#5767)
[Nazım Can Altınova] Enable some basic type-aware lints (#5775)
[Markus Stange] Allow seeing different assembly code for the same
function (#5349)
[fatadel] Refine tree view a11y (#5779)
[fatadel] Align double-click behavior of stack chart with flame graph
(#5782)
[Markus Stange] Split gz.ts properly into node and browser variants
(#5764)
[Markus Stange] Simplify and optimize the computation of per-call-node
line and address timings (#5770)
[Nazım Can Altınova] Move the dark mode toggle to devtools console
(#5783)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (Jan 27, 2026) (#5785)
[Nazım Can Altınova] Improve Chrome importer marker payload logic
(#5717)
[Markus Stange] Add a Focus Self transform (#5774)
[Nazım Can Altınova] Enable the Turkish locale in production (#5786)


And huge thanks to our localizers 🎉 :

be: Mikalai Udodau
de: Ger
de: Michael Köhler
el: Jim Spentzos
en-CA: chutten
en-CA: Saurabh
en-GB: Ian Neal
en-GB: Saurabh
es-CL: ravmn
fy-NL, nl: Fjoerfoks
fr: Skywarp
fr: Théo Chevalier
fur: Fabio Tomat
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Fjoerfoks
nl: Mark Heijl
pt-BR: Marcelo Ghelman
ru: berry
ru: Valery Ledovskoy
sv-SE: Andreas Pettersson
tr: Grk
zh-CN: Olvcpr423
zh-CN: wxie
zh-TW: Pin-guang Chen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Marker charts flickers when search filter is changed

2 participants