[Webkit-unassigned] [Bug 279773] New: Web Inspector: `reparseStyleSheet` may cause a style sheet with @import statements to be re-added

Mon Sep 16 12:23:09 PDT 2024

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

            Bug ID: 279773
           Summary: Web Inspector: `reparseStyleSheet` may cause a style
                    sheet with @import statements to be re-added
           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

In the inspector's backend, there's the function `InspectorStyleSheet::reparseStyleSheet` that reconstructs a style sheet from its updated full text. When that function is called, the style sheet itself should not viewed as removed and re-added -- it should merely get its text/contents updated. That is the case normally.

However, if a style sheet A contains an @import statement to import another style sheet B, then calling reparseStyleSheet on sheet A sometimes causes not only sheet B to be removed and re-added (which is expected, since the @import rule inside sheet A is first cleared as a result of re-parsing, so sheet B gets reconstructed), but sheet A as well (which is NOT expected). When the remove/re-add happens, the InspectorCSSAgent mistakenly sends a pair of StyleSheetRemoved and StyleSheetAdded events to the frontend, causing a glitch (https://bugs.webkit.org/show_bug.cgi?id=271403).

To observe that,
   1. Put some logging inside the `InspectorCSSAgent::setActiveStyleSheetsForDocument` function (keep reading the following instructions to know what to log for).
   2. Host and open the attached demo webpage.
      - The demo webpage has an HTML style element that has an import statement.
   3. Open Web Inspector's Elements tab and select the <body> element.
   4. In the style details panel, change the media condition from `1px` to `2px` and hit Enter to apply the change.
      - This triggers a re-parsing of the parent style sheet inside the HTML style element, which has an @import statement.
   5. From the logging, notice that the parent style sheet somehow also gets removed and re-added, along with its @import-ed style sheet.
      - The expected behavior should be that only the @import-ed style sheet gets removed and re-added.

-- 
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/20240916/8fc588d0/attachment-0001.htm>