Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 05e8b33d1f25ec040b3b5b62471d7a03bf775754
https://github.com/WebKit/WebKit/commit/05e8b33d1f25ec040b3b5b62471d7a03bf775754
Author: Razvan Caliman <[email protected]>
Date: 2026-06-03 (Wed, 03 Jun 2026)
Changed paths:
M Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
M
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
M
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
M
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
Log Message:
-----------
Web Inspector: Properties added to the Style Attribute of an element
sometimes disappear mid-typing
https://bugs.webkit.org/show_bug.cgi?id=315663
rdar://178053421
Reviewed by Devin Rousso.
When typing a CSS property in the inline style of an element that causes
another CSS rule
in the stylesheet to
match, for example `:where([style*=property])`, the other rule is added to
`WI.DOMNodeStyles` which triggers a styles refresh event that's considered a
`significantChange`.
This triggers re-layout of the Styles panel which removes all nested subviews,
including the `WI.SpreadsheetCSSStyleDeclarationEditor` that the user is typing
into.
It is an edge-case with the inline style attribute because its value can be
used in selectors.
Regular CSS style rules do not cause this.
This patch addresses the issue by preventing the Styles panel re-layout while a
style is locked (i.e. during editing),
running it after it's unlocked if a pending
`WI.SpreadsheetRulesStyleDetailsPanel._shouldRefreshSubviews` exists.
A similar behavior exits for editing the selector of a CSS rule to something
that no longer matches
to prevent the `significantChange` style refresh from causing re-layout and
removing it immediately.
*
Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.set locked):
*
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set style):
(WI.SpreadsheetCSSStyleDeclarationEditor):
*
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorStyleLockedChanged):
*
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationSectionStyleLockedChanged):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
Canonical link:
https://flagged.apple.com:443/proxy?t2=DW0G2E6yc5&o=aHR0cHM6Ly9jb21taXRzLndlYmtpdC5vcmcvMzE0NDY3QG1haW4=&emid=dfcf4c30-c6f4-41b3-968b-57c87c954fec&c=11
To unsubscribe from these emails, change your notification settings
at https://github.com/WebKit/WebKit/settings/notifications
