From f81bee9ab315f82d31a410d70e7fcbccdfc17912 Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Sun, 31 Aug 2025 07:53:06 -0400 Subject: [PATCH 1/2] Use CSS transitions for the Home page animations. --- src/components/app/Home.css | 9 +- src/components/app/Home.tsx | 16 +- .../__snapshots__/Home.test.tsx.snap | 290 +++++++++--------- 3 files changed, 162 insertions(+), 153 deletions(-) diff --git a/src/components/app/Home.css b/src/components/app/Home.css index b145cf5c6b..92304dfb75 100644 --- a/src/components/app/Home.css +++ b/src/components/app/Home.css @@ -172,18 +172,23 @@ /* Only show the home transition when reduced motion is not preferred */ @media (prefers-reduced-motion: no-preference) { - .homeTransition-enter { + .homeTransition-preEnter { opacity: 0.1; transform: translateX(100px); } - .homeTransition-enter.homeTransition-enter-active { + .homeTransition-entering { opacity: 1; transform: translateX(0); transition: opacity 300ms ease-out, transform 300ms ease-out; } + + .homeTransition-entered { + opacity: 1; + transform: translateX(0); + } } .homeSectionUploadFromFileInput { diff --git a/src/components/app/Home.tsx b/src/components/app/Home.tsx index 99e4d67898..80e9d9f5ac 100644 --- a/src/components/app/Home.tsx +++ b/src/components/app/Home.tsx @@ -16,7 +16,6 @@ import { triggerLoadingFromUrl, } from 'firefox-profiler/actions/receive-profile'; import type { BrowserConnection } from 'firefox-profiler/app-logic/browser-connection'; -import { CSSTransition, TransitionGroup } from 'react-transition-group'; import { queryIsMenuButtonEnabled, enableMenuButton, @@ -182,15 +181,8 @@ function DocsButton() { ); } -function InstructionTransition(props: { children: React.ReactNode }) { - return ( - - ); +function InstructionTransition({ children }: { children: React.ReactNode }) { + return
{children}
; } type OwnHomeProps = { @@ -590,9 +582,9 @@ class HomeImpl extends React.PureComponent { faster.

- +
{this._renderInstructions()} - +
{/* Grid container: homeAdditionalContent */}

diff --git a/src/test/components/__snapshots__/Home.test.tsx.snap b/src/test/components/__snapshots__/Home.test.tsx.snap index e222c0bf09..6b02913260 100644 --- a/src/test/components/__snapshots__/Home.test.tsx.snap +++ b/src/test/components/__snapshots__/Home.test.tsx.snap @@ -62,50 +62,54 @@ exports[`app/Home renders a button to enable the popup in Firefox 1`] = ` class="homeInstructionsTransitionGroup" >
- screenshot of profiler.firefox.com -
- - - - Documentation - -

- Enable the profiler menu button to start recording a performance -profile in ⁨Firefox⁩, then analyze it and share it with profiler.firefox.com. -

-

- You can also profile ⁨Firefox for Android⁩. For more -information, please consult this documentation: - + + + + + Enable ⁨Firefox Profiler⁩ Menu Button + - Profiling ⁨Firefox for Android⁩ directly on device + + Documentation - . -

+

+ Enable the profiler menu button to start recording a performance +profile in ⁨Firefox⁩, then analyze it and share it with profiler.firefox.com. +

+

+ You can also profile ⁨Firefox for Android⁩. For more +information, please consult this documentation: + + + Profiling ⁨Firefox for Android⁩ directly on device + + . +

+
@@ -310,86 +314,90 @@ exports[`app/Home renders the Chrome extension instructions for Chromium based b class="homeInstructionsTransitionGroup" >
- screenshot of profiler.firefox.com -
- - - + - - Install the Chrome extension - - - - Documentation - -

- Use the +

+ screenshot of profiler.firefox.com +
- ⁨Firefox Profiler⁩ extension for Chrome + + + + + Install the Chrome extension + + + + Documentation - +

+ Use the + + ⁨Firefox Profiler⁩ extension for Chrome + + to capture performance profiles in Chrome and analyze them in the ⁨Firefox Profiler⁩. Install the extension from the Chrome Web Store. -

-

- Once installed, use the extension’s -toolbar icon or the shortcuts to start and stop profiling. You can also -export profiles and load them here for detailed analysis. -

-
-

- - Ctrl - - + - - Shift - - + - - 1 - - - Stop and start profiling

- - Ctrl - - + - - Shift - - + - - 2 - - - Capture and load profile + Once installed, use the extension’s +toolbar icon or the shortcuts to start and stop profiling. You can also +export profiles and load them here for detailed analysis.

+
+

+ + Ctrl + + + + + Shift + + + + + 1 + + + Stop and start profiling +

+

+ + Ctrl + + + + + Shift + + + + + 2 + + + Capture and load profile +

+
@@ -577,45 +585,49 @@ exports[`app/Home renders the information screen for other browsers 1`] = ` class="homeInstructionsTransitionGroup" >
- screenshot of profiler.firefox.com -
- - - Documentation - -

- Recording performance profiles requires +

+ screenshot of profiler.firefox.com +
- ⁨Firefox⁩ + + Documentation - . +

+ Recording performance profiles requires + + ⁨Firefox⁩ + + . However, existing profiles can be viewed in any modern browser. -

-

- You can also profile ⁨Firefox for Android⁩. For more +

+

+ You can also profile ⁨Firefox for Android⁩. For more information, please consult this documentation: - - Profiling ⁨Firefox for Android⁩ directly on device - - . -

+ + Profiling ⁨Firefox for Android⁩ directly on device + + . +

+
From b91bec581593b292047f30d61d4078855f2c0c3f Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Thu, 30 Oct 2025 10:38:32 +0100 Subject: [PATCH 2/2] Remove react-transition-group dependency. --- package.json | 2 -- yarn.lock | 59 ++++++++++++++++++++++++++-------------------------- 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index d72ca7c14a..f9429e8c77 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,6 @@ "react-intersection-observer": "^9.16.0", "react-redux": "^9.2.0", "react-splitter-layout": "^4.0.0", - "react-transition-group": "^4.4.5", "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-thunk": "^3.1.0", @@ -127,7 +126,6 @@ "@types/react": "^18.3.26", "@types/react-dom": "^18.3.1", "@types/react-splitter-layout": "^4.0.0", - "@types/react-transition-group": "^4.4.5", "@types/redux-logger": "^3.0.6", "@types/tgwf__co2": "^0.14.2", "@typescript-eslint/eslint-plugin": "^8.45.0", diff --git a/yarn.lock b/yarn.lock index b5c89065d6..6169448156 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1011,7 +1011,7 @@ "@babel/plugin-transform-modules-commonjs" "^7.27.1" "@babel/plugin-transform-typescript" "^7.27.1" -"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3": version "7.26.10" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.10.tgz#a07b4d8fa27af131a633d7b3524db803eb4764c2" integrity sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw== @@ -2379,11 +2379,6 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.4.5": - version "4.4.12" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044" - integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w== - "@types/react@*", "@types/react@^18.3.26": version "18.3.26" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.26.tgz#4c5970878d30db3d2a0bca1e4eb5f258e391bbeb" @@ -4548,14 +4543,6 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" -dom-helpers@^5.0.1: - version "5.2.0" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b" - integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ== - dependencies: - "@babel/runtime" "^7.8.7" - csstype "^3.0.2" - dom-serializer@^1.0.1: version "1.4.1" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30" @@ -10003,7 +9990,7 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== -prop-types@^15.6.2, prop-types@^15.8.1: +prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -10209,16 +10196,6 @@ react-splitter-layout@^4.0.0: resolved "https://registry.yarnpkg.com/react-splitter-layout/-/react-splitter-layout-4.0.0.tgz#70b43ca6a78c056f5e5fbf29c67b597f040fbf2e" integrity sha512-SLqOjBOxRuizWUa83w6q5/u9cDWa9/yj9Iko9V9JFN8x+cqIXiDlUFWSx+icz3IIgvsN/oRIw3za5/32RjIwrA== -react-transition-group@^4.4.5: - version "4.4.5" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" - integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react@^18.3.1: version "18.3.1" resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" @@ -11306,7 +11283,16 @@ string-length@^4.0.2: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -11428,7 +11414,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11442,6 +11428,13 @@ strip-ansi@^0.3.0: dependencies: ansi-regex "^0.2.1" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -12955,8 +12948,16 @@ workbox-window@7.3.0, workbox-window@^7.3.0: "@types/trusted-types" "^2.0.2" workbox-core "7.3.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: - name wrap-ansi-cjs +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + +wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==