Difference between revisions of "CSS Checker JetPack Extension"

From CDOT Wiki
Jump to: navigation, search
(→‎Project News)
(→‎Project Details)
Line 36: Line 36:
 
* [[User:David.humphrey|Dave Humphrey]]
 
* [[User:David.humphrey|Dave Humphrey]]
  
−
== Project Details ==
+
== Project Details ==
 +
* main.js - executed upon launch; connects UI, pagemods and utility functions together.
 +
# Populates UI
 +
# Attaches Pagemod to loading web pages
 +
# Downloads external files
  
−
Release 0.1
+
* funcs.js - a library with utility functions.
−
The extension is based on JetPack SDK and packaged as standard FF extension in a xpi archive.
+
# <code>parseCSS(css)</code> - parses CSS
 +
:* Arguments: CSS Style Sheet in String format
 +
:* Returns: Array of Objects with selector, property and value properties
 +
# <code>cssToXPath(rule)</code> - converts CSS Selector to XPath
 +
:* Arguments: CSS Selector in String format
 +
:* Returns: CSS Selector in XPath format
  
−
The way it works:
+
* ui.js - a library that deals with User Interface.
−
On tab load, it will parse page style sheets all the way down to X CSS properties. It will then get that CSS property selector and convert it to xpath. Firefox xpath evaluator interface will then build a list of matching DOM elements.
+
# <code>populateUI()</code> - populates widget
−
The problem right now is to get webkit properties from style sheet, since those are ignored by Firefox nsCSSScanner.
+
:* Arguments: None
 +
:* Returns: None
 +
# <code>getStatus()</code> - returns status of whether or not to modify web pages
 +
:* Arguments: None
 +
:* Returns: String, possible values: "Enabled", "Disabled".
  
 
== Project News ==
 
== Project News ==

Revision as of 12:34, 16 December 2010

Project Name

CSS Checker JetPack Extension 0.1

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 ==
  • main.js - executed upon launch; connects UI, pagemods and utility functions together.
  1. Populates UI
  2. Attaches Pagemod to loading web pages
  3. Downloads external files
  • funcs.js - a library with utility functions.
  1. parseCSS(css) - parses CSS
  • Arguments: CSS Style Sheet in String format
  • Returns: Array of Objects with selector, property and value properties
  1. cssToXPath(rule) - converts CSS Selector to XPath
  • Arguments: CSS Selector in String format
  • Returns: CSS Selector in XPath format
  • ui.js - a library that deals with User Interface.
  1. populateUI() - populates widget
  • Arguments: None
  • Returns: None
  1. getStatus() - returns status of whether or not to modify web pages
  • Arguments: None
  • Returns: String, possible values: "Enabled", "Disabled".

Project News

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=CSS_Checker_JetPack_Extension&oldid=52958"