Firebug Architecture

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Added categories)
(Corrected spelling and added some TODOs)
Line 2: Line 2:
== Resources ==
== Resources ==
-
* [https://getfirebug.com/wiki/index.php/Script_Panel_Refactoring Script Panel Refactoring]
+
* [[Script Panel Refactoring]]
-
* [[Remoting Architecture|Remoting Architecture]]
+
* [[Remoting Architecture]]
-
* [[Data Providers & Viewers|Data Providers & Viewers]]
+
* [[Data Providers & Viewers]]
== Internal Concepts And Components ==
== Internal Concepts And Components ==
Line 12: Line 12:
TODO: create structure of internal concepts + patterns and link to individual pages that provide detailed explanation. Use [http://www.softwareishard.com/slides/firebug/LondonSep2012/FirebugArchitectureHighlights.pdf Firebug Architecture Highlights (pdf)] slides.
TODO: create structure of internal concepts + patterns and link to individual pages that provide detailed explanation. Use [http://www.softwareishard.com/slides/firebug/LondonSep2012/FirebugArchitectureHighlights.pdf Firebug Architecture Highlights (pdf)] slides.
-
=== Firebug Object ===  
+
=== <code>Firebug</code> 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.
+
The <code>Firebug</code> object is the only global object and represents the roof object of 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 to or what panels should be created.
Used patterns:
Used patterns:
Line 19: Line 19:
=== Context ===
=== Context ===
-
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.
+
A <code>context</code> object represents a document and is responsible for collecting (meta) data about the current page, on which Firebug is active. The <code>context</code> object is also responsible for creating instances of the registered ''Panel'' objects.
Related patterns:
Related patterns:
Line 26: Line 26:
=== Panel ===  
=== Panel ===  
-
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.  
+
A <code>panel<code> object is used to present information to the user. The displayed data is always related to the current page. A panel is accessing the current <code>context</code> object to render relevant data.  
Related Patterns:
Related Patterns:
Line 32: Line 32:
* Presentation State
* Presentation State
-
Read more about concepts used in the [https://getfirebug.com/wiki/index.php/Script_Panel_Refactoring Script Panel]
+
Read more about concepts used in the [https://getfirebug.com/wiki/index.php/Script_Panel_Refactoring Script Panel].
=== Module ===
=== Module ===
(Services)
(Services)
 +
 +
TODO
=== Tool ===
=== Tool ===
(the same life cycle like a panel, but no UI)  
(the same life cycle like a panel, but no UI)  
 +
 +
TODO
=== Navigation & Selection ===
=== Navigation & Selection ===
 +
TODO
=== Event Sources (Listener) ===
=== Event Sources (Listener) ===
 +
TODO
=== Data Providers & Viewers ===  
=== 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.
+
Firebug uses the viewer-provider pattern to unify the way how UI widgets (viewers) access various data sources. The pattern supports synchronous as well as asynchronous data sources and allows to use a common API to access them.
Related patterns:
Related patterns:
Line 52: Line 58:
* Presentation State
* Presentation State
-
Read detailed explanation about [[Data Providers & Viewers]].
+
Read a detailed explanation about [[Data Providers & Viewers]].
=== Unified Rendering ===  
=== Unified Rendering ===  
Line 58: Line 64:
== Extensions ==
== Extensions ==
-
Firebug offers also API for extensions [[Firebug_1.10_Extension_Architecture|read more]].
+
Firebug offers also [[Firebug 1.10 Extension Architecture|APIs for extensions]].
[[Category:Firebug]]
[[Category:Firebug]]
[[Category:Firebug Development]]
[[Category:Firebug Development]]

Revision as of 18:47, 23 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.

Contents

Resources

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

The Firebug object is the only global object and represents the roof object of 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 to or what panels should be created.

Used patterns:

  • Singleton

Context

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

Panel

A panel<code> object is used to present information to the user. The displayed data is always related to the current page. A panel is accessing the current <code>context object to render relevant data.

Related Patterns:

  • View
  • Presentation State

Read more about concepts used in the Script Panel.

Module

(Services)

TODO

Tool

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

TODO

Navigation & Selection

TODO

Event Sources (Listener)

TODO

Data Providers & Viewers

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

Related patterns:

  • Provider
  • Viewer
  • Presentation State

Read a detailed explanation about Data Providers & Viewers.

Unified Rendering

(Domplate)

Extensions

Firebug offers also APIs for extensions.

Personal tools