Bug 279773

Summary: Web Inspector: `reparseStyleSheet` may cause a style sheet with @import statements to be re-added
Product: WebKit Reporter: Qianlang Chen <qianlangchen>
Component: Web InspectorAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: inspector-bugzilla-changes, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
Demo webpage none

Qianlang Chen
Reported 2024-09-16 12:23:09 PDT
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.
Attachments
Demo webpage (533 bytes, application/zip)
2024-09-16 12:24 PDT, Qianlang Chen 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Qianlang Chen
Comment 1 2024-09-16 12:24:10 PDT
Created attachment 472578 [details] Demo webpage
Radar WebKit Bug Importer
Comment 2 2024-09-16 12:24:26 PDT
<rdar://problem/136094860>
Qianlang Chen
Comment 3 2024-09-20 10:35:59 PDT
This remove-and-re-add issue, which causes a frontend glitch, used to also occur when you edit the style declaration text. The patch https://github.com/WebKit/WebKit/pull/32260 made style declaration edits no longer require re-parsing the whole style sheet, so the bug has been bypassed for style declaration edits. Now, the bug may only display when - editing a non-style rule's header (like in the comment above), - adding a rule, or - removing a rule from a style sheet with an @import statement, as these function still require re-parsing the full style sheet.
Note You need to log in before you can comment on or make changes to this bug.