DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
# 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      │            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      │                                        │                                                             
│       │                                                                                                  └──────────────────┘                                                                                                      
        │                                                                                                            │                                                 │         ┌─────────────────────────────────────┐             
│       │                                                                                                            │                                                           │                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.