Bug 1599027 - Remove http inspector doc. r=Honza.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Tue, 26 Nov 2019 08:43:59 +0000
changeset 503798 576b0f3b168361bfa7ca4d245ab98ae1d3bf8925
parent 503797 9816255bcde6bf3f24f4294852f9580e2af0dd74
child 503799 9e3abaf9f2f63b91e234686b12eb5267dd3173ed
push id36848
push userncsoregi@mozilla.com
push dateTue, 26 Nov 2019 16:16:58 +0000
treeherdermozilla-central@3d8cfd4a935d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1599027
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1599027 - Remove http inspector doc. r=Honza. The page was outdated and incorrect, so we remove it. The architecture diagram of the console is updated to show TabBoxPanel, and we add a quick summary for the external components used in the Console. Differential Revision: https://phabricator.services.mozilla.com/D54463
devtools/docs/index.md
devtools/docs/tools/console-panel.md
devtools/docs/tools/http-inspector.md
devtools/moz.build
--- a/devtools/docs/index.md
+++ b/devtools/docs/index.md
@@ -38,17 +38,16 @@
   * [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)
   * [Redux](frontend/redux.md)
     * [Guidelines](frontend/redux-guidelines.md)
   * [Telemetry](frontend/telemetry.md)
--- a/devtools/docs/tools/console-panel.md
+++ b/devtools/docs/tools/console-panel.md
@@ -63,78 +63,87 @@ on the following diagram.
 
 ## 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          │
-                                                                                                                   │  └──────────────────────┘  │
-                                                                         │                                         │              │
-                                                                                                                   │              │             │
-                                                                         │                                         └──────────────┘
-                                                                          ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
+┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─                                                              
+  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.
 
