Skip to content
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

Alpacino767/issue #2654 #4968

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

Alpacino767/issue #2654 #4968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dcebd1b
displaying a specific message for firefox for android
Apr 24, 2024
b24731e
displaying a specific message for firefox for android
Apr 24, 2024
96ecb2b
Merge branch 'alpacino767/issue-#2654' of https://github.com/alpacino…
Apr 24, 2024
e3cc5d1
setting up constants representing user agent strings for android
Apr 26, 2024
419f117
Merge branch 'firefox-devtools:main' into alpacino767/issue-#2654
alpacino767 Apr 26, 2024
cfe1c34
Merge branch 'firefox-devtools:main' into alpacino767/issue-#2654
alpacino767 May 13, 2024
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
46 changes: 46 additions & 0 deletions src/components/app/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ type PopupInstallPhase =
| 'popup-enabled'
| 'suggest-enable-popup'
// Other browsers:
| 'firefox-android'
| 'other-browser';

class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
Expand All @@ -249,6 +250,8 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
this.setState({ popupInstallPhase: 'webchannel-unavailable' });
}
);
} else if (isMobile()) {
Copy link
Contributor

Choose a reason for hiding this comment

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

The check for isMobile should be inside the isFirefox block, because we want to check for Firefox Android specifically.

In the code you wrote, if the browser is Firefox (desktop or android) we never go to the "else", so this is exactly the opposite to what we want here.

popupInstallPhase = 'firefox-android';
}

this.state = {
Expand All @@ -268,6 +271,8 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
return this._renderRecordInstructions(FirefoxPopupScreenshot);
case 'other-browser':
return this._renderOtherBrowserInstructions();
case 'firefox-android':
return this._renderFirefoxAndroidInstructions();
default:
throw assertExhaustiveCheck(
popupInstallPhase,
Expand All @@ -288,6 +293,43 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
}
);
};
_renderFirefoxAndroidInstructions() {
return (
<InstructionTransition key={2}>
<div
className="homeInstructions"
data-testid="home-firefox-android-instructions"
>
<img
className="homeSectionScreenshot"
alt="Screenshot of Firefox for Android."
/>
{/* Right column: instructions */}
<div>
<DocsButton />
<Localized
id="Home--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>
Recording performance profiles currently requires{' '}
<a href="https://www.mozilla.org/en-US/firefox/new/">
Firefox for Desktop
</a>
. However, existing profiles can be viewed in any modern desktop
browser.
</p>
</Localized>
</div>
{/* end of grid container */}
</div>
</InstructionTransition>
);
}

_renderEnablePopupInstructions(webChannelAvailable: boolean) {
return (
Expand Down Expand Up @@ -626,6 +668,10 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
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,
Expand Down
7 changes: 7 additions & 0 deletions src/test/components/Home.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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 () => {
Expand Down
213 changes: 213 additions & 0 deletions src/test/components/__snapshots__/Home.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,219 @@ you can go to
</p>
`;

exports[`app/Home renders the information screen for android 1`] = `
<div
class="home"
>
<main
class="homeSection"
>
<header>
<h1
class="appHeader"
>
<span
class="appHeaderSlogan"
>
<a
class="appHeaderLink"
href="/"
>
⁨Firefox Profiler⁩
</a>
—
<span
class="appHeaderSubtext"
>
Web app for ⁨Firefox⁩ performance analysis
</span>
</span>
<a
class="appHeaderGithubIcon"
href="https://github.com/firefox-devtools/profiler"
rel="noopener noreferrer"
target="_blank"
title="Go to our Git repository (this opens in a new window)"
>
<svg
aria-label="github"
class="octicon octicon-mark-github"
height="22"
version="1.1"
viewBox="0 0 16 16"
width="22"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
fill-rule="evenodd"
/>
</svg>
</a>
</h1>
</header>
<div
class="homeSpecialMessage"
>
This is a special message
</div>
<p>
Capture a performance profile. Analyze it. Share it. Make the web faster.
</p>
<div
class="homeInstructionsTransitionGroup"
>
<div
class="homeInstructions"
data-testid="home-firefox-android-instructions"
>
<img
alt="Screenshot of Firefox for Android."
class="homeSectionScreenshot"
/>
<div>
<a
class="homeSectionButton"
href="/docs/"
>
<span
class="homeSectionDocsIcon"
/>
Documentation
</a>
<p>
Recording performance profiles currently requires

<a
href="https://www.mozilla.org/en-US/firefox/new/"
>
Firefox for Desktop
</a>
. However, existing profiles can be viewed in any modern desktop browser.
</p>
</div>
</div>
</div>
<section
class="homeAdditionalContent"
>
<h2
class="homeAdditionalContentTitle protocol-display-xs"
>
Load existing profiles
</h2>
<section
class="homeActions"
>
<p>
You can
<strong>
drag and drop
</strong>
a profile file here to load it, or:
</p>
<div
class="homeSectionLoadProfile"
>
<div
class="homeSectionActionButtons"
>
<input
class="homeSectionUploadFromFileInput"
type="file"
/>
<button
class="homeSectionButton"
type="button"
>
Load a profile from file
</button>
<button
aria-expanded="false"
class="homeSectionButton"
type="button"
>
Load a profile from a URL
</button>
</div>
</div>
<p>
The ⁨Firefox Profiler⁩ can also import profiles from other profilers, such as

<a
href="https://profiler.firefox.com/docs/#/./guide-perf-profiling"
>
Linux perf
</a>
,
<a
href="https://profiler.firefox.com/docs/#/./guide-android-profiling"
>
Android SimplePerf
</a>
, the
Chrome performance panel,
<a
href="https://developer.android.com/studio/profile/cpu-profiler"
>
Android Studio
</a>
, or
any file using the
<a
href="https://valgrind.org/docs/manual/dh-manual.html"
>
dhat format
</a>
or
<a
href="https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview"
>
Google’s Trace Event
Format
</a>
.
<a
href="https://github.com/firefox-devtools/profiler/blob/main/docs-developer/custom-importer.md"
>
Learn how to write your
own importer
</a>
.
</p>
<p>
You can also compare recordings.
<a
href="/compare/"
>
Open the comparing interface.
</a>
</p>
</section>
<section>
<h2
class="homeRecentUploadedRecordingsTitle protocol-display-xxs"
>
Your recent uploaded recordings
</h2>
<list-of-published-profiles
limit="3"
withactionbuttons="false"
/>
</section>
</section>
<div
class="dragAndDropOverlayWrapper"
>
<div
class="dragAndDropOverlay"
>
Drop a saved profile here
</div>
</div>
</main>
</div>
`;

exports[`app/Home renders the information screen for other browsers 1`] = `
<div
class="home"
Expand Down