Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 5f3043fef76f4cf00455056627f4cfea814101ef
https://github.com/WebKit/WebKit/commit/5f3043fef76f4cf00455056627f4cfea814101ef
Author: Qianlang Chen <[email protected]>
Date: 2025-01-15 (Wed, 15 Jan 2025)
Changed paths:
A LayoutTests/inspector/css/modify-with-cssom-expected.txt
A LayoutTests/inspector/css/modify-with-cssom.html
A LayoutTests/inspector/css/resources/modify-with-cssom.css
M Source/WebCore/css/CSSStyleSheet.cpp
M Source/WebCore/css/CSSStyleSheet.h
M Source/WebCore/inspector/InspectorStyleSheet.cpp
M Source/WebCore/inspector/InspectorStyleSheet.h
Log Message:
-----------
Web Inspector: If a style sheet is modified by CSSOM, all rules in it can't
be edited anymore from style details panel
https://bugs.webkit.org/show_bug.cgi?id=271026
rdar://124650808
Reviewed by BJ Burg.
To execute a `CSS.setStyleText` command for a style edit, in order
to know where in the style sheet's text to apply a style modification,
InspectorStyleSheet records of a list of source ranges -- the
start and end locations of each CSS rule in the static source.
However, when CSSOM in JavaScript modifies a style sheet, whether it's
adding, removing, or mutating a rule, that style sheet in memory no
longer matches its source text, resulting its list of source ranges
getting out of sync with the static source.
To bypass the outdating of source ranges, what we currently do is
restrict the editing of any CSSOM-modified style sheets. This is done by
setting a mutation flag for a style sheet when it's CSSOM-modified and
returning null for any of its styles' source range. The frontend then
renders any style declaration without a source range as non-editable.
This commit enables editing to CSSOM-modified style sheets. As a
CSSOM-modified style sheet does not match its static source text, we
reconstruct its text by serializing all of its CSS rules and
concatenating them. This is possible because the `cssText` property
is well-defined for any CSS, style or non-style, nested or non-nested
rules. With this change, we will then be able to provide source ranges
for any style from its newly-constructed source text, keeping them
editable as if it's from an unmodified style sheet.
There's one side effect of this patch and the reconstruction of style
sheet text: CSSOM's modifications to a style sheet will now also be
reflected in the Sources tab in the frontend. I think this is reasonable
as it's consistent with the Sources tab reflecting style edits in the
style details panel. However, the original style sheet's text will be
completely overridden by the reconstructed text, along with any comments
or white spaces it had. We can follow up this commit by coming up with
some display in the frontend to indicate a style sheet viewed in the
Sources tab currently contains CSSOM-related styles. Nonetheless, I
think this patch by itself is still valuable enough to have without
the frontend improvement, as it solves a more immediate problem that
is confusing and frequently occurred.
* Source/WebCore/css/CSSStyleSheet.h:
* Source/WebCore/css/CSSStyleSheet.cpp:
(WebCore::CSSStyleSheet::didMutateRules):
(WebCore::CSSStyleSheet::didMutate):
- The flag `m_wasMutated` now indicates to InspectorStyleSheet
whether it should reconstruct its source text. Therefore, it also
needs to be set on `didMutate`, which is called when mutating
a CSSRule in-place
(e.g. via PropertySetCSSStyleDeclaration::setProperty).
- Remove the `clearHadRulesMutation()` method because `m_wasMutated`
is the useful flag now, and there's no need to clear that flag
because if the user edits from the styles panel a CSSOM-modified
style, the text still needs to be reconstructed.
* Source/WebCore/inspector/InspectorStyleSheet.h:
* Source/WebCore/inspector/InspectorStyleSheet.cpp:
(WebCore::InspectorStyleSheet::ensureText):
(WebCore::InspectorStyleSheet::styleSheetTextFromCSSRuleSerialization const):
- If the style sheet has been mutated, reconstruct its source text
by concatenating its CSS rules' serializations. Also call
`fireStyleSheetChanged` to make sure the frontend reflects all
CSSOM-modifications on first fetch.
(WebCore::InspectorStyle::buildObjectForStyle):
(WebCore::InspectorStyle::buildArrayForComputedStyle):
(WebCore::InspectorStyle::text):
(WebCore::InspectorStyle::collectProperties):
(WebCore::InspectorStyle::styleWithProperties):
(WebCore::InspectorStyleSheet::setRuleHeaderText):
(WebCore::InspectorStyleSheet::text):
(WebCore::InspectorStyleSheet::ensureParsedDataReady):
(WebCore::InspectorStyleSheet::ensureText):
(WebCore::InspectorStyleSheetForInlineStyle::text):
(WebCore::InspectorStyle::buildObjectForStyle const): Deleted.
(WebCore::InspectorStyle::buildArrayForComputedStyle const): Deleted.
(WebCore::InspectorStyle::text const): Deleted.
(WebCore::InspectorStyle::collectProperties const): Deleted.
(WebCore::InspectorStyle::styleWithProperties const): Deleted.
(WebCore::InspectorStyleSheet::text const): Deleted.
(WebCore::InspectorStyleSheet::ensureText const): Deleted.
(WebCore::InspectorStyleSheetForInlineStyle::text const): Deleted.
- Adapt to `ensureText` no longer being `const`.
(WebCore::InspectorStyleSheet::reparseStyleSheet):
(WebCore::InspectorStyleSheet::setRuleStyleText):
- Adapt to the removal of `CSSStyleSheet::clearHadRulesMutation()`.
(WebCore::InspectorStyleSheet::styleSheetMutated const): Deleted.
- Not used anywhere.
* LayoutTests/inspector/css/modify-with-cssom-expected.txt: Added.
* LayoutTests/inspector/css/modify-with-cssom.html: Added.
* LayoutTests/inspector/css/resources/modify-with-cssom.css: Added.
(body):
- Add a simple test that the CSS.getMatchedStylesForNode command
can return style rules with non-empty source ranges, pointed into
the generated style text, for CSSOM-related styles. (Without my
changes from this commit, CSS.getMatchedStylesForNode always
returned style rules without source ranges, whenever the style
sheet is CSSOM-modified, and thus preventing editing in the
frontend.)
- I put this test in a new file rather than in the existing
modify-css-property.html as that test suite is currently skipped:
https://github.com/WebKit/WebKit/blob/586aa00275b46a60eca5c692d81de42e51882171/LayoutTests/platform/mac/TestExpectations#L1948
Canonical link: https://commits.webkit.org/288948@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
