diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
| commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
| tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /devtools/docs/tools/console-panel.md | |
| parent | Initial commit. (diff) | |
| download | firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip | |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
| -rw-r--r-- | devtools/docs/tools/console-panel.md | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/devtools/docs/tools/console-panel.md b/devtools/docs/tools/console-panel.md new file mode 100644 index 0000000000..cc7c688e81 --- /dev/null +++ b/devtools/docs/tools/console-panel.md @@ -0,0 +1,159 @@ +# 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.
|