0a06605e7c
Note that the ignore code for subprocess is being ported from the legacy worker watcher.
The Worker Target URL is now correctly set to the Absolute URL,
this has an impact on the context selector as we are displaying it.
Also, this patch highlights some issues around Common JS Loader and the distinct compartment
to be used when debugging privileged page, or when running the browser toolbox.
It caused leaks when running browser toolbox tests in debug builds.
The JS Process Actor is directly loaded in a distinct global and compartment "DevTools global",
thanks to `loadInDevToolsLoader` flag of BrowserToolboxDevToolsProcess JS Process Actor configuration.
There is no need to use `useDistinctSystemPrincipalLoader` helper as Loader.sys.mjs, loaded from
the JS Process Actor will also be loaded in the distinct global.
Then, we only need to ensure that the CommonJS Loader will also pick up the "DevTools global"
when it is loaded in that distinct global.
Things will be significantly easier once we migrate from CommonJS to ESM as the `{ global: "contextual" }`
option passed to `ChromeUtils.importESModule` will do the right thing, as well as static `import` statements.
Differential Revision: https://phabricator.services.mozilla.com/D204874
|
||
|---|---|---|
| .. | ||
| actions | ||
| components | ||
| enhancers | ||
| middleware | ||
| reducers | ||
| selectors | ||
| test | ||
| utils | ||
| browser-console-manager.js | ||
| browser-console.js | ||
| constants.js | ||
| index.html | ||
| moz.build | ||
| panel.js | ||
| README.md | ||
| service-container.js | ||
| store.js | ||
| types.js | ||
| utils.js | ||
| webconsole-ui.js | ||
| webconsole-wrapper.js | ||
| webconsole.js | ||
WebConsole
The WebConsole (webconsole) shows you all the console API calls made by scripts and alerts you when javascript errors are thrown by a script. It can also display network logs, and you can evaluate expressions using the console input, a.k.a. JsTerm. You can read more about it to learn all the features and how to use the tool.
Run WebConsole
If you want to build the WebConsole inside of the DevTools toolbox (Firefox Devtools Panels), follow the simple Firefox build documentation. Start your compiled firefox and open the Firefox developer tool, you can then see the WebConsole tab.
Code Structure
Top level files are used to launch the WebConsole inside of the DevTools toolbox. The main files used to run the WebConsole are:
main.jscalled by devtools toolbox to launch the WebConsole panel.index.htmlpanel UI and launch scripts.
UI
The WebConsole UI is built using React
components (in components/).
The React application is rendered from webconsole-wrapper.js.
It contains 4 top components:
- ConsoleOutput (in
ConsoleOutput.js) is the component where messages are rendered. - FilterBar (in
FilterBar.js) is the component for the filter bars (filter input and toggle buttons). - SideBar (in
SideBar.js) is the component that render the sidebar where objects can be placed in. - JsTerm (in
JsTerm.js) is the component that render the console input.
We prefer stateless component (defined by function) instead of stateful component (defined by class) unless the component has to maintain its internal state.
State
Besides the UI, the WebConsole manages the app state via [Redux]. The following locations define the app state:
src/constants.jsconstants used across the tool including action and event names.src/actions/for all actions that change the state.src/reducers/for all reducers that change the state.src/selectors/functions that return a formatted version of parts of the app state.
The redux state is a plain javascript object with the following properties:
{
// State of the filter input and toggle buttons
filters,
// State of the input history
history,
// Console messages data and state (hidden, expanded, groups, …)
messages,
// State of notifications displayed on the output (e.g. self-XSS warning message)
notifications,
// Preferences (persist message, message limit, …)
prefs,
// Interface state (filter bar visible, sidebar visible, …)
ui,
}