From e4b9e0c3780a765cf15a3883fa61b0855ea1b164 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 9 Dec 2024 12:35:04 +0100 Subject: [PATCH 1/2] Show Chrome extension instructions in the homepage if visited from Chromium browsers --- locales/en-US/app.ftl | 8 +++++ src/components/app/Home.js | 74 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl index a078f4a5a2..8a1d03794b 100644 --- a/locales/en-US/app.ftl +++ b/locales/en-US/app.ftl @@ -365,6 +365,14 @@ Home--load-files-from-other-tools2 = Format. Learn how to write your own importer. +Home--install-chrome-extension = Install the Chrome extension +Home--chrome-extension-instructions = Use the { -profiler-brand-name } extension for Chrome + to capture performance profiles in Chrome and analyze them in the + { -profiler-brand-name }. Install the extension from the Chrome Web Store. +Home--chrome-extension-recording-instructions = Once installed, use the extension’s + toolbar icon or the shortcuts to start and stop profiling. You can also + export profiles and load them here for detailed analysis. + ## IdleSearchField ## The component that is used for all the search inputs in the application. diff --git a/src/components/app/Home.js b/src/components/app/Home.js index 9f773179e5..08864beb0f 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: + | 'suggest-chrome-extension' | 'other-browser'; class HomeImpl extends React.PureComponent { @@ -249,6 +250,10 @@ class HomeImpl extends React.PureComponent { this.setState({ popupInstallPhase: 'webchannel-unavailable' }); } ); + } else if (_isChromium()) { + popupInstallPhase = 'suggest-chrome-extension'; + // TODO: Check if the extension is installed and show the recording + // instructions. But we need to check if extension is there to do that. } this.state = { @@ -266,6 +271,8 @@ class HomeImpl extends React.PureComponent { return this._renderEnablePopupInstructions(false); case 'popup-enabled': return this._renderRecordInstructions(FirefoxPopupScreenshot); + case 'suggest-chrome-extension': + return this._renderChromeInstructions(); case 'other-browser': return this._renderOtherBrowserInstructions(); default: @@ -376,6 +383,69 @@ class HomeImpl extends React.PureComponent { ); } + _renderChromeInstructions() { + const chromeExtensionUrl = + 'https://chromewebstore.google.com/detail/firefox-profiler/ljmahpnflmbkgaipnfbpgjipcnahlghn'; + return ( + +
+ {/* Grid container: homeInstructions */} + {/* Left column: img */} + screenshot of profiler.firefox.com + {/* Right column: instructions */} +
+ + + + + Install the Chrome extension + + + + + ), + }} + > +

+ Use the Firefox Profiler extension for Chrome to capture + performance profiles in Chrome and analyze them in the Firefox + Profiler. Install the extension from the Chrome Web Store. +

+ + +

+ Once installed, use the extension’s toolbar icon or the + shortcuts to start and stop profiling. You can also export + profiles and load them here for detailed analysis. +

+ + {this._renderShortcuts()} +
+ {/* end of grid container */} +
+ + ); + } + _renderRecordInstructions(screenshotSrc: string) { return ( @@ -627,6 +697,10 @@ function _isFirefox(): boolean { return Boolean(navigator.userAgent.match(/Firefox\/\d+\.\d+/)); } +function _isChromium(): boolean { + return Boolean(navigator.userAgent.match(/Chrome\/\d+\.\d+/)); +} + export const Home = explicitConnect< OwnHomeProps, StateHomeProps, From 1863710c66e5f416eea1f8733749faa42c55e100 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Mon, 9 Dec 2024 12:44:34 +0100 Subject: [PATCH 2/2] Add a snapshot test for the Chrome extension instructions --- src/test/components/Home.test.js | 7 + .../__snapshots__/Home.test.js.snap | 267 ++++++++++++++++++ 2 files changed, 274 insertions(+) diff --git a/src/test/components/Home.test.js b/src/test/components/Home.test.js index 98ed69c88b..e53a7c79c2 100644 --- a/src/test/components/Home.test.js +++ b/src/test/components/Home.test.js @@ -24,6 +24,8 @@ const FIREFOX = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:55.0) Gecko/20100101 Firefox/55.0'; 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'; +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; // Flow doesn't understand Object.defineProperty. Use the "any" type to use it anyway. @@ -48,6 +50,11 @@ describe('app/Home', function () { expect(container.firstChild).toMatchSnapshot(); }); + it('renders the Chrome extension instructions for Chromium based browsers', () => { + const { container } = setup(CHROME); + expect(container.firstChild).toMatchSnapshot(); + }); + it('renders the information screen for other browsers', () => { const { container } = setup(SAFARI); expect(container.firstChild).toMatchSnapshot(); diff --git a/src/test/components/__snapshots__/Home.test.js.snap b/src/test/components/__snapshots__/Home.test.js.snap index 0d7a509d41..e196eba595 100644 --- a/src/test/components/__snapshots__/Home.test.js.snap +++ b/src/test/components/__snapshots__/Home.test.js.snap @@ -248,6 +248,273 @@ you can go to

`; +exports[`app/Home renders the Chrome extension instructions for Chromium based browsers 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 profiler.firefox.com +
+ + + + + + Install the Chrome extension + + + + Documentation + +

+ Use the + + ⁨Firefox Profiler⁩ extension for Chrome + + +to capture performance profiles in Chrome and analyze them in the +⁨Firefox Profiler⁩. Install the extension from the Chrome Web Store. +

+

+ Once installed, use the extension’s +toolbar icon or the shortcuts to start and stop profiling. You can also +export profiles and load them here for detailed analysis. +

+
+

+ + Ctrl + + + + + Shift + + + + + 1 + + + Stop and start profiling +

+

+ + Ctrl + + + + + Shift + + + + + 2 + + + Capture and load profile +

+
+
+
+
+
+

+ 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`] = `