[webkit-changes] [WebKit/WebKit] 227d5b: Web Inspector: Glitches when trying to edit a styl...

[Qianlang Chen]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 227d5b5816c0493843f5ec63f3aaa869c631e2b8
      https://github.com/WebKit/WebKit/commit/227d5b5816c0493843f5ec63f3aaa869c631e2b8
  Author: Qianlang Chen <qianlangchen at apple.com>
  Date:   2024-09-19 (Thu, 19 Sep 2024)

  Changed paths:
    A LayoutTests/inspector/css/setStyleText-expected.txt
    A LayoutTests/inspector/css/setStyleText.html
    M Source/WebCore/inspector/InspectorStyleSheet.cpp
    M Source/WebCore/inspector/InspectorStyleSheet.h
    M Source/WebCore/inspector/agents/InspectorCSSAgent.cpp

  Log Message:
  -----------
  Web Inspector: Glitches when trying to edit a style from a style sheet that has an @import statement
rdar://125185110
https://bugs.webkit.org/show_bug.cgi?id=271403

Reviewed by BJ Burg.

This commit optimizes the handling of CSS.setStyleText by using CSSOM
to update the style declaration text directly, to avoid re-parsing the
entire style sheet.

The observed glitch is a combination of two bugs, both due to having to
re-parse for any style edits:

   1. In the backend, when a style sheet with @import statements is
      re-parsed, it (not just the @import-ed ones) may get removed and
      re-added, causing the CSS agent to mistakenly send
      StyleSheetRemoved and StyleSheetAdded events for that parent
      style sheet. (https://webkit.org/b/279773)

   2. Due to @import-ed style sheets receiving new IDs as a result of
      re-parsing, the frontend thinks any edit to the parent style sheet
      is a "significant change." (Source: https://github.com/WebKit/WebKit/blob/24b5b087d18d4baa487dd73905c46589fa353da3/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js#L267)
      Handling a significant change triggers a re-render of the entire
      styles panel.

Adjacent to this glitch, there's another notable consequence involving
re-parsing:

   3. Re-parsing an @import-ed style sheet uses its original text from
      its source, meaning editing the parent style sheet will suddenly
      revert all edits made to any @import-ed style sheets.

By avoiding re-parsing for style declaration edits, we fix the immediate
glitch in the simplest fashion and move towards a more efficient
approach to handle editing. This commit is a step in the direction of
eliminating re-parsing for all style editing functions in the inspector:
   1. Editing the style declaration text is addressed by this PR.
   2. Editing the header of a style rule is already done through CSSOM: https://github.com/WebKit/WebKit/blob/6277bccb19de5ebd68797f369f8ff24fc4417f2e/Source/WebCore/inspector/InspectorStyleSheet.cpp#L1116-L1119.
   3. Editing the header of a non-style rule isn't directly supported by
      CSSOM but can be achieved equivalently by removing and
      re-inserting the updated rule using CSSOM.
   4. Adding and 5. removing rules can be optimized to use CSSOM in a
      similar way to this patch.

(Functions 3, 4, and 5 may still malfunction with @import rules after
this patch due to https://webkit.org/b/279773 as they're still done by
re-parsing.)

* Source/WebCore/inspector/InspectorStyleSheet.h:
* Source/WebCore/inspector/InspectorStyleSheet.cpp:
(WebCore::computeCanonicalRuleText):
(WebCore::InspectorStyleSheet::setRuleStyleText):
   - Still canonicalize the rule body text to enable showing it in the
     Sources tab, but don't re-parse the whole style sheet just to apply
     the styles. Use CSSOM's support for that.

(WebCore::InspectorStyleSheetForInlineStyle::setRuleStyleText):
   - Adapt to the signature change of setRuleStyleText.

(WebCore::InspectorStyleSheet::styleSheetTextWithChangedStyle): Deleted.
   - Unused.

* Source/WebCore/inspector/agents/InspectorCSSAgent.cpp:
   - Add field to record the old rule body text to enable faithful
     undoing.

* LayoutTests/inspector/css/setStyleText-expected.txt: Added.
* LayoutTests/inspector/css/setStyleText.html: Added.

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



To unsubscribe from these emails, change your notification settings at https://github.com/WebKit/WebKit/settings/notifications