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