mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-25 05:41:12 +00:00
Bug 1568269 - Update console architecture diagram in doc. r=ochameau.
The diagram we had was outdated. We delete the image, and add 2 ascii diagrams that reflect the current architecture: - one for the react part - one for the non-react part The style of the page is modified so diagrams can take the whole horizontal space if needed. Differential Revision: https://phabricator.services.mozilla.com/D39157 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Nicolas Chevobbe
parent
5a1f7e7dd8
commit
8ec6376b05
@ -1,13 +1,63 @@
|
|||||||
|
|
||||||
.book .book-summary ul.summary li {
|
.book .book-summary ul.summary li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.book .book-body .page-wrapper .page-inner section.normal p,
|
.book .book-body .page-wrapper .page-inner section.normal p,
|
||||||
.book .book-body .page-wrapper .page-inner section.normal pre {
|
.book .book-body .page-wrapper .page-inner section.normal pre {
|
||||||
margin: .85em 0;
|
margin: 0.85em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.book .book-body .page-wrapper .page-inner section.normal pre {
|
.book .book-body .page-wrapper .page-inner section.normal pre {
|
||||||
line-height: 1.25em;
|
line-height: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Resets default style on the main page container */
|
||||||
|
.page-inner {
|
||||||
|
max-width: unset !important;
|
||||||
|
margin: 0 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sections are displayed on the grid. By default everything goes into the
|
||||||
|
* second column, and we use left and right columns to expand content when needed,
|
||||||
|
* for example for images, diagrams, code example, …
|
||||||
|
*/
|
||||||
|
.normal.markdown-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr minmax(min-content, 800px) 1fr;
|
||||||
|
margin: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.normal.markdown-section > * {
|
||||||
|
grid-column: 2 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero element take the whole row */
|
||||||
|
.normal.markdown-section > .hero {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
width: max-content;
|
||||||
|
max-width: 100%;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diagram,
|
||||||
|
pre.diagram {
|
||||||
|
width: max-content;
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: #f9f9fa;
|
||||||
|
border: 3px solid #d7d7db;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
padding: 2em;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: pre;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
max-width: 800px;
|
||||||
|
font-size: 0.85em !important;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
margin: 10px auto 0;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
@ -7,28 +7,140 @@ The Console panel is responsible for rendering all logs coming from the current
|
|||||||
Internal architecture of the Console panel (the client side) is described
|
Internal architecture of the Console panel (the client side) is described
|
||||||
on the following diagram.
|
on the following diagram.
|
||||||
|
|
||||||
|
<figure class="hero">
|
||||||
|
<pre class="diagram">
|
||||||
## Entry points
|
┌───────────────────────────────────┐ ┌───────────────────────────────────┐
|
||||||
|
│ DevTools │ │ WebConsolePanel │
|
||||||
There are two ways to load the Console panel. It can either run on top
|
│ [client/framework/devtools.js] │ ┌ ─ ─ ─ ─ ─ ─│ [panel.js] │
|
||||||
of the Launchpad (inside a browser tab) or within the DevTools Toolbox.
|
└───────────────────────────────────┘ └───────────────────────────────────┘
|
||||||
|
│ │ │
|
||||||
There are different entry points for these scenarios:
|
│
|
||||||
* Launchpad - uses `index.js` file as the entry point
|
openBrowserConsole() openWebConsole() │
|
||||||
* Toolbox - uses `panel.js` file as the entry point
|
│
|
||||||
|
│ │ │
|
||||||
|
▼ │
|
||||||
|
│ ┌───────────────────────────────────┐ │
|
||||||
|
│ HUDService │ │
|
||||||
|
└ ─ ─ ─ ─ ─ ▶│ [hudservice.js] │ {hud}
|
||||||
|
└───────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ │
|
||||||
|
│ │
|
||||||
|
│ │
|
||||||
|
┌─────────────{consoles}────────────┐ │
|
||||||
|
│ │ │
|
||||||
|
│ │ │
|
||||||
|
│ │ │
|
||||||
|
▼ n ▼ n ▼ 1
|
||||||
|
┌────────────────────────┐ ┌────────────────────────┐
|
||||||
|
│ BrowserConsole │ │ WebConsole │
|
||||||
|
│ [browser-console.js] │─ ─ ─ ─ ─extends─ ─ ─ ▶│ [webconsole.js] │
|
||||||
|
└────────────────────────┘ └────────────────────────┘
|
||||||
|
│
|
||||||
|
{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
|
## Components
|
||||||
|
|
||||||
The Console panel UI is built on top of [React](../frontend/react.md). It defines set of React components in `components` directory
|
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 │ │
|
||||||
|
│ │ └──────────────────┘
|
||||||
|
│ │ │
|
||||||
|
│ │ │
|
||||||
|
│ ┌─────────────────────┬─────────────────────┬─────────────────────┬───────┴─────────────┬─────────────────────┬─────────────┼─────────────────────┬───────────────────────────────────────────┐
|
||||||
|
│ │ │ │ │ │ │ │ │ │
|
||||||
|
│ ▼ ▼ ▼ ▼ ▼ ▼ │ ▼ ▼
|
||||||
|
│ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌─────────────────────────────────────┐ ┌────────────────────────────────────────┐
|
||||||
|
│ │ MessageIndent │ │ MessageIcon │ │ CollapseButton │ │ GripMessageBody │ │ ConsoleTable │ │ MessageRepeat │ │ │ Frame │ │ SmartTrace │
|
||||||
|
│ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ │ [client/shared/components/Frame.js] │ │[client/shared/components/SmartTrace.js]│
|
||||||
|
│ │ │ │ └─────────────────────────────────────┘ └────────────────────────────────────────┘
|
||||||
|
└ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
||||||
|
│ │ │
|
||||||
|
│ ├─────────────────────┘
|
||||||
|
│ │
|
||||||
|
│ ▼
|
||||||
|
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
||||||
|
│ Reps ┌──────────────────────┐ │
|
||||||
|
│ │ [client/shared/components/reps/reps.js] │ ObjectInspector │
|
||||||
|
│ └──────────────────────┘ │
|
||||||
|
│ │ │
|
||||||
|
│ ▼ │
|
||||||
|
│ │ ┌──────────────────────┐
|
||||||
|
│ │ ObjectInspectorItem │ │
|
||||||
|
│ │ └──────────────────────┘
|
||||||
|
└───────────────────────────────────────────────────────────────▶ │ │
|
||||||
|
│ ▼
|
||||||
|
┌──────────────────────┐ │
|
||||||
|
│ ┌─▶│ Rep │
|
||||||
|
│ └──────────────────────┘ │
|
||||||
|
│ │ │
|
||||||
|
│ │ │
|
||||||
|
│ └──────────────┘
|
||||||
|
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
|
||||||
|
</pre>
|
||||||
|
</figure>
|
||||||
|
|
||||||
## Actions
|
## Actions
|
||||||
|
|
||||||
The Console panel implements a set of actions divided into several groups.
|
The Console panel implements a set of actions divided into several groups.
|
||||||
|
|
||||||
* **Filters** Actions related to content filtering.
|
- **Filters** Actions related to content filtering.
|
||||||
* **Messages** Actions related to list of messages rendered in the panel.
|
- **Messages** Actions related to list of messages rendered in the panel.
|
||||||
* **UI** Actions related to the UI state.
|
- **UI** Actions related to the UI state.
|
||||||
|
|
||||||
### State
|
### State
|
||||||
|
|
||||||
@ -36,7 +148,7 @@ The Console panel manages the app state via [Redux](../frontend/redux.md).
|
|||||||
|
|
||||||
There are following reducers defining the panel state:
|
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/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/messages.js` state of all messages rendered within the panel.
|
||||||
* `reducers/prefs.js` Preferences associated with the Console panel (e.g. logLimit)
|
- `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.
|
- `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.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user