1684253 - userContent.css is editable and displayed always in Inspector

Status: UNCONFIRMED

(DevTools :: Inspector, defect, P3)

Description

[Karl]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0

Steps to reproduce:

I have a userContent.css containing among others:
@-moz-document url("chrome://mozapps/content/extensions/aboutaddons.html") {
span[data-l10n-id="addon-detail-private-browsing-disallow"] {
display: none !important;
}
}

Developer tools settings "Show Browser Styles" is unchecked.
on the Tools/Add-Ons page, having selected an add-on, I use right-click "Inspect Element"

Actual results:

when navigating to the <span data-l10n-id="addon-detail-private-browsing-disallow">Don’t Allow</span>
the style from userContent.css is shown in the middle panel and can be modified:
span[data-l10n-id="addon-detail-private-browsing-disallow"] {
display: none !important;
}

Expected results:

until FF 83, the style was hidden.
According to bug 935803, the userContent.css stylesheet is considered part of the browser styles and should only be dispolayed with "Show Browser Styles" checked, and even then read-only.

"Computed" view in the right panel still considers it a browser style and will only display it with its local "Browser Styles" checkbox set.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Julian Descottes [:jdescottes]]

Thanks for the report. Note that to reproduce this, you first need to enable userChrome/userContent css customizations by setting toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config.