Open Bug 920665 Opened 8 years ago Updated 3 years ago

Cannot see / edit styles added by add-ons

Categories

(DevTools :: Style Editor, enhancement, P3)

enhancement

Tracking

(Not tracked)

People

(Reporter: canuckistani, Unassigned)

Details

Attachments

(1 file)

Attached file cssinject.xpi
Original report:

https://hacks.mozilla.org/2013/09/reintroducing-the-firefox-developer-tools-part-1-the-web-console-and-the-javascript-debugger/comment-page-1/#comment-2153241

Attached is a simple add-on that uses the SDK's page-mod module to inject a stylesheet. STR:

1. install the extension
2. go to this app: http://canuckistani.github.io/st-beer/

The extension is working is the text of the refresh button is red.

3. open the style editor

Expected: I shoud see 'injected.css'
Actual: I only see the site's own styles

Attached is an xpi to test with, here is the source:

https://github.com/canuckistani/style-bug
The inspector explicitly filters out non-content style sheets, IIRC. We should probably just create an option to toggle this.
I would rather that the inspector show all non-default css applied to the page, and indicate visually how different types of styles got applied, eg from the page, from an add-on, as a user style.
(In reply to Jeff Griffiths (:canuckistani) from comment #2)
> I would rather that the inspector show all non-default css applied to the
> page, and indicate visually how different types of styles got applied, eg
> from the page, from an add-on, as a user style.

Define "non-default" ? How do we distinguish the add-on styles from the browser styles? Themes can (and sometimes do) affect web content, using the same URLs as our "regular" toolkit-based CSS which does that. Should we show that for custom themes, but not for the normal one? That seems strange.
(In reply to :Gijs Kruitbosch from comment #3)
> (In reply to Jeff Griffiths (:canuckistani) from comment #2)
> > I would rather that the inspector show all non-default css applied to the
> > page, and indicate visually how different types of styles got applied, eg
> > from the page, from an add-on, as a user style.
> 
> Define "non-default" ? 

Anything not shipped with Firefox. By default Firefox does apply some styles to content, and things like css style resets reset these defaults to a common base for web developers.

> How do we distinguish the add-on styles from the
> browser styles? Themes can (and sometimes do) affect web content, using the
> same URLs as our "regular" toolkit-based CSS which does that. Should we show
> that for custom themes, but not for the normal one? That seems strange.

I'm not sure what the mechanics, I'm just speaking from a web developer's or add-on developer's POV. I would want to see:

1. what Firefox is doing to the site before any site styles are applied
2. what styles are applied from css loaded remotely with the site via a link tag or inline styles
3. what any add-ons apply to the site
4. what is applied by the user, eg userContent.css

The requirement would be for the inspector to be able to differentiate  these different sources of styles and display that difference to the user. Right now we're doing a pretty good job of #2, and that's mostly good enough for web developers.
Are we talking about the inspector or the style editor?

> 1. what Firefox is doing to the site before any site styles are applied

You want to show the useragent sheets? We do that in the computed style tab (see the checkbox at the bottom).
(In reply to Paul Rouget [:paul] from comment #5)
> Are we talking about the inspector or the style editor?
> 
> > 1. what Firefox is doing to the site before any site styles are applied
> 
> You want to show the useragent sheets? We do that in the computed style tab
> (see the checkbox at the bottom).

I really don't think that point is all that important. If I'm developing an add-on that uses page-mod and contentStyleFile, I *do* want to see those though. Same with userContent.css.
Does it make sense to reuse the pref for showing user agent styles in the inspector to determine whether they should show up in the Style Editor?
OS: Mac OS X → All
Hardware: x86 → All
Version: 26 Branch → Trunk
Inspector bug triage (filter on CLIMBING SHOES).
Severity: normal → enhancement
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.