[webkit-changes] [WebKit/WebKit] 96c03e: Web Inspector: Styles Panel: Adding a new CSS rule...

[Razvan Caliman - Apple]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 96c03ed0c66bcdd31e22b6e6d81ebaebbd22e47d
      https://github.com/WebKit/WebKit/commit/96c03ed0c66bcdd31e22b6e6d81ebaebbd22e47d
  Author: Razvan Caliman <rcaliman at apple.com>
  Date:   2023-03-20 (Mon, 20 Mar 2023)

  Changed paths:
    M Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
    M Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js

  Log Message:
  -----------
  Web Inspector: Styles Panel: Adding a new CSS rule doesn't work on first attempt
https://bugs.webkit.org/show_bug.cgi?id=253956

Reviewed by Patrick Angle.

To add a new CSS rule, an inspector stylesheet is first created.
This operation triggers a `DOMNodeStyles.refresh()`.

The operation to add the new rule to this stylesheet also triggers a
refresh. But if the promise for the first refresh is still pending,
the second call is ignored. This means that the Styles panel ends up
not showing any matching styles from the initially empty stylehseet.

A subsequent call to add a new rule bypasses the need to create a new
stylesheet. The `DOMNodeStyles.refresh()` it trigges brings the Styles
panel in sync with the latest contents of the inspector-generated stylehseet.
That's why two rules show up on the first successful attempt.

The logic to mark the newly created rule's selector as editable is too lenient:
it marks all CSS rules with a selector identical to the one of the newly created rule.
This patch makes a stricter check by identifying the newly created rule by its `CSSStyle.styleId`.

* Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js:
(WI.DOMNodeStyles.prototype.addRule.completed):
(WI.DOMNodeStyles.prototype.addRule.addedRule):
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationSectionAddNewRule):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype._addNewRule):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype._addedNewRuleCallback):

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