Difference between revisions of "Firebug Architecture"

From FirebugWiki
Jump to: navigation, search
m (Added categories)
Line 59: Line 59:
== Extensions ==
== Extensions ==
Firebug offers also API for extensions [[Firebug_1.10_Extension_Architecture|
Firebug offers also API for extensions [[Firebug_1.10_Extension_Architecture|
[[Category:Firebug Development]]

Revision as of 17:29, 21 November 2013

This page covers the architecture of Firebug (the Firefox extension), showing internal concepts and explaining how individual components interact when Firebug is running.


Internal Concepts And Components

Brief summary of internal concepts used in Firebug's framework.

TODO: create structure of internal concepts + patterns and link to individual pages that provide detailed explanation. Use Firebug Architecture Highlights (pdf) slides.

Firebug Object

Firebug Object is the only global object and represents a roof object in the entire application. The main purpose of the object is to be used as a registry. For instance, all Module and Panel objects are registered, so the frameworks knows where to send events or what panels should be created.

Used patterns:

  • Singleton


A context object represents a document and is responsible for collecting (meta) data about the current page on which Firebug is active. The context object is also responsible for creating instances of the registered Panel objects.

Related patterns:

  • Document
  • Factory


A panel object is used to present information to the user. Displayed data are always related to the current page. A panel is accessing the current Context object to render relevant data.

Related Patterns:

  • View
  • Presentation State

Read more about concepts used in the Script Panel




(the same life cycle like a panel, but no UI)

Navigation & Selection

Event Sources (Listener)

Data Providers & Viewers

Firebug uses viewer-provider patter to unify the way how UI widgets (viewers) access various data source. The pattern supports synchronous as well as asynchronous data sources and allows to use common API to access them.

Related patterns:

  • Provider
  • Viewer
  • Presentation State

Read detailed explanation about Data Providers & Viewers.

Unified Rendering



Firebug offers also API for extensions read more.