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 ( + +
+ Screenshot of Firefox for Android. + {/* 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`] = ` +
+
+
+

+ + + ⁨Firefox Profiler⁩ + + — + + Web app for ⁨Firefox⁩ performance analysis + + + + + + + +

+
+
+ This is a special message +
+

+ Capture a performance profile. Analyze it. Share it. Make the web faster. +

+
+
+ Screenshot of Firefox for Android. +
+ + + Documentation + +

+ Recording performance profiles currently requires + + + Firefox for Desktop + + . However, existing profiles can be viewed in any modern desktop browser. +

+
+
+
+
+

+ Load existing profiles +

+
+

+ You can + + drag and drop + + a profile file here to load it, or: +

+
+
+ + + +
+
+

+ The ⁨Firefox Profiler⁩ can also import profiles from other profilers, such as + + + Linux perf + + , + + Android SimplePerf + + , the +Chrome performance panel, + + Android Studio + + , or +any file using the + + dhat format + + or + + Google’s Trace Event +Format + + . + + Learn how to write your +own importer + + . +

+

+ You can also compare recordings. + + Open the comparing interface. + +

+
+
+

+ Your recent uploaded recordings +

+ +
+
+
+
+ Drop a saved profile here +
+
+
+
+`; + exports[`app/Home renders the information screen for other browsers 1`] = `