Firebug 1.8: Architecture Refactoring

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Created page with "Firebug 1.7 got redirected to support Firefox 4.0 changes. Therefore Firebug 1.8 takes up the refactoring work. == Problems to be Solved by Refactoring == * Prepare to support ...")
m (Added link to Firebug 1.8 API changes)
 
(5 intermediate revisions not shown)
Line 13: Line 13:
** relation of panels and modules
** relation of panels and modules
** relation of panels to platform-specific UI integration
** relation of panels to platform-specific UI integration
 +
 +
See also the [[Firebug 1.8 API Changes]] for more detailed info.
 +
 +
== Picture ==
 +
 +
{| border="1" cellpadding="4" style="text-align:center;"
 +
| 1.7
 +
| Lite
 +
| XUL
 +
|colspan="4" | Monolithic Firebug on Firefox
 +
|-
 +
| 1.8 BTI
 +
| Lite
 +
| XUL
 +
| Front-ish
 +
| BTI
 +
| Back-ish
 +
|-
 +
| 1.8 Multiprocess
 +
| (jetpack)
 +
|colspan=2| Lite+Front - BTI
 +
| -Crossfire-
 +
| BTI - Firefox Back
 +
|-
 +
| 1.8 Fennec
 +
| (jetpack)
 +
|colspan=2| Lite+Front - BTI
 +
| -Crossfire-
 +
| BTI - Fennec Backend
 +
|-
 +
| 1.8  Remote
 +
| (jetpack)
 +
|colspan=2| Lite+Front - BTI
 +
| -Crossfire-
 +
| BTI - Security Backend
 +
|-
 +
|}
== Main Steps ==
== Main Steps ==
Line 28: Line 65:
We currently have about 5 modules working, all related to script.js Script panel.
We currently have about 5 modules working, all related to script.js Script panel.
 +
 +
 +
References on modules:
 +
