Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Web Inspector: Elements Tab: Computed: variables section looks broken…
… when the selected element has no CSS variables https://bugs.webkit.org/show_bug.cgi?id=242704 Reviewed by Devin Rousso. The original implementation made some wrong assumptions about the layout lifecycle for CSS variable groups. This patch introduces a refactoring to correct that and fix a bunch issues at once. Context: The properties section of the Computed panel is updated in response to the event `WI.CSSStyleDeclaration.Event.PropertiesChanged` fired by `WI.DOMNodeStyles.computedStyle` which is a `WI.CSSDeclaration` instance. This allows it to dynamically reflect changes to any styles of the selected node. There's an optimization in `WI.DOMNodeStyles.refresh() -> fetchedComputedStyle()` where a change to styles of existing CSS rules isn't considered a `significantChange`. This prevents a lot of needless re-layout in components which observe style refreshes. The Properties section of the Computed panel listens for the event on `WI.DOMNodeStyles.computedStyle` to address this optimization. When grouping CSS variables, the groups were distinct `WI.CSSDeclaration` instances for clarity. But they were cached and never updated in response to style changes on a node. Because of this, the sections for variable groups in the Computed panel did not reflect any changes: adding/removing variables, changing their type, etc. The changes: 1) The logic for grouping variables by type is moved from `WI.DOMNodeStyles` to `WI.CSSDeclaration`. This way, all sections in the Computed panel rely on a single data source: `WI.DOMNodeStyles.computedStyle`. It's the view's job to pick the subset of properties to render. 2) A new getter is added, `WI.CSSDeclaration.variablesForType`, to do this extra work for all variable groups when consumers ask for them. There can be a growing number of groups, so having separate iterations on every style change over a potentially long list of properties is wasteful. Plus, anything that doesn't match a type checker needs to go in the "Other" group. 3) `WI.ComputedStyleSection` is modified to obtain a list of properties to render depending on the variables group type set on `WI.ComputedStyleSection.variablesGroupType`. This subset of properties is then used in `WI.ComputedStyleSection.layout()`. Introduced debouncing for layout in respose to `WI.DOMNodeStyles.Events.PropertiesChanged` because it is expensive; throwing away all elements for properties and rebuilding from scratch. 4) Filtering is implemented. Sections that have no matches are hidden. 5) The test that checks CSS variables grouping is renamed and updated. 6) Modify `WI.View` to call `WI.View.didSubtreeLayout()` on the immediate parent of the first dirty view that did layout on itself and all of its descendant views. This allows a parent view to react in response to layout under its subtree. This behavior is used to call `WI.ComputedStyleDetailsPanel.didSubtreeLayout()` where we can toggle the visibility of the "Variables" section when the nested sections for variable groups are empty. * LayoutTests/inspector/css/variablesForType-expected.txt: Renamed from LayoutTests/inspector/css/variableStylesByType-expected.txt. * LayoutTests/inspector/css/variablesForType.html: Renamed from LayoutTests/inspector/css/variableStylesByType.html. * LayoutTests/inspector/view/asynchronous-layout-expected.txt: * LayoutTests/inspector/view/asynchronous-layout.html: * LayoutTests/inspector/view/resources/test-view.js: (TestPage.registerInitializer.WI.TestView): (TestPage.registerInitializer.WI.TestView.prototype.get didLayoutSubtreeCount): (TestPage.registerInitializer.WI.TestView.prototype.didLayoutSubtree): (TestPage.registerInitializer): * LayoutTests/inspector/view/synchronous-layout-expected.txt: * LayoutTests/inspector/view/synchronous-layout.html: * Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js: (WI.CSSStyleDeclaration): (WI.CSSStyleDeclaration.prototype.variablesForType): * Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js: (WI.DOMNodeStyles): (WI.DOMNodeStyles.prototype.refresh.fetchedComputedStyle): (WI.DOMNodeStyles.prototype.get variableStylesByType): Deleted. * Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js: (WI.ComputedStyleDetailsPanel.displayNameForVariablesGroupType): (WI.ComputedStyleDetailsPanel.prototype.refresh): (WI.ComputedStyleDetailsPanel.prototype.layout): (WI.ComputedStyleDetailsPanel.prototype.didLayoutSubtree): (WI.ComputedStyleDetailsPanel.prototype._createVariablesStyleSection): (WI.ComputedStyleDetailsPanel.prototype._removeVariablesStyleSection): (WI.ComputedStyleDetailsPanel.prototype._renderVariablesStyleSectionGroup): Deleted. * Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js: (WI.ComputedStyleSection.prototype.get variablesGroupType): (WI.ComputedStyleSection.prototype.get isEmpty): (WI.ComputedStyleSection.prototype.get properties): (WI.ComputedStyleSection.prototype.layout): (WI.ComputedStyleSection.prototype.detached): (WI.ComputedStyleSection.prototype.applyFilter): (WI.ComputedStyleSection.prototype._handlePropertiesChanged): (WI.ComputedStyleSection): * Source/WebInspectorUI/UserInterface/Views/View.js: (WI.View.prototype.updateLayout): (WI.View.prototype._layoutSubtree): (WI.View._visitViewTreeForLayout): (WI.View): Canonical link: https://commits.webkit.org/253562@main
- Loading branch information
Showing 12 changed files with 307 additions and 163 deletions.