Bug 240805 – Web Inspector: Computed Panel: Move ungrouped CSS variables to dedicated DetailsSection

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Razvan Caliman]

A follow-up from this comment https://github.com/WebKit/WebKit/pull/782#pullrequestreview-978824063 

> As an aside, it is unfortunate in hindsight that the variables section element can either directly contain variables for ungrouped mode, or contain sections. I wonder if there is a better way to handle this where we never have to even add the variables section to the map and instead have a single "section" within it (without a header) that behaves just like the grouped sections, but for ungrouped mode.

The top-level Variables details section contains either:
- the list of ungrouped variables
- nested detail sections for each group of variables by type

When toggling between grouping modes, we remove the host details sections for variable groups, but we need to take care not to remove the top-level Variables details section. This isn't ideal. All variable lists, ungrouped or grouped, need their own independent host details section that can be safely removed without impacting others.

A details section has a header with text and a button to toggle collapsing the section contents. Ungrouped variables don't need this. The top-level Variables details section serves this role (the reason why the code was written with it doing double duty).

We can change the implementation of `WI.DetailsSection` to not render a header if a title is not provided. This enables us to nest details sections without showing extraneous headers. This relieves `WI.ComputedStyleDetailsPanel.layout()` of the duty to avoid removing the top-level Variables details section.

[Radar WebKit Bug Importer]

<rdar://problem/93761417>

[Razvan Caliman]

Pull request: https://github.com/WebKit/WebKit/pull/920

[EWS]

Committed r294800 (250956@main): <https://commits.webkit.org/250956@main>

Reviewed commits have been landed. Closing PR #920 and removing active labels.