* [http://docs.google.com/present/view?hl=en&id=dcd8d5dk_0cs639jg8 ECMA Harmony Modules]
 +
* [http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition CommonJS Asynchronous Module Definition]
=== Introduce Browser Tools Interface ===
=== Introduce Browser Tools Interface ===
-
Remote Firebug puts module code in the server and the panel code in the client (UI side). The two sides communicate over [Crossfire].  
+
Remote Firebug puts module code in the server and the panel code in the client (UI side). The two sides communicate over [[Crossfire]].
This work is on the [http://code.google.com/p/fbug/source/browse/branches/#branches%2Fbti bti] branch.
This work is on the [http://code.google.com/p/fbug/source/browse/branches/#branches%2Fbti bti] branch.
==== Issue: file names vs folders ====
==== Issue: file names vs folders ====
-
 
-
==== Issue: SharedObject API ====
 
-
Leverage work by CommonJS
 
-
* [http://docs.google.com/present/view?hl=en&id=dcd8d5dk_0cs639jg8 ECMA Harmony Modules]
 
-
* [http://commonjs.org/specs/modules/1.0.html CommonJS Modules]
 
-
* [http://getfirebug.com/wiki/index.php/Narwhal Narwhal implementation of CommonJS]
 
-
This would put us on the same path as jetpack proposals.
 
-
 
-
As far as I know the CommonJS, as well as Mozilla platform Components.utils.module, supports common code loading, but we want common object sharing. So there may be some additional work on API.
 
=== Recode TabWatcher -> DOMWindowWatcher ===
=== Recode TabWatcher -> DOMWindowWatcher ===
Line 69: Line 102:
* [http://code.google.com/p/v8/wiki/DebuggerProtocol V8 debugger protocol]
* [http://code.google.com/p/v8/wiki/DebuggerProtocol V8 debugger protocol]
-
 
-
=== Workplan items (not yet in order) ===
 
-
 
-
# Define a new interface ''Firebug.Middle''
 
-
#* Functions equivalent to the Crossfire protocol
 
-
# Define new module mozilla-backend.js
 
-
#* Implements ''Firebug.Middle'' using jsd
 
-
# Define new module crossfire-client.js
 
-
#* Implements ''Firebug.Middle'' using Crossfire
 
-
# Define new Firefox extension Crossfire-Mozilla
 
-
#* Implements Crossfire server, calls mozilla-backend.js
 
-
# Define new Chrome extension Crossfire-Google
 
-
#* Implements Crossfire server, calls google-backend.js
 
-
# Reimplement debugger.js to calls into Firebug.Middle instead of fbs.
 
-
#* At load time Firebug.Middle is implemented using either mozilla-backend.js or crossfire-client.js
 
-
# Implement ''FBTest.Middle''
 
-
#* js unit tests that call into Firebug.Middle
 
-
#* FBTest configuration to test mozilla-backend.js and crossfire-client.js looping through server
 
=== Detailed Work Plan For JS Reimplementation ===
=== Detailed Work Plan For JS Reimplementation ===
Line 103: Line 118:
# Milestone '''Script/BTI''': in process use of BTI in Firefox
# Milestone '''Script/BTI''': in process use of BTI in Firefox
## Insert BTI into script.js, calls mozilla-backend.js
## Insert BTI into script.js, calls mozilla-backend.js
-
##* FBTests pass, the result will be first ship of BTI '''This is the proposed 1.7 target for 2010'''.
+
##* FBTests pass, the result will be first ship of BTI '''This is the proposed 1.8 target for 2011'''.
# Milestone '''CrossUnit''': Unit tests via CrossFire
# Milestone '''CrossUnit''': Unit tests via CrossFire
## Implement Crossfire server to BTI calls
## Implement Crossfire server to BTI calls

Latest revision as of 05:33, 11 May 2011

Firebug 1.7 got redirected to support Firefox 4.0 changes. Therefore Firebug 1.8 takes up the refactoring work.

Contents

[edit] Problems to be Solved by Refactoring

  • Prepare to support remote debugging for mobile and multiprocess browser
    • Server side will be headless
    • Client side will have no access to Firefox data
  • Allow simpler and more robust extensions
    • JavaScript oriented loading, no XPCOM loader required
    • Isolation and concentration of extension code
  • Clean up expedient code and clarify the implementation
    • relation to platform window system
    • relation of panels and modules
    • relation of panels to platform-specific UI integration

See also the Firebug 1.8 API Changes for more detailed info.

[edit] Picture

1.7 Lite XUL Monolithic Firebug on Firefox
1.8 BTI Lite XUL Front-ish BTI Back-ish
1.8 Multiprocess (jetpack) Lite+Front - BTI -Crossfire- BTI - Firefox Back
1.8 Fennec (jetpack) Lite+Front - BTI -Crossfire- BTI - Fennec Backend
1.8 Remote (jetpack) Lite+Front - BTI -Crossfire- BTI - Security Backend

[edit] Main Steps

[edit] Convert Firebug FBL.ns to require.js modules

To completely control the loading and scope of JS code we want to shift from script tags to require.js modules. We need to:

  1. Wrap our JS code in a different function: FBL.ns(function () {...}); -> define([deps], function() {....});
  2. Add a return statement
  3. deal with scope problems.
  4. separate files into Firebug.Modules files and Firebug.Panel files
  5. replace Cu.import modules with require.js modules

This work is on the modules branch.

We currently have about 5 modules working, all related to script.js Script panel.


References on modules:

[edit] Introduce Browser Tools Interface

Remote Firebug puts module code in the server and the panel code in the client (UI side). The two sides communicate over Crossfire.

This work is on the bti branch.

[edit] Issue: file names vs folders

[edit] Recode TabWatcher -> DOMWindowWatcher

I think we now pretty much understand TabWatcher, but it is still very heuristic and relies on Firefox idiosyncrasies that can change. Chromebug has its own watcher and even more guesses about the platform. Let's replace all of that with a clean abstraction for nsIXULWindow and nsIDOMWindow lifetime event notifications. Then put it in a SharedObject so we only need one per application and we have clearer API.

This requires platform support

[edit] Issue: DOMWindowWatcher API

Ideally we would mimic/influence jetpack here, as they have a subset of the same problem.

[edit] Sandboxed Extension Loading

By re-applying the module loading technology we can create a jetpack-like environmental wrapper for Firebug extensions. The extensions would be slightly simpler because they would just be zip files. They would be slightly more robust, because they would be evaled in a scope that only contains Firebug.

[edit] Refactor debugger.js <-> firebug-service.js API

Ultimately we want debugger.js to split into a front-end and back-end, with the back-end implementing Crossfire's V8-like protocol. So a start is to shift work between debugger.js and firebug-service.js to be an V8-like API, and use firebug-service.js as an adapter between V8-like protocol and Mozilla jsd. (Note that JSDebugv2 aka js::dbg should have this kind of API).



[edit] Detailed Work Plan For JS Reimplementation

Please ask jjb about any code in debugger.js or firebug-service.js that involves 'jsd' or 'fbs'. This code is all going away and we don't want to invest your time in understanding it more than needed.

  1. Milestone BTI: Interface, Unit Tests, firebug-service encapsulation
    1. Preliminary: move mozilla-specific code from debugger.js to fbs, split out script.js (front end).
    2. Define (initial) BrowserToolsInterface (BTI)
    3. Create unit tests for BTI
    4. Implement BTI with mozilla-backend.js based on firebug-service.js
      • This will only last for FF4.1, it can be a hack job.
  2. Milestone Script.js: Firebug Lite script.js implemented with Firebug/Firefox sourcebox panel
    1. port sourcebox panel to Lite
    2. build new script panel based on sourcebox panel
  3. Milestone Script/BTI: in process use of BTI in Firefox
    1. Insert BTI into script.js, calls mozilla-backend.js
      • FBTests pass, the result will be first ship of BTI This is the proposed 1.8 target for 2011.
  4. Milestone CrossUnit: Unit tests via CrossFire
    1. Implement Crossfire server to BTI calls
    2. Implement Crossfire client from BTI calls
    3. Drive unit tests end to end
  5. Milestone Crossfox: Crossfire from Firefox to Firefox
    1. script.js to BTI to CrossFire Client to Server to mozilla-backend.js
    2. FBTest pass
    3. Fennec prototype
    • the result will be first user value add and prepared for jsdv2
  6. Milestone Modularity: script.js usable in Firebug Lite and Firefox
    1. Preliminary: modularity model.
    2. script.js in Firebug Lite -> Firefox mozilla-backend.js
  7. Milestone ChromeUnit: Crossfire into V8
    1. Implement V8 server (or not to start).
    2. Drive unit tests into Chrome / V8
  8. Milestone ChromeScript: Firebug Lite JS debug in Chrome
    1. Firebug Lite script.js drives Chrome/V8
    • Result will be user value add Chrome JS debug with Firebug.

[edit] How to participate

Personal tools