My favorites | Sign in
Project Home Wiki Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 5961: Support for CSS server-side frameworks
6 people starred this issue and may be notified of changes. Back to list
Status:  OtherComponent
Owner:  sebastia...@gmail.com
Closed:  May 1
Cc:  odva...@gmail.com, farshid....@gmail.com


Sign in to add a comment
 
Reported by nomadic....@gmail.com, Oct 5, 2012
As per a request from Honza, I am filing an enhancement request so we can track progress & interest in this topic.

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.


The goal of this feature improvement:
To take into account that server-side css tools like less and Sass obfuscate css by combining several files into 1 for the performance gain of fewer HTTP requests and to report the correct server-side file name and line number withing firebug.  For my test case at this point in time, I am only expecting this functionality when less is in debug mode.  On a production server, the css is minified, making line numbers meaningless.

Note: There are many other beneficial features of these frameworks, but they are not relevant to the issue at hand


Firebug version (number): 1.11.0a3
Browser version: FF 15+
Operating system: ALL

Related Links:
Google Groups Thread: 
https://groups.google.com/forum/?fromgroups=#!topic/firebug/FDABedlYeok
Firebug Pull request with a temp fix to the firebug base:
https://github.com/firebug/firebug/pull/45
fireless plugin (being developed as a test case):
https://github.com/janodvarko/fireless
My fork of the fireless project:
https://github.com/jc4rp3nt3r/fireless
Demo Site using dotLess (a less css port for the .Net framework):
http://fireless.client.mojoactive.com/

Oct 6, 2012
#1 nomadic....@gmail.com
The initial Alpha release of the plugin is ready:
https://github.com/jc4rp3nt3r/fireless

I provided a compiles 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.
Oct 9, 2012
Project Member #2 odva...@gmail.com
Sounds great!

Could you also prepare simple online page that could be used to test your extension and quickly see all features you implemented.

If it's quick-and-easy to check out the extension, you can always get more feedback!

Honza

Status: Triaged
Cc: odva...@gmail.com
Labels: Type-Enhancement extension-issue fireless
Oct 9, 2012
#3 nomadic....@gmail.com
Yes,

Sorry, I know I posted this link somewhere but I forgot to add it here:
http://fireless.client.mojoactive.com/

Also, once it is approved by mozilla, the plugin can be found here:
https://addons.mozilla.org/en-US/firefox/addon/firedotless/

I will be making tweaks in the coming weeks, but the alpha version is fully functional.

Thanks,
James Carpenter
Jan 21, 2014
Project Member #4 sebastia...@gmail.com
(No comment was entered for this change.)
Summary: Support for CSS server-side frameworks (was: Support for CSS server-side frameworks (less css and Sass for now) )
Cc: sebastia...@gmail.com
Apr 27, 2014
#5 jp.charr...@sciascia.co.nz
Hi there, has there been any progress on this? 
Apr 27, 2014
Project Member #6 sebastia...@gmail.com
Yes, as mentioned in comment 3 James created an extension called FireDotLess. Did you already try it out?

You're obviously asking in relation to your post in the discussion group.[1]

Sebastian

[1] https://groups.google.com/d/msg/firebug/UGLSk_kRb9U/oEVaNE1dCwgJ
Apr 27, 2014
#7 jp.charr...@sciascia.co.nz
Hi Sebastian,

Thanks but that plug in is VERY old… (2012..) and NO it does NOT support css source maps. This is to show the original less/sass line numbers in compiled CSS. Firefox built in inspector does this… however firebug does NOT and nor do any of the currently available add ons.

See screenshot… both are the exact same page, firebug shows only the line number of the COMPILED css, where as firefox built in dev tools read the sourcemap and show the original less file and line number…

Do you know when support for CSS Source Maps will be included in Firebug as it is in chrome dev tools & firefox dev tools (screenshot shows firefox dev tools).

Thanks JP
Screen Shot 2014-04-28 at 10.20.34 am.png
256 KB   View   Download
Apr 28, 2014
Project Member #8 sebastia...@gmail.com
Ok, now I get your point.

> Do you know when support for CSS Source Maps will be included in Firebug as it is in 
> chrome dev tools & firefox dev tools (screenshot shows firefox dev tools).
It's not planned yet.

There's issue 5765 for supporting source maps for JavaScript, though AFAIK there's no issue for CSS yet. So I believe we should reuse this issue for that purpose. Honza, what do you think?

Sebastian
Apr 28, 2014
#9 jp.charr...@sciascia.co.nz
Ok, well i hope its easy to implement for you guys as its something very necessary for front-end development to the point we have had to stop using firebug for that sole reason (for our CSS development). Look forward to using it again in the future.

Thanks
Apr 28, 2014
Project Member #10 sebastia...@gmail.com
(No comment was entered for this change.)
Cc: farshid....@gmail.com
Apr 28, 2014
Project Member #11 odva...@gmail.com
> So I believe we should reuse this issue for that purpose. Honza, what do you think?
I would prefer creating a new one: "Integrate source maps for CSS"
(the existing one, issue 5765, is rather related to JS)

Honza

Apr 29, 2014
#12 nomadic....@gmail.com
As the creator of the FireDotLess plugin, in the interest of communication, I figured I should chime in here.

I don't have enough spare time (or a need) to implement source maps into FireDotLess at this point in time.  My company is using DotLess (the .Net port of the less library) and at this time, it doesn't support source maps.

This plugin is still in use daily by our development team, and functions off the generated comments when the minifyCss flag is set to false and the debug flag is set to true (as is the case in our development environments). Basically, it still works just fine for its intended purpose (which sadly was not to use source maps, as great as they are).

The FireDotLess plugin is completely open source, so if anyone has the need/drive to fork the repo and implements source maps, please feel free to do so at:
https://github.com/jc4rp3nt3r/fireless


Apr 29, 2014
#13 jp.charr...@sciascia.co.nz
Thanks but we were using the standard less not the .NET port. In all honesty I have never used firedotless as we use fireLESS (different ports I'm guessing?)

Pardon my ignorance here but perhaps there would be a way to share implementation from Firefox dev tools?
May 1, 2014
Project Member #14 sebastia...@gmail.com
>> So I believe we should reuse this issue for that purpose. Honza, what do you think?
> I would prefer creating a new one
Created issue 7419.

I close this one as it's implemented in FireLESS/FireDotLess.

Sebastian
Status: OtherComponent
Owner: sebastia...@gmail.com
Cc: -sebastia...@gmail.com
Sign in to add a comment

Powered by Google Project Hosting