Skip to content

Refine message on fenix 2654 #5816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fatadel wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Refine message on fenix 2654 #5816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4899711
add distinct home instructions for fenix
fatadel Feb 5, 2026
ec45cbc
add test
fatadel Feb 5, 2026
3d83877
Merge branch 'main' into refine-message-on-fenix-2654
fatadel Feb 5, 2026
afe9b31
update snapshot
fatadel Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions locales/en-US/app.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,10 @@ Home--instructions-content =
Recording performance profiles requires <a>{ -firefox-brand-name }</a>.
However, existing profiles can be viewed in any modern browser.

Home--fenix-instructions =
Recording performance profiles currently requires <a>{ -firefox-brand-name } for Desktop</a>.
However, existing profiles can be viewed in any modern desktop browser.

Home--record-instructions-start-stop = Stop and start profiling
Home--record-instructions-capture-load = Capture and load profile
Home--profiler-motto = Capture a performance profile. Analyze it. Share it. Make the web faster.
Expand Down
91 changes: 76 additions & 15 deletions src/components/app/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ type PopupInstallPhase =
| 'popup-enabled'
| 'suggest-enable-popup'
// Other browsers:
| 'firefox-android'
| 'suggest-chrome-extension'
| 'other-browser';

Expand All @@ -233,21 +234,25 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
let popupInstallPhase = 'other-browser';

if (_isFirefox()) {
popupInstallPhase = 'checking-webchannel';

// Query the browser to see if the menu button is available.
queryIsMenuButtonEnabled().then(
(isMenuButtonEnabled) => {
this.setState({
popupInstallPhase: isMenuButtonEnabled
? 'popup-enabled'
: 'suggest-enable-popup',
});
},
() => {
this.setState({ popupInstallPhase: 'webchannel-unavailable' });
}
);
if (_isAndroid()) {
popupInstallPhase = 'firefox-android';
} else {
popupInstallPhase = 'checking-webchannel';

// Query the browser to see if the menu button is available.
queryIsMenuButtonEnabled().then(
(isMenuButtonEnabled) => {
this.setState({
popupInstallPhase: isMenuButtonEnabled
? 'popup-enabled'
: 'suggest-enable-popup',
});
},
() => {
this.setState({ popupInstallPhase: 'webchannel-unavailable' });
}
);
}
} else if (_isChromium()) {
popupInstallPhase = 'suggest-chrome-extension';
// TODO: Check if the extension is installed and show the recording
Expand All @@ -269,6 +274,8 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
return this._renderEnablePopupInstructions(false);
case 'popup-enabled':
return this._renderRecordInstructions(FirefoxPopupScreenshot);
case 'firefox-android':
return this._renderFenixInstructions();
case 'suggest-chrome-extension':
return this._renderChromeInstructions();
case 'other-browser':
Expand Down Expand Up @@ -381,6 +388,56 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
);
}

_renderFenixInstructions() {
return (
<InstructionTransition key={0}>
<div className="homeInstructions" data-testid="home-fenix-instructions">
{/* Grid container: homeInstructions */}
{/* Left column: img */}
<img
className="homeSectionScreenshot"
src={PerfScreenshot}
alt="screenshot of profiler.firefox.com"
/>
{/* Right column: instructions */}
<div>
<DocsButton />
<Localized
id="Home--fenix-instructions"
elems={{
a: <a href="https://www.firefox.com/en-US/browsers/desktop/" />,
}}
>
<p>
Recording performance profiles currently requires{' '}
<a href="https://www.firefox.com/en-US/browsers/desktop/">
Firefox for Desktop
</a>
. However, existing profiles can be viewed in any modern desktop
Comment on lines +412 to +416
Copy link
Member

@canova canova Feb 6, 2026

Choose a reason for hiding this comment

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

Ah, it looks like we have 2 different instructions now that kinda say the opposite things. Since we have a Localized component below that says it's possible to profile on an Android device, "Recording performance profiles currently requires Firefox for Desktop" is no longer true. Can we move the android on device profiling above, and add the remote profiling instruction below?

For the wording of remote profiling, maybe something like:

You can also profile Firefox for Android remotely from a desktop
computer. For more information, please consult this documentation:{' '}
<a>Profiling Firefox for Android remotely</a>.

browser.
</p>
</Localized>
<Localized
id="Home--profile-firefox-android-instructions"
elems={{
a: (
<a href="https://profiler.firefox.com/docs/#/./guide-profiling-android-directly-on-device?id=profiling-firefox-for-android-directly-on-device" />
),
}}
>
<p>
You can also profile Firefox for Android. For more information,
please consult this documentation:{' '}
<a>Profiling Firefox for Android directly on device</a>.
</p>
</Localized>
</div>
Copy link
Member

@canova canova Feb 6, 2026

Choose a reason for hiding this comment

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

This wording is more suitable for the desktop message, since it says "You can also profile Firefox for Android.". Instead, I would prefer to have a new ftl key with a better wording suited specifically for Firefox for Android.

Maybe something like:

Firefox for Android can be profiled directly on this device. For
more information, please consult this documentation:{' '}
<a>Profiling Firefox for Android directly on device</a>.

{/* end of grid container */}
</div>
</InstructionTransition>
);
}

_renderChromeInstructions() {
const chromeExtensionUrl =
'https://chromewebstore.google.com/detail/firefox-profiler/ljmahpnflmbkgaipnfbpgjipcnahlghn';
Expand Down Expand Up @@ -700,6 +757,10 @@ function _isChromium(): boolean {
return Boolean(navigator.userAgent.match(/Chrome\/\d+\.\d+/));
}

function _isAndroid(): boolean {
return Boolean(navigator.userAgent.match(/\bAndroid\b/i));
}

export const Home = explicitConnect<
OwnHomeProps,
StateHomeProps,
Expand Down
7 changes: 7 additions & 0 deletions src/test/components/Home.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const SAFARI =
const CHROME =
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36';
let userAgent: string | undefined;
const ANDROID =
'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Mobile Safari/537.36';

// Flow doesn't understand Object.defineProperty. Use the "any" type to use it anyway.
(Object.defineProperty as any)(window.navigator, 'userAgent', {
Expand Down Expand Up @@ -53,6 +55,11 @@ describe('app/Home', function () {
expect(container.firstChild).toMatchSnapshot();
});

it('renders the information screen for fenix', () => {
const { container } = setup(ANDROID);
expect(container.firstChild).toMatchSnapshot();
});

it('renders the information screen for other browsers', () => {
const { container } = setup(SAFARI);
expect(container.firstChild).toMatchSnapshot();
Expand Down
Loading