deleted file mode 100644
--- a/devtools/docs/tools/http-inspector.md
+++ /dev/null
@@ -1,167 +0,0 @@
-# HTTP Inspector (aka XHR Spy)
-This document is intended as a description of HTTP Inspector feature allowing
-inline inspection of HTTP logs displayed in the Console panel. The documents
-focuses on internal architecture.
-
-For detailed feature description see the following doc
-(many screenshots included):
-https://docs.google.com/document/d/1zQniwU_dkt-VX1qY1Vp-SWxEVA4uFcDCrtH03tGoHHM/edit#
-
-_HTTP Inspector feature is available in the Console panel (for web developers)
-as well as in the Browser Console (for devtools and extension developers)._
-
-The current implementation is based on React (no XUL) and some of the existing
-components should also be used when porting the Network panel to HTML.
-
-The entire feature lives in `devtools/client/webconsole/old/net` directory.
-
-## General Description
-The entry point for HTTP log inspection is represented by an expand/toggle
-button displayed in front a log in the Console panel:
-
-[+] GET XHR http://example.com/test-request.php
-
-Clicking on the [+] button expands the log and shows a body with HTTP details
-right underneath. The info body is rendered by:
-`devtools/client/webconsole/old/net/components/net-info-body` component.
-
-HTTP info is divided into several tabs:
-
-* Headers: send and received HTTP headers
-* Params: URL parameters (query string)
-* Post: HTTP post body
-* Response: HTTP response body
-* Cookies: Sent and received cookies
-
-### Headers Tab
-`devtools/client/webconsole/old/net/components/headers-tab`
-
-This is the default active tab and it's responsible for rendering
-HTTP headers. There are several header groups displayed:
-
-* Response Headers
-* Requests Headers
-* Cached Headers (not implemented yet)
-
-Individual sections are expandable/collapsible.
-
-Rendering of the groups is done by `NetInfoGroup` and `NetInfoGroupList`
-components.
-
-### Params Tab
-`devtools/client/webconsole/old/net/components/params-tab`
-
-This tab is responsible for rendering URL parameters (query string)
-and it's available only if the URL has any parameters. Individual
-parameters are parsed and displayed as a list of name/value pairs.
-
-Rendering of the parameter list is done by `NetInfoParams` component.
-
-### Post Tab
-`devtools/client/webconsole/old/net/components/post-tab`
-
-This tab is responsible for rendering HTTP post body sent to the server.
-
-### Response Tab
-`devtools/client/webconsole/old/net/components/response-tab`
-
-This tab is responsible for rendering HTTP response body received from
-the server. There might be more than one section displaying the data
-depending on the current response mime-type.
-
-* Raw Data: This section is always displayed. It renders data in a raw
-form just like they are received from the server.
-* JSON: This section is available in case of JSON responses [1].
-It parses the response and displays it as an expandable tree.
-* Image: This section is available in case of image responses [2].
-The response is decoded and displayed as an image.
-* XML: this section is available in case of HTML/XML responses [3]
-The response is parsed using DOM parser and displayed as an XML markup.
-
-[1] List of JSON mime-types: `devtools/client/webconsole/old/net/utils/json`
-[2] List of Image mime-types: `devtools/client/webconsole/old/net/utils/json`
-[3] List of XML/HTML mime-types: `devtools/client/webconsole/old/net/utils/net`
-
-Response data are fetched using `LongStringFront`, so if data are bigger
-than defined limit (see `devtools/server/main.js - LONG_STRING_LENGTH)
-the user needs to manually require the rest (there is a link at the end
-of incomplete response body that allows this).
-
-The raw section is collapsed by default if there is another presentation
-of the data.
-
-### Cookies Tab
-`devtools/client/webconsole/old/net/components/cookies-tab`
-
-This tab is responsible for displaying HTTP cookies.
-There are two groups:
-
-* Request Cookies
-* Response Cookies
-
-Rendering of the groups is done by `NetInfoGroup` and `NetInfoGroupList`
-components. The tab is not presented if there are no cookies.
-
-## Architecture
-This sections describes internal architecture of HTTPi feature.
-
-### Main
-`devtools/client/webconsole/old/net/main`
-
-This is the main module of HTTPi. It represents the root module
-of the feature.
-
-The main responsibility of the module is handling network logs forwarded
-from webconsole.js. This modules creates one instance of `NetRequest`
-object for every `NetworkEvent` (one object for every HTTP request).
-
-### NetRequest
-`devtools/client/webconsole/old/net/net-request`
-
-This module represents `NetRequest` object. It's the internal representation
-of HTTP request and it keeps its state. All HTTP details fetched dynamically
-from the backend are stored in this object.
-
-This object is responsible for:
-* Adding a toggle button in Console UI (displayed in front of HTTP requests)
-* Listening for a click event on the toggle button.
-* Sending messages to web console client object to request HTTP details.
-* Refreshing the UI as HTTP details are coming from the overlay.
-
-Note that `NetRequest` is using a small helper object `DataProvider` for
-requesting HTTP details. `DataProvider` is the connection between `NetRequest`
-and the backend.
-
-### Data Provider
-`devtools/client/webconsole/old/net/data-provider`
-
-This module is using webconsole client object to get data from the backend.
-
-### Utils
-`devtools/client/webconsole/old/net/utils`
-
-There are also some utility modules implementing helper functions.
-The important thing is that these modules doesn't require any chrome
-privileges and are ready to run inside content scope.
-
-### Components
-* `NetInfoBody` Renders the entire HTTP details body displayed when the
-  user expands a network log.
-* `NetInfoGroup` Renders a group (a section within tab). For example,
-  Request Headers section in Headers tab corresponds to one group.
-* `NetInfoGroupList` List of groups. There might be more groups of data
-  within one tab. For example, the Headers tab has Requested and Response
-  headers groups.
-* `NetInfoParams` List of name-value pairs. It's used e.g. by the Headers
-  or Params tab.
-* `HeadersTab` Displays HTTP headers.
-* `PostTab` Displays HTTP posted body data.
-* `ParamsTab` Displays URL query string.
-* `ResponseTab` Displays HTTP response body data.
-* `CookiesTab` Displays cookies.
-* `Spinner` Represents a throbber displayed when the UI is waiting for
-  incoming data.
-* `SizeLimit` Represents a link that can be used to fetch the
-  rest of data from the backend (debugger server). Used for HTTP post
-  and response bodies.
-* `XmlView` Renders XML markup.
--- a/devtools/moz.build
+++ b/devtools/moz.build
@@ -37,15 +37,15 @@ with Files('docs/tools/memory-panel.md')
     BUG_COMPONENT = ('DevTools', 'Memory')
 
 with Files('docs/tools/debugger-panel.md'):
     BUG_COMPONENT = ('DevTools', 'Debugger')
 
 with Files('docs/backend/debugger-api.md'):
     BUG_COMPONENT = ('DevTools', 'Debugger')
 
-with Files('docs/tools/http-inspector.md'):
+with Files('docs/tools/console-panel.md'):
     BUG_COMPONENT = ('DevTools', 'Console')
 
 with Files('docs/tools/inspector-panel.md'):
     BUG_COMPONENT = ('DevTools', 'Inspector')
 
 SPHINX_TREES['/devtools'] = 'docs'