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 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.book .book-body .page-wrapper .page-inner section.normal p,
|
||||
.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 {
|
||||
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
|
||||
on the following diagram.
|
||||
|
||||
|
||||
|
||||
## Entry points
|
||||
|
||||
There are two ways to load the Console panel. It can either run on top
|
||||
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
|
||||
* Toolbox - uses `panel.js` file as the entry point
|
||||
<figure class="hero">
|
||||
<pre class="diagram">
|
||||
┌───────────────────────────────────┐ ┌───────────────────────────────────┐
|
||||
│ DevTools │ │ WebConsolePanel │
|
||||
│ [client/framework/devtools.js] │ ┌ ─ ─ ─ ─ ─ ─│ [panel.js] │
|
||||
└───────────────────────────────────┘ └───────────────────────────────────┘
|
||||
│ │ │
|
||||
│
|
||||
openBrowserConsole() openWebConsole() │
|
||||
│
|
||||
│ │ │
|
||||
▼ │
|
||||
│ ┌───────────────────────────────────┐ │
|
||||
│ 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
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
- **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
|
||||
|
||||
@ -36,7 +148,7 @@ 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.
|
||||
- `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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user