1565669 - Style Editor doesn't show stylesheets added by webextension

Status: NEW

(DevTools :: Style Editor, defect, P3)

Description

[0RUBn0]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

Made a webextension that inserts CSS in the content. It works and I can see the styles.
When i then edit a style via "Inpsect" and then click the stylesheet name (e.g. "myInsertedCSS.css" in the small style box on the bottom of Inspector, Firefox Developer Toold goes to "Style Editor" but doesn't go the desired file. When I browser in the list of files, I can't see the desired stylesheet.
Now, after several things I do, like "Inspect" the temporary loaded addon, refreshing that debug window, refreshing my page with addon content, showing console, refrehshing again, and trying I don't know what.. it suddenly show my desired css style sheet. No idea which thing actually triggered to show it.
This has been happening for 3 years; now using FF Dev 69.0b3 and it still happens.

Comment 1

[Luciana queirolo]

Hi,

Could you please provide an example test or screen recording?
Please try to see if the issue is reproducible on Nightly build, here is the link for download https://www.mozilla.org/en-US/firefox/nightly/all/

Thanks!

Comment 2

[0RUBn0]

Attachment: Screen recording DevTools not showing webextension content css

The right click context menu doesn't show, but it's just going to "Inspect" element (Q)

Comment 3

[0RUBn0]

I'm not sure I want to download and install a nightly build. I have already so much dev stuff crowding my windows... Can we do without for now? I don't think anyone even knows about the years old bug, let be it accidentally gets fixed.

Comment 4

[0RUBn0]

I just have a small intuition.
I have the impression that creating a new empty stylesheet in the webextension tab (see video 1:54) is always part of the things I do before it finally shows the stylesheet as it should; or is it mostly and not always? (Just trying to help the debugger with more info)

Comment 5

[Gabriel Luong [:gl] (ΦωΦ)]

@rcaliman: Was looking at this in triage, and remembered you said you were gonna look at it and triage this.

Comment 6

[Razvan Caliman [:rcaliman]]

I tried a few different approaches with an own web extension.
The issues listed by the reporter do reproduce, but inconsistently:

• sometimes the styles injected by the web extension do show up in the Rules view
• sometimes a click on the source link of a matching style does navigate to the correct stylesheet in the Style Editor
• making changes to the styles are applied inconsistently; sometimes repeat operations are needed
• style changes made by either the Rules panel in the Inspector or the Style Editor are persisted until closing+reopening either the tab (if the extension has permissions just for that domain) or the whole browser (if the extension has permissions on all domains) -- this makes testing within a stable & reproducible environment particularly tricky.

The web extension debugging workflow isn't well supported right now. As a web extension developer myself, I can attest to the frustration.

I will put this issue on the backlog so we can revisit it when we focus on web extensions.
Right now we need to focus on other priorities.