CSS Checker JetPack Extension

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:

1. http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

• JetPack SDK

1. https://jetpack.mozillalabs.com/
2. IRC in #jetpack on irc.mozilla.org

• Gecko Layout Engine

1. https://developer.mozilla.org/en/Gecko

• Mozilla CSS Extensions

1. https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

• WebKit Layout Engine

1. http://webkit.org/

• Webkit CSS Extensions

1. http://trac.webkit.org/browser/trunk/WebCore/css/CSSPropertyNames.in
2. http://trac.webkit.org/browser/trunk/WebCore/css/CSSValueKeywords.in

Project Leader(s)

• Konstantin Novichikhin

Project Contributor(s)

• Dave Humphrey

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.

UI Component

• panel.html - UI elements that is displayed on widget click.

Project News

• 0.1 Release
• GitHub Repo
• 0.2 Release
• 0.3 Release - UI, Rewriting of 0.1 and 0.2
• 0.3.1 Release - Rewriting of 0.1 and 0.2, Updates for Add-on SDK 1.0