Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Making firebug's Style Side Panel aware of less css & Sass debug info #45

Open
wants to merge 4 commits into from

3 participants

@jc4rp3nt3r

With the increasing popularity of CSS coding frameworks like less & Sass, the CSS wilderness is a changing. At its simplest level, these frameworks offer bundling of files (many CSS files into 1) to limit HTTP requests for more responsive online applications.

This causes a serious headache for developers when using firebug, as it is reporting the file name and line number in the bundled file (Note: This is accurate from the client side perspective, but it makes development difficult). On the server side however, the actual rule could be in one of many files, and even when the file name is correct, the line line numbers are inaccurate due to the server side importing of the other CSS files.

However, these frameworks provide an option to output a /* CSS Comment */ including the original line number and file name where the rule is declared, removing the confusion.

This pull request simply sniffs for a .less or .sass file and parses the comment if it finds one. Else, it doesn't touch anything. The footprint for this code update is very small and I attempted to use the existing source cache to make this a near zero-impact addition to an already amazing plugin.

I have seen a fair number of requests for this functionality, and someone even put together a Sass plugin but the less side of the world has been without a good solution. I hope this helps both sides.

http://www.lesscss.org/
http://www.dotlesscss.org/
http://sass-lang.com/

@jc4rp3nt3r

Just finished a quick refactor to comply with the coding practices:
https://getfirebug.com/wiki/index.php/Firebug_Coding_Style

@janodvarko
Owner

Nice work James!

Related thread:
http://groups.google.com/group/firebug/browse_thread/thread/14300179d9587a89/d6c2fae58346ca1f

  • Could we have an issue report for this feature
  • The initial implementation should be done as Firebug extension
  • We also need a simple test case that can be used for testing (should be part of the issue report)

Honza

@jc4rp3nt3r

For anyone following this pull request.

The issue report is located at:
http://code.google.com/p/fbug/issues/detail?id=5961

The fireless extension is located at:
https://github.com/janodvarko/fireless
with my fork located at:
https://github.com/jc4rp3nt3r/fireless

@jc4rp3nt3r

The initial Alpha release of the plugin is ready:
https://github.com/jc4rp3nt3r/fireless

I provided a compiled XPI file for ease of install.

So far, this plugin has only been tested against dotLess, the .NET port of the {less} framework.

I hope to do a little research against the ports in other languages to see if what I have so far will work or not. If anyone has a Ruby or PHP version of {less} installed and available with the debug settings turned on, that would help me get this plugin up to speed faster.

@nash-ye

FireLess doesn't work for me! .. can u test it again ? .. and I am wondering if there is an another solution after 2 years! .. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 1, 2012
  1. @jc4rp3nt3r

    Make firebug aware of less css framework debug output to improve accu…

    jc4rp3nt3r authored
    …racy of file names & line numbers in the script side panel
  2. @jc4rp3nt3r
Commits on Oct 2, 2012
  1. @jc4rp3nt3r

    Added additional code to account for Sass comments too... if we are g…

    jc4rp3nt3r authored
    …oing to do one, we should do both major frameworks and make life better for everyone
  2. @jc4rp3nt3r
