Difference between revisions of "CSS Checker JetPack Extension"

From CDOT Wiki
Jump to: navigation, search
(→‎Project Details)
(→‎How to Launch Add-on)
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Project Name ==
 
== Project Name ==
  
−
CSS Checker JetPack Extension 0.1
+
CSS Checker Add-on SDK Extension 0.3
  
 
== Project Description ==
 
== Project Description ==
Line 35: Line 35:
  
 
* [[User:David.humphrey|Dave Humphrey]]
 
* [[User:David.humphrey|Dave Humphrey]]
 +
 +
== How to Launch Add-on ==
 +
# Get [https://jetpack.mozillalabs.com/ Add-on SDK]
 +
# Get [https://github.com/manoutoftime/cssChecker/ the code]
 +
# Put the code under <code>jetpack_folder/packages/</code>
 +
# Execute <code>cfx run -b /path/to/minefield/firefox.exe</code> under <code>jetpack_folder/packages/css-checker/</code> folder
 +
# Try it out with on the examples in <code>css-checker/example/</code> folder
  
 
== Project Details ==
 
== Project Details ==
  
−
Release 0.1
+
'''Add-on SDK Code'''
−
The extension is based on JetPack SDK and packaged as standard FF extension in a xpi archive.
+
 
 +
* [https://github.com/manoutoftime/cssChecker/blob/master/lib/main.js main.js] - executed upon launch; connects UI, pagemods and utility functions together.
 +
:* Populates UI
 +
:* Attaches pagemod.js to loading web pages
 +
:* Downloads external files
 +
 
 +
* [https://github.com/manoutoftime/cssChecker/blob/master/lib/funcs.js funcs.js] - a library with utility functions.
 +
:* <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
 +
::* Note: stolen from Firebug project
 +
 
 +
* [https://github.com/manoutoftime/cssChecker/blob/master/lib/ui.js ui.js] - a library that deals with User Interface.
 +
:* <code>populateUI()</code> - populates widget
 +
::* Arguments: None
 +
::* Returns: None
 +
::* Dependencies: panel.html, panel.js
 +
:* <code>getStatus()</code> - returns status of whether or not to modify web pages
 +
::* Arguments: None
 +
::* Returns: status, possible values: "Enabled", "Disabled".
 +
 
 +
'''Content Scripts'''
 +
 
 +
* [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.
 +
:* Receives a list of styles to be applied and XPath to apply styles to.
 +
 
 +
* [https://github.com/manoutoftime/cssChecker/blob/master/data/panel.js panel.js] - a script that modifies and sends status information to the add-on.
 +
 
 +
'''UI Component'''
 +
* [https://github.com/manoutoftime/cssChecker/blob/master/data/panel.html panel.html] - UI elements that is displayed on widget click.
 +
 
 +
== Releases ==
  
−
The way it works:
+
{| class="wikitable" border="1"
−
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.
+
! Release !! Notes !! Status
−
The problem right now is to get webkit properties from style sheet, since those are ignored by Firefox nsCSSScanner.
+
|-
 +
| 0.1 || rewritten as of 0.3 || Done
 +
|-
 +
| 0.2 || rewritten as of 0.3 || Done
 +
|-
 +
| 0.3 || Added UI, Page-mods, content scripts, XMLHttpRequest. Removed: a lot of useless code. || Done
 +
|-
 +
| 0.4 || Write tests for funcs.parseCss and funcs.cssToXPath. Fix bugs if any come up. Release add-on on AMO. || In progress
 +
|}
  
 
== Project News ==
 
== Project News ==
−
[http://manoutoftime.wordpress.com/2010/10/22/release-0-1 0.1 Release]
+
* [http://manoutoftime.wordpress.com/2010/10/22/release-0-1 0.1 Release]
 +
* [http://github.com/manoutoftime/cssChecker GitHub Repo]
 +
* [http://manoutoftime.wordpress.com/2010/11/15/release-0-2/ 0.2 Release]
 +
* [http://manoutoftime.wordpress.com/2010/12/05/release-0-3/ 0.3 Release - UI, Rewriting of 0.1 and 0.2]
 +
* [http://manoutoftime.wordpress.com/2010/12/10/release-0-3-1/ 0.3.1 Release - Rewriting of 0.1 and 0.2, Updates for Add-on SDK 1.0]

Latest revision as of 12:31, 16 December 2010

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)

How to Launch Add-on

  1. Get Add-on SDK
  2. Get the code
  3. Put the code under jetpack_folder/packages/
  4. Execute cfx run -b /path/to/minefield/firefox.exe under jetpack_folder/packages/css-checker/ folder
  5. Try it out with on the examples in css-checker/example/ folder

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.

Releases

Release Notes Status
0.1 rewritten as of 0.3 Done
0.2 rewritten as of 0.3 Done
0.3 Added UI, Page-mods, content scripts, XMLHttpRequest. Removed: a lot of useless code. Done
0.4 Write tests for funcs.parseCss and funcs.cssToXPath. Fix bugs if any come up. Release add-on on AMO. In progress

Project News

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