Firebug Lite Differences From Firebug

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
 
(3 intermediate revisions not shown)
Line 61: Line 61:
once it is simple to implement, will not cause side effects to Firebug and will
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.
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|Cross-browser JavaScript]] section, but they
 +
are highlighted in a separate section because of its relevance.
Line 87: Line 91:
Problem:
Problem:
-
<pre>
+
<syntaxhighlight lang="javascript">
     logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
     logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
     {
     {
Line 99: Line 103:
     },
     },
});
});
-
</pre>
+
</syntaxhighlight>
Solution:
Solution:
-
<pre>
+
<syntaxhighlight lang="javascript">
     logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
     logRow: function(appender, objects, context, className, rep, sourceLink, noThrottle, noRow)
     {
     {
Line 114: Line 118:
     }
     }
});
});
-
</pre>
+
</syntaxhighlight>
Line 120: Line 124:
Problem:
Problem:
-
<pre>
+
<syntaxhighlight lang="javascript">
var CSSPropTag = domplate(CSSDomplateBase, {
var CSSPropTag = domplate(CSSDomplateBase, {
     tag: DIV({class: "cssProp focusRow", $disabledStyle: "$prop.disabled",
     tag: DIV({class: "cssProp focusRow", $disabledStyle: "$prop.disabled",
Line 131: Line 135:
     )
     )
});
});
-
</pre>
+
</syntaxhighlight>
Solution:
Solution:
-
<pre>
+
<syntaxhighlight lang="javascript">
var CSSPropTag = domplate(CSSDomplateBase, {
var CSSPropTag = domplate(CSSDomplateBase, {
     tag: DIV({"class": "cssProp focusRow", $disabledStyle: "$prop.disabled",
     tag: DIV({"class": "cssProp focusRow", $disabledStyle: "$prop.disabled",
Line 145: Line 149:
     )
     )
});
});
-
</pre>
+
</syntaxhighlight>
=== scope problem ===
=== scope problem ===
Problem:
Problem:
-
<pre>
+
<syntaxhighlight lang="javascript">
function localHelper(fn, object) {
function localHelper(fn, object) {
     return bind(fn, object);
     return bind(fn, object);
};
};
-
</pre>
+
</syntaxhighlight>
Solution:
Solution:
-
<pre>
+
<syntaxhighlight lang="javascript">
var localHelper = function localHelper(fn, object) {
var localHelper = function localHelper(fn, object) {
     return bind(fn, object);
     return bind(fn, object);
};
};
-
</pre>
+
</syntaxhighlight>
Line 167: Line 171:
Problem:
Problem:
-
<pre>
+
<syntaxhighlight lang="javascript">
typeof document.getElementById == "function" // false in IE
typeof document.getElementById == "function" // false in IE
typeof new String("text") == "string"        // false in all browsers
typeof new String("text") == "string"        // false in all browsers
-
</pre>
+
</syntaxhighlight>
Solution:
Solution:
-
<pre>
+
<syntaxhighlight lang="javascript">
FBL.isFunction(document.getElementById)
FBL.isFunction(document.getElementById)
FBL.isString(typeof new String("text"))
FBL.isString(typeof new String("text"))
-
</pre>
+
</syntaxhighlight>
Line 182: Line 186:
Problem:
Problem:
-
<pre>
+
<syntaxhighlight lang="javascript">
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>
+
</syntaxhighlight>
Solution:
Solution:
-
<pre>
+
<syntaxhighlight lang="javascript">
FBL.isArray(new frames[0].window.Array())
FBL.isArray(new frames[0].window.Array())
FBL.instanceOf(document, "Document")
FBL.instanceOf(document, "Document")
-
</pre>
+
</syntaxhighlight>
Line 202: Line 206:
==== Cross-browser JavaScript ====
==== Cross-browser JavaScript ====
-
* all differences discussed in the "Minor Differences" section
+
* all differences discussed in the [[#Minor_Differences|Minor Differences]] section
-
* onInput event of <input> elements
+
* onInput event of <input> elements
-
 
+
==== Cross-browser CSS ====
==== Cross-browser CSS ====

Latest revision as of 15: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.


Contents

[edit] Overview

[edit] 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)


[edit] 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.


[edit] 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.

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.


[edit] addEventListener

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

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


[edit] getElementsByClassName

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

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


[edit] constants

Problem: constants are not available in all browsers.

Solution: use variables instead.


[edit] 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);
    }
});


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


[edit] scope problem

Problem:

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

Solution:

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


[edit] 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"))


[edit] 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")


[edit] Platform Differences

[edit] Browser Platform Differences

[edit] Cross-browser JavaScript

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

[edit] Cross-browser CSS

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


[edit] 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)


[edit] Debugger Back-end Platform Differences

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


[edit] Firebug Lite Implementation Overview

[edit] Modules Created

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


[edit] Successfully Ported Modules

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


[edit] Partially Ported Modules

  • spy
  • net (only a few reps)


[edit] 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


[edit] Firebug Lite Development Tips

  • ActivablePanel
  • FirebugChrome
  • FirebugContext
Personal tools