From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 21:33:14 +0200 Subject: Adding upstream version 115.7.0esr. Signed-off-by: Daniel Baumann --- devtools/docs/contributor/tools/console-panel.md | 158 +++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 devtools/docs/contributor/tools/console-panel.md (limited to 'devtools/docs/contributor/tools/console-panel.md') 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. + +
+ 
+┌──────────────────────────────┐               ┌────────────────────────┐
+│           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] │
+                                               └────────────────────────┘
+                                                            │
+                                                        
+                                                            │
+                                                            ▼
+                                               ┌────────────────────────┐
+                                               │          App           │
+                                               └────────────────────────┘
+
+
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)
+
+ +## 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. + +
+ 
+┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+  WebConsole React components                                                                                                                                          │
+│ [/components]                                                       ┌────────────────────────┐
+                                                                      │          App           │                                                                       │
+│                                                                     └────────────────────────┘
+                                                                                   │                                                                                   │
+│                                                                                  │
+        ┌───────────────────┬──────────────────────┬───────────────────┬───────────┴─────────┬───────────────────────┬────────────────────┬─────────────────┐          │
+│       │                   │                      │                   │                     │                       │                    │                 │
+        ▼                   ▼                      ▼                   ▼                     ▼                       ▼                    ▼                 ▼          │       ┌────────────────────────────────────────┐
+│ ┌──────────┐     ┌────────────────┐     ┌────────────────┐     ┌───────────┐    ┌────────────────────┐     ┌──────────────┐     ┌──────────────┐     ┌─────────┐             │                 Editor                 │
+  │ SideBar  │     │NotificationBox │     │ ConfirmDialog  │     │ FilterBar │    │ ReverseSearchInput │     │ConsoleOutput │     │EditorToolbar │     │ JSTerm  │──.editor───▶│                            │
+│ └──────────┘     └────────────────┘     │        │     └───────────┘    └────────────────────┘     └──────────────┘     └──────────────┘     └─────────┘             │ [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          │
+                                                                                                                   │  └──────────────────────┘  │
+                                                                         │                                         │              │
+                                                                                                                   │              │             │
+                                                                         │                                         └──────────────┘
+                                                                          ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
+
+
+ +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. -- cgit v1.2.3