CSS Checker JetPack Extension

From CDOT Wiki
Revision as of 12:48, 16 December 2010 by Knovichikhi (talk | contribs) (Project Details)
Jump to: navigation, search

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)

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.

Project News