The Script panel needs to be built on top of JSD2, remote protocol and Firebug remoting API. Remoting is already supported by [[HTTP Monitor]].

The Script panel needs to be built on top of JSD2, remote protocol and Firebug remoting API. Remoting is already supported by [[HTTP Monitor]].

+

+

First of all, take a look a the following diagram.

+

+

[[Image:New-script-panel-architecture.png]]

+

+

* '''DebuggerClient''' This object comes from Firefox platform and is responsible for connection to the server back-end. The object maintains the underlying transport layer, it's responsible for tab attach/detach, it implements basic packets send and receive logic. The implementation is currently within ''resource://gre/modules/devtools/dbg-client.jsm'' module.

+

+

* '''DebuggerClientModule''' This module (singleton, one per Firebug instance) represents a wrapper around ''DebuggerClient''. It implements connection setup and initialization (e.g. port number). This object represents the ''connection'' in Firebug and should be shared by all ''remotable'' tools (e.g. the Script panel, Net panel, Profiler, etc.). Name of this module isn't probably descriptive enough, it could be changed. This object (or related object) could also replace the ''TabWatcher''.

* '''ScriptPanel''' Represents debugger UI and listens mostly to ''onStartDebugging'' and ''onStopDebugging'' events. Those are used to properly updated the panel's UI.

+

+

* '''ScriptView''' This object is currently based on Orion (but could be replaced by CodeMirror, see [https://bugzilla.mozilla.org/show_bug.cgi?id=816756 bug 816756]). The main responsibility of this object is displaying the source code (using color syntax highlight).

+

+

* '''CallstackPanel''' This panel displays list of frames when the debugger is halted. The frame list is synchronized with ThreadClient's stack frame cache using ''framesadded'' and ''framescleared'' events.

+

+

* '''ThreadClient''' This object comes from Firefox platform and is responsible for tab-thread related logic.

Current Debugger Architecture

There are several layers/objects so, let's describe them step by step starting from the bottom.

Backend: JSD1, FirebugService, Debugger

Frontend: JavaScriptTool, ScriptPanel

JSD1

This layer represents JSD1 platform API. These API allows to implement script debuggers and represent direct competition to JSD2 API. Of course this layer should entirely disappear and should be replaced by JSD2.

Firebug Service

Firebug service is implemented as js module on top of JSD1 layer. The object is called FBS and it's purpose is to wrap JSD1 API so, they are not directly accessed anywhere else. This layer also maintain list of registered debuggers (usually Firebug.Debugger module) and fires various events to them (e.g. onToggleBreakpoint, onToggleMonitor, etc.) or execute theirs callback (e.g. onBreak, onFunctionCall, onError, onThrow, onScriptCreated, etc.)

Main responsibilities:

Activate/deactivate JSD in the browser. The activation is global for all current browser windows.

Hook debugger events (interrupts, break on a breakpoint, etc.)

Maintains list of registered debuggers (there is usually just one - Firebug debugger) and sends events to them.

Manages nested event loop that is created for the debugger UI when page JS execution breaks.

Sets/removes/enables/disables/saves/loads breakpoints

Implements debugger stepping over/in/out/runUntil

Monitors function calls

Starts/stops profiling

Tracks exceptions and errors (not working well)

Tracks compiled scripts (not all of them)

Debugger

This object is derived from Firebug.Module and represents Firebug's debugger. It's also registered as a debugger into Firebug Service (FBS). This object should be the only one accessing FBS. It calls FBS API and receives various callbacks and events.

This object implements methods that can be used by the Script panel or other parts of Firebug (e.g. by those panels which implements BON).

Some examples of the API:

evaluate, evaluateInCallingFrame

breakNow, getCurrentStackTrace

rerun

stepOver, stepInto, stepOut, runUntil, resume

setBreakpoint, clearBrakpoint, etc.

monitorFunction, unmonitorFunction

monitorScript, unmonitorScript

activateDebugger, deactivateDebugger

Implementation of these methods is based on FBS API.

There is also Firebug.DebuggerListener that defines the interface used by FBS

This object is observable and it activates the underlying JSD only if an observer exists. The observer is currently the Script panel even if it would make a bit more sense if it's actually the JavaScriptTool.

JavaScriptTool

This object is part or BTI and represents a javascript debugger tool. This object is like a proxy sitting between Firebug.Debugger and the ScriptPanel. The current implementation is in-process only so, based on direct Firebug.Debugger API calls.

Script Panel

The Script Panel sits at the top of the whole stack of layers/objects. It represents the debugger UI (a view + a controller). The implementation of this object is quite extensive since it also includes the source code view and viewport (see firebug/js/sourceBox.js module.

The Script panel should never access the Firebug.Debugger directly. It should always use the JavaScriptTool.

So, for example, if the user clicks on the Breakpoint Column, the action is handled by the Script panel, forwarded to the JavaScriptTool, which forwards it to the Firebug.Debugger, which forwards it to FBS. Finally, FBS is using JSD1 API to set the breakpoint.

There are side panels (Breakpoints, Watch and Stack), which are synchronized automatically with the Script panel. They should all use JavaScriptTool to get appropriate data to display.

New Debugger Architecture

The Script panel needs to be built on top of JSD2, remote protocol and Firebug remoting API. Remoting is already supported by HTTP Monitor.

First of all, take a look a the following diagram.

DebuggerClient This object comes from Firefox platform and is responsible for connection to the server back-end. The object maintains the underlying transport layer, it's responsible for tab attach/detach, it implements basic packets send and receive logic. The implementation is currently within resource://gre/modules/devtools/dbg-client.jsm module.

DebuggerClientModule This module (singleton, one per Firebug instance) represents a wrapper around DebuggerClient. It implements connection setup and initialization (e.g. port number). This object represents the connection in Firebug and should be shared by all remotable tools (e.g. the Script panel, Net panel, Profiler, etc.). Name of this module isn't probably descriptive enough, it could be changed. This object (or related object) could also replace the TabWatcher.

ScriptPanel Represents debugger UI and listens mostly to onStartDebugging and onStopDebugging events. Those are used to properly updated the panel's UI.

ScriptView This object is currently based on Orion (but could be replaced by CodeMirror, see bug 816756). The main responsibility of this object is displaying the source code (using color syntax highlight).

CallstackPanel This panel displays list of frames when the debugger is halted. The frame list is synchronized with ThreadClient's stack frame cache using framesadded and framescleared events.

ThreadClient This object comes from Firefox platform and is responsible for tab-thread related logic.