История

JaStenson a1ff10a14a Bug 1592637 - [popup] Lazyload link.js in Description.js, r=julienw Differential Revision: https://phabricator.services.mozilla.com/D53324 --HG-- extra : moz-landing-system : lando		2019-11-18 14:16:04 +00:00
..
@types	Bug 1585659 - Hook up the supported features to the popup UI; r=canaltinova	2019-11-12 19:07:46 +00:00
components	Bug 1592637 - [popup] Lazyload link.js in Description.js, r=julienw	2019-11-18 14:16:04 +00:00
popup	Bug 1585659 - Hook up the supported features to the popup UI; r=canaltinova	2019-11-12 19:07:46 +00:00
store	Bug 1585659 - Hook up the supported features to the popup UI; r=canaltinova	2019-11-12 19:07:46 +00:00
test	Bug 1585659 - Hook up the supported features to the popup UI; r=canaltinova	2019-11-12 19:07:46 +00:00
README.md	Bug 1586757 - Create a @types directory and change to // @ts-check; r=julienw	2019-10-08 20:30:49 +00:00
browser.js	Bug 1591455 - Add types to the Settings component; r=julienw	2019-11-12 19:07:16 +00:00
frame-script.js	Bug 1563305 - Make error objects propagate correctly from the worker into the profiler page. r=julienw	2019-11-08 20:44:50 +00:00
index.xhtml	Bug 1546501 - Remove unnecessary type attributes (i.e. [type="application/javascript"]) on non-test script tags r=mossop	2019-04-24 19:43:57 +00:00
initializer.js	Bug 1585659 - Hook up the supported features to the popup UI; r=canaltinova	2019-11-12 19:07:46 +00:00
moz.build	Bug 1589122 - Add and use functions to translate values between the stored preferences and the state r=canaltinova	2019-10-22 08:13:58 +00:00
package.json	Bug 1591455 - Add types to the Settings component; r=julienw	2019-11-12 19:07:16 +00:00
panel.js	Bug 1586757 - Add types to everything but the components; r=julienw	2019-10-08 20:43:16 +00:00
preference-management.js	Bug 1589122 - Add and use functions to translate values between the stored preferences and the state r=canaltinova	2019-10-22 08:13:58 +00:00
tsconfig.json	Bug 1582779 - Offer to restart the browser when JS Tracer is enabled; r=julienw	2019-11-12 19:06:48 +00:00
typescript.md	Bug 1588192 - Fix the TypeScript require function in the initializers; r=julienw	2019-10-23 13:49:27 +00:00
utils.js	Bug 1583430 - Profiler popup feature "No Periodic Sampling" - r=julienw	2019-10-22 06:23:28 +00:00
yarn.lock	Bug 1591455 - Add types to the Settings component; r=julienw	2019-11-12 19:07:16 +00:00

README.md

Performance New

This folder contains the code for the new performance panel that is a simplified recorder that works to record a performance profile, and inject it into profiler.firefox.com. This tool is not in charge of any of the analysis, only the recording.

TypeScript

This project contains TypeScript types in JSDoc comments. To run the type checker point your terminal to this directory, and run yarn install, then yarn test. In addition type hints should work if your editor is configured to speak TypeScript.

Overall Architecture

The performance panel is split into two different modes. There is the DevTools panel mode, and the browser menu bar "popup" mode. The UI is implemented for both in devtools/client/performance-new, and many codepaths are shared. Both use the same React/Redux setup, but then each are configured with slightly different workflows. These are documented below.

DevTools Panel

This panel works similarly to the other DevTools panels. The devtools/client/performance-new/initializer.js is in charge of initializing the page specifically for the DevTools workflow. This script creates a PerfActor that is then used for talking to the Gecko Profiler component on the debuggee. This path is specifically optimized for targeting Firefox running on Android phones. This workflow can also target the current browser, but the overhead from DevTools can skew the results, making the performance profile less accurate.

The popup can be enabled by going to Tools -> Web Developer -> Enable Profiler Toolbar Icon". This then runs the initializer indevtools/client/performance-new/popup/initializer.js`, and configures the UI to work in a configuration that is optimized for profiling the current browser. The Gecko Profiler is turned on (using the ActorReadyGeckoProfilerInterface), and is queried directly–bypassing the DevTools' remote debugging protocol.

Injecting profiles into profiler.firefox.com

After a profile has been collected, it needs to be sent to profiler.firefox.com for analysis. This is done by using browser APIs to open a new tab, and then injecting the profile into the page through a frame script. See frame-script.js for implementation details. Both the DevTools Panel and the Popup use this frame script.