Skip to content

Make withSize use a wrapper element so that it can stop calling findDOMNode#5988

Merged
fatadel merged 3 commits into
firefox-devtools:mainfrom
mstange:push-ntlqkrsvrsoz
May 21, 2026
Merged

Make withSize use a wrapper element so that it can stop calling findDOMNode#5988
fatadel merged 3 commits into
firefox-devtools:mainfrom
mstange:push-ntlqkrsvrsoz

Conversation

@mstange

@mstange mstange commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Summary

findDOMNode is deprecated in React 18 and removed in React 19 strict mode. The withSize HOC was the last in-tree caller.

This PR makes withSize render a <div style="display: contents"> wrapper around the wrapped component and observe wrapper.firstElementChild via the existing ResizeObserver wrapper, removing the need for findDOMNode. The HOC is also converted to a function component using useState + useRef + useEffect.

The docstring previously claimed the size only updates on window resize; that hasn't been true since the HOC moved to ResizeObserver, so it's been corrected to "whenever the element's size changes".

Test fixes

EmptyThreadIndicator.test.tsx and Timeline.test.tsx were mocking findDOMNode to inject sizes into the wrapped component. With findDOMNode gone those mocks silently became no-ops — EmptyThreadIndicator snapshots showed zero-width indicators and Timeline's per-describe override fell back to the file-level autoMockElementSize. The second commit replaces the mocks with autoMockElementSize, restoring the previous size assertions.

Snapshot deltas

Every snapshot covering a withSize-wrapped component now includes the new <div style="display: contents"> wrapper. The only width/height changes are in EmptyThreadIndicator.test.tsx.snap (still 30/10/20px after the mock fix).

Example profiles

No visual regressions detected from my side.

Profile 1: Before / After
Profile 2: Before / After

@codecov

codecov Bot commented Apr 29, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 87.50000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.79%. Comparing base (41473d3) to head (57475fe).
⚠️ Report is 12 commits behind head on main.

Files with missing lines Patch % Lines
src/components/shared/WithSize.tsx 87.50% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5988      +/-   ##
==========================================
+ Coverage   83.77%   83.79%   +0.01%     
==========================================
  Files         329      329              
  Lines       34423    34546     +123     
  Branches     9627     9662      +35     
==========================================
+ Hits        28839    28948     +109     
- Misses       5155     5169      +14     
  Partials      429      429              

☔ 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.

@fatadel fatadel mentioned this pull request May 7, 2026
4 tasks
EmptyThreadIndicator and Timeline tests mocked findDOMNode to inject
sizes for the WithSize HOC. After WithSize stopped calling findDOMNode,
those mocks became no-ops: EmptyThreadIndicator snapshots regressed to
zero-width indicators, and Timeline's per-describe override silently
fell back to the file-level autoMockElementSize.

Switch EmptyThreadIndicator to autoMockElementSize so its snapshots
again reflect the 100px container, and drop Timeline's dead override.
@fatadel fatadel marked this pull request as ready for review May 18, 2026 13:04
@fatadel fatadel marked this pull request as draft May 18, 2026 13:10
@fatadel fatadel marked this pull request as ready for review May 18, 2026 13:33
@fatadel fatadel requested a review from canova May 18, 2026 13:40
@canova

canova commented May 19, 2026

Copy link
Copy Markdown
Member

@fatadel could you put some example profiles?

@fatadel

fatadel commented May 19, 2026

Copy link
Copy Markdown
Contributor

@fatadel could you put some example profiles?

Oh sorry, forgot. Sure, done ✅

@canova canova left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Looks good to me, thanks!

Comment thread src/components/shared/WithSize.tsx
@fatadel fatadel merged commit 4a86a70 into firefox-devtools:main May 21, 2026
23 checks passed
@canova canova mentioned this pull request May 26, 2026
canova added a commit that referenced this pull request May 26, 2026
Changes:

[fatadel] Remove unused dependencies from package.json (#6010)
[Nazım Can Altınova] Make profiler-cli work in sandboxed environments
(#6003)
[Markus Stange] Make profiler-edit run profile compacting before writing
out the file (#6015)
[Markus Stange] Migrate from prettier to oxfmt (#5986)
[Markus Stange] Add a --symbolicate-wasm arg to profiler-edit. (#6008)
[Markus Stange] Build and upload the cli artifact in PRs (#6020)
[Markus Stange] Use @streamparser/json if the input is too large to fit
in a V8 string (#6016)
[Nazım Can Altınova] Print also the status output right after cli `load`
command (#6019)
[Nicolas Chevobbe] Update devtools-reps to 0.27.7 (#6030)
[Nazım Can Altınova] Include `--search` option in `pq filter push`
(#6026)
[Nazım Can Altınova] Update all Yarn dependencies (2026-05-20) (#6033)
[fatadel] Translate URL track-index state through profile sanitization
(#6000)
[Markus Stange] Make withSize use a wrapper element so that it can stop
calling findDOMNode (#5988)
[Markus Stange] Fix dhat importer (#6036)
[Nazım Can Altınova] Annotate inlined frames in CLI call trees and
stacks (#6041)
[Nazım Can Altınova] Use proper types in cli tests instead of custom
inline types (#6038)
[Nazım Can Altınova] Fix text truncation for frames named after
Object.prototype methods (#6044)
[Nazım Can Altınova] Add missing key props to CodeErrorOverlay error
list items (#6047)
[depfu[bot]] ⬆️ Update oxfmt to version 0.51.0 (#6054)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (May 26, 2026) (#6058)
[Nazım Can Altınova] Use URL-state symbol server for `profiler-cli
function annotate` (#6051)
[Nazım Can Altınova] Bump profiler-cli version to 0.2.0 (#6059)

And special thanks to our localizers:

fr: YD
sr: Марко Костић (Marko Kostić)
tr: Ali Demirtaş
zh-CN: Olvcpr423
zh-CN: wxie
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.

3 participants