Architecture
This docs is describing internal RDP Inspector (RDPi) architecture.
The ToolboxOverlay is a component defined in the RDPi sources and registered (in the RDPi entry point) to the firebug.sdk ToolboxChrome component (imported from the firebug.sdk jpm dependency).
The firebug.sdk's ToolboxChrome creates an instance of the registered ToolboxOverlays for every developer toolbox created.
RDPi's ToolboxOverlay is the component which:
- creates the TransportObserver instance which will be associated to the toolbox target
- subscribes the TransportObserver's events (e.g. onSendPacket / onReceivePacket)
- toggles the associated RDPi window
- subscribes and reacts to the settings change events
- forwards packets to the associated RDPi window (if it exists)
- optionally keeps a cache of the RDP packets exchanged until an RDPi window is opened
The Inspector Console is mainly composed by the InspectorWindow class.
InspectorWindow is the components which:
- creates a dialog window defined by a small XUL document (
chrome/content/inspector-window.xul), the XUL document includes a FindToolbar and a contentFrame browser tag - loads the HTML/CSS/JS React-based UI in the contentFrame (
data/inspector/main.html) - inject messaging helpers (postChromeMessage to send messages from the content to the chrome, and MessageEvents to route messages from the chrome to the content) in the contentFrame using a frame script (
data/inspector/frame-script.js) - forwards preference changes events and RDP packets exchanged on the monitored client transport to the contentFrame
- inject firebug.sdk APIs (Str, Options, Locale, Trace and TraceError) in the contentFrame using a firebug.sdk helper (Content.exportIntoScope)
InspectorService is a singleton object, which is currently used only in the InspectorWindow to installs the InspectorActor in the target's Remote Debugging Server, as a new global and tab actor.
InspectorWindow receives the related global and tab InspectorFront instances, thanks to these custom actors and fronts the InspectorWindow is able to get from the Remote Debugging Server some internal info about the available Actors pools and factories and route to the React-based UI for rendering.
The StartButton creates a button in the Firefox Toolbar.
The button opens the developer toolbox and the RDP inspector window on the current tab when the user clicks on it.
The small arrow on the right will open a popup menu and gives the user access to RDPi options.
The TransportObserver registers a listener in transport layer that is associated a with given client object DebuggerClient.
All sent and received packets are consequently forwarded to other listeners.
One of the listeners is the ToolboxOverlay object that implements packet caching (and also forwards packets to RDPi window if it exists).
The TransportObserver subscribes the following transport object events:
sendonPacketonBulkPacketstartBulkSendonClosed
Currently send and onPacket are the only events decoded and forwarded to the listeners.
TBD