diff options
Diffstat (limited to 'devtools/docs/contributor/tools/console-panel.md')
| -rw-r--r-- | devtools/docs/contributor/tools/console-panel.md | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/devtools/docs/contributor/tools/console-panel.md b/devtools/docs/contributor/tools/console-panel.md new file mode 100644 index 0000000000..68fa24e349 --- /dev/null +++ b/devtools/docs/contributor/tools/console-panel.md @@ -0,0 +1,158 @@ +# 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. + +<figure class="hero"> + <pre class="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 │ + │ [webconsole-ui.js] │ + └────────────────────────┘ + │ + {wrapper} + │ + │ + ▼ 1 + ┌────────────────────────┐ + │ WebConsoleWrapper │ + │[webconsole-wrapper.js] │ + └────────────────────────┘ + │ + <renders> + │ + ▼ + ┌────────────────────────┐ + │ App │ + └────────────────────────┘ + </pre> + <figcaption>Elements between curly bracket on arrows represent the property name of the reference (for example, the WebConsolePanel as a `hud` property that is a reference to the WebConsole instance)</figcaption> +</figure> + +## Components + +The Console panel UI is built on top of [React](../frontend/react.md). It defines set of React components in `components` directory +The React architecture is described on the following diagram. + +<figure class="hero"> + <pre class="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 │ │ +│ │ └──────────────────┘ + │ │ │ ┌─────────────────────────────────────┐ +│ │ │ │ Frame │ + │ ┌─────────────────────┬─────────────────────┬─────────────────────┬───────┴─────────────┬─────────────────────┬─────────────┼─────┬──▶│ [client/shared/components/Frame.js] │ +│ │ │ │ │ │ │ │ │ └─────────────────────────────────────┘ + │ ▼ ▼ ▼ ▼ ▼ ▼ │ │ +│ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ ┌────────────────────────────────────────┐ + │ │ MessageIndent │ │ MessageIcon │ │ CollapseButton │ │ GripMessageBody │ │ ConsoleTable │ │ MessageRepeat │ │ │ │ SmartTrace │ +│ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ ├──▶│[client/shared/components/SmartTrace.js]│ + │ │ │ │ │ └────────────────────────────────────────┘ +└ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ + │ │ │ │ ┌──────────────────────────────────────────────────┐ + │ │ │ │ │ TabboxPanel │ + │ ├─────────────────────┘ └──▶│[client/netmonitor/src/components/TabboxPanel.js] │ + │ │ └──────────────────────────────────────────────────┘ + │ │ + │ │ + │ ▼ + │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ + │ Reps ┌──────────────────────┐ │ + │ │ [client/shared/components/reps/reps.js] │ ObjectInspector │ + │ └──────────────────────┘ │ + │ │ │ + │ ▼ │ + │ │ ┌──────────────────────┐ + │ │ ObjectInspectorItem │ │ + │ │ └──────────────────────┘ + └───────────────────────────────────────────────────────────────▶ │ │ + │ ▼ + ┌──────────────────────┐ │ + │ ┌─▶│ Rep │ + │ └──────────────────────┘ │ + │ │ │ + │ │ │ + │ └──────────────┘ + ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ + </pre> +</figure> + +There are several external components we use from the WebConsole: +- ObjectInspector/Rep: Used to display a variable in the console output and handle expanding the variable when it's not a primitive. +- Frame: Used to display the location of messages. +- SmartTrace: Used to display the stack trace of messages and errors +- TabboxPanel: Used to render a network message detail. This is directly using the component from the Netmonitor so we are consistent in how we display a request internals. + +## 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](../frontend/redux.md). + +There are following reducers defining the panel state: + +- `reducers/filters.js` state for panel filters. These filters can be set from within the panel's toolbar (e.g. error, info, log, css, etc.) +- `reducers/messages.js` state of all messages rendered within the panel. +- `reducers/prefs.js` Preferences associated with the Console panel (e.g. logLimit) +- `reducers/ui.js` UI 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. |