Bug 1378325 - Append Architecture diagram into docs; r=sole

MozReview-Commit-ID: 4rd7qevWExy

--HG--
extra : rebase_source : 8bf0a532e6c9d752a05b33a74612fdf3290025a7

devtools/docs/SUMMARY.md

@@ -1,54 +1,55 @@
-
-# Summary
-
-* [Getting started](getting-started/README.md)
-  * [Where is the code?](getting-started/where-is-the-code.md)
-  * [Architecture overview](getting-started/architecture-overview.md)
-  * [Set up to build DevTools](getting-started/build.md)
-  * [Development profiles](getting-started/development-profiles.md)
-* [Contributing](./contributing.md)
-  * [Coding standards](./contributing/coding-standards.md)
-    * [JavaScript](./contributing/javascript.md)
-      * [ESLint](./contributing/eslint.md)
-    * [CSS](./contributing/css.md)
-  * [Creating and sending patches](./contributing/making-prs.md)
-  * [Code reviews](./contributing/code-reviews.md)
-  * [Filing good bugs](./contributing/filing-good-bugs.md)
-* [Bugs and issue trackers](bugs-issues.md)
-* [Files and directories](files/README.md)
-  * [Adding New Files](files/adding-files.md)
-* [Tool Architectures](tools/tools.md)
-  * [Inspector](tools/inspector.md)
-    * [Panel Architecture](tools/inspector-panel.md)
-    * [Highlighters](tools/highlighters.md)
-  * [Memory](tools/memory-panel.md)
-  * [Debugger](tools/debugger-panel.md)
-  * [Responsive Design Mode](tools/responsive-design-mode.md)
-  * [HTTP Inspector](tools/http-inspector.md)
-* [Frontend](frontend/frontend.md)
-  * [Panel SVGs](frontend/svgs.md)
-  * [React](frontend/react.md)
-    * [Guidelines](frontend/react-guidelines.md)
-    * [Tips](frontend/react-tips.md)
-  * [Redux](frontend/redux.md)
-    * [Guidelines](frontend/redux-guidelines.md)
-    * [Tips](frontend/redux-tips.md)
-  * [Telemetry](frontend/telemetry.md)
-* [Backend](backend/backend.md)
-  * [Remote Debugging Protocol](backend/protocol.md)
-  * [Client API](backend/client-api.md)
-  * [Debugger API](backend/debugger-api.md)
-  * [Backward Compatibility](backend/backward-compatibility.md)
-  * Actors
-    * [Actors Organization](backend/actor-hierarchy.md)
-    * [Handling Multi-Processes in Actors](backend/actor-e10s-handling.md)
-    * [Writing Actors With protocol.js](backend/protocol.js.md)
-    * [Registering A New Actor](backend/actor-registration.md)
-    * [Actor Best Practices](backend/actor-best-practices.md)
-* [Automated tests](tests/README.md)
-  * Running tests
-    * [`xpcshell`](tests/xpcshell.md)
-    * [Chrome mochitests](tests/mochitest-chrome.md)
-    * [DevTools mochitests](tests/mochitest-devtools.md)
-  * [Writing tests](tests/writing-tests.md)
-  * [Debugging intermittent failures](tests/debugging-intermittents.md)
+
+# Summary
+
+* [Getting started](getting-started/README.md)
+  * [Where is the code?](getting-started/where-is-the-code.md)
+  * [Architecture overview](getting-started/architecture-overview.md)
+  * [Set up to build DevTools](getting-started/build.md)
+  * [Development profiles](getting-started/development-profiles.md)
+* [Contributing](./contributing.md)
+  * [Coding standards](./contributing/coding-standards.md)
+    * [JavaScript](./contributing/javascript.md)
+      * [ESLint](./contributing/eslint.md)
+    * [CSS](./contributing/css.md)
+  * [Creating and sending patches](./contributing/making-prs.md)
+  * [Code reviews](./contributing/code-reviews.md)
+  * [Filing good bugs](./contributing/filing-good-bugs.md)
+* [Bugs and issue trackers](bugs-issues.md)
+* [Files and directories](files/README.md)
+  * [Adding New Files](files/adding-files.md)
+* [Tool Architectures](tools/tools.md)
+  * [Inspector](tools/inspector.md)
+    * [Panel Architecture](tools/inspector-panel.md)
+    * [Highlighters](tools/highlighters.md)
+  * [Memory](tools/memory-panel.md)
+  * [Debugger](tools/debugger-panel.md)
+  * [Responsive Design Mode](tools/responsive-design-mode.md)
+  * [HTTP Inspector](tools/http-inspector.md)
+  * [Console](tools/console-panel.md)
+* [Frontend](frontend/frontend.md)
+  * [Panel SVGs](frontend/svgs.md)
+  * [React](frontend/react.md)
+    * [Guidelines](frontend/react-guidelines.md)
+    * [Tips](frontend/react-tips.md)
+  * [Redux](frontend/redux.md)
+    * [Guidelines](frontend/redux-guidelines.md)
+    * [Tips](frontend/redux-tips.md)
+  * [Telemetry](frontend/telemetry.md)
+* [Backend](backend/backend.md)
+  * [Remote Debugging Protocol](backend/protocol.md)
+  * [Client API](backend/client-api.md)
+  * [Debugger API](backend/debugger-api.md)
+  * [Backward Compatibility](backend/backward-compatibility.md)
+  * Actors
+    * [Actors Organization](backend/actor-hierarchy.md)
+    * [Handling Multi-Processes in Actors](backend/actor-e10s-handling.md)
+    * [Writing Actors With protocol.js](backend/protocol.js.md)
+    * [Registering A New Actor](backend/actor-registration.md)
+    * [Actor Best Practices](backend/actor-best-practices.md)
+* [Automated tests](tests/README.md)
+  * Running tests
+    * [`xpcshell`](tests/xpcshell.md)
+    * [Chrome mochitests](tests/mochitest-chrome.md)
+    * [DevTools mochitests](tests/mochitest-devtools.md)
+  * [Writing tests](tests/writing-tests.md)
+  * [Debugging intermittent failures](tests/debugging-intermittents.md)

devtools/docs/tools/console-panel.md

@@ -0,0 +1,42 @@
+# 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.
+
+![Console panel architecture](console-panel-architecture.png)
+
+## 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
+
+## Components
+
+The Console panel UI is built on top of [React](../frontend/react.md). It defines set of React components in `components` directory
+
+## 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.