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

Open
wants to merge 4 commits into
from

Projects

None yet

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
Firebug Working Group member

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