gecko-dev/devtools/client/performance-new
2019-10-18 07:54:09 +03:00
..
@types Bug 1587117 - Fix profiler popup shortcuts to use the correct preferences; r=canaltinova 2019-10-10 18:00:05 +00:00
components Backed out changeset 2923afce519a (bug 1557447) for browser chrome failure at tools/profiler/tests/browser/browser_test_feature_preferencereads.js. On a CLOSED TREE 2019-10-18 07:54:09 +03:00
popup Bug 1587117 - Fix profiler popup shortcuts to use the correct preferences; r=canaltinova 2019-10-10 18:00:05 +00:00
store Bug 1587117 - Fix profiler popup shortcuts to use the correct preferences; r=canaltinova 2019-10-10 18:00:05 +00:00
test Bug 1587117 - Fix profiler popup shortcuts to use the correct preferences; r=canaltinova 2019-10-10 18:00:05 +00:00
browser.js Bug 1588086 - Fix the multi-modal getSymbolTable; r=julienw 2019-10-15 11:25:18 +00:00
frame-script.js Bug 1586757 - Add types to everything but the components; r=julienw 2019-10-08 20:43:16 +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 1588086 - Fix the multi-modal getSymbolTable; r=julienw 2019-10-15 11:25:18 +00:00
moz.build Bug 1580469 - Create end to end profile capture tests; r=julienw 2019-10-04 18:23:48 +00:00
package.json Bug 1581569 - Configure the performance client to use TypeScript; r=julienw 2019-10-07 13:44:03 +00:00
panel.js Bug 1586757 - Add types to everything but the components; r=julienw 2019-10-08 20:43:16 +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
tsconfig.json Bug 1586757 - Add types to everything but the components; r=julienw 2019-10-08 20:43:16 +00:00
utils.js Bug 1586757 - Create a @types directory and change to // @ts-check; r=julienw 2019-10-08 20:30:49 +00:00
yarn.lock Bug 1581569 - Configure the performance client to use TypeScript; r=julienw 2019-10-07 13:44:03 +00:00

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.

Profiler Popup

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 directlybypassing 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.