mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 00:35:44 +00:00
e63b4ee826
The file only manages the browser console, so we're making its name reflect what it does. Differential Revision: https://phabricator.services.mozilla.com/D40441 --HG-- rename : devtools/client/webconsole/hudservice.js => devtools/client/webconsole/browser-console-manager.js extra : moz-landing-system : lando
20 KiB
20 KiB
Console Tool Architecture
The Console panel is responsible for rendering all logs coming from the current page.
Architecture
Internal architecture of the Console panel (the client side) is described on the following diagram.
┌──────────────────────────────┐ ┌────────────────────────┐
│ DevTools │ │ WebConsolePanel │
│[client/framework/devtools.js]│ │ [panel.js] │
└──────────────────────────────┘ └────────────────────────┘
│ │
│
openBrowserConsole() or │
toggleBrowserConsole() │
│ │
▼ │
┌──────────────────────────────┐ {hud}
│ BrowserConsoleManager │ │
│ [browser-console-manager.js] │ │
└──────────────────────────────┘ │
│ │
│ │
{_browserConsole} │
│ │
▼ 0..1 ▼ 1
┌──────────────────────────────┐ ┌────────────────────────┐
│ BrowserConsole │ │ WebConsole │
│ [browser-console.js] │─ ─ extends ─ ▶│ [webconsole.js] │
└──────────────────────────────┘ └──────────────1─────────┘
│
{ui}
│
▼ 1
┌────────────────────────┐ ┌─────────────────────────────────┐
│ WebConsoleUI │ 1│ WebConsoleConnectionProxy │
│ [webconsole-ui.js] │───{proxy}──▶│[webconsole-connection-proxy.js] │
└────────────────────────┘ └─────────────────────────────────┘
│ │
{wrapper}
│ │
│
│ │
▼ 1
┌────────────────────────┐ │
│ WebConsoleWrapper │
│[webconsole-wrapper.js] │◀ ─ ─ ─calls methods from ─ ─ ┘
└────────────────────────┘
│
│
▼
┌────────────────────────┐
│ App │
└────────────────────────┘
Components
The Console panel UI is built on top of React. It defines set of React components in components directory
The React architecture is described on the following diagram.
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
WebConsole React components │
│ [/components] ┌────────────────────────┐
│ App │ │
│ └────────────────────────┘
│ │
│ │
┌───────────────────┬──────────────────────┬───────────────────┬───────────┴─────────┬───────────────────────┬────────────────────┬─────────────────┐ │
│ │ │ │ │ │ │ │ │
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ │ ┌────────────────────────────────────────┐
│ ┌──────────┐ ┌────────────────┐ ┌────────────────┐ ┌───────────┐ ┌────────────────────┐ ┌──────────────┐ ┌──────────────┐ ┌─────────┐ │ Editor │
│ SideBar │ │NotificationBox │ │ ConfirmDialog │ │ FilterBar │ │ ReverseSearchInput │ │ConsoleOutput │ │EditorToolbar │ │ JSTerm │──{editor}──▶│ (CodeMirror) │
│ └──────────┘ └────────────────┘ │ (portal) │ └───────────┘ └────────────────────┘ └──────────────┘ └──────────────┘ └─────────┘ │ [client/shared/sourceeditor/editor.js] │
│ └────────────────┘ │ │ │ └────────────────────────────────────────┘
│ │ ┌─────────┴─────────────┐ │
│ │ │ │ │
│ │ ▼ ▼ ▼
│ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │
│ │ │ FilterButton │ │ FilterCheckbox │ │ MessageContainer │
│ └──────────────────┘ └──────────────────┘ └──────────────────┘ │
│ │ │
│ │ │
│ │ │
│ ▼ │
│ │ ┌──────────────────┐
│ │ Message │ │
│ │ └──────────────────┘
│ │ │
│ │ │
│ ┌─────────────────────┬─────────────────────┬─────────────────────┬───────┴─────────────┬─────────────────────┬─────────────┼─────────────────────┬───────────────────────────────────────────┐
│ │ │ │ │ │ │ │ │ │
│ ▼ ▼ ▼ ▼ ▼ ▼ │ ▼ ▼
│ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌─────────────────────────────────────┐ ┌────────────────────────────────────────┐
│ │ MessageIndent │ │ MessageIcon │ │ CollapseButton │ │ GripMessageBody │ │ ConsoleTable │ │ MessageRepeat │ │ │ Frame │ │ SmartTrace │
│ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ │ [client/shared/components/Frame.js] │ │[client/shared/components/SmartTrace.js]│
│ │ │ │ └─────────────────────────────────────┘ └────────────────────────────────────────┘
└ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
│ │ │
│ ├─────────────────────┘
│ │
│ ▼
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
│ Reps ┌──────────────────────┐ │
│ │ [client/shared/components/reps/reps.js] │ ObjectInspector │
│ └──────────────────────┘ │
│ │ │
│ ▼ │
│ │ ┌──────────────────────┐
│ │ ObjectInspectorItem │ │
│ │ └──────────────────────┘
└───────────────────────────────────────────────────────────────▶ │ │
│ ▼
┌──────────────────────┐ │
│ ┌─▶│ Rep │
│ └──────────────────────┘ │
│ │ │
│ │ │
│ └──────────────┘
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
Actions
The Console panel implements a set of actions divided into several groups.
- Filters Actions related to content filtering.
- Messages Actions related to list of messages rendered in the panel.
- UI Actions related to the UI state.
State
The Console panel manages the app state via Redux.
There are following reducers defining the panel state:
reducers/filters.jsstate for panel filters. These filters can be set from within the panel's toolbar (e.g. error, info, log, css, etc.)reducers/messages.jsstate of all messages rendered within the panel.reducers/prefs.jsPreferences associated with the Console panel (e.g. logLimit)reducers/ui.jsUI related state (sometimes also called a presentation state). This state contains state of the filter bar (visible/hidden), state of the time-stamp (visible/hidden), etc.