# 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 │ 1│ WebConsoleConnectionProxy │
│ [webconsole-ui.js] │───{proxy}──▶│[webconsole-connection-proxy.js] │
└────────────────────────┘ └─────────────────────────────────┘
│ │
{wrapper}
│ │
│
│ │
â–¼ 1
┌────────────────────────┠│
│ WebConsoleWrapper │
│[webconsole-wrapper.js] │◀ ─ ─ ─calls methods from ─ ─ ┘
└────────────────────────┘
│
<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.