[webkit-changes] [WebKit/WebKit] b1dd65: Web Inspector: Implicitly nested property declarat...

[Patrick Angle]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: b1dd655b710e45f59c91ef803255a8dbc4fc94e1
      https://github.com/WebKit/WebKit/commit/b1dd655b710e45f59c91ef803255a8dbc4fc94e1
  Author: Patrick Angle <pangle at apple.com>
  Date:   2023-03-07 (Tue, 07 Mar 2023)

  Changed paths:
    M LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt
    M LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-expected.txt
    M LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.html
    M LayoutTests/inspector/css/modify-css-property-expected.txt
    M LayoutTests/inspector/css/modify-css-property.html
    M LayoutTests/inspector/css/resources/modify-css-property.css
    M Source/JavaScriptCore/inspector/protocol/CSS.json
    M Source/WebCore/css/CSSPropertySourceData.h
    M Source/WebCore/css/parser/CSSParserImpl.cpp
    M Source/WebCore/css/parser/CSSParserImpl.h
    M Source/WebCore/css/parser/CSSParserObserver.h
    M Source/WebCore/inspector/InspectorStyleSheet.cpp
    M Source/WebCore/inspector/InspectorStyleSheet.h
    M Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
    M Source/WebInspectorUI/UserInterface/Models/CSSRule.js
    M Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
    M Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js

  Log Message:
  -----------
  Web Inspector: Implicitly nested property declarations inside non-style rules results in nested content being deleted during editing or displaying incorrect matched styles for elements
https://bugs.webkit.org/show_bug.cgi?id=251565
rdar://104821946

Reviewed by Devin Rousso.

InspectorStyleSheet was built with the assumption that Style rules contained property declarations, and nothing else.
CSS nesting has proven this assumption wrong in significant ways by allowing properties and other rules to be declared,
interleaved inside a rule. This includes inside @ rules, which previously could not contain property delcarations
directly.

This means during editing, we only want to replace the property declarations, not the full body of a rule, since the
rule may contain other rules. Luckily, canonically all property declarations occur before all nested rules, so we can
safely move nested rules below to make our lives a bit easier with no harm to the meaning of the style sheet.

This fix adds instrumentation to the CSS parser so we can be informed of the new "implicit" nested rule that contains
properties inside of non-style rules. It also overhauls how rule body text is edited, much like we had to last year for
rule header text.

* LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt:
- Account for new property of CSSRule.

* LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-expected.txt:
* LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.html:
* LayoutTests/inspector/css/modify-css-property-expected.txt:
* LayoutTests/inspector/css/modify-css-property.html:
* LayoutTests/inspector/css/resources/modify-css-property.css:
- Add test cases for implicitly nested rules and their siblings, children, and parents.

* Source/JavaScriptCore/inspector/protocol/CSS.json:
- Mark implicitly nested rules so that the frontend can prevent the editing of their selector.

* Source/WebCore/css/CSSPropertySourceData.h:
(WebCore::CSSRuleSourceData::CSSRuleSourceData):
- The container rule types can now contain properties, so we always need to have the buffer for that information ready,
since we won't be informed by the parser that an implicit nested context was created until after we have observed the
properties themselves.

* Source/WebCore/css/parser/CSSParserImpl.cpp:
(WebCore::CSSParserImpl::consumeRegularRuleList):
(WebCore::CSSParserImpl::consumeDeclarationListOrStyleBlockHelper):
(WebCore::CSSParserImpl::consumeStyleBlock):
* Source/WebCore/css/parser/CSSParserImpl.h:
- Don't send duplicate bodyStart/bodyEnd messages to the observer.
- Notify the observer when the engine has created an implict nested rule inside a body.

* Source/WebCore/css/parser/CSSParserObserver.h:

* Source/WebCore/inspector/InspectorStyleSheet.cpp:
(WebCore::atRuleIdentifierForType):
(WebCore::isValidRuleHeaderText):
- Pull the mapping of types to their keyword text for reuse in setting new style text.

(WebCore::StyleSheetHandler::endRuleBody):
- In order to maintain parity with CSSOM's representation of styles, we need to create an implictly nested rule to
match against the CSSOM's implicitly nested rule. This also allows us to inform the frontend that said CSSOM rule was
implicitly nested, since the OM itself doesn't carry this information.

(WebCore::StyleSheetHandler::markRuleBodyContainsImplicitlyNestedProperties):
- Observe to mark the style rule data as containing implicitly nested properties, which will then trigger us to take those properties and mvoe them to a special implicit style rule data object.

(WebCore::InspectorStyleSheet::buildObjectForRule):

(WebCore::isNotSpaceOrTab):
(WebCore::InspectorStyleSheet::setRuleStyleText):
- Overhaul the setting of style text.
- Undo/oldText is handled specially because we want to restore the sheet back to the non-canonical form after an edit.
- The frontend does not provide nested rules as part of its new text, so we must readd them ourselves, which we can do
from the original style sheet.
- Indentation is matched to the new property delcartion text provided by the frontend.

(WebCore::InspectorStyleSheetForInlineStyle::setRuleStyleText):
- Match the method signature for non-inline styles, and simplify the indirection previously present for setting a style
rule's/inline style's text.

(WebCore::InspectorStyle::setText): Deleted.
(WebCore::InspectorStyleSheet::setStyleText): Deleted.
(WebCore::InspectorStyleSheetForInlineStyle::setStyleText): Deleted.
* Source/WebCore/inspector/InspectorStyleSheet.h:

* Source/WebCore/inspector/agents/InspectorCSSAgent.cpp:
- Adopt new method to set the body text of a rule.

* Source/WebInspectorUI/UserInterface/Models/CSSRule.js:
(WI.CSSRule):
(WI.CSSRule.prototype.get isImplicitlyNested):
* Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.get selectorEditable):
* Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js:
(WI.DOMNodeStyles.prototype._parseRulePayload):
- Mark the selector of implicitly nested rules as non-editable.

Canonical link: https://commits.webkit.org/261329@main