[Webkit-unassigned] [Bug 277893] New: Web Inspector: Style sheets created with JS with CSSOM are marked as "User Agent Style Sheet"

Fri Aug 9 18:33:16 PDT 2024

https://bugs.webkit.org/show_bug.cgi?id=277893

            Bug ID: 277893
           Summary: Web Inspector: Style sheets created with JS with CSSOM
                    are marked as "User Agent Style Sheet"
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Web Inspector
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: qianlangchen at apple.com
                CC: inspector-bugzilla-changes at group.apple.com

Created attachment 472107

  --> https://bugs.webkit.org/attachment.cgi?id=472107&action=review

`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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240810/c6b32e87/attachment.htm>