This page is out of date. Refresh to see the latest.
View
42 extension/content/firebug/css/cssPanel.js
@@ -1448,14 +1448,52 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
getSourceLink: function(target, rule)
{
var element = rule.parentStyleSheet.ownerNode;
+ var line = getRuleLine(rule);
+ var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var href = rule.parentStyleSheet.href; // Null means inline
// http://code.google.com/p/fbug/issues/detail?id=452
if (!href)
href = element.ownerDocument.location.href;
+
+ // if this is a less/sass file
+ var sFileType = (href.indexOf('.less') !== -1) ? 'less' :
+ (href.indexOf('.sass') !== -1) ? 'sass' : null;
+ if (sFileType) {
+ var oDoc = Css.getDocumentForStyleSheet(rule.parentStyleSheet),
+ oStyleSheet = oDoc ? oDoc.styleSheets[instance] : null;
+
+ if(oStyleSheet && this.context.sourceCache) {
+ // a counter for the current line index
+ var iLineIndex = line-1;
+ // handle to the css doc, type = array of text strings per line
+ var arrCss = this.context.sourceCache.load(oStyleSheet.href);
+ // dotLess format: /* /path/css-file.less:L123 */ sass format: /* line 20, sass/_reset.sass */
+ var regEx = (sFileType === 'less') ? /\/\* ([^:]*):L(\d*) \*\// :
+ (sFileType === 'sass') ? /\/\* line (\d*), ([^ ]*) \*\// :
+ null;
+
+ // prevent index out of bounds and stop looking after 5 lines
+ while(iLineIndex >= 0 && line - iLineIndex < 5) {
+ if (regEx.test(arrCss[iLineIndex])) {
+ // update the file and line numbers for both less and Sass style comments
+ var arrMatch = arrCss[iLineIndex].match(regEx);
+
+ if (sFileType === 'less') {
+ href = arrMatch[1];
+ line = arrMatch[2];
+ }
+ else if (sFileType === 'sass') {
+ href = arrMatch[2];
+ line = arrMatch[1];
+ }
+ break;
+ }
+ iLineIndex -= 1;
+ }
+ }
+ }
- var line = getRuleLine(rule);
- var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var sourceLink = new SourceLink.SourceLink(href, line, "css", rule, instance);
return sourceLink;
View
42 trace/FBTrace/chrome/firebug/content/css/cssPanel.js
@@ -1375,14 +1375,52 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
getSourceLink: function(target, rule)
{
var element = rule.parentStyleSheet.ownerNode;
+ var line = getRuleLine(rule);
+ var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var href = rule.parentStyleSheet.href; // Null means inline
// http://code.google.com/p/fbug/issues/detail?id=452
if (!href)
href = element.ownerDocument.location.href;
+
+ // if this is a less/sass file
+ var sFileType = (href.indexOf('.less') !== -1) ? 'less' :
+ (href.indexOf('.sass') !== -1) ? 'sass' : null;
+ if (sFileType) {
+ var oDoc = Css.getDocumentForStyleSheet(rule.parentStyleSheet),
+ oStyleSheet = oDoc ? oDoc.styleSheets[instance] : null;
+
+ if(oStyleSheet && this.context.sourceCache) {
+ // a counter for the current line index
+ var iLineIndex = line-1;
+ // handle to the css doc, type = array of text strings per line
+ var arrCss = this.context.sourceCache.load(oStyleSheet.href);
+ // dotLess format: /* /path/css-file.less:L123 */ sass format: /* line 20, sass/_reset.sass */
+ var regEx = (sFileType === 'less') ? /\/\* ([^:]*):L(\d*) \*\// :
+ (sFileType === 'sass') ? /\/\* line (\d*), ([^ ]*) \*\// :
+ null;
+
+ // prevent index out of bounds and stop looking after 5 lines
+ while(iLineIndex >= 0 && line - iLineIndex < 5) {
+ if (regEx.test(arrCss[iLineIndex])) {
+ // update the file and line numbers for both less and Sass style comments
+ var arrMatch = arrCss[iLineIndex].match(regEx);
+
+ if (sFileType === 'less') {
+ href = arrMatch[1];
+ line = arrMatch[2];
+ }
+ else if (sFileType === 'sass') {
+ href = arrMatch[2];
+ line = arrMatch[1];
+ }
+ break;
+ }
+ iLineIndex -= 1;
+ }
+ }
+ }
- var line = getRuleLine(rule);
- var instance = Css.getInstanceForStyleSheet(rule.parentStyleSheet);
var sourceLink = new SourceLink.SourceLink(href, line, "css", rule, instance);
return sourceLink;
Something went wrong with that request. Please try again.