Bug 277893

Summary: Web Inspector: Style sheets created via CSSOM (ex: adoptedStyleSheets) are marked as "User Agent Style Sheet" and not editable in Styles sidebar
Product: WebKit Reporter: Qianlang Chen <qianlangchen>
Component: Web InspectorAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: hi, inspector-bugzilla-changes, karlcow, mic.gallego, nathan, rcaliman, rik, webkit-bug-importer, woodlxf00, zachleatherman
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
`opacity: 0.5` should not be a User Agent Style Sheet none

Qianlang Chen
Reported 2024-08-09 18:33:16 PDT
Created attachment 472107 [details] `opacity: 0.5` should not be a User Agent Style Sheet In web inspector's style details panel, any CSS rule that comes from an in-memory style sheet created by JavaScript using CSSOM is displayed as "User Agent Style Sheet [lock icon]" for its URL. To reproduce: 1. Open Safari 2. Go to apple.com 3. Open web inspector 4. Go to the Console tab 5. Paste and run the following code: let s = new CSSStyleSheet(); s.replaceSync("body { opacity: 0.5; }"); document.adoptedStyleSheets = document.adoptedStyleSheets.concat([s]); 6. Go to the Elements tab 7. Click on the <body> element from the DOM tree to inspect it 8. On the right in the style details panel, find the CSS rule with the "opacity: 0.5" style 9. Observe that the URL of that CSS rule says "User Agent Style Sheet [lock icon]" (See attached `safari.png`) While showing an in-memory style sheet as user agent is certainly incorrect, it's unclear what the expected behavior should be. Here's what other browsers do: - In Chrome, the URL for an in-memory style rule is shown as "constructed style sheet", and it's not linked to anywhere. The styles can be edited like other non-user-agent styles. (See attached `chrome.png`) - In Firefox, the URL is shown as "constructed:1" and links to their fancy CSS editor (see attached `firefox.png`). However, that editor has no content.
Attachments
`opacity: 0.5` should not be a User Agent Style Sheet (279.94 KB, image/png)
2024-08-09 18:33 PDT, Qianlang Chen 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Qianlang Chen
Comment 1 2024-08-09 18:33:30 PDT
rdar://123781803
Radar WebKit Bug Importer
Comment 2 2024-08-16 18:34:12 PDT
<rdar://problem/134101594>
Nathan Knowler
Comment 3 2025-05-16 10:50:37 PDT
We use constructed stylesheets heavily in our design system and this issues makes it very inconvenient to debug WebKit-related issues as there’s no way to tweak existing rules. As a web author, I expect that I should be able to modify a constructed stylesheet with Web Inspector in the same way that I can with Chromium devtools.
Anthony Ricaud
Comment 4 2025-05-17 01:02:10 PDT
*** Bug 289948 has been marked as a duplicate of this bug. ***
Razvan Caliman
Comment 5 2025-05-19 04:02:54 PDT
Updated title to reflect additional issues described in https://bugs.webkit.org/show_bug.cgi?id=289948
Razvan Caliman
Comment 6 2025-05-28 04:56:38 PDT
*** Bug 272873 has been marked as a duplicate of this bug. ***
mic.gallego
Comment 7 2025-08-06 19:44:12 PDT
+1 on this. We are using constructed stylesheet and debugging on Safari becomes incredibly annoying.
Note You need to log in before you can comment on or make changes to this bug.