Re: Looking for the file that determines the lines number in the Style Side Panel

106 views
Skip to first unread message

Jan Honza Odvarko

unread,
Sep 26, 2012, 2:55:40 AM9/26/12
to Firebug


On Sep 25, 6:48 pm, James Carpenter <nomadic.des...@gmail.com> wrote:
> Hello All,
>
> I am working on a custom mod to firebug that would make it be aware of CSS
> frameworks like less. (I know there is a plugins for sass, but we are using
> less)
>
> I am trying (unsuccessfully) to locate the file where the css files are
> parsed, and the line numbers are calculated.
Logic related to the CSS panel is located in content/firebug/css
directory
You can e.g. take an immediate look here:
https://github.com/firebug/firebug/blob/master/extension/content/firebug/css/cssPanel.js#L2840

I hope to make a custom build
> of firebug with a minor tweak to make it aware of the debug output from a
> less css install.  I will be posting my work to Github, and will make the
> code available once I have it up and running.https://github.com/jc4rp3nt3r/firebug
You are welcome to send a pull request that makes Firebug code base
more generic so,
you can implement your feature as an extension.

It would be certainly better that custom Firebug build.
Just file a bug for your suggestions.

Honza

>
> Thanks ahead of time for pointing me in the right direction.
>
> James Carpenter

James Carpenter

unread,
Oct 1, 2012, 3:06:09 PM10/1/12
to fir...@googlegroups.com
Thank you very much for pointing me in the right direction.

I have spent several days reviewing the code so I can hopefully offer a contribution without "mucking up the works."

I submitted a pull request with a detailed explanation of what the change does and why it is important as the server side CSS frameworks become more prevalent.  I hope that it is strongly considered.

If the pull request should be denied, is it even possible to modify the reported css file and line number in the script panel?  I was looking through the API, and it appears like I can do a LOT with it, but I am not seeing how I would modify the Style Sidebar Panel, or even how I would know what object structure to start traversing. (Please forgive my lack of understanding of the plugin. While I have been using it for a long time, and I am spending a lot of time with it as of late, I am still VERY new to the inner-workings of Firebug)

Thanks again for all your help,
James Carpenter




On Tuesday, September 25, 2012 1:48:59 PM UTC-4, James Carpenter wrote:
Hello All,

I am working on a custom mod to firebug that would make it be aware of CSS frameworks like less. (I know there is a plugins for sass, but we are using less)

I am trying (unsuccessfully) to locate the file where the css files are parsed, and the line numbers are calculated.  I hope to make a custom build of firebug with a minor tweak to make it aware of the debug output from a less css install.  I will be posting my work to Github, and will make the code available once I have it up and running.

Steven Roussey

unread,
Oct 2, 2012, 1:25:10 PM10/2/12
to fir...@googlegroups.com
What about FireSASS? Can it not be extended to have LESS support?

Long term we want to support source maps, which are a universal way of doing things like this for JS, CSS, etc.

-steve--

Jan Honza Odvarko

unread,
Oct 3, 2012, 2:34:20 AM10/3/12
to Firebug
We have been discussing the feature at yesterday's Firebug weekly
meeting
and this is what we agreed on.

1) The feature is great, but it would be better to have it implemented
as an extension that shows how it works and can be used to get
feedback
from users

2) Any fixes and/or API improvements in Firebug code base that are
needed to actually implement the extension can be committed of course.

3) It would be great to have an issue reported in Firebug issue list
so, we can track progress on the extension and any requirements for
Firebug API improvements.

Please let me know if you want me to help with the basic skeleton
of the extension. I can do it for you.

Honza

James Carpenter

unread,
Oct 3, 2012, 10:51:40 AM10/3/12
to fir...@googlegroups.com
Thank you,

An extension seems like a logical approach. I didn't head that way originally due to my lack of experience creating them.

Having said that, I would greatly appreciate any assistance you could provide to get me started on the extension.  I am looking to roll a solution out to my internal team of developers ASAP, as this is a real pain point for us. 

My top priority would be getting this working for the less CSS output, as the Sass world already has a extension that works (though we are not using Sass, so that is an assumption).

I was also wondering if it was possible to get access to the cached version of the style sheet that firebug has already loaded from within an extension (as I am doing from within the code I sent a pull request for).  From my minimal understanding of the Sass plugin, it looks like it is loading and caching the stylesheets (pulling every sheet for a 3rd time? between the browser, firebug, and the Sass plugin).  Again, I may be misunderstanding this, but I don't want to create this plugin at the expense of reasonable performance.

I will create an issue report and set up a public facing demo in the near future.

Thanks again for you help and feedback.
James Carpenter

Jan Honza Odvarko

unread,
Oct 3, 2012, 11:07:52 AM10/3/12
to Firebug
On Oct 3, 4:51 pm, James Carpenter <nomadic.des...@gmail.com> wrote:
> Thank you,
>
> An extension seems like a logical approach. I didn't head that way
> originally due to my lack of experience creating them.
>
> Having said that, I would greatly appreciate any assistance you could
> provide to get me started on the extension.
OK, I'll crate a skeleton extension for you.
I'll probably put the code on my github.com/janodvarko account and
then we can share it.

> I am looking to roll a
> solution out to my internal team of developers ASAP, as this is a real pain
> point for us.
>
> My top priority would be getting this working for the less CSS output, as
> the Sass world already has a extension that works (though we are not using
> Sass, so that is an assumption).
>
> I was also wondering if it was possible to get access to the cached version
> of the style sheet that firebug has already loaded from within an extension
> (as I am doing from within the code I sent a pull request for).
I need to yet go over your pull request, but we can improve Firebug
API if it isn't already possible to do what you need from within an
extension.

> From my
> minimal understanding of the Sass plugin, it looks like it is loading and
> caching the stylesheets (pulling every sheet for a 3rd time? between the
> browser, firebug, and the Sass plugin).  Again, I may be misunderstanding
> this, but I don't want to create this plugin at the expense of reasonable
> performance.
>
> I will create an issue report and set up a public facing demo in the near
> future.
Great, thanks

Honza

Jan Honza Odvarko

unread,
Oct 4, 2012, 7:16:04 AM10/4/12
to Firebug
I have created a repo with basic skeleton for the extension

1) The repo is here: https://github.com/janodvarko/fireless
2) It's based on HelloBootAMD example:
https://github.com/firebug/extension-examples/tree/master/HelloBootAMD
3) So, it's restart-less and it uses AMD module syntax (just like the
rest of Firebug)
4) There is also ANT script for building the result XPI, just run
'ant' in the extension directory
5) The important module is chrome/content/lessModule. It monkey-
patches all instance of the Style panel to override the getSourceLink
method. See: https://github.com/janodvarko/fireless/blob/master/chrome/content/lessModule.js#L39
You should put your code into 'Firebug.LessModule.getSourceLink'
method.

We can change the way how the Style panel is customized if you think
this is not the right way (it's a bit hacky, but should work for the
prototype).

Let me know if you have any questions!

Honza

James Carpenter

unread,
Oct 5, 2012, 10:47:00 AM10/5/12
to fir...@googlegroups.com

For anyone following this thread

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

Reply all
Reply to author
Forward
0 new messages