[Webkit-unassigned] [Bug 271026] New: Web Inspector:

Thu Mar 14 18:16:18 PDT 2024

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

            Bug ID: 271026
           Summary: Web Inspector:
           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 470374

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

Source code of a reduced example

Our inspector supports editing any static style in the Elements tab's style details panel. (Static means the style was included in an HTML's <style> element or in a <link> to a .css file. In this sense, a style that was generated by JavaScript isn't static, and our inspector does not support editing those in the style details panel.)

However, if a static style is modified by JavaScript, then it becomes uneditable anymore in the style details panel.

Example:

styles.css:
    body {
      background-color: linen;
    }

index.html:
    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="./styles.css"></link>
        <script>
          // document.styleSheets[0].insertRule('body { color: olive; }', 1);
        </script>
      </head>
      <body>
        The Great Demo of a Dynamically-Modified Cascading Style Sheets Style Sheet
      </body>
    </html>

(Also attached in dynamically-modified-css-demo.zip)

1. Host the webpage.
2. See that the `background-color` style is editable at the start, as per usual.
3. Un-comment the line of JavaScript in index.html and reload the webpage.
4. See that neither `background-color` nor `color` is editable in the style details panel.
   - The expected behavior should be that at least `background-color` stays editable.

---

This bug was actually introduced as an intended behavior by the fix to this bug: https://webkit.org/b/141451

However, it'd still be better if we can maintain the editability of styles for as much as possible, since dynamically-created CSS has become very popular nowadays with libraries like Framer Motion.

-- 
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/20240315/d5498970/attachment.htm>