Provide correct instructions on the home page for Firefox for Android (Fenix) (#5816)

Author: fatadel

locales/en-US/app.ftl

@@ -381,6 +381,15 @@ 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-directly =
+    { -firefox-android-brand-name } can be profiled directly on this device. For
+    more information, read <a>Profiling { -firefox-android-brand-name } directly on device</a>.
+
+Home--fenix-instructions-remotely =
+    You can also profile { -firefox-android-brand-name } remotely from { -firefox-brand-name }
+    for desktop. For more information, please consult this documentation:
+    <a>Profiling { -firefox-android-brand-name } remotely</a>.
+
 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.

src/components/app/Home.tsx

@@ -223,6 +223,7 @@ type PopupInstallPhase =
   | 'popup-enabled'
   | 'suggest-enable-popup'
   // Other browsers:
+  | 'firefox-android'
   | 'suggest-chrome-extension'
   | 'other-browser';
 
@@ -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
@@ -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':
@@ -381,6 +388,55 @@ 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-directly"
+              elems={{
+                a: (
+                  <a href="https://profiler.firefox.com/docs/#/./guide-profiling-android-directly-on-device?id=profiling-firefox-for-android-directly-on-device" />
+                ),
+              }}
+            >
+              <p>
+                Firefox for Android can be profiled directly on this device. For
+                more information, read{' '}
+                <a>Profiling Firefox for Android directly on device</a>.
+              </p>
+            </Localized>
+            <Localized
+              id="Home--fenix-instructions-remotely"
+              elems={{
+                a: (
+                  <a href="https://profiler.firefox.com/docs/#/./guide-remote-profiling?id=remote-profiling-firefox-for-android" />
+                ),
+              }}
+            >
+              <p>
+                You can also profile Firefox for Android remotely from Firefox
+                for desktop. For more information, please consult this
+                documentation: <a>Profiling Firefox for Android remotely</a>.
+              </p>
+            </Localized>
+          </div>
+          {/* end of grid container */}
+        </div>
+      </InstructionTransition>
+    );
+  }
+
   _renderChromeInstructions() {
     const chromeExtensionUrl =
       'https://chromewebstore.google.com/detail/firefox-profiler/ljmahpnflmbkgaipnfbpgjipcnahlghn';
@@ -700,6 +756,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,

src/test/components/Home.test.tsx

@@ -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 (Android 16; Mobile; rv:147.0) Gecko/147.0 Firefox/147.0';
 
 // Flow doesn't understand Object.defineProperty. Use the "any" type to use it anyway.
 (Object.defineProperty as any)(window.navigator, 'userAgent', {
@@ -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();