diff --git a/src/components/app/Home.js b/src/components/app/Home.js
index 9f773179e5..54a8bd18c7 100644
--- a/src/components/app/Home.js
+++ b/src/components/app/Home.js
@@ -225,6 +225,7 @@ type PopupInstallPhase =
| 'popup-enabled'
| 'suggest-enable-popup'
// Other browsers:
+ | 'firefox-android'
| 'other-browser';
class HomeImpl extends React.PureComponent {
@@ -249,6 +250,8 @@ class HomeImpl extends React.PureComponent {
this.setState({ popupInstallPhase: 'webchannel-unavailable' });
}
);
+ } else if (isMobile()) {
+ popupInstallPhase = 'firefox-android';
}
this.state = {
@@ -268,6 +271,8 @@ class HomeImpl extends React.PureComponent {
return this._renderRecordInstructions(FirefoxPopupScreenshot);
case 'other-browser':
return this._renderOtherBrowserInstructions();
+ case 'firefox-android':
+ return this._renderFirefoxAndroidInstructions();
default:
throw assertExhaustiveCheck(
popupInstallPhase,
@@ -288,6 +293,43 @@ class HomeImpl extends React.PureComponent {
}
);
};
+ _renderFirefoxAndroidInstructions() {
+ return (
+
+
+
+ {/* Right column: instructions */}
+
+
+
+ ),
+ }}
+ >
+
+ Recording performance profiles currently requires{' '}
+
+ Firefox for Desktop
+
+ . However, existing profiles can be viewed in any modern desktop
+ browser.
+
+
+
+ {/* end of grid container */}
+
+
+ );
+ }
_renderEnablePopupInstructions(webChannelAvailable: boolean) {
return (
@@ -626,6 +668,10 @@ class HomeImpl extends React.PureComponent {
function _isFirefox(): boolean {
return Boolean(navigator.userAgent.match(/Firefox\/\d+\.\d+/));
}
+function isMobile(): boolean {
+ const userAgent = navigator.userAgent;
+ return /Mobi|Android/i.test(userAgent);
+}
export const Home = explicitConnect<
OwnHomeProps,
diff --git a/src/test/components/Home.test.js b/src/test/components/Home.test.js
index 98ed69c88b..d0837a6945 100644
--- a/src/test/components/Home.test.js
+++ b/src/test/components/Home.test.js
@@ -25,6 +25,8 @@ const FIREFOX =
const SAFARI =
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8';
let userAgent;
+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: any)(window.navigator, 'userAgent', {
@@ -53,6 +55,11 @@ describe('app/Home', function () {
expect(container.firstChild).toMatchSnapshot();
});
+ it('renders the information screen for android', () => {
+ const { container } = setup(ANDROID);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
// This test's assertions are that it can find elements through getByTestId.
// eslint-disable-next-line jest/expect-expect
it('will switch to recording instructions when enabling the popup', async () => {
diff --git a/src/test/components/__snapshots__/Home.test.js.snap b/src/test/components/__snapshots__/Home.test.js.snap
index 0d7a509d41..13e7114cad 100644
--- a/src/test/components/__snapshots__/Home.test.js.snap
+++ b/src/test/components/__snapshots__/Home.test.js.snap
@@ -248,6 +248,219 @@ you can go to
`;
+exports[`app/Home renders the information screen for android 1`] = `
+
+
+
+
+ This is a special message
+
+
+ Capture a performance profile. Analyze it. Share it. Make the web faster.
+
+
+
+
+
+
+
+
+
+ Load existing profiles
+
+
+
+
+ Your recent uploaded recordings
+
+
+
+
+
+
+ Drop a saved profile here
+
+
+
+
+`;
+
exports[`app/Home renders the information screen for other browsers 1`] = `