Difference between revisions of "Firebug Lite Differences From Firebug"

From FirebugWiki
Jump to: navigation, search
(Minor Differences)
Line 196: Line 196:
FBL.instanceOf(document, "Document")
FBL.instanceOf(document, "Document")
== Platform Differences ==
== Platform Differences ==

Latest revision as of 07:29, 10 June 2010

"Firebug Lite Differences From Firebug" describes the differences between the source code of Firebug Lite and Firebug and provides some of the rationale for the goal of sharing the same common codebase between the two projects in the future.


General Differences[edit]

General differences between Firebug Lite and Firebug:

Firebug Firebug Lite
  • can use Firefox GUI components such as windows, buttons, menus
  • has access to advanced APIs via XPCOM
  • runs outside the page (in a XUL context)
  • each panel has its own window
  • a single application instance handles all browser tabs
  • application is persistent (lives after reload or page change)
  • needs to use GUI components written in JavaScript/HTML/CSS
  • has only access to what is available via JavaScript
  • runs inside the page (in a HTML context)
  • all panels shares the same window (the chrome window) [1]
  • application instance handles only one browser tab
  • application is not persistent

Firebug Lite particularities:

  • [1] we can implement each panel container in Firebug Lite as an iframe, thus making the panels live in a different window, making the architecture more similar with the Firebug one.
  • In order to support console calls and XHR inspection Firebug Lite needs to initialize all modules before loading the UI, that is, before initializing the Chrome module and all Panels
  • Firebug Lite runs directly in the page (A DOM Window instead of a XUL Window) so we must take an extra precaution with global namespace pollution
  • Firebug runs per Firefox Window (which may contain several tabs), and Firebug Lite runs per DOM Window (per browser tab). This simplifies the things a little bit in the Lite version but it has some disadvantages: there is no communication between tabs, and the application dies as soon as the page is unloaded (it looses states and stops listening to console messages and XHR requests)

API differences[edit]

There are some subtle differences between the API of Firebug Lite and Firebug. Some of them are consequences of the issues dicussed in the previous section, but most of them are consequences of misconception, specially regarding the API of context and chrome modules.

In order to get the first Firebug panel ported to Firebug Lite it was necessary to build a prototype reimplementing both the "debugger front-end" and "debugger back-end" portions of Firebug's code. Therefore we had to make several assumptions about Firebug's internal behavior in the early stages of the Lite project, and some of those assumptions do not reflect exactly what Firebug does.

Minor Differences[edit]

The so called "Minor Differences" are the ones simple to solve and at the same time widely used in Firebug code. Such differences are the perfect candidates to start moving both Firebug and Firebug Lite codebases to a shared approach once it is simple to implement, will not cause side effects to Firebug and will make porting Firebug modules to Firebug Lite a lot easier.

The "Minor Differences" are basically a subset of the ones described in the Cross-browser JavaScript section, but they are highlighted in a separate section because of its relevance.


Problem: element.addEventListener("click", handler) is not available in IE.

Solution: use FBL.addEvent(element, "click", handler) instead.


Problem: element.getElementsByClassName("name") is not available in all browsers.

Solution: use FBL.getElementsByClassName(element, "name") instead.


Problem: constants are not available in all browsers.

Solution: use variables instead.

extra last comma[edit]


    logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
        if (!context)
            context = FirebugContext;

        if (FBTrace.DBG_WINDOWS && !context) FBTrace.sysout("Console.logRow: no context \n");

        if (this.isAlwaysEnabled())
            return Firebug.ConsoleBase.logRow.apply(this, arguments);


    logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
        if (!context)
            context = FirebugContext;

        if (FBTrace.DBG_WINDOWS && !context) FBTrace.sysout("Console.logRow: no context \n");

        if (this.isAlwaysEnabled())
            return Firebug.ConsoleBase.logRow.apply(this, arguments);

reserved word as property name of object literals[edit]


var CSSPropTag = domplate(CSSDomplateBase, {
    tag: DIV({class: "cssProp focusRow", $disabledStyle: "$prop.disabled",
          $editGroup: "$rule|isEditable",
          $cssOverridden: "$prop.overridden", role : "option"},
        SPAN({class: "cssPropName", $editable: "$rule|isEditable"}, "$prop.name"),
        SPAN({class: "cssColon"}, ":"),
        SPAN({class: "cssPropValue", $editable: "$rule|isEditable"}, "$prop.value$prop.important"),
        SPAN({class: "cssSemi"}, ";")


var CSSPropTag = domplate(CSSDomplateBase, {
    tag: DIV({"class": "cssProp focusRow", $disabledStyle: "$prop.disabled",
          $editGroup: "$rule|isEditable",
          $cssOverridden: "$prop.overridden", role : "option"},
        SPAN({"class": "cssPropName", $editable: "$rule|isEditable"}, "$prop.name"),
        SPAN({"class": "cssColon"}, ":"),
        SPAN({"class": "cssPropValue", $editable: "$rule|isEditable"}, "$prop.value$prop.important"),
        SPAN({"class": "cssSemi"}, ";")

scope problem[edit]


function localHelper(fn, object) {
    return bind(fn, object);


var localHelper = function localHelper(fn, object) {
    return bind(fn, object);



typeof document.getElementById == "function" // false in IE
typeof new String("text") == "string"        // false in all browsers


FBL.isString(typeof new String("text"))



new frames[0].window.Array() instanceof Array  // returns false
document instanceof Document // throws "Document is undefined" error in IE


FBL.isArray(new frames[0].window.Array())
FBL.instanceOf(document, "Document")

Platform Differences[edit]

Browser Platform Differences[edit]

Cross-browser JavaScript[edit]

  • all differences discussed in the Minor Differences section
  • onInput event of <input> elements

Cross-browser CSS[edit]

  •  :hover
  • child operator (>)
  • opacity
  • png24
  • round corners

Debugger Front-end Platform Differences[edit]

  • Resizable UI Window (iframe or div)
  • Popup Window
  • Buttons
  • Panel
  • Resizable SidePanel
  • PanelBar
  • Menus
  • Context-menus (partially implemented)
  • StatusBar (partially implemented)
  • Panel Options Menu (not implemented yet)

Debugger Back-end Platform Differences[edit]

  • Read resources
  • Read stylesheet rules
  • Read/write preferences
  • Activate/deactivate application
  • JavaScript debugger
  • Network monitoring

Firebug Lite Implementation Overview[edit]

Modules Created[edit]

  • dev
  • gui
  • trace
  • chrome
  • context
  • xhr

Successfully Ported Modules[edit]

  • lib (required some additions)
  • domplate
  • reps
  • console
  • consoleInjector
  • dom
  • css (required a few additions)
  • editor (required a lot of changes)

Partially Ported Modules[edit]

  • spy
  • net (only a few reps)

Next Modules to be Ported[edit]

  • infotip
  • html
  • insideOutBox
  • FirebugChrome (will require a lot of changes)
  • TabContext (will require a lot of changes)
  • TabWatcher (will require a lot of changes)
  • Inspector

Firebug Lite Development Tips[edit]

  • ActivablePanel
  • FirebugChrome
  • FirebugContext