Firebug Lite Differences From Firebug

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Created page with '"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 t…')
Line 65: Line 65:
=== addEventListener ===
=== addEventListener ===
 +
Problem: <code>element.addEventListener("click", handler)</code> is not available in IE.
 +
 +
Solution: use <code>FBL.addEvent(element, "click", handler)</code> instead.
=== getElementsByClassName ===
=== getElementsByClassName ===
 +
Problem: <code>element.getElementsByClassName("name")</code> is not available in all browsers.
 +
 +
Solution: use <code>FBL.getElementsByClassName(element, "name")</code> instead.
=== constants ===
=== constants ===
 +
Problem: constants are not available in all browsers.
 +
 +
Solution: use variables instead.
=== extra last comma ===
=== extra last comma ===
-
 
+
Problem:
<pre>
<pre>
     logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
     logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
Line 92: Line 101:
</pre>
</pre>
 +
Solution:
 +
<pre>
 +
    logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
 +
    {
 +
        if (!context)
 +
            context = FirebugContext;
-
=== reserved word as property name of object literals ===
+
        if (FBTrace.DBG_WINDOWS && !context) FBTrace.sysout("Console.logRow: no context \n");
 +
        if (this.isAlwaysEnabled())
 +
            return Firebug.ConsoleBase.logRow.apply(this, arguments);
 +
    }
 +
});
 +
</pre>
 +
 +
=== reserved word as property name of object literals ===
 +
 +
Problem:
<pre>
<pre>
var CSSPropTag = domplate(CSSDomplateBase, {
var CSSPropTag = domplate(CSSDomplateBase, {
Line 105: Line 129:
         SPAN({class: "cssPropValue", $editable: "$rule|isEditable"}, "$prop.value$prop.important"),
         SPAN({class: "cssPropValue", $editable: "$rule|isEditable"}, "$prop.value$prop.important"),
         SPAN({class: "cssSemi"}, ";")
         SPAN({class: "cssSemi"}, ";")
 +
    )
 +
});
 +
</pre>
 +
 +
Solution:
 +
<pre>
 +
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"}, ";")
     )
     )
});
});
Line 128: Line 166:
=== typeof ===
=== typeof ===
 +
Problem:
 +
<pre>
 +
typeof document.getElementById == "function" // false in IE
 +
typeof new String("text") == "string"        // false in all browsers
 +
</pre>
 +
Solution:
<pre>
<pre>
-
typeof document.getElementById // returns "object" on IE
+
FBL.isFunction(document.getElementById)
-
typeof new String("text")     // return "object"
+
FBL.isString(typeof new String("text"))
</pre>
</pre>
Line 137: Line 181:
=== instanceof ===
=== instanceof ===
-
 
+
Problem:
<pre>
<pre>
new frames[0].window.Array() instanceof Array  // returns false
new frames[0].window.Array() instanceof Array  // returns false
document instanceof Document // throws "Document is undefined" error in IE
document instanceof Document // throws "Document is undefined" error in IE
 +
</pre>
 +
 +
Solution:
 +
<pre>
 +
FBL.isArray(new frames[0].window.Array())
 +
FBL.instanceOf(document, "Document")
</pre>
</pre>
Line 152: Line 202:
==== Cross-browser JavaScript ====
==== Cross-browser JavaScript ====
-
* addEvent/removeEvent
+
* all differences discussed in the "Minor Differences" section
-
* getElementsByClass
+
* onInput event of <input> elements   
* onInput event of <input> elements   
Line 228: Line 277:
-
== Tips ==
+
== Firebug Lite Development Tips ==
* ActivablePanel
* ActivablePanel
* FirebugChrome
* FirebugChrome
* FirebugContext
* FirebugContext

Revision as of 00:15, 9 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.


Contents

Overview

General Differences

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

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

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.


addEventListener

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

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


getElementsByClassName

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

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


constants

Problem: constants are not available in all browsers.

Solution: use variables instead.


extra last comma

Problem:

    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);
    },
});

Solution:

    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

Problem:

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"}, ";")
    )
});

Solution:

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

Problem:

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

Solution:

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


typeof

Problem:

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

Solution:

FBL.isFunction(document.getElementById)
FBL.isString(typeof new String("text"))


instanceof

Problem:

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

Solution:

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


Platform Differences

Browser Platform Differences

Cross-browser JavaScript

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


Cross-browser CSS

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


Debugger Front-end Platform Differences

  • 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

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


Firebug Lite Implementation Overview

Modules Created

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


Successfully Ported Modules

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


Partially Ported Modules

  • spy
  • net (only a few reps)


Next Modules to be Ported

  • 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

  • ActivablePanel
  • FirebugChrome
  • FirebugContext
Personal tools