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

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Mar 14 18:16:18 PDT 2024


            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.


    body {
      background-color: linen;

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

(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>

More information about the webkit-unassigned mailing list