Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

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.