Difference between revisions of "CSS Checker JetPack Extension"
Knovichikhi (talk | contribs) (→Project Details) |
Knovichikhi (talk | contribs) (→Project Details) |
||
| Line 40: | Line 40: | ||
'''Add-on SDK Code''' | '''Add-on SDK Code''' | ||
| − | * main.js - executed upon launch; connects UI, pagemods and utility functions together. | + | * [https://github.com/manoutoftime/cssChecker/blob/master/lib/main.js main.js] - executed upon launch; connects UI, pagemods and utility functions together. |
:* Populates UI | :* Populates UI | ||
:* Attaches pagemod.js to loading web pages | :* Attaches pagemod.js to loading web pages | ||
:* Downloads external files | :* Downloads external files | ||
| − | * funcs.js - a library with utility functions. | + | * [https://github.com/manoutoftime/cssChecker/blob/master/lib/funcs.js funcs.js] - a library with utility functions. |
:* <code>parseCSS(css)</code> - parses CSS | :* <code>parseCSS(css)</code> - parses CSS | ||
::* Arguments: CSS Style Sheet in String format | ::* Arguments: CSS Style Sheet in String format | ||
| Line 54: | Line 54: | ||
::* Note: stolen from Firebug project | ::* Note: stolen from Firebug project | ||
| − | * ui.js - a library that deals with User Interface. | + | * [https://github.com/manoutoftime/cssChecker/blob/master/lib/ui.js ui.js] - a library that deals with User Interface. |
:* <code>populateUI()</code> - populates widget | :* <code>populateUI()</code> - populates widget | ||
::* Arguments: None | ::* Arguments: None | ||
| Line 65: | Line 65: | ||
'''Content Scripts''' | '''Content Scripts''' | ||
| − | * pagemod.js - a script that is attached to all loading webpages. | + | * [https://github.com/manoutoftime/cssChecker/blob/master/data/pagemod.js pagemod.js] - a script that is attached to all loading webpages. |
:* Sends CSS either as clear text or as a link to the add-on. | :* Sends CSS either as clear text or as a link to the add-on. | ||
:* Receives a list of styles to be applied and XPath to apply styles to. | :* Receives a list of styles to be applied and XPath to apply styles to. | ||
| − | * panel.js - a script that modifies and sends status information to the add-on. | + | * [https://github.com/manoutoftime/cssChecker/blob/master/data/panel.js panel.js] - a script that modifies and sends status information to the add-on. |
== Project News == | == Project News == | ||
Revision as of 11:52, 16 December 2010
Contents
Project Name
CSS Checker Add-on SDK Extension 0.3
Project Description
CSS as a standard evolves more slowly than browser vendor implementations, and as such, browser extensions are created. For example: -moz-box-shadow (Mozilla only), -webkit-box-shadow (Chrome/Safari), box-shadow (CSS standard). This extension will allow the user to tell when a a -webkit-* extension is being used for which there is also a -moz-* version. This will help with finding compatibility issues on websites that appear to work in one browser and not another.
Resources
- Vendor Specific Extensions:
- JetPack SDK
- https://jetpack.mozillalabs.com/
- IRC in #jetpack on irc.mozilla.org
- Gecko Layout Engine
- Mozilla CSS Extensions
- WebKit Layout Engine
- Webkit CSS Extensions
Project Leader(s)
Project Contributor(s)
Project Details
Add-on SDK Code
- main.js - executed upon launch; connects UI, pagemods and utility functions together.
- Populates UI
- Attaches pagemod.js to loading web pages
- Downloads external files
- funcs.js - a library with utility functions.
-
parseCSS(css)- parses CSS
- Arguments: CSS Style Sheet in String format
- Returns: Array of Objects with selector, property and value properties
-
cssToXPath(rule)- converts CSS Selector to XPath
- Arguments: CSS Selector in String format
- Returns: CSS Selector in XPath format
- Note: stolen from Firebug project
-
- ui.js - a library that deals with User Interface.
-
populateUI()- populates widget
- Arguments: None
- Returns: None
- Dependencies: panel.html, panel.js
-
getStatus()- returns status of whether or not to modify web pages
- Arguments: None
- Returns: status, possible values: "Enabled", "Disabled".
-
Content Scripts
- pagemod.js - a script that is attached to all loading webpages.
- Sends CSS either as clear text or as a link to the add-on.
- Receives a list of styles to be applied and XPath to apply styles to.
- panel.js - a script that modifies and sends status information to the add-on.
