This page is intended to summarize basic architecture concepts for Firebug (and Firebug extensions) remote capabilities (such as remote debugging or remote HTTP monitoring).
The proxy object represents a connection between a panel (front end) and a module (back end).
The proxy has essentially two implementations:
- Local - direct API calls
- Remote - communication over TCP/IP protocol
- Panel (a view) should never use Module (a service) directly
- The communication should always be done through the current proxy
- Each Panel should have its own proxy that implements API of the remote module (service)
- There can be also proxy objects used by non-panel objects, e.g. the Profiler
- It should be possible to create new proxies in extensions.
- There should be also something like a default (or global) proxy that can be used for things like getting list of tabs on the remote browser
Here is a more detailed diagram with local and remote proxies.
- Panel object at the top is referencing its proxy object
- The proxy implementation can be local or remote
- Local proxy uses direct API calls (in process) and asynchronous callbacks
- Remote proxy uses TCP/IP connection to communicate with the back-end using JSON packets
- The remote communication is based on RDP
- The server side implements Actor, which is responsible for communication with specific proxy
- The actor is finally consuming back-end Module (service) API
Connection object is responsible for sending properly setup packets to the server and handling all response packets. This object is also responsible for handling any errors (or error packets) that can occur during the communication.
- Remote proxies should always use the connection object to send JSON packets
- The connection is singleton it'll be probably attached to the global Firebug object
Firebug also needs its server side implementation that will be used if Firebug is running in a server mode (on the remote browser). In such cases only back-end services like: NetMonitor or Debugger modules will be loaded and activated. UI overlays (i.e. browserOverlay.js) shouldn't be loaded at all since it isn't necessary and e.g. Fennec UI doesn't even have expected XUL elements to be overlayed.
Individual services should be always loaded on-demand at the time when appropriate actor is requested by the client side. For example, when the client side requests a net actor then NetMonitor module should be loaded and activated.
- Only actors are registered on the server side by default
- Actors are responsible for loading and activating back-end services
- Extensions should be able to create and register custom actors
- In order not to delay server side browser start-up time, we should delay loading of AMD modules till they are really requested by actors (e.g. the Net and Script panels don't have to be even enabled).
Firebug TabWatcher is responsible for watching browser tabs events (open, close, switch) and firing further events to make sure that Firebug UI is properly updated and showing information related to the current page.
TabWatcher is clearly a server side component and as such it also needs a proxy. In case of JSD2 some events like tabNavigate might be server by API built-in in the platform.
BTI is implementing TabWatchListener (see browser.js file), which is listening to TabWatcher and forwarding all events to Firebug infrastructure. This object should be reused or removed not duplicated.
- Local TabWatcher must be disabled when Firebug is connected to a remote browser instance
This section describes the current BTI (Browser Tools Interface) concepts. These concepts should be reviewed and refactored as necessary.
WebApp represents a browsing context. Browsing context is an environment in which Document objects are presented to the user. Instance of this object is associated with top level page window (it's on the same level as the context object).
This object doesn't implement any logic it's there only to demonstrate the concept.
- list of breakpoints
- reference to the current context
Summary of suggestions for the current BTI architecture refactoring.
- BTI.Browser should be renamed to BTI.BrowserProxy
- Firebug.connection should be Firebug.proxy
- Firebug.proxy.connection should refer to an object that is responsible for sending/receiving packets
- A connection should be per context since one context can be connected to a local browser and another one to a remote browser.
- firebug/lib/tool should be firebug/bti/tool
BTI & RDP
Before digging deep in how the remoting concept is designed, let's see what objects (entities) are already presented in the current architecture. Check out the red boxes in the diagram.
- NetMonitorModule This object is derived from Firebug.ActivableModule and represents the back-end service for Network Monitor tool (note that this object is called just NetMonitor in the current architecture).
- NetPanel This object is derived from Firebug.ActivablePanel and represent the front-end for Network Monitor tool.
- ScriptPanel Is derived from Firebug.ActivablePanel and represent the front-end for Script Debugger. The diagram doesn't show Debugger module, which represents the back-end based on JSD1. This module won't be necessary anymore since it'll be replaced by JSD2 API, JSD2 Actors and RDP (all already built-in Firefox platform).
- Context This is the document containing all data collected about the current page (debugged target). You can clearly notice the document-view pattern in the concept (context-panel).
The red-dashed line on the right side of the diagram shows the previous local access to the back-end services. In case of local debugging front-end and back-end are in the same process and there is no need for proxies. The rest of the diagram is about introducing these proxies.
- NetMonitorTool The NetPanel is consuming the backed service through a new object called NetMonitorTool. This tool object is coming from BTI. It has the same interface as the back-end service (INetMonitor) and represents a proxy for it. The tool is not the only object that composes the whole proxy, there can be also a client
- NetMonitorClient that sends proper packet types to the server and handles received packets. If the implementation of the client is too simple, it can be part of the tool itself, but the important thing is that all state data are stored in the context object. The tool object is state less just like the corresponding part on the server side, the module object.
- NetMonitorActor this object handles incoming packet from the client side, specifically from the NetMonitorClient object. Packet's are routed automatially and RDP ensures that packets from a client reach the corresponding actor.
- Connection this layer ensures safe sending and receiving packets between a tool and a client.
- Server This object represents Firebug server side. It's mostly based on RDP server that is available in Firefox platform. However Firebug needs to be able to run as a server. Firebug running in a server mode doesn't have UI and only exposes all its services through RDP actors so, BTI tools can connect it.
- ScriptPanel is again consuming JSD2 API through a proxy - a DebuggerTool. Since the DebuggerTool requires complicated interaction when setting breakpoints and debugging, there is whole set of clients that ensure communication with proper actors. There is typically one client per actor. State of all these clients is again stored within context.
- JSD2 Actors and JSD2 API are built-in Firefox platform.
The diagram doesn't show flow of events initiated on the server side. The chain is as follows:
back-end service -> module -> actor -> connection -> client -> tool -> panel
Asynchronous Data Access
One of the challenges for consuming JSD back-end API through RDP is picking the right way for asynchronous consuming of back-end data.